230410 day06 개념 정리

html 
태그, 속성, 요소 (요소가 제일 큰 묶음)
<a href="http://naver.com">네이버바로가기</a>
<img src="green.jpg" alt="이미지설명글" title="이미지제목글">
블럭태그 - 웹브라우저가 display속성을 block으로 지정
div, p, ul, li, ol, h1~h6, dl, dt, dd
인라인태그
span, a, strong, em, img, input, select

css
선택자 { 속성1: 속성값1; 속성2: 속성값2; 속성3: 속성값3; }

html에 적용하기
1) 내부스타일시트
<style> 
	스타일 작성 
</style>

2) 외부스타일시트
style.css파일에 스타일 작성
head태그 안에 작성 
<link rel="stylesheet" href="style.css" />

3)인라인스타일
<div style="color:red; font-size: 24px;"></div>

text 관련 스타일
- color 글자 색상
- font-size 글자 크기
- font-style 글꼴 기울이기 (보통은 normal로 기울이기 제거로 사용)
- font-weight 글자 두께 (normal, bold, bolder)
100~900, 100~300 가늘게 400~600 보통 700~900 두껍게
- text-decoration 글자 꾸미기 (underline, none)
- line-height 행 높이 (줄의 높이)
- text-align 정렬 (left, center, right)

layout 
- display
block, inline, inline-block, none
- margin : 10px상 20px오 30px하 40px좌
margin-left, margin-right, margin-bottom, margin-top
- padding
padding-left, padding-right, padding-bottom, padding-top
- border
border-left, border-right, border-bottom, border-top
border-width, border-color, border-style
- float
float로 지정한 요소가 흐름으로부터 빠져 
텍스트 및 인라인 요소가 그 주위를 감싸는 
자기 컨테이너의 좌우측을 따라 배치되어야함을 지정
- clear 
clear left, clear right, clear both
- before, after : content 요소 앞이나 뒤에 추가됨
요소::after { contnet:""; }
요소::before { content:""; }

#(기억하기)float을 적용했을 때 적용한 요소의 부모 요소에게 
clearboth 클래스를 지정해주면 높이 적용 가능 
-> .clearboth::after { content: ""; display: block; clear: both; }
부모요소 class="clearboth"
: block요소를 추가 후 clear속성을 지정함 

#:hover 
- 마우스를 올렸을 때 스타일 지정
menu1 menu2 menu3 menu4

li { color: #333; }
li:hover { color: orange; }

margin: auto; 블럭 태그를 가운데로
text-align 글자, 인라인, 인라인블럭을 가운데로

인라인 요소를 가운데로
div { text-align: center; }

<div>
	<h2>여러분</h2>
</div>