CSS 기본 익히기
02. CSS 문서 사용하기
HTML에 CSS를 더하려면
HTML 문서에 CSS를 적용하는 방법
- 인라인 스타일: 태그에 직접 기술하기
- 스타일 태그: HTML 문서에 스타일시트를 위한 태그를 추가하여 기술하기
- 문서 간의 연결: 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
-> 연결을 위해 <head> 블록 내에 <link>라는 태그 사용
<link href=".style.css" rel="stylesheet">인라인 스타일은 우선적으로 적용된다.
인라인 스타일이 아닌 경우, 나중에 쓰여진 선언문이 적용된다.
03. 선택자 기본편
유형별 선택자
| 선택자 | 의미 | 사용 기호 |
|---|---|---|
| 전체 선택자 | 문서 내 모든 요소 선택 | * |
| 태그 선택자 | 특정 태그의 모든 요소 선택 | 태그명 |
| 클래스 선택자 | 특정 클래스값이 지정된 모든 요소 선택 | .클래스값 |
| 아이디 선택자 | 특정 아이디값이 지정된 요소 선택 | #아이디값 |
| 그룹 선택자 | 여러 유형의 선택자를 한꺼번에 선택 | 선택자, 선택자, 선택자... |
선택자 우선순위: 쓰여진 순서에 관계없이 적용되는 순위
1. 아이디 선택자
2. 클래스 선택자
3. 태그 선택자
04. 박스 모델
박스 모델에서는 콘텐츠 영역의 크기를 조절할때 width와 height를 사용
-> 사용 단위: px, % 등
%: 내가 속한 영역을 기준으로 백분율 계산, 상대적 크기
-> 내가 속한 영역에 관련 값이 있어야 적용 가능!
-> <body>에는 높이 기본값이 없음, height에 %가 적용이 안됨
-> <body>에는 너비 기본값은 화면의 크기, width에 % 적용 됨
05. 테두리 스타일
단축속성이란 여러개의 속성값을 한번에 정의할 수 있는 속성
단축 속성은 공백으로 속성값을 서로 구분
border의 단축 속성을 width, style, color 순으로 작성.green{ border: 3px solid green; }
- border-radius에 4개의 값을 주면 모서리 좌상단부터 시계방향으로 곡률을 줄 수 있음
06. 여백 다루기
상하좌우 여백 개별 지정
- margin: 10px; -> 여백의 모든 면에 동일한 값 지정
- margin: 10px 20px; -> 위아래 여백, 왼쪽오른쪽 여백 값 따로 지정
- margin: 10px 20px 30px -> 위, 왼쪽오른쪽, 아래 여백 값
- margin: 10px 20px 30px 40px -> 위, 오른쪽, 아래, 왼쪽 여백 값 (위쪽부터 시계방향)
접미사를 사용해서도 여백을 줄 수 있음
-> top, bottom, left, right
box-sizing
padding을 사용하면 요소가 기존에 정의한 콘텐츠 영역의 크기보다 커지게 되는데 이를 원치 않을 경우 box-sizing을 사용
- content-box: 기본값, width와 height가 콘텐츠 영역을 지정하고 여백이나 테두리 크기가 추가되면 요소가 그 값만큼 그대로 커짐
- border-box: width와 height가 padding과 border 크기를 포함해서 콘텐츠 영역 크기를 지정, 여백을 추가하더라도 내가 정해놓은 width나 height보다 요소가 커지지 않았으면 할때 사용
07. 배경 다루기
background-clip
배경이 적용되는 범위
- border-box, padding-box, content-box
background-repeat
배경 사이즈가 요소 사이즈보다 작으면 기본적으로 바둑판 형식으로 여러번 보여짐
- background-repeat: no-repeat -> 배경이 한번만 보여짐
- background-repeat: repeat -> 기본값, 바둑판 형식
- background-repeat: repeat-x -> 가로 방향으로 반복
- backgroung-repeat: repeat-y -> 세로 방향으로 반복
background-origin
배경이 시작되는 위치
- border-box, padding-box, content-box
background-position
배경이 보여질 위치
- top, bottom, left, right, center
- 키워드 조합 가능, e.g., 좌상단: left top, 우하단: right bottom
- px 단위로 위치를 설정하면 시작위치(origin) 부터 설정한 값만큼 떨어진 곳에서 보여짐
08. 색깔을 지정하는 다양한 방법
rgb 함수
빨강, 초록, 파랑 각 색상의 비율을 지정해 색상을 결정
rgb는 빛의 삼원색, 모두 100이면 흰색, 모두 0이면 검정색
- rgb(빨강, 초록, 파랑)
- rgba(빨강, 초롱, 파랑, 투명도)
hsl 함수
색조(hue), 채도(saturation), 조도(lightness)를 지정해 색상을 결정
색조는 색을 나타내는 각도 사용, 조도가 100이면 흰색, 0이면 검정색
- hsl(색조, 채도, 조도)
- hsla(색조, 채도, 조도, 투명도)
16진수 값을 사용하는 방법
- #RRGGBB
- #RRGGBBAA
09. 택스트 꾸미기
글꼴 바꾸기
p{
font-faily: Arial, Helvetica, sans-serif;
}font-family 속성에는 한 개 이상의 글꼴을 지정할 수 있음
먼저 쓰여진 글꼴이 우선 적용되고 만약 Arial을 지원하지 않는 환경이라면 Helvetica를 적용한다
- 웹 폰트란?
컴퓨터 시스템에 해당 폰트가 설치되어 있지 않아도 웹 서버로부터 이를 제공받아 사용할 수 있는 '웹 전용 글꼴'
상대 단위
- rem: 루트 요소(html 태그)의 글자 크기를 배수로 계산해 적용하는 상대 단위
- em: 부모 요소의 글자 크기를 배수로 계산해 적용하는 상대 단위
font-weight
글꼴 두께, 100~900 사이에서 100단위로 설정
text-align
글자 정렬
- left, right, center, justify(양끝정렬)
