1. CSS
1-1. CSS란?
- 웹 페이지를 디자인하기 위해 사용하는 언어
1-2. CSS 참조 방식
-
인라인 방식
태그의 속성 방식으로 사용
한눈에 보기 힘들며, 재사용이 불가능하다.
ex) <div style="color: chocolate; background-color: bisque;">hello</div> -
내장 방식
head태그 내부에 style 태그를 선언하여 사용한다.
한 문서에서 같은 스타일이 가능하지만 다른 HTML 문서에서는 재사용이 불가능하다.
<style>
div {
color: chocolate;
background-color: bisque;
}
</style>- 링크 방식
별도의 CSS 파일을 만들어서 HTML 파일에서 CSS 파일을 불러와서 사용한다.
ex) link rel="stylesheet" href="./css/css_1.css">
💡 css 참조 방식의 기본 우선 순위
기본 룰은 가능 늦게 읽히는 것이 우선으로 적용된다.
인라인 방식이 무조건 우선이고, 내장 방식과 링크 방식은 늦게 쓰여진 것이 우선!
예외적으로 (!important)가 설정되면 가장 중요한 속성이 되어 해당 속성의 우선 순위가 가장 높아진다.
1-3. 선택자(Selector)
📢 스타일을 적용하고자 하는 HTML 요소를 선택하기 위해 CSS에서 제공하는 수단
(1) 단일 선택자
✔️ 전체 선택자 : 모든 요소를 선택
* {
color: red;
}✔️ 태그 선택자 : 태그 이름으로 요소 선택
li {
color: red;
}✔️ Class 선택자 : HTML class 속성의 값으로 요소 선택
✔️ Id 선택자 : HTML id 속성의 값으로 요소 선택
(2) 복합 선택자
📢 단일 선택자만으로는 선택이 불가능한 경우에 사용
✔️ 하위 선택자
div 태그의 하위 요소 중 class="orange"인 요소를 모두 선택
✔️ 자식 선택자 (>)
ul 태그의 자식 요소 중 class="orange"인 요소 모두 선택
✔️ 인접 형제 선택자 (+)
h1 + ul : h1의 형제 중 h1 바로 뒤에 오는 ul을 선택
✔️ 일반 형제 선택자 (~)
h1 ~ ul : h1의 형제 중 h1 뒤에 나오는 ul 모두 선택
(3) 가장 클래스 선택자
📢 사용자의 행동에 따라 변화하는 가상 상황에 따라서 요소 선택시 사용되는 선택자
✔️ hover : 선택자 요소에 마우스 커서가 올라가 있는 동안 선택
a:hover {
color: red;
}✔️ active : 선택자 요소에 마우스를 클릭하고 있는 동안 선택
a:active {
color: red;
}✔️ focus : 선택자 요소가 포커스 되면 선택
input:focus {
background-color: orange;
}✔️ 가상 선택자
ABC:first-child: 선택자 ABC가 형제 요소 중 첫째라면 선택ABC:last-child: 선택자 ABC가 형제 요소 중 막내라면 선택ABC:nth-child(n): 선택자 ABC가 형제 요소 중 (n)째라면 선택ABC:not(XYZ): 선택자 XYZ가 아닌 ABC 요소 선택
(4) 가장 요소 선택자
📢 선택 된 요소의 앞, 뒤에 별도의 content를 삽입하는 선택자로 반드시 content라는 속성을 사용해야 한다.
✔️ before : 선택자 요소의 내부 앞에 content를 삽입
.box::before {
content: "앞!";
}✔️ after : 선택자 요소의 내부 뒤에 content를 삽입
.box::after {
content: "뒤!";
}💡 쇼핑몰 페이지 메뉴에 Hot, 추천 등의 기능을 만들 때 주로 사용
(5) 속성 선택자
✔️ [ABC] : 속성 ABC를 포함한 요소 선택
[disabled] {
color: red;
}✔️ [ABC="XYZ"] : 속성 ABC를 포함하고 값이 XYZ인 요소 선택
[type="password"] {
color: red;
}1-4. CSS의 우선순위
!important > 인라인 스타일 > Id 선택자 > class/속성/가상 선택자 > 태그 선택자 > 전체 선택자
2. CSS 박스 모델
CSS 박스 모델은 두가지로 개발 초기 단계에서 두 속성 값 중 하나로 결정하는 것이 좋다.
그렇지 않고 개발을 하는 경우 요소 크기 계산이 매우 복잡해진다🤮🤮🤮
2-1. box-sizing 속성
(1) content-box : 콘텐츠 영역을 기준으로 크기를 정함 (only content)
(2) border-box : 테두리를 기준으로 크기를 정한 (content + padding + border)
* 이 문서는 [SeSAC X 코딩온] 풀스택 웹 개발자 과정 3회차 강의 자료 내용을 일부 포함하고 있습니다. *
