Chapter 8.
Chapter 8-1
CSS
- Cascading Style Sheets
- 일반적으로 style.css라는 파일명 사용
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>멋쟁이사자처럼</title>
<meta property="og:title" content="멋쟁이사자처럼_2023">
<meta property="og:description" content="한남대 멋사 백엔드 강의입니다">
<meta property="og:image" content="./thumbnail.jpg">
<link rel="stylesheet" href="./style.css">
</head>
(하략)style.css
h1 {
color: brown;
}
css를 통해 적용한 style이 반영된 모습
Chapter 8-2
Box-Sizing : 박스에 적용된 사이즈의 기준을 정하는 것
- content-box : 컨텐트 영역에만 사이즈 적용, 요소 사이즈에 패딩과 테두리 영역은 포함하지 않음 / 생각했던 요소의 크기 + alpha
- border-box : 테두리의 끝까지의 크기를 요소의 사이즈로 간주(일반적으로 생각하는 영역의 크기)
이러한 문제를 해결하기 위해서 테두리를 포함해서 사이즈를 적용
기본값은 내용이 차지하는 영역에만 사이작 적용되는 content-box에 universal selector로 전체 영역을 셀렉하는 border-box 적용 필요
* {
box-sizing: border-box;
}Chapter 8-3
h1 : 선택자(selector) 어떤 HTML 요소에 스타일을 적용할 지 선택
color : 속성(property) 스타일을 부여할 항목
brown : 값(value) 속성에 대한 값
color: brown; : 선언(declaration) 속성과 값을 합한 부분
h1{
color: brown;
} : 규칙(rule) 선택자와 선언부의 조합CSS 선택자
<h1>HTML&CSS 강의 - 멋사 개발 파트</h1>
<div>
<p class="coding">멋쟁이사자처럼은 여러분을 환영합니</p>
<h2 class="coding">멋쟁이사자처럼 - 한남대학교</h2>
<h2 id="original">벡엔드 파트 교육</h2>
</div>* : 요소전체에 적용(Universal)
그러나 사용하는 것을 추천하지 않음,
클래스를 영역별로 두어서 동일한 성격의 요소를 작업하는 것이
유지보수나 수정에 도움이 된다
* {
color: brown;
}
같은 내용의 css 선언 여러 태그에 설정하는 경우
h2, p {
color: brown;
}
특정 클래스에 해당되는 요소에 대해 적용
클래스(같은 성격의 그룹)
.coding {
color: brown;
}
특정 태그명을 가지면서 특정 클래스를 가진 태그 설정
h2.coding {
color: brown;
}
특정 아이디에 해당되는 요소에 대해 적용(id는 유일해야 한다) / 잘활용하지는 않음
#original {
color: brown;
}
특정 아이디가 명시된 특정 태그에 대해 적용
h2#original {
color: brown;
}
부모 요소 내의 특정 자식 요소(부모-div, 자식-p)
div p {
color: brown;
}CSS 주석
HTML은 주석은 화면에 보이지 않도록 처리해야하는 역할
해당 규칙이 적용되지 않도록하는 역할
/* h1 {
color: brown;
} */Chapter 8-4
CSS 특성
폭포수(계단식), 상속, 우선순위
Cascading(폭포수)
동일한 태그를 건드리는 아래에 부분이 있는지 확인 필요
Inheritance(상속)
부모 요소의 CSS 규칙을 자식요소가 상속하여 적용
<h1>HTML&CSS 강의 - 멋사 개발 파트</h1>
<div>
<p class="coding">멋쟁이사자처럼은 여러분을 환영합니</p>
<h2 class="coding">멋쟁이사자처럼 - 한남대학교</h2>
<h2>벡엔드 파트 교육</h2>
</div>
div {
color: brown;
}
이렇게 하면 div 아래의 자식 요소들이 모드 적용만약 자식요소가 CSS 규칙을 가지고 있따면 이를 우선하여 적용
div {
color: brown;
}
p.coding {
color: blue;
}
이렇게 되면 class가 coding 자식요소들은 blue 색상으로 나오고 나머지는 부모요소에서 상속받은 brown 색상으로 나온다 Specitify(우선순위)
CSS 규칙이 서로 충돌할 때 어떤 것을 적용할지
<h1>HTML&CSS 강의 - 멋사 개발 파트</h1>
<div>
<p class="coding">멋쟁이사자처럼은 여러분을 환영합니</p>
<h2 class="coding">멋쟁이사자처럼 - 한남대학교</h2>
<h2 style="color: blue;">벡엔드 파트 교육</h2>
</div>
h2 {
color: brown;
}
이렇게 하면 1000인 style 속성이 더 크기에 아래 tag의 요소는 무시가 된다
그러나 남용을 하면 수정하기가 힘들다(가급적 CSS를 통해 하는 것이 수정에 용이)
XD