CSS의 기본개념
CSS란 무엇인지?
- Cascading Style Sheets
- 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어를 사용
◽ Cascading : 연속화 ← cascade : 폭포
- 역할 : 우리가 작성한 HTML의 스타일, 레이아웃 등을 꾸미는 역할
- 재사용성 : CSS를 한 번 작성해서 여러 HTML에 재사용 가능 → 반복 작업을 줄일 수 있음
작성방법
header {
color : royalblue;
}
1) 개별로 인라인 스타일 적용
<section>
<h1 style="color:red;">Hello</h1>
<h2 style="color:red;">Hello</h2>
<p style="color:red;">Hello</p>
</section>2) 태그 선택자 적용
<section>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</section>h1{color:red;}
h2{color:red;}
p{color:red;}3) 그룹선택자( , )로 적용
<section>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</section>h1,
h2,
p {color:red;}4) 상속 이용
<section>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</section>section {color:red;}
주석
/* 주석 */CSS 선택자
전체 선택자 ( * )
- html를 포함한 HTML 문서 내의 모든 요소를 선택
- * (별표 / 에스터리스크)를 사용하여 선택
* {
margin:0;
padding:0;
}
타입(유형) 선택자 (태그 선택자 / 요소 선택자)
- 특정 태그를 선택
h1 {
font-weight:bold;
}
p {
font-size:24px;
}
아이디 선택자 ( # )
- (⭐) HTML 페이지 내에 id는 유일해야 함
- JS / 해시 링크와 함께 사용되는 경우가 많음
- 재사용성이 떨어짐
<header id="header">
</header>#header {
padding:10px;
}
클래스 선택자 ( . )
- 한 페이지에 여러 개가 존재 가능
- 재사용성이 높음
<h1 class="fc-red">hello world</h1>
<p>Lorem ipsum dolar sit amt</p>
<p class="fc-red">Lorem ipsum dolor sit amt</p>.fr-red {
color:red;
}
💡 id / class명 작성 시 주의점
- 숫자로 시작 X
◽ .1class (x)
◽ .class1 (o)
- 하이픈(-) / 언더바(_) / 문자로만 시작가능
◽ .-class (o)
◽ ._class (o)
◽ .%class (x)
특성선택자 ( [ ] )
- 주어진 특성을 가진 모든 요소를 선택
[type="button"] {
border:0;
cursor:pointer;
}
[class^="btn"] {
color:#fff;
background:royalblue;
}속성 선택 문법기호
- class를 포함하며 속성값이 btn으로 시작하는 요소 선택
[class^=btn]
- class를 포함하며 속성 값이 btn으로 끝나는 요소 선택
[class$=btn]
- class를 포함하여 속성 값이 정확히 btn이거나 btn을 포함되는 요소 선택
[class*=btn]
그룹 선택자 ( , )
h1 {font-weight:bold;}
h2 {font-weight:bold;}
h3 {font-weight:bold;}
h4 {font-weight:bold;}
h5 {font-weight:bold;}
h6 {font-weight:bold;}h1, h2, h3, h4, h5, h6 {font-weight:bold;}
복합 선택자
<html>
<body>
<p>p</p>
<p>p</p>
<p>p</p>
<section>
<div><p>p</p></div>
<p>p</p>
<p>p</p>
</section>
<p>p</p>
<p>p</p>
<p>p</p>
</body>
</html>
1) 자손 선택자 ( )
- 자식, 자손 모두를 선택
- 공백, 띄어쓰기를 통해 구분
section p{
font-weight:bold;
}
2) 자식 선택자 ( > )
- ( > )를 통해 구분
- 직계자손만 선택
section > p {
color:royalblue;
}
3) 일반 형제 선택자( ~ )
- ~ 를 통해 구분
- 뒤에 나오는 형제만 선택
section ~ p {
text-decoration:underline;
}
4) 인접 형제 선택자 ( + )
- +를 통해 구분
- 바로 뒤에 인접한 형제만 선택
section + p {
background:yellow;
}CSS 상속
상속 (Inheritance)
- CSS에는 상속되는 속성이 있고, 상속되지 않는 속성이 존재
- section의 color속성은 자식인 h1, h2, p에게 상속 됨
- width, height, margin, padding, border와 같은 것은 상속 X
<section>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</section>section {
color:red;
border:5px solid pink;
}
속성
- inherit : 선택한 요소에 적용된 속성값을 부모와 동일하게 상속받음
- initial : 브라우저 기본 스타일 속성을 따르게 함
- unset : 속성=자연 값 / 자연적으로 상속되면 inherit 된 것처럼 아니면 initial처럼 작동
<section>
<h1>hello</h1>
<h2>hello</h2>
<p>hello</p>
</section>section {
color:red;
border:5px solid pink;
}
h1 {
border:inherit;
}
- button, input 요소처럼 form 관련 태그들은 상속받지 X
◽ 브라우저별로 적용된 스타일이 있기 때문
<section>
<h1>Hello</h1>
<h2>Hello</h2>
<p>Hello</p>
<button>Hello</button>
<input type="text" value="hello">
</section>section {
color: red;
border: 5px solid pink;
}
h1 { border: inherit; }
section 내의 h1 / h2의 크기가 같아 보이는 이유
- section / article / aside / nav 안에서도 h1 / h2의 크기가 동일
- HTML Living Standard 표준으로 지정되어 있기 때문
텍스트 꾸미기
색상
- 키워드(red, blue), HEX(# + 16진수 표기법), rgb(), rgba(), hsl(), hsla() 등 다양한 방법으로 표기
- 보통 HEX을 많이 사용
- 투명 값을 위해 rgba도 많이 사용
- transparent는 투명한 색을 의미
- 폰트 색상과 배경의 명도 대비 주의점
◽ 저시력 시각 장애를 위해 주의해야 함
◽ 최소한 4.5:1
currentcolor
- 부모에 color값이 있다면 상속으로 처리
div {color: sandybrown;}
p {
border: 1px solid currentColor;
}
글꼴 / 폰트
적용하는 다양한 방법
link
<!-- 사용예시1 : href 참고 -->
<head>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap" rel="stylesheet">
<style>
body {font-family: 'Noto Sans KR', sans-serif;}
</style>
</head>
import
/* 사용예시2 : url 참고 */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300&display=swap");
body{
font-family: "Noto Sans KR", sans-serif;
}
font-face
@font-face {
font-family: "Pretendard-Regular";
src: url("https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff") format("woff");
font-weight: 400;
font-style: normal;
}
body{
font-family: Pretendard-Regular, "Times New Roman", Dotum, "돋움", sans-serif;
}
폰트를 " "으로 묶은 것도 있고 그렇지 않은 것도 있는 이유
- 한글일 경우에는 " "를 사용
- 영문이지만 공백이 포함될 경우 " "를 사용
- 한글폰트의 한글 이름, 영문이름을 제대로 인식 못하는 경우를 대비해서 한글과 영문명을 같이 작성을 권장
- generic(sans-serif, serif와 같은 기본 폰트)인 경우 " "를 사용X
- 한글은 한글 폰트로, 영문은 영문폰트으로 나오길 원한다면, 영문폰트명, 한글폰트명 순으로 작성
웹 폰트 사이드
- 구글폰트 (https://fonts.google.com/?subset=korean¬o.script=Kore)
- 눈누 (https://noonnu.cc/)
출처 - 위니브(Weniv)
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240614 CSS-03 (0) | 2024.06.27 |
|---|---|
| [EST] 240613 CSS-02 (0) | 2024.06.26 |
| [EST] 240611 HTML-05 (0) | 2024.06.25 |
| [EST] 240610 HTML-04 (0) | 2024.06.25 |
| [EST] 240607 HTML-03 (0) | 2024.06.24 |
