1. CSS 선택자
HTML 태그를 선택할 때 사용하는 기능이다. 가상 선택자의 구분은 아래와 같이 한다.
•
: : 구조 가상 클래스 선택자 → 구조 선택자
•
:: : 문자 가상 요소 선택자 → 문자 선택자
1-1. 전체 선택자
선택자 | 설명 |
* | HTML 페이지 내부의 모든 태그를 선택 |
1-2. 태그 선택자
h1 {
color:red;
}
CSS
복사
1-3. 아이디, 클래스 선택자
#root {
color:red;
}
.root2 {
color:blue;
}
/* <div id="root">test</div> */
/* <div class="root2">test</div> */
CSS
복사
1-4. 기본 속성 선택자
선택자 형태 | 설명 |
선택자[속성] | 특정한 속성이 있는 태그를 선택 |
선택자[속셩=값][속성=값] | 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택 |
1-5. 문자열 속성 선택자
•
복잡한 CSS 프레임워크를 만들 때 사용이 된다. 잘 사용되지 않음.
선택자 형태 | 설명 |
선택자[속성~=값] | 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택 |
선택자[속셩|=값] | 속성 안의 값이 특정 값을 단어로 포함하는 태그를 선택 |
선택자[속셩^=값] | 속성 안의 값이 특정 값으로 시작하는 태그를 선택 |
선택자[속셩!=값] | 속성 안의 값이 특정 값으로 끝나는 태그를 선택 |
선택자[속셩*=값] | 속성 안의 값이 특정 값을 포함하는 태그를 선택 |
•
[속성~=”note”] vs [속성|=”note”]
◦
하이폰이 들어간 단어의 구분 방법이 다르다.
◦
다만 [속성|=”note”] 경우 note-로 시작하는 경우만 해당된다.
<!-- [속성~=”note”]인 경우 -->
<p class="note">Hello</p> <!-- 선택됨 ✅ -->
<p class="note-important">Hello</p> <!-- 선택되지 않음 ❌ -->
<!-- [속성|=”note”]인 경우 -->
<p class="note">Hello</p> <!-- 선택됨 ✅ -->
<p class="note-important">Hello</p> <!-- 선택됨 ✅ -->
<p class="important-note-">Hello</p> <!-- 선택되지 않음 ❌ -->
HTML
복사
1-6. 후손, 자손 선택자
선택자 형태 | 설명 |
선택자A 선택자B | 선택자A의 후손에 위치하는 선택자B를 선택 |
선택자A > 선택자B | 선택자A의 자손에 위치하는 선택자B를 선택 |
/* 후손 선택자 */
.root h1 { color:red; }
.root h1, h2 { color:red; }
.root h1, .root h2 { color:red; }
/* 자손 선택자 */
.test1 > .test2 { color:red; } /* .test1의 자손에 위치하는 .test2를 선택 */
CSS
복사
1-7. 동위(sibling) 선택자
선택자 형태 | 설명 |
선택자A + 선택자B | 선택자A 바로 뒤에 위치하는 선택자B를 선택 |
선택자A ~ 선택자B | 선택자A 뒤에 위치하는 모든 선택자B를 선택 |
1-8. 반응 선택자
선택자 형태 | 설명 |
:active | 사용자가 마우스로 클릭한 태그를 선택 |
:hover | 사용자가 마우스를 올린 태그를 선택 |
1-9. 상태 선택자
선택자 형태 | 설명 |
:checked | 체크 상태의 input 태그를 선택 |
:focus | 초점이 맞추어진 Input 태그를 선택 |
:enabled | 사용 가능한 input 태그를 선택 |
:disabled | 사용 불가능한 input 태그를 선택 |
1-10. 구조 선택자
CSS3부터 지원하는 선택자
특정한 위치에 있는 태그를 선택하는 선택자.
1-10-1. 일반 구조 선택자
선택자 형태 | 설명 |
:first-child | 형제 관계 중에서 첫 번째에 위치하는 태그를 선택 |
:last-child | 형제 관계 중에서 마지막에 위치하는 태그를 선택 |
:nth-child(수열) | 형제 관계 중에서 앞에서 수열 번째 태그 선택 |
:nth-last-child(수열) | 형제 관계 중에서 뒤에서 수열 번째 태그 선택 |
1-10-2. 형태 구조 선택자
선택자 형태 | 설명 |
:first-of-type | 형제 관계 중에서 첫 번째로 등장하는 특정 태그를 선택 |
:last-of-type | 형제 관계 중에서 마지막으로 등장하는 특정 태그를 선택 |
:nth-of-type(수열) | 형제 관계 중에서 수열 번째로 등장하는 특정 태그 선택 |
:nth-last-of-type(수열) | 형제 관계 중에서 뒤에서 수열 번째로 등장하는 특정 태그 선택 |
1-11. 문자 선택자
문자 선택자는 가상 요소 선택자(pseudo-Element Selector)로 :: 로 작성하는게 표준이다.
1-11-1. 시작 문자 선택자
선택자 형태 | 설명 |
::first-letter | 첫 번째 글자를 선택합니다. |
::last-line | 첫 번째 줄을 선택합니다. |
1-11-2. 전후 문자 선택자
•
전후 문자 선택자는 content 속성을 사용할 수 있다.
선택자 형태 | 설명 |
::after | 태그 뒤에 위치하는 공간을 선택 |
::before | 태그 앞에 위치하는 공간을 선택 |
1-11-3. 반응 문자 선택자(selection)
•
사용자가 문자와 반응해서 생기는 영역을 선택하는 선택자.
선택자 형태 | 설명 |
::selection | 사용자가 드래그한 글자를 선택 |
1-12. 링크(a) 선택자
•
선택자 형태 | 설명 |
:link | href 속성을 가지고 있는 a 태그를 선택 |
:visited | 방문했던 링크를 가지고 있는 a 태그를 선택 |
1-13. 부정(not) 선택자
선택자 형태 | 설명 |
:not | 선택자를 반대로 적용. |
input:not([type=password]){
background:red;
}
CSS
복사
2. CSS3 스타일 속성
2-1. 크기 단위
단위 | 기준 | 예제 (html이 16px) | 특징 |
px | 고정 크기 | 20px → 20px | 절대값, 변화 없음 |
em | 부모 요소 | 1.5em → 부모가 20px이면 30px | 부모 영향 받음, 중첩될 수 있음 |
rem | html 요소 | 1.5rem → 24px (16 × 1.5) | html 기준, 유지보수 쉬움 |
개념 | 설명 | 사용 예시 |
큰 뷰포트 | 브라우저를 최대화했을 때 크기 | 데스크톱 화면 최적화 |
작은 뷰포트 | 브라우저를 최소화했을 때 크기 | 모바일 최적화 |
동적 뷰포트 | 모바일에서 주소창 UI에 따라 변하는 크기 | dvh 단위 사용 |
vh 대신 dvh를 쓰면 더 정확한 높이 계산이 가능2-2. 박스 모델
•
width, height는 content를 감싸는 영역의 크기를 지정
2-2-1. box-sizing
width, height가 차지하는 범위를 지정한다.
•
content-box
◦
박스 너비 = width + 2 * (margin + border + padding)
◦
박스 높이 = height + 2 * (margin + border + padding)
•
border-box
◦
박스 너비 = width + 2 * margin
◦
박스 높이 = height + 2 * margin
2-3. 테두리 속성
2-3-1. border
테두리를 넣을 때는 border-width, border-style, border-coloe를 모두 사용해야 한다. shorthand로 사용이 가능하다.
2-3-2. border-radius
•
border-radius: 60px / 30px;
2-4. 배경 속성
2-4-1. background-image
•
CSS3 이전에는 배경 이미지를 1개씩만 적용할 수 있었다. 하지만 CSS3부터는 여러 개의 배경이미지를 적용할 수 있다.
•
여러 개를 적용할 경우 왼쪽에 위치한 이미지가 앞으로 나온다.
#root {
background-image: url('test1.png'), url('test2.png')
}
CSS
복사
2-4-2. background-size
#root {
background-image: url('test1.png'), url('test2.png')
background-size: 100% 250px; /* 너비 높이 */
background-size: 100%, 250px; /* 첫 번째 이미지 너비, 두 번째 이미지 너비 */
}
CSS
복사
Object-fit도 참고
2-4-3. background-repeat
2-4-4. background-attachment
배경 이미지를 어떠한 방식으로 화면에 붙일 것인지를 지정하는 스타일 속성.
설명 | |
fixed | 뷰포트에 대해 고정되어 부착한다. |
scroll | 요소의 배경 영역 자체에 부착되어 함께 스크롤 된다. |
local | 요소의 콘텐츠와 함께 부착되어 스코롤 된다. |
2-4-5. background-position
2-5. 폰트 속성
2-5-1. line-height
CSS는 block 형식을 가지는 태그를 수직 정렬할 수 있는 스타일 속성이 없다. 따라서 대체 방안으로 line-height를 조정한다.(이는 Flexbox, Grid 이전의 이야기)
•
글자를 감싸는 박스의 높이와 같은 크기의 line-height 속성을 사용한다.
•
shorthand: font-style font-weight font-size / line-height font-family
2-5-2. text-align
•
span, div 같은 태그에 text-align을 직접 적용하는 것은 의미가 없고, 부모 요소에 설정하여 자식 요소들의 정렬에 영향을 미침.
2-5-3. text-decoration
2-5-4. Ellipsis(생략)
•
text-overflow: 이 속성은 인라인text-overflow 진행 방향 으로 블록 컨테이너 요소를 넘는 콘텐츠에만 영향을 미칩니다 (예를 들어, 상자 아래쪽에서 넘치는 텍스트는 영향을 미치지 않는다.
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
CSS
복사
2-6. 위치 속성
2-6-1. position
•
자손의 position 속성에 absolute 키워드를 적용하면 부모는 height 속성을 사용한다.
•
자손의 position 속성에 absolute 키워드를 적용하면 부모의 position 속성에 relative 키워드를 적용한다.
position 속성 | 설명 |
static | 문서 흐름에 따라 배치 |
relative | 자기 위치를 기준으로 상하좌우로 위치를 이동 |
absolute | 절대 위치 좌표를 설정 |
fixed | 화면을 기준으로 절대 위치 좌표를 설정 |
2-6-2. float
•
자손에 float 속성을 적용하면 부모의 overflow 속성에 hidden 키워드를 적용한다.
•
혹은 float 사용 이후에 clear:both 사용
•
현재는 Flexbox, grid로 더 편하게 쓸 수 있다.
2-7. 그림자 속성
2-7-1. text-shadow
2-7-2. box-shadow
2-8. 그레이디언트
3. 웹 레이아웃
행 구조의 설계. float를 이용한 설계가 주라 생략.
다만 탭 UI의 경우 CSS만으로도 컨트롤이 가능한 점.
4. 스마트폰 레이아웃
4-1. 뷰포트 meta 태그
속성 이름 | 예시 | 설명 |
width | width=240
width=device-width | 화면의 너비 |
height | height=800
height=device-height | 화면의 높이 |
initial-scale | initial-scale=2.0 | 초기 확대 비율 |
user-scalable | user-scalable=no | 확대 및 축소의 가능 여부 |
minimum-scale | minimum-scale=1.0 | 최소 축소 비율 |
maximum-scale | maximum-scale=2.0 | 최대 축소 비율 |
target-densitydpi | target-densitydpi=medium-dpi | DPI 지정 |
5. CSS3 변형(transition)과 애니메이션
5-1. 변형(transition)
transition 속성 | 설명 |
transition | 모든 transition 속성을 한 번에 사용 |
transition-delay | 이벤트 발생 후 몇 초 후에 재생할지 지정 |
transition-duration | 몇 초 동안 재생할지 지정 |
transition-property | 어떤 속성을 변형할지 지정 |
transition-timing-finction |
5-2. 애니메이션(animation)
animtaion 속성 | 설명 |
transition | 모든 animation 속성을 한 번에 사용 |
animation-delay | 이벤트 발생 후 몇 초 후에 재생할지 지정 |
animation-direction | 애니메이션 진행 방향을 설정 |
animation-duration | 애니메이션을 몇 초 동안 재생할지 지정 |
animation-iteration-count | 애니메이션 반복 횟수를 지정 |
animation-name | 애니메이션 이름을 지정 |
animation-play-state | 애니메이션 재생 상태를 지정 |
animation-timing-function | 수치 변형 함수를 지정. |
6. CSS3 변환(transform)
transition은 시간의 흐름을 가지고 일어나는 변경.
transform은 시간의 흐름을 가지지 않는 형태의 변경.
6-1. 2차원 변환 함수
2차원 변환 함수 | 설명 |
translate(translateX, translateY) | 특정 크기만큼 이동 |
translateX(translateX) | X축으로 특정 크기만큼 이동 |
translateY(translateY) | Y축으로 특정 크기만큼 이동 |
scale(scaleX, scaleY) | 특정 크기만큼 확대 및 축소 |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소 |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소 |
skew(angleX, angleY) | 특정 각도만큼 기울인다. |
skewX(angleX) | X축으로 특정 각도만큼 기울인다. |
skewY(angleY) | Y축으로 특정 각도만큼 기울인다. |
rotate(angleZ) | 특정 각도만큼 회전 |
6-2. transform-origin
•
객체의 변환 중심을 설정하는 속성
6-3. 3차원 변환
3차원 변환 함수 | 설명 |
translate3d(translateX, translateY, translateZ) | 특정 크기만큼 이동 |
translateX(translateX) | X축으로 특정 크기만큼 이동 |
translateY(translateY) | Y축으로 특정 크기만큼 이동 |
translateZ(translateZ) | Z축으로 특정 크기만큼 이동 |
scale3d(scaleX, scaleY, scaleZ) | 특정 크기만큼 확대 및 축소 |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소 |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소 |
scaleZ(scaleZ) | Z축으로 특정 크기만큼 확대 및 축소 |
rotate3d(angleX, angleY, angleZ) | 특정 각도만큼 기울인다. |
rotateX(angleX) | X축으로 특정 각도만큼 회전 |
rotateY(angleY) | Y축으로 특정 각도만큼 회전 |
rotateZ(angleZ) | Z축으로 특정 각도만큼 회전 |
6-4. transform-style
•
transform을 적용할 때, 자신에게만 적용할지 자손에게도 적용할지 정하는 속성
키워드 | 설명 |
flat | 후손의 3차원 속성을 무시 |
preserve-3d | 후손의 3차원 속성을 유지 |
6-5. backface-visibility
•
3차원 공간에서 평면의 후면을 보이거나 보이지 않게 만드는 스타일 속성
•
위의 정육면체에서는 후면이 보이는데 이를 막아준다.
키워드 | 설명 |
visible | 후면을 보이게 만듬. |
hidden | 후면을 보이지 않게 만듬. |
6-6. 원근법(perspective)
7. CSS 추가 규칙(@-rule)
7-1. @import
•
CSS 파일을 다른 CSS 파일 안에서 불러올 때 사용. CSS 파일을 모듈화해서 관리할 때 유용
•
@import url(test.css)
/* main.css */
@import url('base.css');
@import url('theme.css');
body {
font-family: Arial, sans-serif;
}
CSS
복사
7-2. @font-face
•
웹 폰트를 자체적으로 지원해야 되는 경우
•
local에 폰트가 있는지 확인하고 없다면 url에서 웹 폰트를 내려받는다. 웹 브라우저별로 지원하는 폰트가 다르므로 여러 폰트를 집어넣는다.
◦
caniuse에서 브라우저가 woff, ttf 속성들을 지원을 하는지 확인
속성 이름 | 설명 |
font-family | 폰트 이름을 지정 |
src | 폰트 파일을 지정 |
font-weight | 폰트 두께를 지정 |
font-style | 폰트 스타일을 지정 |
@font-face{
font-family: 'font-name';
src: url('~~~~');
src: local(), url('/content/file.woff') format('woff'),
url('/content/file.ttf') format('truetype');
}
CSS
복사
7-3. @media
•
다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙.
•
최근 HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙.
7-3-1. CSS3 이전 방식
<link rel="stylesheet" href="desktop.css" media="screen" />
<link rel="stylesheet" href="print.css" media="print" />
CSS
복사
7-3-2. CSS3 방식
•
@media 규칙을 사용한다.
@media screen {
html{
height:100%;
}
...
}
@media print {
...
}
CSS
복사
•
@import 규칙에 미디어 장치를 구분하는 코드를 넣는 것도 가능.
@import url(desktop.css) screen;
@import url(print.css) print;
CSS
복사
7-4 화면 방향 전환
@media screen and (orientation: portrait){
...
}
@media screen and (orientation: landscape){
...
}
CSS
복사
8. 그리드 시스템
일반적으로 12개의 열을 기준으로 생각한다. 약수가 가장 많은 숫자이므로 어떤 레이아웃에 적용이 가능하기 때문이다.
•
열마다의 공간의 Gutter, Gap이라고 한다.
•
Width = (ColumnWidth + GutterWith) * 12
Reference
HTML5+CSS3 바이블