다단으로 편집하기
column-width 속성 : 단의 너비 고정하고 다단 구성하기
1. 단의 개수를 고정해놓고 화면을 분할 하는 방법
2. 단의 너비를 고정해놓고 화면을 분할 하는 방법
▪️ 너비를 고정하는 방법은 화면이 커지면 단의 개수가 많아지고 화면이 좁아지면 단의 개수가 줄어든다.
column-count 속성 : 단의 개수 고정하고 다단 구성하기
▪️ 브라우저 창의 너비와 상관없이 단의 개수를 항상 일정하게 유지하기 위해 사용한다.
column-gap 속성 : 단과 단 사이 여백 지정하기
▪️ 단과 단 사이에 구분선을 넣으면 구분선도 여백에 포함한다.
column-rule 속성 : 구분선의 색상, 스타일, 너비 지정하기
▪️ column-rule-style
▪️ column-rule-width
▪️ column-rule: <너비> <스타일> <색상>
break-after 속성 : 다단 위치 지정하기
| 속성 | 단을 나눌 위치 | 단 나눔 | 단 나누지 않음 |
|---|---|---|---|
| break-before | 특정 요소 앞 | ||
| break-after | 특정 요소 뒤 | column | avoid-column |
| break-inside | 특종 요소 안 |
column-span 속성 : 여러 단을 하나로 합치기
▪️ 단의 일부만 합칠 수는 없다.
표스타일
caption-side 속성 : 표 제목 위치 정하기
▪️ top : 캡션을 표의 윗부분에 표시 (기본 값)
▪️ bottom : 캡션을 표의 아랫부분에 표시
border 속성 : 표 테두리 스타일 결정하기
border-collapse 속성 : 테두리 통합, 분리하기
▪️ collapse : 테두리를 하나로 합쳐 표시
▪️ separate : 테두리를 따로 표시 (기본 값)
border-spacing 속성 : 인접한 셀 테두리 사이 거리 지정하기
empty-cells 속성 : 빈 셀의 표시 여부 지정하기
▪️ show : 빈 셀 주위에 테두리 표시 (기본 값)
▪️ hide : 빈 셀에 테두리를 그리지 않고 비움
width, height 속성 : 표의 너비와 높이 지정하기
▪️ td, th 태그는 셀을 만들 뿐 형태를 꾸미지는 못한다.
▪️ 사용할 수 있는 값은 px 나 부모요소를 기준으로 한 % 이다.
table-layout 속성 : 콘텐츠에 맞게 셀 너비 지정하기
text-align 속성 : 셀 안에서 수평 정렬하기
vertical-align 속성 : 셀 안에서 수직 정렬하기
▪️ inline 이나 inline-block 으로 배치한 요소의 세로 정렬 방법으로 지정한다.
| 속성 값 | 설명 |
|---|---|
| baseline | 인라인 요소의 기준선을 부모 요소의 기준선에 맞춤 |
| sub | 인라인 요소의 기준선을 부모 요소의 아래 첨자 위치 맞춤 |
| super | 인라인 요소의 기준선을 부모 요소의 위 첨자 위치에 맞춤 |
| top | 인라인 요소의 기준선을 부모 요소의 위부분에 맞춤 |
| middle | 인라인 요소의 중앙 부분을 부모 요소의기준선에서 x-높이의 반만큼 올려서 맞춤 |
| bottom | 인라인 요소의 아랫부분 부모 요소의 아랫부분에 맞춤 |
| text-top | 인라인 요소의 윗부분을 부모 요소 글꼴의 윗부분에 맞춤 |
| text-bottom | 인라인 요소의 아랫부분을 부모 요소글꼴의 아랫부분에 맞춤 |
| <길이 값> | 기준선을 0px로 생각하고 길이 값이 양수면 기준선 위로,음수면 기준선 아래로 지정한 크기만큼 옮김 |
| <백분율 값> | 기준선을 0%로 생각하고 line-height의 몇 %인지에 따라양수면 위로, 음수면 아래로 옮김 |
▪️ 표의 셀에서 사용할 경우
| 속성 값 | 설명 |
|---|---|
| baseline | 셀의 기준선에 내용의 기준선을 맞춤 |
| top | 패딩의 위쪽 가장자리에 내용의 윗부분을 맞춤 |
| middle | 패딩 박스의 중앙에 내용을 맞춤 |
| bottom | 패딩의 아래쪽 가장자리에 내용의 아랫부분을 맞춤 |
📍CSS 선택자
연결 선택자
선택자와 선택자를 연결해 적용 대상을 한정하는 것을 말한다. (combination selector)
✏️ 하위 선택자
지정한 모든 하위 요소에 스타일 적용
▪️ 부모 요소에 포함된 하위 요소 모두에 스타일이 적용되는 것으로 '자손 손택자'라고도 불린다.
▪️ 상위 요소와 하위 요소를 공백으로 구분하고 대괄호 안에 속성을 지정한다.
section p { color: blue; }
/*section 요소 안에 있는 모든 p 요소의 글자 색을 파랑으로 지정*/✏️ 자식 선택자
자식 요소에만 스타일 적용
▪️ 자식 요소에만 스타일을 적용하는 선택자로 두 요소 사이에 '>'를 표시하여 부모 요소와 자식 요소를 구분한다.
▪️ 하위 선택자는 손자 요소까지 적용되지만, 자식 선택자는 바로 아래 요소(자식 요소)에만 스타일이 적용된다.
section > p { color: blue; }
/*section 바로 밑에 있는 p 요소의 글자 색을 파랑으로 지정*/
✏️ 인접 형제 선택자
가장 가까운 형제 요소에 스타일 적용
▪️ 같은 부모 요소를 가지는 요소들을 형제 관계라고 부르고 형제 관계인 요소들에서 먼저 나오는 요소를 '형 요소', 나중에 오는 요소를 '동생 요소'라고 한다.
▪️ 문서 구조상 같은 부모를 가진 형제 요소 중 첫 번째 동생 요소에만 스타일이 적용된다.
▪️ 선택자 정의 방식은 '요소1 + 요소2'로 표시한다.
h1 + p { text-decoration: underline; }
/*h1 다음에 오는 p요소 중 첫번째 p요소에만 밑줄표시*/✏️ 형제 선택자
형제 요소에 스타일 적용
▪️ 인접 형제 선택자와 달리 모든 형제 요소에 스타일을 적용한다.
▪️ 선택 정의 방식은 '요소1 ~ 요소2'로 표시한다.
h1 ~ p { text-decoration: underline; }
/*h1 다음에 오는 모든 형제 p요소에 밑줄표시*/
속성 선택자
태그 안에서 사용하는 속성들의 값에 따라 스타일을 지정한다.
속성 값 조건에 따라 다양한 스타일을 지정할 수 있다.
[속성] 선택자
지정한 속성에 스타일 적용
▪️ 지정한 속성을 가진 요소를 찾아 스타일을 적용한다.
a [href] { background : yellow; }
/* a태그 중 href속성이 있는 요소를 찾아 배경색 지정 */[속성 = 값] 선택자
특정 값을 갖는 속성에 스타일 적용
▪️ 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용한다.
a[target="_blank"] { padding : 30px }
/*target속성 값이 _blank인 링크를 찾아 패딩을 30px줌*/[속성 ~= 값] 선택자
여러 값 중 특정 값이 포함된 속성에 스타일 적용
▪️ [속성=값] 선택자는 속성과 값이 정확히 일치하는 요소를 찾지만, [속성~=값] 선택자는 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택한다.
[속성 |= 값] 선택자
특정 값이 포함된 속성에 스타일 적용
▪️ 값은 한 단어로 일치해야한다.
▪️ [속성~=값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않지만, [속성|=값]은 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용한다.
[속성 ^= 값] 선택자
특정 값으로 시작하는 속성에 스타일 적용
[속성 $= 값] 선택자
특정 값으로 끝나는 속성에 스타일 적용
▪️ href 에 링크된 파일의 확장자 아이콘을 표시할 때 유용하다.
[속성 *= 값] 선택자
값의 일부가 일치하는 속성에 스타일 적용
▪️ 어느 위치에든 해당 값이 포함되어 있으면 스타일을 적용한다.
📍가상 클래스와 가상 요소
선택자들로도 지정하기 어려운 대상을 지정할 때 클래스 이름 앞에 콜론(:)을 붙여 표시하는 가상 클래스와 콜론 두개(::)를 붙여 표시하는 가상 요소가 있다.
가상 클래스
✏️ 사용자 동작에 반응하는 가상 클래스
:link 가상 클래스 선택자
▪️ 방문 하지 않은 링크 스타일 적용
:visited 가상 클래스 선택자
▪️ 방문한 링크에 스타일 적용
:hover 가상 클래스 선택자
▪️ 웹 요소에 마우스 커서를 올려놓을 때의 스타일 적용
:active 가상 클래스 선택자
▪️ 웹 요소를 활성화 했을 때의 스타일 적용
:focus 가상 클래스 선택자
▪️ 웹 요소에 초점에 맞추어졌을 때 스타일 적용
⚠️ 모두 정의하면 :link > :visited > :hover > :active 순서대로 정의해야한다.
✏️ UI 요소 상태에 따른 가상 클래스
UI 요소 상태에 따른 가상 클래스는 웹 사이트나 앱 화면을 디자인할 때 웹 요소의 상태에 따라 스타일을 지정하기 위해 사용한다.
:enabled / :disabled 가상 클래스 선택자
▪️ 요소를 사용할 수 있을 때와 없을 때의 스타일 지정
ex) 입력 창과 읽기 전용의 차이
:checked 가상 클래스 선택자
▪️ 라디오 박스나 체크 박스에서 해당 항목을 선택했을 때 스타일 지정
✏️ 구조 가상 클래스
웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아 스타일을 지정할 때 사용한다.
:root 가상 클래스 선택자
문서 전체에 적용
▪️ HTML문서에서는 루트 요소가 HTML이므로 HTML요소에 스타일이 적용된다.
:nth-child(n) / nth-last-child(n) 가상 클래스 선택자
자식 요소의 위치에 따라 스타일 적용
▪️ nth-child(n)는 앞에서 n번째인 자식 요소에 스타일을 적용하고, nth-last-child(n)는 끝에서부터 n번째인 자식 요소에 스타일을 적용한다.
▪️ 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 갖고 있어야만 한다.
▪️ 문서 구조로 표시했을 때 모두 같은 레벨의 요소여야 한다.
:nth-of-type(n) / nth-last-of-type(n) 가상 클래스 선택자
특정 태그 위치에 스타일 적용
▪️ nth-of-type(n)는 앞에서부터 세어 n번째 요소이고, nth-last-of-type(n)는 끝에서부터 n번째 요소에 스타일을 적용한다.
:first-child / :last-child 가상 클래스 선택자
첫 번째, 마지막 요소에 스타일 적용
:first-of-type / last-of-type 가상 클래스 선택자
형제 관계 요소의 위치에 따라 스타일 적용
:only-child / :only-of-type 가상 클래스 선택자
하나뿐인 자식 요소에 스타일 적용
그 외 가상 클래스
:target 가상 클래스 선택자
앵커 목적지에 스타일 적용
▪️ 페이지 이동할 때 링크(link)를 이용하고 같은 문서 안에서 다른 위치로 이동할 땐 앵커(anchor)를 이용한다.
▪️ 이때 :target선택자를 이용하면 앵커로 연결된 부분(앵커의 목적지가 되는 부분)의 스타일을 지정할 수 있다.
:not 가상 클래스 선택자
특정 요소가 아닐 때 스타일 적용
▪️ "괄호 안에 있는 요소를 제외한"
p:not(#ex) { color: blue; }
/*#ex가 아닌 모든 p요소의 글자 색 지정*/가상 요소
::first-line 요소 / ::first-letter 요소
첫 번째 줄, 첫 번째 글자에 스타일 적용
▪️ first-letter 요소는 해당 요소의 첫 번째 글자를 가리키는데 첫 번째 글자는 반드시 첫 번째 줄에 있어야 한다.
::before 요소 / ::after 요소
내용 앞뒤에 콘텐츠 추가
▪️ 특정 요소의 내용 앞이나 뒤에 지정한 내용을 넣을 수 있다.요소 앞뒤에 텍스트나 이미지 등 추가가 가능하다.
▪️ HTML 태그를 사용하지 않고 가상 요소로 스타일을 적용할 수 있다.
