CSS는 HTML이 표현되는 방법을 결정하며 웹페이지를 꾸미는 역할을 담당한다.
CSS를 통해 더 나은 사용자 경험(UX, User Experience)를 제공할 수 있다.
HTML파일에 CSS파일 추가
<link>
태그 안에서 href 속성을 통해 파일을 연결<link rel="stylesheet" href="layout.css" />
✅ <link>
태그는 <head>
영역에 추가하며 외부 문서와 연결시키는 태그이다.
CSS 문법
CSS는 선택자(Selector), 선언블록(Declaration Block)으로 이루져 있다. 선언 블럭안에는 속성명(Property) : 속성값(Value)로 구성된 선언(Declaration)이 있는데 선언들은 선언구분자(;)로 구분된다.
선택자(Selector)
id | class |
---|---|
# 을 사용해 선택 | . 사용을 사용해 선택 |
한 문서에 하나의 요소에만 적용 | 한 문서의 여러 요소에 적용 가능 |
✅ id 선택자 : #
#sidebar {
color: blueviolet;
}
✅ class 선택자 : .
.posting {
background-color: antiquewhite;
width: 450px;
height: 500px;
}
✅ 그룹 선택자 : ,
header, footer {
font-size: large;
text-align: center;
padding: 0.3em 0;
background-color: #4a4a4a;
color: #f9f9f9;
}
✅ 자손 결합자 : 공백
.posting img {
width: 400px;
height: 300px;
object-fit: cover;
}
✅ 자식 결합자 : >
.postlist > .pl-element > .posting {
background-color: antiquewhite;
width: 450px;
height: 500px;
}
✅ 일반 형제 결합자 : ~
.posting-title ~ .posting-summary {
overflow: auto;
}
⇒ posting-title클래스와 같은 부모를 공유하는 posting-summary클래스를 선택
✅ 인접 형제 결합자 : +
menulist + .linkSection {
color: slategray;
}
⇒ menulist클래스와 인접 형제인 linkSection클래스를 선택
폰트
정렬
단위
반응형 웹(Responsive Web)
박스 모델
block | inline-block | inline | |
---|---|---|---|
줄바꿈 여부 | 가능 | 불가능 | 불가능 |
기본 너비(width) | 100% | 컨텐츠의 크기 | 컨텐츠의 크기 |
width, height 사용 여부 | 가능 | 가능 | 불가능 |
박스 구성 요소
border(테두리)
p {
border: 1px dashed salmon;
border-radius: 30px;
box-shadow: 10px 5px 5px red;
}
✅ border 속성 순서 : 두께(border-width), 스타일(border-style), 색상(border-color)
+border-radius : 꼿짓점을 둥글게 만드는 속성
+box-shadow : 그림자를 만드는 속성
margin(바깥 여백)
요소와 요소 사이
p {
margin: 10px 20px 30px 40px;
}
✅ margin 속성 순서 : 시계방향(top, right, bottom, left)
padding(안쪽 여백)
요소와 컨텐츠 사이
p {
padding: 10px 20px 30px 40px;
}
✅ margin과 동일
overflow
컨텐츠의 크기가 박스의 크기보다 커서 컨텐츠가 박스 밖으로 벗어나는 경우 처리할 수 있는 속성으로 박스 안에 스크롤을 추가하거나 표시하지 않아 크기에 맞게 컨텐츠를 조절해준다.
p {
overflow: auto;
}
border-box
* {
box-sizing: border-box;
}
❗️content-box는 여백, 테두리를 포함하지 않은 크기로 계산하기 때문에 boder-box 계산법을 권장
✅ 선택자 정보 사이트
https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Selectors