공부 내용: mdn web docs - CSS 기초
CSS란
-
웹페이지 꾸미기 위해 작성하는 코드
-
Style sheet 언어
-
html 문서에 있는 요소들에 선택적으로 스타일 적용 가능함
-
스타일시트 문서 작성
p { color: red; } -
html문서에서 적용
<head> ... <link href="styles/style.css" rel="stylesheet" type="text/css"> </head>
CSS의 ruleset 해부
전체 구조는 rule set 혹은 rule이라고 불린다.
- selector(선택자): 맨 앞에 있는 HTML요소 이름
- Delcaration(선언):
color : red와 같은 단일 규칙 - Property(속성): HTML을 꾸밀 수 있는 방법
- Property value(속성 값)
- 각각의 rule set은 반드시
{}로 감싸야한다. - 각 선언마다 세미콜론을 사용해야 한다.
p { color: red; width: 500px; border: 1px solid black; }
여러 요소 선택하기
p,li,h1 {
color: red;
}선택자의 종류
| 선택자 이름 | 선택하는 것 | 예시 |
|---|---|---|
| 요소 선택자 (때때로 태그 또는 타입 선택자라 불림) | 특정 타입의 모든 HTML 요소. | p 를 선택 |
| 아이디 선택자 | 특정 아이디를 가진 페이지의 요소 (주어진 HTML 페이지에서, 아이디당 딱 하나의 요소만 허용됩니다). | #my-id < p id="my-id" > 또는 < a id="my-id" > 를 선택 |
| 클래스 선택자 | 특정 클래스를 가진 페이지의 요소 (한 페이지에 클래스가 여러번 나타날 수 있습니다). | .my-class < p class="my-class" > 와 < a class="my-class" > 를 선택 |
| 속성 선택자 | 특정 속성을 갖는 페이지의 요소. | img[src] < img src="myimage.png" > 를 선택하지만 < img > 는 선택 안함 |
| 수도(Pseudo) 클래스 선택자 | 특정 요소이지만 특정 상태에 있을 때만, 예를 들면, hover over 상태일 때. | a:hover < a> 를 선택하지만, 마우스 포인터가 링크위에 있을 때만 선택함 |
폰트 적용하기
- woff 파일: 용량 적고 간결함
@font-face {
font-family: 'nanumsquare'; /* 임의로 이름 설정 */
src: url('fonts/NanumSquareR.woff') format('woff');
}
html {
font-size: 15px; /* px 은 'pixels' 를 의미합니다: 기본 글자 크기는 현재 10 pixels 높이입니다. */
font-family: nanumsquare;
}
h2{
font-size: 50px;
text-align: center;
}
p, li{
font-size: 16px;
line-height: 2;
letter-spacing: 1px;
}박스
width(한 요소의 너비)background-color, 요소의 콘텐츠와 padding 의 배경 색color, 한 요소의 콘텐츠 색 (일반적으로 글자색)text-shadow: 한 요소 안의 글자에 그림자를 적용display: 요소의 표시 형식을 설정합니다 (이것에 대해선 아직 걱정하지마세요)
페이지 색 바꾸기
html {
background-color: #00539F;
}body 외부 정렬
body {
width: 600px;
margin: 0 auto;
background-color: #FF9500;
padding: 0 20px 20px 20px;
border: 5px solid black;
}width: 600px;body가 항상 600 pixels 의 너비를 갖도록 강제margin: 0 auto;여백- 0: 위아래 여백
- auto : 좌우 간격이 같게 하는 특별한 값
background-color: #FF9500;요소의 배경색padding: 0 20px 20px 20px;- 상단, 우측, 하단, 좌측 순서로 padding 값을 설정(12시부터 시계방향)
border: 5px solid black;- body 모든 면의 border를 5 pixels 두깨의 실선으로 설정
