CSS(Cascading Style Sheets)
- HTML이 웹 사이트의 내용을 나열하고 CSS는 웹 문서의 디자인을 구성
- 웹 문서에서 스타일이란 HTML 문서에서 자주 사용하는 글꼴이나 색상, 정렬, 각 요소의 배치 방법과 같이 문서의 겉모습을 결정짓는 것
- 반응형 웹 디자인이란 PC나 모바일 등 웹 브라우저 크기에 따라 화면 레이아웃을 자동으로 바꿔주는 방법
CSS 스타일 형식
선택자 { 속성1 : 속성값1; 속성2 : 속성값2 }
- 속성과 값이 하나의 쌍으로 이루어진 것을 스타일 규칙이라 함
ex) p { text-align: center; color: blue }
- 스타일 형식은 한 줄 또는 여러 줄로 표기해도 됨
- 주석 표기 : /*와 */ 사이에 내용 입력
- CSS 소스 경령화 툴 : cssminifier.com
CSS 스타일 시트
1) 브라우저 기본 스타일
- CSS 사용하지 않은 웹 문서에서 웹 브라우저 표시될 때 기본적으로 적용되는 스타일
2) 인라인 스타일
- 스타일을 적용할 대상에 직접 표시
- style="속성: 속성값;" 형태로 사용
ex
<h1>블루향</h1>
<p style="color: blue;">껍질에 푸른 빛이 돌아 블루향이라 불린다.</p>
3) 내부 스타일 시트
- 웹 문서 안에서 사용할 스타일을 같은 문서 안에 정리한 것
- 모든 스타일 정보는 <head> 태그 안에서 정의하고 <style></style> 태그 사이에 작성
4) 외부 스타일 시트
- 따로 저장해놓은 스타일 정보를 가져와서 사용하는 것(.css 파일 확장자 사용)
- <link rel="stylesheet" href="외부 스타일 시트 파일 경로">
TIP) 태그와 요소의 차이점
<p>가위바위보</p>
태그는 <p>와 </p> 자체를 가리키는 말이고, 요소는 <p> 태그를 적용한 가위바위보 부분을 p 요소라고 한다.
CSS 기본 선택자
1) 전체 선택자
- 말 그대로 스타일을 문서 모든 요소에 적용할 때 사용
- * { 속성: 값; ,,,}
- 문서 내용과 브라우저 테두리 사이 간격인 마진 조절할 때 자주 사용
ex
<style>
* { margin: 0; }
</style>
2) 타입 선택자
- 특정 태그를 사용한 모든 요소에 스타일을 적용
- 태그명 { 스타일 규칙 }
ex
<style>
p { font-style: italic; }
</style>
3) 클래스 선택자
- 같은 태그라도 일부에 다른 스타일 적용하고 싶은 경우 자주 사용
- 클래스 이름을 사용하여 다른 선택자와 구분
- .클래스명 { 스타일 규칙 } 을 <head> 태그 style 부분에 입력, 적용하고자 하는 곳에서는 class="클래스명" 입력
ex
<style>
p { font-style: italic; }
.acent { padding: 5px; }
</style>
~~
<h1 class="acent">블루향</h1>
<p>껍질에 푸른 빛이 돌아 <span class="acent">블루향</span>이라 불린다.</p>
4) id 선택자
- 클래스 선택자와 마찬가지로 웹 문서의 특정 부분을 선택하여 스타일 지정할 때 사용
- #아이디명 { 스타일 규칙 } 을 <style> 태그에서 입력하고 적용하고자 하는 곳에서는 id="아이디명" 입력하기
- 클래스 선택자와의 차이점은 id 선택자는 문서에서 한 번만 적용 가능
5) 그룹 선택자
- 여러 선택자에서 같은 스타일 규칙 적용하고자 할 때 사용
- 선택자1, 선택자2 { 스타일 규칙 }
ex
h1, p { text-align: center; }
스타일 우선순위
- 스타일 규칙의 중요도와 적용 범위에 따라 우선순위가 결정됨
- 중요도 : 컴퓨터 사용자가 지정한 스타일 -> 웹 문서 제작자의 스타일 -> 웹 브라우저 기본 스타일 순으로 중요도 나뉨
- 적용 범위 : !important -> 인라인 스타일 -> id 스타일 -> 클래스 스타일 -> 타입 스타일
글꼴 관련 스타일
1) 글꼴 지정
font-family : 글꼴 이름
- 맑은 고딕과 같이 두 단어 이상으로 된 글꼴 이름은 큰 따옴표 사용
- sans-serif : 마지막에 작성하는 디폴트 값(어느 브라우저든 다 사용가능하므로 마지막에 적어주기)
ex body { font-family: "맑은 고딕", 돋움, 굴림 }
- 사용자 시스템에 글꼴이 없을 경우를 대비해서 2번째, 3번째 글꼴까지 같이 사용하는 것이 일반적
2) 글자 크기 지정
font-size: 크기
- CSS에서는 키워드(small, large 등)보다 단위를 사용해서 글자 크기 직접 지정하는 것이 일반적
| 종류 | 설명 |
| em | 부모 요소에서 지정한 글꼴의 대문자 M 너비를 기준(1em)을 한 후 비율값을 지정 1em=16px=12pt |
| rem | 문서 시작 부분에서 지정한 크기를 기준(1rem)으로 한 후 비율값을 지정 |
| ex | 해당 글꼴의 소문자 x의 높이를 기준(1ex)으로 한 후 비율값을 지정 |
| px | 모니터의 1픽셀을 기준(1pt)으로 한 후 비율값을 지정 |
| pt | 포인트 |
- 모바일 기기까지 고려하여 최근에는 em이나 rem 많이 사용
- 백분율을 사용하여 글자 크기 지정할 수 있으나, 부모 요소 글꼴 크기가 단위로 표현되어 있어야 함
3) 이탤릭체로 글자 표시
font-style: 속성값
- 속성값으로는 normal, italic 존재
4) 글자 굵기 지정
font-weight: 속성값
- 속성값으로는 normal, bold, bolder, lighter, 100~900 존재
5) 웹 폰트 적용하기
- 사용자에게 없는 폰트여도 적용시키고 싶은 경우에 웹 폰트 사용함
- fonts.google.com 에서 원하는 글꼴 선택하고 +Select this style -> @import 클릭하면 나오는 두 코드를 각각 복사해서 사용하기
텍스트 관련 스타일
1) 글자색 지정
color: 색상
- 색상을 영문명으로 표현하는 방법 : red, blue, white 등으로 표현
- 16진수로 표현 : #RRGGBB로 표시하며 하나도 안 섞인 0 부터 가득 섞인 f까지 사용 가능
- hsl과 hsla로 표현 : 색상, 채도, 명도 순이며, 채도는 0%이 회색톤, 100%이 원래 색이고 명도는 0%이 가장 어둡고 50%이 원래 색이고 100%은 흰색을 의미
ex p { color: hsl(0, 100%, 50%) }
- rgb와 rgba로 표현 : 빨강, 초록, 파랑 순이며, 하나도 안 섞이면 0이고 가득 섞이면 255, 불투명도는 0~1로 사용
ex p { color: rgba(0, 0, 255, 0.5) }
- 원하는 색상 선택 방법 : 우선 원하는 색상에 가까운 영문명 입력하고 색상 이름 위로 마우스 포인터 올리면 색상표가 등장, 거기서 rgb와 rgba로 선택 가능하며, 원한다면 rgb값 클릭해서 16진수값으로 표현할 수 있음
2) 텍스트 정렬
text-align: 속성값
| 종류 | 설명 |
| start | 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 |
| end | 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 |
| left | 왼쪽에 맞추어 문단 정렬(기본값) |
| right | 오른쪽에 맞추어 문단 정렬 |
| center | 가운데에 맞추어 문단 정렬 |
| justify | 양쪽에 맞추어 문단 정렬 |
| match-parent | 부모 요소를 따라 문단 정렬 |
3) 줄 간격 조절
line-height: 속성값
- 일반적으로 줄 간격은 글자 크기의 1.5~2배가 적당
- 텍스트 세로 정렬할 때도 사용, line-height 속성값을 height 속성값과 똑같이 지정하면 됨
ex1 p { font-size: 12px; line-height: 24px; }
ex2 p { font-size: 12px; line-height: 2.0; }
ex3 p { font-size: 12px; line-height: 200%; }
4) 텍스트 그림자 효과
text-shadow: 속성값
- 속성값 순서는 가로거리 세로거리 번짐정도 색상
| 종류 | 설명 |
| 가로 거리 | 텍스트로부터 그림자까지의 가로 거리, 필수 속성 양숫값은 글자의 오른쪽 그림자 생성 음숫값은 글자의 왼쪽 그림자 생성 |
| 세로 거리 | 텍스트로부터 그림자까지의 세로 거리, 필수 속성 양숫값은 글자의 오른쪽 그림자 생성 음숫값은 글자의 왼쪽 그림자 생성 |
| 번짐 정도 | 그림자가 번지는 정도 양숫값을 사용하면 그림자가 모든 방향으로 퍼짐 음숫값 사용하면 그림자가 모든 방향으로 축소되어 보임 |
| 색상 | 그림자 색상을 지정 |
ex .shadow1 { color: red; text-shadow: 1px 1px black; }
5) 텍스트 대소문자 변환
text-transform: 속성값
| 종류 | 설명 |
| capitalize | 첫 번째 글자를 대문자로 변환 |
| uppercase | 모든 글자를 대문자로 변환 |
| lowercase | 모든 글자를 소문자로 변환 |
6) 텍스트 간격 조절
letter-spacing: 값
word-spacing: 값
- letter-spacing 은 글자 사이 간격 조절하고 word-spacing은 단어 사이 간격 조절함
- 숫자의 단위로는 px, em이나 %로 조절함
목록 스타일
1) 불릿 모양과 번호 스타일 지정
list-style-type: 속성값
| 종류 | 설명 | 예시 |
| disc | 채운 원 모양 | ● |
| circle | 빈 원 모양 | ○ |
| square | 채운 사각형 모양 | ■ |
| decimal | 1부터 시작하는 10진수 | 1, 2, 3, ... |
| decimal-leading-zero | 앞에 0이 붙는 10진수 | 01, 02, 03, ... |
| lower-roman | 로마 숫자 소문자 | ⅰ, ⅱ, ⅲ, ... |
| upper-roman | 로마 숫자 대문자 | Ⅰ, Ⅱ, Ⅲ, ... |
| lower-alpha | 알파벳 소문자 | a, b, c, ... |
| upper-alpha | 알파벳 대문자 | A, B, C, ... |
| none | 불릿 없애기 |
2) 이미지 파일을 통해 불릿 모양 지정
list-style-image: url('이미지 파일 경로')
3) 목록 들여 쓰기
list-style-position: 속성값
| 종류 | 설명 |
| inside | 기본 위치보다 안으로 들여 쓰기 |
| outside | 기본 값 |
표 스타일
1) 표 제목 위치 지정
caption-side: 속성값
| 종류 | 설명 |
| top | 표 윗부분에 표시(기본값) |
| bottom | 표 아랫부분에 표시 |
2) 표 테두리 그리기
border: 값
- 숫자는 px 단위로 사용
3) 표와 셀 합치기
border-collapse: 속성값
- <table> 태그와 <td> 태그에서 border 속성 사용하면 셀과 셀 사이 여백이 생겨 두 줄로 표시됨
| 종류 | 설명 |
| collapse | 표와 셀의 테두리를 합쳐 하나로 표시 |
| separate | 표와 셀의 테두리를 따로 표시(기본값) |
4) 총합
border: 속성값1, 속성값2, ...;
- 속성값에는 표 테두리 두께, 색, 스타일 지정 가능
- table 뿐만 아니라 th, td에도 border 같이 지정해줘야 표 안의 격자 무늬 생김
- 표 내부에 글자가 너무 딱 붙어있는 경우에는 th, td에 padding 값 주기
박스 모델
1) 콘텐츠 영역의 크기 지정
width: 값
height: 값
- 콘텐츠 영역의 너비와 높이를 지정 가능
- px나 em 단위 또는 백분율로 표시 가능
- auto 사용시 콘텐츠 양에 따라 자동으로 결정(기본값)
2) 박스 모델 크기 계산
box-sizing: 속성값
| 종류 | 설명 |
| border-box | 테두리까지 포함해서 너빗값을 지정 ex width: 140px 하면 140px 크기로 되는데, padding값을 설정함에 따라 각 박스별로 너빗값이 달라질 수 있음, 이를 통일시킬때 사용 |
| content-box | 콘텐츠 영역만 너빗값을 지정(기본값) |
3) 박스 모델에 그림자 효과 주기
box-shadow: 속성값
- 속성값 순서는 수평거리 수직거리 흐림정도 번짐정도 색상 inset
| 종류 | 설명 |
| 수평거리 | 그림자가 가로로 얼마나 떨어져 있는지를 지정 양숫값은 요소의 오른쪽에, 음숫값은 왼쪽에 그림자를 생성 필수속성 |
| 수직거리 | 그림자가 세로로 얼마나 떨어져 있는지를 지정 양숫값은 요소의 아래쪽에, 음숫값은 위쪽에 그림자 생성 필수속성 |
| 흐림정도 | 0이 기본값, 값이 커질수록 부드러운 그림자 표시 |
| 번짐정도 | 양수값을 사용하면 모든 방향으로 그림자 퍼짐 음숫값은 모든 방향으로 그림자 축소 |
| 색상 | 기본값은 검은색 |
| inset | 이 키워드 사용하면 안쪽 그림자로 생성 |
4) 테두리 스타일 지정
border-style: 속성값
| 종류 | 설명 |
| none | 테두리 없음(기본값) |
| hidden | 테두리 감춤 |
| solid | 테두리를 실선으로 표시 |
| dotted | 테두리를 점선으로 표시 |
| dashed | 테두리를 짧은 직선으로 표시 |
| double | 테두리를 이중선으로 표시 |
| groove | 테두리를 창에 조각한 것처럼 표시 |
| inset | |
| outset | |
| ridge |
5) 테두리 두께 지정
border-width: 속성값
- 속성값은 숫자, thin, medium, thick 존재
6) 테두리 색상 지정
border-color: 색상
border-top-color: 색상
border-left-color: 색상
- top이나 left 등으로 테두리 위치에 따른 색상 지정 가능
7) 둥근 테두리 만들기
border-radius: 값
border-top-left-radius: 값
border-top-right-radius: 값
- 값은 px, em 등 단위 또는 백분율로 지정
- top-letf는 왼쪽 위만 둥글게 처리
8) 여백 조절
margin: 값
- 값은 px, em 등 단위 또는 백분율로 지정, auto은 자동 지정
- 값은 위 -> 오른 -> 아래 -> 왼 방향으로 적용(padding도 동일하게 적용 가능)
ex margin: 30px 50px 30px 20px
- margin과 padding의 차이점은 margin은 border 바깥쪽에 여백 만듬, padding은 border 안쪽에 여백 만듬
8-2) 마진 병합 현상
- 형제지간 마진 병합 : 큰 숫자에 의한다
ex) .box1 {margin-bottom:150px;}
.box2 {margin-top:100px;}
/* 둘 사이가 250이 아니라 150이 된다. */
- 부모자식간 마진 병합 : 자식에 margin 적용시 부모에도 영향 미침
9) 배치 방법 결정하기(인라인 성격 가진 태그를 블록 성격으로 바꾸기)
display: 속성값
| 종류 | 설명 |
| block | 인라인 레벨 요소를 블록 레벨 요소로 만들기 |
| inline | 블록 레벨 요소를 인라인 레벨 요소로 마들기 |
| inline-block | 인라인 레벨 요소와 블록 레벨 요소 속성을 모두 가지고 있으며 마진과 패딩 지정 가능 |
| none | 해당 요소를 화면에 표시하지 않음 |
- 볼록 레벨 요소 : 태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것
- 인라인 레벨 요소 : 콘텐츠만큼만 영역을 차지하고 나머지 공간에는 다른 요소 올 수 있다.
float: 속성값
| 종류 | 설명 |
| left | 해당 요소를 문서의 왼쪽에 배치 |
| right | 해당 요소를 문서의 오른쪽에 배치 |
| none | 좌우 어느쪽에도 배치하지 않음(기본값) |
clear: 속성값
| 종류 | 설명 |
| left | float: left를 해제 |
| right | float: right를 해제 |
| both | float: left와 float:right를 해제 |
- float 속성을 사용하면 다른 요소에도 자동적으로 적용되므로 clear를 통해 해제 필요함
- clear 사용은 float 마지막으로 사용한 태그 다음에 나오는 태그에다가 적용
- clear를 하게 되면 층이 바뀜
- float만 사용해서는 안되고 font-size나 width 정도랑 같이 사용해야 적용됨
웹 요소 위치 지정
1) 배치 방법 지정
position: 속성값
| 종류 | 설명 |
| static | 문서 흐름에 맞춰 배치(기본값) |
| relative | 문서 흐름에 맞춰 배치 + 위치값 지정 가능 |
| absolute | relative값을 사용한 상위 요소를 기준으로 위치 지정 (relative를 부모 요소에서 지정해야 원하는대로 배치 가능) |
| fixed | 브라우저 창을 기준으로 위치 지정 브라우저에서 스크롤하더라도 항상 같은 위치에 존재 |
2) 웹 요소 위치 정하기
- position 속성으로 기준 위치를 정한 뒤 요소 위치를 left, right, top, bottom 속성으로 선택
- 값은 px, em 등 단위를 사용
| 종류 | 설명 |
| left: 값 | 기준 위치와 요소 사이에 왼쪽으로 얼마나 떨어져 있는지 지정 |
| right: 값 | 기준 위치와 요소 사이에 오른쪽으로 얼마나 떨어져 있는지 지정 |
| top: 값 | 기준 위치와 요소 사이에 위쪽으로 얼마나 떨어져 있는지 지정 |
| bottom: 값 | 기준 위치와 요소 사이에 아래쪽으로 얼마나 떨어져 있는지 지정 |
ex h1 { position: relative; right: 100px; }
배경 꾸미기
- background 는 margin이나 padding 같은 규격 설정하는거 이후에 쓰기
1) 배경색 지정
background-color: 속성값
- 속성값은 영문명, 16진수, rgb 등 사용가능
2) 배경색 적용범위 조절
background-clip: 속성값
| 종류 | 설명 |
| border-box | 박스 모델의 테두리까지 적용(기본값) |
| padding-box | 박스 모델에서 테두리를 뺀 패딩 범위까지 적용 |
| content-box | 박스 모델에서 내용 부분에만 적용 |
3) 배경 이미지 지정
background-image: url('이미지 파일 경로')
- 이미지가 작으면 배경 전체로 반복되며 적용됨
background-repeat: 속성값
| 종류 | 설명 |
| repeat | 브라우저 화면에 가득 찰 때까지 가로와 세로 반복(기본값) |
| repeat-x | 브라우저 화면 너비 가득 찰 때까지 가로 반복 |
| repeat-y | 브라우저 화면 높이에 가득 찰 때까지 세로 반복 |
| no-repeat | 한 번만 표시하고 반복하지 않기 |
4) 배경 이미지 적용범위 조절
background-origin: 속성값
| 종류 | 설명 |
| border-box | 박스 모델의 테두리까지 배경 이미지 표시 |
| padding-box | 박스 모델에서 테두리를 뺀 패딩 범위까지 배경 이미지 표시 |
| content-box | 박스 모델에서 내용 부분에만 배경 이미지 표시(기본값) |
5) 배경 이미지 위치 조절
background-position: 수평위치 수직위치
- 속성값을 2개로 지정하면 수평위치와 수직위치가 결정되고, 하나만 지정하면 수평위치만 결정
- 속성값으로는 키워드(right, left, center), 백분율(%), 크기(px, em)로 지정 가능
6) 배경 이미지 고정
background-attachment: 속성값
| 종류 | 설명 |
| scroll | 화면을 스크롤하면 배경 이미지도 스크롤됨(기본값) |
| fixed | 배경 이미지는 고정되고 내용만 스크롤됨 |
ex1 body { background-image: url('images/bg2.png'); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }
ex2 background: url('images/bg2.png') no-repeat right top fixed; -> 처럼 background 속성 하나로 묶기 가능
7) 배경 이미지 크기 조절
background-size: 속성값
| 종류 | 설명 |
| auto | 원래 배경 이미지 크기만큼 표시(기본값) |
| contain | 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대 축소 |
| cover | 배경 이미지로 요소를 모두 덮도록 이미지를 확대 축소 |
| px, em 등 | 이미지의 너비와 높이 지정 |
| % | 요소의 크기를 기준으로 값 지정 |
8) 그라데이션 효과
linear-gradient( to 방향 또는 각도, 색상 중지점1, 색상 중지점2, ...);
- 방향의 경우, left, right, top, bottom을 이용하며 최대 2개까지 사용가능
- 각도의 경우, deg로 표기
- 색상 중지점은 그라데이션에서 바뀌는 색을 의미
ex1 .grad { background: blue; background: linear-gradient(to right bottom, blue, white); }
/* 왼쪽 위에서 오른쪽 아래 방향으로 파란색에서 흰색으로 */
ex2 .grad { background: red; background: linear-gradient(45deg, red, white); }
/* 45도 방향으로 빨간색에서 흰색으로 */
radial-gradient( 모양 크기 at 위치, 색상 중지점1, 색상 중지점2, ...);
- 모양은 원형(circle)과 타원형(ellipse) 사용 가능, 타원형이 기본값
- 크기 속성값
| 종류 | 설명 |
| closest-side | 그라데이션 가장자리가 중심에서 가장 가까운 요소의 측면에 닿도록 그리기 |
| closest-corner | 그라데이션 가장자리가 중심에서 가장 가까운 요소의 코너에 닿도록 그리기 |
| farthest-side | 그라데이션 가장자리가 중심에서 가장 멀리 떨어져 있는 측면에 닿도록 그리기 |
| farthest-corner | 그라데이션 가장자리가 중심에서 가장 멀리 떨어져 있는 코너에 닿도록 그리기(기본값) |
- 위치는 left, center, right 중 하나 또는 top, center, bottom 중 하나 또는 백분율로 표시
ex .grad { background: blue; backgroud: radial-gradient(circle at 20% 20%, white, blue; }
- repeating-linear-gradient 또는 repeating-radial-gradient 를 사용해 반복 패턴 만들기 가능
CSS 고급 선택자
1) 하위 선택자
| 종류 | 기본형 | 설명 | 예시 |
| 하위 선택자 | 상위요소 하위요소 | 하위 요소 모두를 선택하여 적용 | ex section p { ... } /*section 요소 밑의 모든 하위 p 요소에 적용*/ |
| 자식 선택자 | 부모요소 > 자식요소 | 자식 요소에만 스타일을 적용 | ex section > p { ... } /*section 요소 바로 밑의 p 요소에만 적용*/ |
| 인접 형제 선택자 |
요소1 + 요소2 | 형제 요소 중 첫 번째 동생 요소에만 적용 | ex h1 + p { ... } /*h1의 형제인 p 요소 중 첫 번째 p에만 적용*/ |
| 형제 선택자 | 요소1 ~ 요소2 | 모든 형제 요소에 적용 | ex h1 ~ p { ... } /* h1의 형제인 모든 p 요소에 적용*/ |
- 특정 요소를 기준으로 그 안에 포함된 요소를 하위 요소, 현재 요소를 기준으로 바로 한 단계 아래 요소는 자식 요소, 그 자식 요소의 한 단계 아래는 손자 요소
- 부모 요소가 같을 경우 형제 관계이며, 먼저 나오는 요소가 형 요소, 나중에 나오는 요소가 동생 요소
2) 속성 선택자
| 기본형 | 설명 | 예시 |
| [속성] 선택자 | 특정 속성이 있는 요소 선택 | a[href] { ... } /* a 요소 중에서 href 속성이 있는 경우 선택 */ |
| [속성=속성값] 선택자 | 특정 속성값이 있는 요소 선택 | a[target = _blank] { ... } /* a 요소 중에서 target 속성값이 _blank인 요소만 선택 */ |
| [속성~=값] 선택자 | 여러 값 중 특정 값이 포함된 요소 선택 | [class ~= button] { ... } /* class 속성값이 button이 포함된 요소만 선택 */ |
| [속성|=값] 선택자 | 특정 속성값이 포함된 요소 선택 | a[title |= us] { ... } /* 속성값이 us 이거나 us로 시작하는 a 요소 선택 */ |
| [속성^=값] 선택자 | 특정 속성값으로 시작하는 요소 선택 | a[title ^= eng] { ... } /* 속성값이 eng로 시작하는 a 요소 선택 */ |
| [속성$=값] 선택자 | 특정 값으로 끝나는 요소 선택 | a[href $= xls] { ... } /* 링크 속성값이 xls로 끝나는 a 요소 선택 */ |
| [속성*=값] 선택자 | 일부 속성값이 일치하는 요소 선택 | a[href *= w3] { ... } /* 속성값 중 일부에 w3가 있는 a 요소 선택 */ |
3) 가상 클래스
- 주의할 점! 가상 클래스나 가상 요소는 .navi :link 와 같이 띄어쓰기 해줘야 한다.
- 사용자 동작에 반응하는 가상 클래스(link -> visited -> hover -> active 순서로 사용해야 안전)
| 기본형 | 설명 | 예시 |
| :link | 방문하지 않은 링크에 스타일 적용 | .navi a:link { ... } /* navi요소 밑의 모든 a요소에 대하여 방문하지 않은 경우 스타일 적용 */ |
| :visited | 방문한 링크에 스타일 적용 | .navi a:visited { ... } /* navi요소 밑의 모든 a요소에 대하여 방문한 경우 스타일 적용 */ |
| :hover | 특정 요소에 마우스 포인터를 올려놓으면 스타일 적용 | .navi a:hover { ... } /* navi요소 밑 모든a 요소에 대하여 마우스 포인터 올려놓으면 스타일 적용 */ |
| :focus | 특정 요소에 키보드 포커스가 맞춰지면 스타일 적용 | .navi a:focus { ... } |
| :active | 웹 요소를 활성화했을 때 스타일 적용 | .navi a:active { ... } /* 클릭하는 순간 스타일 적용 */ |
| :target | 앵커 대상에 스타일 적용 (앵커란 같은 문서 안에서 다른 위치로 이동할 때 사용되는 기능) |
#intro:target { ... } /* 해당 앵커 클릭시 연결된 요소에 스타일이 적용됨 */ |
| :checked | 선택한 항목의 스타일 적용 (주로 선택 버튼이 있는 경우 사용) |
#signup input:checked + label { ... } /* input요소에 선택되었을 때 label요소에 스타일 적용 */ |
| :not( ) | 특정 요소를 제외하고 스타일 적용 (괄호 안에 있는 요소를 제외) tip) 코드 줄이기 위해 문서 내 없는 요소로 적용시키면 나머지 전부 적용됨 |
#signup input:not([type=radio]) { ... } /* radio요소 제외하고 input요소에 대해 스타일 적용 */ |
- 구조 가상 클래스(특정 위치에 있는 요소에 스타일 적용)
| 기본형 | 설명 |
| :only-child | 부모 안에 자식 요소가 하나뿐일 때 자식 요소 선택 |
| A:only-type-of | 부모 안에 A 요소가 하나뿐일 때 선택 |
| :first-child | 부모 안에 있는 요소 중 첫 번째 자식 요소 선택 |
| :last-child | 부모 안에 있는 요소 중 마지막 자식 요소 선택 |
| A:first-of-type | 부모 안에 있는 A 요소 중에서 첫 번째 요소 선택 |
| A:last-of-type | 부모 안에 있는 A 요소 중에서 마지막 요소 선택 |
| :nth-child(n) | 부모 안에 있는 요소 중에서 n번째 하위 요소를 선택 (n에는 숫자뿐만 아니라 수식 등 사용 가능, :nth-child(2n+1), :nth-child(odd) 등) |
| :nth-last-child(n) | 부모 안에 있는 요소 중 끝에서 n번째 하위 요소를 선택 |
| A:nth-of-type(n) | 부모 안에 있는 A 요소 중에서 n번째 요소 선택 (A 요소에 대해서만 순서 센다는 점이 :nth-child(n)과의 차이) |
| A:nth-last-of-type(n) | 부모 안에 있는 A 요소 중 끝에서 n번째 요소 선택 |
4) 가상 요소
- 문서 안 특정 부분에 스타일을 지정하기 위해 가상으로 요소를 만들어 추가하는 것
| 기본형 | 설명 |
| ::first-line | 첫 번째 줄에 스타일 적용 |
| ::first-letter | 첫 번째 글자에 스타일 적용 |
| ::before | 지정한 요소 앞에 스타일 적용 ex li.new ::after { content: "NEW!"; font-size: x-small; } |
트랜지션과 애니메이션
1) 변형
transform: 함수
- 이어서 쓰게 되면 모두 적용, 줄을 바꿔 쓰면 나중에 작성한 transform 속성이 적용됨
| 함수 종류 | 설명 | 파생 함수 |
| translate(n1 px, n2 px) | 지정한 크기만큼 x축, y축으로 이동 | translateX(n px) translateY(n px) translateZ(n px) translate3d(n1 px, n2 px, n3 px) |
| scale(n1, n2) | 지정한 크기만큼 x축, y축으로 확대·축소 (1보다 작으면 축소, 크면 확대) |
scaleX(n) scaleY(n) scaleZ(n) scale3d(n1, n2, n3) |
| rotate(n deg) | 지정한 각도만큼 회전 (양수는 오른쪽으로, 음수는 왼쪽으로 회전) |
rotateX(n deg) rotateY(n deg) rotateZ(n deg) rotate3d(n1, n2, n3, 각도) |
| skew(n1 deg, n2 deg) | 지정한 각도만큼 x축, y축으로 왜곡 | skewX(n deg) skewY(n deg) skewZ(n deg) |
| perspective(길이) | 입체적으로 보일 수 있도록 깊입값 지정 (3차원에서 사용) |
ex h1 { ... transform: skewX(15deg); } /* x축 기준으로 15도 비틀기 */
2) 트랜지션
transition: 속성
- 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것
| 속성 종류 | 설명 |
| transition-property: all | none | 속성이름 | 트랜지션 대상 지정 all : 요소의 모든 속성이 대상(기본값) none : 아무 속성도 안바뀜 속성이름 : 트랜지션 효과 적용할 속성을 지정 |
| transition-duration: 시간 | 트랜지션 실행할 시간 지정 |
| transition-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier | 트랜지션 실행 형태 지정 ease : 천천히 시작하고 빨라지다가 천천히 끝냄(기본값) linear : 똑같은 속도로 진행 ease-in : 느리게 시작 ease-out : 느리게 끝 ease-in-out : 느리게 시작하고 느리게 끝 cubic-bezier : 베지에 함수를 정의해서 사용 |
| transition-deley: 시간 | 트랜지션 지연 시간 지정(기본값 0) |
| transition: | 위의 속성들을 한꺼번에 사용 가능 ex) transition: width 2s linear 1s; -> 너비가 1초 후에 일정한 속도로 2초에 걸쳐 진행 |
3) 애니메이션
animation: 속성
- 자바스크립트를 사용하지 않고도 웹 요소에 애니메이션 추가 가능
| 속성 종류 | 설명 |
| animation-name: 이름 | 여러 개의 애니메이션 정의할 수 있으므로 이름을 사용하여 구별 |
| @keyframes 이름 { from { ... } to { ... } } |
애니메이션이 바뀌는 지점을 지정 |
| animation-duration: 시간 | 애니메이션 실행 시간을 지정(기본값 0) |
| animation-direction: normal | reverse | alternate | alternate-reverse | 애니메이션의 방향을 지정 normal : from에서 to로 진행(기본값) reverse : to에서 from으로 진행 alternate : 홀수 번째는 normal, 짝수 번째는 reverse로 진행 alternate-reverse : 짝수 번째는 reverse, 홀수 번째는 normal로 진행 |
| animation-delay: 시간 | 애니메이션 시작 시간을 지정(기본값 0) |
| animation-iteration-count: 숫자 | infinite | 애니메이션 반복 횟수를 지정 |
| animation-timing-function: ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier | 키프레임의 전환 형태를 지정 |
| animation: | 위의 속성들을 한꺼번에 사용 가능 |
반응형 웹과 미디어 쿼리
1) 반응형 웹 디자인
- 웹 요소를 화면 크기에 맞게 재배치하고 각 요소의 표시 방법만 바꾸어 사이트를 구현
- PC와 스마트폰 등 다양한 브라우저 환경에서 볼 수 있도록 하기 위함
- 뷰포트 : 스마트폰 화면에서 실제 내용이 표시되는 영역(meta 태그를 이용해 <head> 태그 사이에 작성)
<meta name="viewport" content="속성1=값1", "속성2=값2", ... >
| 속성 종류 | 설명 | 사용 가능한 값 | 기본값 |
| width | 뷰포트 너비 | device-width 또는 크기 | 브라우저 기본값 |
| height | 뷰포트 높이 | device-height 또는 크기 | 브라우저 기본값 |
| user-scalable | 확대·축소 가능 여부 | yes 또는 no | yes |
| initial-scale | 초기 확대·축소 값 | 1~10 | 1 |
ex <meta name="viewport" content="width=device-width, initial-scale=1">
- 뷰포트 기준 단위(주로 font-size 에서 사용)
| 종류 | 설명 |
| vw | 1vw는 뷰포트 너비의 1% |
| vh | 1vh는 뷰포트 높이의 1% |
| vmin | 1vmin은 뷰포트 너비와 높이 중 작은 값의 1% |
| vmax | 1vmax는 뷰포트 너비와 높이 중 큰 값의 1% |
- 크롬에서 뷰포트 확인하는 방법 : 개발자 도구 창에서 휴대폰 아이콘 클릭하기
2) 미디어 쿼리
- 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하는 방법
- 웹 브라우저 화면 크기에 따라 사이트 레이아웃이 변경됨
- <style> 태그 사이에 작성 (.container에게 적용시킬 것이라면 .container에 대한 css 코드 다음 @media해야함)
@media [only | not] 미디어유형 and 조건
- only : 미디어 쿼리를 지원하지 않는 웹 브라우저에서는 미디어 쿼리 무시하고 실행하지 않기
- not : not 다음에 오는 미디어 유형을 제외한 나머지에 스타일 적용
- and : 조건을 여러 개 연결하여 추가 가능
ex @media screen and (min-width: 760px) and (max-width: 1400px) { ... }
/* 미디어 유형이 screen이면서 최소 너비가 760px이고 최대 너비가 1400px일 경우에 적용할 CSS를 정의 */
| 미디어 유형 종류 | 설명 |
| all | 모든 미디어 유형에서 사용할 CSS 정의 |
| 인쇄 장치에서 사용할 CSS 정의 | |
| screen | 컴퓨터 스크린에서 사용할 CSS 정의(스마트폰 스크린 포함) |
| tv | TV에서 사용할 CSS 정의 |
| aural | 음성 합성 장치에서 사용할 CSS 정의 |
| braille | 점자 표시 장치에서 사용할 CSS 정의 |
| handheld | 패드처럼 손에 들고 다니는 장치를 위한 CSS 정의 |
| projection | 프로젝터를 위한 CSS 정의 |
| tty | 디스플레이 기능이 제한된 장치에 맞는 CSS 정의 |
| 조건 종류 | 설명 |
| width, height min-width, min-height max-width, max-height |
웹 페이지의 너비, 높이에 따라 적용 웹 페이지의 최소 너비, 최소 높이에 따라 적용 웹 페이지의 최대 너비, 최대 높이에 따라 적용 |
| device-width, device-height min-device-width, min-device-height max-device-width, max-device-height |
단말기의 너비, 높이에 따라 적용 단말기의 최소 너비, 최소 높이에 따라 적용 단말기의 최대 너비, 최대 높이에 따라 적용 |
| orientation: portrait orientation: landscape |
단말기의 세로 모드를 지정 단말기의 가로 모드를 지정(휴대폰을 가로로 돌릴 경우) |
- 미디어 쿼리 적용하는 방법
| 외부 CSS 파일 연결하기 | <link rel="stylesheet" media="미디어쿼리" href="css 파일경로"> ex <link rel="stylesheet" media="print" href="css/print.css"> |
| @import url(css 파일경로) 미디어쿼리 - @import는 자바스크립트와 함께 사용할 경우 오류날 수 있으므로 <link>태그를 주로 사용 |
|
| 웹 문서에 직접 정의하기 | <style media="미디어쿼리"> { ... } </style> ex <style media="screen and (max-width: 320px)"> body { background-color: #222; } </style> |
| <style> @media 미디어쿼리 { ... } </style> ex <style> @media screen and (max-width: 320px) { body { background-color: #002; } } </style> |
3) 그리드 레이아웃
- 웹 사이트를 여러 개의 컬럼으로 나눈 후 메뉴나 본문, 이미지 등의 웹 요소를 화면에 맞게 배치하는 것
- 장점 : 시각적으로 안정된 디자인, 업데이트가 편한 웹 디자인, 요소를 자유롭게 배치 가능
- 만드는 방법 : CSS의 float 속성을 이용 또는 플렉서블 박스 레이아웃 또는 CSS 그리드 레이아웃 이용
플렉서블 박스 레이아웃(플렉스 박스 레이아웃) : 수평 방향이나 수직 방향 중 한쪽을 주축으로 정하고 박스 배치
CSS 그리드 레이아웃 : 수평과 수직 어느 방향이든 배치 가능
4) 플렉스 박스 레이아웃
- 플렉스 컨테이너(부모 박스) : 플렉스 박스 레이아웃을 적용할 대상을 묶는 요소
- 플렉스 항목(자식 박스) : 플렉스 박스 레이아웃을 적용할 대상
- 주축 : 플렉스 항목을 배치하는 기본 방향(기본적으로 왼쪽에서 오른쪽, 수평방향)
- 교차축 : 주축과 교차하는 방향(기본적으로 위에서 아래로)
| 기본형 | 설명 | 속성값 |
| display: 속성값 | 플렉스 컨테이너를 지정 | flex : 컨테이너 안의 플렉스 항목을 블록 레벨 요소로 배치 inline-flex : 컨테이너 안의 플렉스 항목을 인라인 레벨 요소로 배치 |
| flex-direction: 속성값 | 플렉스 방향을 지정 | row : 주축을 가로로 지정하고 왼쪽에서 오른쪽으로 배치(기본값) row-reverse : 오른쪽에서 왼쪽으로 배치 column : 주축을 세로로 지정하고 위에서 아래로 배치 column-reverse : 아래에서 위로 배치 |
| flex-wrap: 속성값 | 플렉스 항목의 줄 바꾸기 지정 | nowrap : 플렉스 항목을 한 줄에 표시(기본값) wrap : 플렉스 항목을 여러 줄에 표시 wrap-reverse : 플렉스 항목을 여러 줄에 표시하되, 시작점과 끝점 변경 |
| flex-flow: 속성값1 속성값2 | 배치 방향과 줄 바꿈 한번에 지정 | flex-direction과 flex-wrap 속성값 사용 가능 |
| justify-content: 속성값 | 주축을 기준으로 플렉스 항목 정렬 | flex-start : 주축의 시작점에 맞춰 배치 flex-end : 주축의 끝점에 맞춰 배치 center : 주축의 중앙에 맞춰 배치 space-between : 첫번째 항목과 끝 항목을 시작점과 끝점에 배치한 후 나머지 항목을 그 사이에 같은 간격으로 배치 space-around : 모든 항목을 같은 간격으로 배치 |
| align-items: 속성값 | 교차축을 기준으로 플렉스 항목 정렬 | flex-start : 교차축의 시작점에 맞춰 배치 flex-end : 교차축의 끝점에 맞춰 배치 center : 교차축의 중앙에 배치 baseline : 교차축의 문자 기준선에 맞춰 배치 stretch : 플렉스 항목을 늘려 교차축에 가득 차게 배치 |
| align-self: 속성값 | align-items 속성 사용 후 특정 항목만 정렬 방법 따로 지정하는 경우 사용 | ex <style> .container { ... display: flex; align-items: center; } #box1 { align-self: flex-start; } |
| align-content: 속성값 | 여러 줄일 때 교차축 기준으로 플렉스 항목 정렬(flex-wrap: wrap 또는 flex-flow: wrap 쓴 경우에 사용) | flex-start flex-end center space-between space-around stretch |
ex /* 텍스트를 화면 중앙에 배치하기 */
body { ...
display: flex;
justify-content: center;
align-items: center; }
5) CSS 그리드 레이아웃
| 기본형 | 설명 | 속성값 |
| display: 속성값 | 그리드 컨테이너를 지정 | grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치 inline-grid : 컨테이너 안의 항목을 인라인 레벨 요소로 배치 |
| grid-template-columns: n grid-template-row: n |
컬럼의 갯수와 너비 지정 행의 갯수와 높이 지정 |
px : 크기를 지정할 때 사용하는 단위 fr : 상대적인 크기 지정하는 단위 ex1 너비가 같은 3개 컬럼 -> 1fr 1fr 1fr ex2 2:1:2로 배치하려면 -> 2fr 1fr 2fr repeat( ) : 값의 반복을 표시 ex3 repeat(3, 1fr) minmax( ) : 최솟값과 최댓값 지정 ex4 minmax(100px, auto) |
| grid-column-gap: n grid-row-gap: n grid-gap: n |
컬럼과 컬럼 사이 간격 지정 행과 행 사이 간격 지정 컬럼과 줄 사이 간격 한꺼번에 지정 |
px나 rem 등 단위 사용 가능 |
| grid-template-areas | 영역에 이름 지정 | 한 줄에 들어갈 템플릿 영역은 큰따옴표("")로 묶기 빈 영역은 마침표(.) 넣기 |
ex /* 너비가 같은 컬럼 3개를 100px 높이로 3단 지정하고 이름 부여 */
#wrapper {
display: grid;
grid-template-column: repeat(3, 1fr);
grid-template-row: repeat(3, 100px);
grid-template-areas:
"box1 box1 box1"
"box2 box3 box3"
"box2 . box4";
}
