[CSS] CSS 정리

Stack/CSS

[CSS] CSS 정리

7ingout 2022. 4. 6. 09:49

- html 마크업 언어
<div title="안녕하세요"></div>

- css 표현 언어
선택자 { 속성:속성값; 속성:속성값; }

* css 적용
1) 내부 스타일 시트
<head>태그 안에 <style>태그를 사용
<style>
</style>

2) 외부 스타일 시트
style.css 생성 후 <head>안에 <link>태그를 사용하여 불러와서 사용
<link href="css/style.css" rel="stylesheet">

3) 인라인 (지금은 거의 안씀)
html요소 내부에 sthle 속성을 사용하여 css를 적용
ex><div style="속성:속성값;"></div>

* 선택자
1) tag 선택자: 태그명으로 선택
ex> div { color: red; }

2) id 선택자: id명으로 선택
ex> #box2 { color: red; }

3) class 선택자: class명으로 선택
ex> .box { color: red; }

<div>div1</div>
<div id="box2" class="box">div2</div>
<div class="box">div3</div>

* 텍스트 관련 스타일 속성
1) color: 텍스트의 색상을 설정
body { color: red; }
body { color: rgb(255, 0, 0); }
body { color: #ff0000; }

2) letter-spacing: 글자 사이의 간격을 설정
div { letter-spacing: 10px; }

3) text-indent: 단락의 첫줄에 들여쓰기
div { text-indent: 30px; }

4) text-align: 텍스트의 수평방향 정렬

속성값: left / right / center

div { text-align: center; }

5) text-decoration: 텍스트에 효과를 설정하거나 제거

속성값: overline / line-through / underline / none

div { text-decoration: underline; }

6) line-height: 텍스트의 줄간격을 설정

div {line-height: 1.5; } (비율로 주는 것! 글자 크기의 1.5배)

7) text-transform: 영문자의 대소문자 설정

속성값: uppercase / lowercase / capitalize

8) text-shadow: 텍스트에 그림자 효과를 설정

x-offset y-offset blur color

h3 { text-shadow: 5px 5px 5px red; }

9) font-family: 글꼴을 설정

serif: 삐침이 있는 서체 (명조체)

sans-serif: 삐침이 없는 서체 (고딕체)

div { font-family: "나눔 고딕", "맑은 고딕", serif; }

10) font-style: 글자에 이탤릭체 사용하기를 설정 (글자를 기울이기)

속성값: normal / italic / oblique (oblique를 지원하는 웹브라우저가 거의 없어서 안씀)

div { font-style: italic; }

11) font-weight: 텍스트를 얼마나 두껍게 표현할지를 설정

속성값: lighter / normal / bold / bolder

100, 200, 300, ..., 900

12) font-size: 텍스트의 크기를 설정

h2 { font-size: 26px; }

* css 색상값
1) 색상명 red, yellow, ...

2) 16진수 표현법- RGB 색상값을 각각 16진수로 변환한 것 (00~ff)
10 -> a / 11 -> b / 12 -> c / 13 -> d / 14 -> e / 15 -> f
ex> 녹색 #00ff00

3) RGB 색상값으로 표현 (0~255)
rgb(r, g, b)
rgb(255, 0, 0)
rgb(0, 255, 0)

4) RGBA 0~1 0 0.1 0.2 0.3 (A는 투명하게 만들어 주는 아이)
rgba(255, 0, 0, 0.5)

⭐ 박스 모델 ⭐

1) padding: 요소의 내부여백 설정

* left, right, top, bottom 각각 설정

padding-left: 20px;

padding-right: 30px;

padding-top: 50px;

padding-bottom: 60px;

* 전체 설정

padding: 30px;

padding: 20px 30px; (20px- top과 bottom / 30px- left와 right)

padding: 20px 30px 40px; (20px- top / 30px- left&right / 40px- bottom)

padding: 20px 30px 40px 50px ; (20px- top / 30px- right / 40px- bottom / 50px- left)

2) margin: 요소의 바깥여백 설정

margin-left: 20px

margin-right: 20px;

margin-bottom: 20px;

margin-top: 20px;

margin: 20px;

margin: 10px 20px;

3) width: 너비 설정

4) height: 높이 설정

5) border: 테두리 설정

border-color: 테두리 색상 설정

border-style: 테두리 스타일 설정

// 속성값

solid: 실선으로 지정

dotted: 점선으로 지정

dashed: 긴 점선으로 지정

double: 이중 실선으로 지정

border-width: 테두리 두께를 지정

div { border-color: black; border-style: solid; border-width: 2px; }

div { border: black solid 2px; }

요러케 말고

table { border-collapse: collapse; }

td { border: 1px solid #ccc; }

요러케 쓸거임