CSS

html 그룹화 요소
<span> text 그룹화 -> inline
<div> elements 그룹화 -> block
  <p></p> 안쪽에 <div>를 넣을 수 없다

css 두가지 종류의 요소
inline : 어떤 문단이나 제목에 속해있어 새로운 줄로 생성되지 않는다 ex. <img>
  		 다음에 새로운 줄이 나오지 않는다
block : 여러 내용을 작성해도 별도의 줄로 마련된다 ex. <h1>, <ul>, <p>
		 다음에 새로운 줄이 나온다
div property -> width, height 이용하여 300px, 70% 등의 단위로 적용 가능
  		overflow 범위 밖으로 넘치는 내용 visible, hidden, auto 적용 가능
overflow-x, overflow-y 별도로 조절 가능

- 박스 모델
magin: 위쪽, 오른쪽, 아래쪽, 왼쪽} 여백 조절 px 단위
margin-right, margin-bottom 등으로도 사용가능
margin: auto 가운데 정렬
border: 크기, 종류, 색깔 순으로 적용 ex. 1px solid rgv()
border-top 으로 사용가능
border 종류: groove, double, ridge, dotted, dashed etc
padding(안쪽 여백)

position: realative 일반적인 배치
top: / bottom: / left: / right: 속성으로 위치 설정
position: absolute 다른 그림을 덮어버림
z-index: 숫자 (활용하여 그림 순서 설정 가능)
position: fixed 브라우저 그 위치에 고정됨(스크롤 내리더라도)

float: 속성 -> 한 요소를 다른 요소 주변에 띄울 수 있다.
  이미지 주변에 글을 두를게 할때 적합 ex.left, right
width로 div 크기 조절 글문단 분리 배치 가능
clear: 속성 ex. both, left, right
  (float, clear 차이점??)

class="명칭(1) 명칭(2)" - spacebar를 끼고 두개의 클래스 사용 가능
태그이름 점 클래스이름 - 순서로 해당 요소를 세부적으로 선택할 수 있다
ex) p.waring
- 하위 선택자(태그, 클래스 이름이 모두 같아 위 방식을 사용할 수 없을때)
<p><strong class="a"> -> p .a{}
<li><strong class="a"> -> li stong{}
<ul class="b"><li><strong class="a"> -> ul.b li stong{}
두개의 규칙을 하나로 바꿀때 ex) h1, h2{} (공백이 아닌 쉼표!!!!!!)
-> 항상 같은 규칙이고 싶을때만 사용하는걸 권유
가상클래스
 : 웹페이지 구조의 일부가 아닌 정보로 요소를 선택할때 사용합니다
a:link -> 아직 방문하지 않은 페이지
a:visited -> 이전에 방문했던 페이지
a.hover -> 마우스가 올라와있는 요소(모든 브라우저에서 작동하진 않는다 
a.active -> 현재 활성화된 요소
a.focus -> tab
- 우선순위(specificity)
id > class > element -> 동일한 순위라면 결국 나중에 배치된 규칙이 적용된다
- 우선순위 점수 높이기
하위 선택자 활용
- 인라인 css
<태그 style="속성:값; 속성:값;">
- external stylesheets
<link rel="" type="text/css" href="url">