- 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="1" cellspacing="0" cellpadding="10">
요러케 말고
table { border-collapse: collapse; }
td { border: 1px solid #ccc; }
요러케 쓸거임
'Stack > CSS' 카테고리의 다른 글
| [CSS] display 복습 끄적끄적 (0) | 2022.04.08 |
|---|---|
| [CSS] 선택자 / display 연습 (0) | 2022.04.07 |
| [CSS] CSS 복습 끄적끄적 (0) | 2022.04.07 |
| [CSS] fontstyle / box / table 연습 (0) | 2022.04.06 |
| [CSS] CSS 끄적끄적 (0) | 2022.03.18 |