CSS의 기본 개념과 사용법
이번 CSS의 기본 개념과 실습을 통하여 CSS에 대해 알아 보기 전, 먼저 이전에 포스팅에서 간단하게 다루었던 테이블에 대해 몇개의 실습을 먼저 진행해 보려 합니다.
실습 1
이 전 포스팅에서 테이블 <table>태그와 <tr>,<th>,<td> 등을 배웠는데요 이를 가지고 하나의 실습을 진행하려 합니다.
위 사진과 같은 모양의 테이블을 만들기 위해 서는 우선 해당 테이블이 몇개의 "행"을 가지고 있는지 파악하는게 우선입니다.
위 사진을 보면 총 3개의 "행"을 가지고 있는 것을 볼 수 있습니다.
따라서 <tr>이 총 3번 사용하여 만들 수 있습니다.
위 사진을 보면 <tr>이 3번 사용된 것을 확인할 수 있습니다. 또한 이전 포스팅에서 배운 colspan과 rowspan을 사용하여 하나의 <td>가 차지하는 칸을 3칸, 2칸으로 늘린 것을 확인할 수 있습니다.
1번이 colspan(행)으로 3칸을 차지하고 2번이 rowpan(열)로 2칸을 차지, 3은 1이 사용한 칸을 제외한 rowspan(열) 2칸을 차지하면서, center가 2번과 3번 사이에 있어야 하기 때문에 colspan(행) 2칸을, 4번은 3번이 차지한 첫번째 칸을 제외한 3개의 칸을 차지 하기 때문에 colspan(행) 3을 주었습니다.
저는 총 3개의 행을 가지고 4개의 열을 가진 테이블을 기준으로 잡고 프로그램을 짰습니다.
실습2
카페 메뉴 테이블을 만들기 조건은 아래와 같다.
- <th> 4개의 구분,음료,가격,이미지를 가진다.
- 커피류 2개와 주스류 2개의 구분을 가지는데 통합해서 사용한다.
- 주스류의 가격은 같은 가격으로 통합해서 나타낸다.
- 음료를 누르면 해당 주류의 상세정보 사이트로 이동한다.
구분, 음료, 가격, 이미지는 구분 제목이기 때문에 <th>를 사용해서 나타냈다.
첫 번째 <tr>은 총 4개의 <td>를 가지고 커피류에 rowspan(열) = 2로 주어 다음에 나올 메뉴와 통합시킨다. 이미지를 삽입 하기 위해서 <img>태그를 사용하였고 src는 스타벅스 공식 홈페이지에서 가져왔다. alt에는 해당 이미지가 무엇인지 설명을 작성하고, 이미지를 클릭하면 해당 사이트로 이동 시키기 위해 하이버링크 태그인 <a>태그를 사용하고 href에 사이트 주소를 입력하면 이미지를 클릭 시 해당 사이트로 이동 된다.
두 번째 <tr>태그는 3개의 <td>만 가지고 있다. 왜냐하면 첫 번째 <tr>에 <td>에서 rowspan을 사용하여 2칸을 차지하기 때문에 두 번째 <tr>에서는 3개의 <td>만을 가져야 하기 때문이다.
세 번째 <tr>태그에 <td>주수류는 아래 메뉴와 통일하기 위해 rowspan을 2로 주고 가격도 같기 때문에 가격 또한 rowspan을 2로 주어 통합 시킨다. 이렇게 되면 네 번째 <tr>은 2개의 <td>만을 가지게 된다.
CSS
CSS는 웹 페이지를 디자인하기 위해 사용하는 언어로 HTML로 뼈대를 잡아 놓고 그 뼈대를 꾸며주는 역할을 한다.
CSS에는 3가지의 참조방식이 존재한다.
- 인라인 방식 : 각 태그마다 전부 스타일을 직접 적어줘야한다. 때문에 인라인 방식은 재사용이 불가능하고 반복 작업이 필요하다는 단점을 가지고 있다.
- 내장 방식 : 내장 방식은 HTML의 <head>태그 내부에 사용할 Style을 <style>태그로 미리 선언하여 사용할 수 있다. 태그에 같은 스타일이 있다면 모두 적용이 가능하다.
- 링크 방식 : 링크 방식은 내장방식과 비슷하다. 링크 방식은 모든 Style을 하나의 CSS파일에 넣고, 필요한 HTML 파일에서 해당 파일을 링크해서 사용하는 방식으로 재사용이 가능하고 유지보수가 간편하다.
위 3가지의 참조 방식은 우선 순위를 가질 수 있다.
- 인라인 방식 > 내장방식 ? 링크방식
인라인 방식이 가장 최상위 우선순위를 가진다. 왜냐하면 컴파일 과정에서 내부 코드를 먼저 사용하고 이후 내장방식, 링크방식을 참조하기 때문에 인라인 방식이 가장 최우선 순위를 가진다.
내장 방식과 링크 방식은 같은 우선 순위를 가지고 있기 때문에 컴파일 과정에서 가장 늦게 읽히는 것(가장 늦게 쓰여진 것)이 우선으로 적용된다.
CSS 선택자
CSS 작성법
- 선택자(Selector) : 선택자는 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단이다.
- 속성(Property) : 선택자{}내에 "속성" 을 나타내는 것으로 표준 스펙으로 이미 지정되어 있는 것을 사용한다, 사용자가 임의로 정의할 수 없다. 또한 여러개의 프로퍼티(속성)을 가지는 경우 세미콜론 ";"으로 구분한다.
- 값(Value) : 값은 해당 속성에 사용할 수 있는 값을 키워드나 크기 단위 또는 색상 단위 등의 특정 단위로 지정할 수 있다.
※ CSS에선 총 5개의 선택자가 있다.
기본, 복합, 가상 클래스, 가상요소, 속성 총 5개가 있다.
하지만 이번 포스팅에서는 기본과 복합 선택자 까지만 다루도록 하겠다.
이 전 내부 방식에서 코드를 작성하면 하나의 태그에 값을 주면 모든 태그가 그 값을 가지는 경우가 발생한다. 이를 방지하기 위해서 우리는 선택자를 사용할 수 있다.
기본 선택자
기본 선택자는 총 4개의 종류로 나뉜다.
- 전체 선택자
- 태그 선택자
- Class 선택자
- ID 선택자
전체 선택자 - * { } , "*" 을 사용하여 모든 요소를 선택하는 선택자로 해당 선택자에 값을 주면 모든 요소에 해당 값이 적용된다.
태그 선택지 - "태그 이름" { } , 태그 이름을 지정해주면 해당 태그를 가진 모든 요소들에게 값이 적용된다.
Class 선택자 - ".Class" { } , ".클래스이름"으로 사용하며 Class는 고유의 이름을 부여하는 행위로 해당 클래스를 부여 받은 태그들에게만 값이 적용되는 선택자
ID 선택자 - "#ID이름" { } , ID선택자는 "#"을 사용하여 아이디를 지정하고, ID는 하나만 존재해야하는 고유한 값으로 한 태그에 사용하면 다른 태그에는 사용하지 못한다. 이를 통해 특정 ID를 가진 요소에만 값을 부여하는데 사용되는 선택자이다.
아래 실습을 통해서 기본 선택자들의 사용법을 익힐 수 있다.
복합 선택자
복합 선택자는 특수한 요소를 호출하고 싶을 때, 기본 선택자만으로는 선택이 불가능할 경우 사용,
5 종류의 선택자로 나타낸다.
- 일치 선택자
- 자식 선택자
- 후손 선택자
- 인접 형제 선택자
- 일반 형제 선택자
일치 선택자 - "태그"."클래스" { }, 와 같이 두개의 조건을 .을 통해서 ABC.XYZ형식으로 작성하여 ABC에 XYZ를 가진 곳의 요소를 선택할 수 있다.
자식 선택자 - "태그" > ".클래스" { }, 와 같이 ABC > XYZ 형식으로 나타낼 수 있는데, ABC의 자식 요소 중 XYZ에 해당하는 요소를 특정할 때 사용한다.
후손 선택자 - "태그" ".클래스" { }, 와 같이 ABC XYZ 형식으로 해당 ABC에 하위 요소인 XYZ를 특정하는데 자식 선택자와 다르게 ABC에 해당하는 자식 뿐만 아니라 자식의 자식 즉 후손 까지도 같이 선택한다는 차이점이 있다.
인접 형제 선택자 - "클래스" + "태그" { }, 와 같이 ABC + XYZ 형태로 ABC를 가지고 있는 요소중 다음 형제 요소 중 XYZ요소를 가지고 있는 형제 요소 하나를 선택하는 선택자
일반 형제 선택자 - "클레스" ~ "태그" { }, 와 같이 ABC ~ XYZ 형태로 ABC를 가지고 있는 요소에 다음 형제 요소 XYZ를 가지고 있는 모든 형제들을 선택하는 선택자
여기서 "클래스" 혹은 "태그"라고 적었지만 굳이 클래스, 태그 뿐만 아니라 id와 같이 특정할 수 있는 요소를 입력해서 사용가능
다음 실습을 통해서 복합 선택자를 실습해 볼 수 있다.
이 후 추가적인 선택자는 다음 포스팅에서 계속해서 작성하겠습니다. :)
'웹 개발' 카테고리의 다른 글
| [포스코x코딩온] CSS Background 요소와 Flex (1) | 2023.10.30 |
|---|---|
| [포스코X코딩온] CSS 다양한 속성 및 위치지정 방식 (1) | 2023.10.28 |
| [포스코X코딩온] CSS 선택자와 속성, inline-block (1) | 2023.10.27 |
| [포스코X코딩온] HTML 태그 사용법과 활용 (2) | 2023.10.25 |
| [포스코X코딩온] 웹개발자 풀스택 과정 OT (0) | 2023.10.23 |