WEB || DAY5 || css 스타일 옵션

 0. 블록레벨 & 인라인 레벨 

• h2, p, div 등 =>  블록레벨 -> 자동줄넘김, width100%를 차지함
• span, strong 등 => 인라인레벨

-> 블록레벨을 인라인으로, 인라인레벨을 블록으로 변경도 가능하다.

---

 1. 컨텐츠영역 크기계산 옵션 

• box-sizing: border-box => 테두리선까지 포함해 크기를 지정함.

               center-box => 테두리를 제외한 크기로,  컨텐츠 내부의 크기로 지정한다. 기본값임.

---

 2. 여백 

• padding: 테두리 내부의 여백
• margin: 테두리 외부의 여백

---

 3. 텍스트 지정 옵션 

• text-align: 텍스트 정렬
• text-transform: 대소문자 변환
• text-shadow: 그림자효과
• text-decoration: none => 하이퍼링크의 밑줄을 없애는 등, 텍스트에 지정된 효과 수정.
• line-height: 줄간격
• letter-spacing: 글 자 사 이 의 간 격 지 정
• word-spacing: 단어  사이의  간격  지정

---

 4. 목록 지정 옵션 

• list-style-type: 리스트 모양
• list-style-image: 리스트모양을 이미지파일로 지정
• list-style-position: inside 목록 들여쓰기

---

 5. <table> 속성 

• caption-side: 테이블제목인 <caption>의 위치지정
• border-collapse: 표와 셀테두리간의 여백을 합침

---

 6. 테두리 속성 

• border-radius: 모서리 둥글게 만들기

---

 7. 배치 

• display: inline-block
• float: left 이미지 배치할때도 사용함.
• clear: left

( display와 float 기능의 차이는 무엇인가? )

 

• position: static / relative 
• position: absolute -> 별도로 위치값을 지정해야함. 지정한 위치에 맞게 배치된다. (스크롤고정은 X)
• position: fixed -> 별도로 위치값을 지정해야한다. 스크롤에 상관없이, 지정된 위치에 고정됨.

---

 8. 태그:이벤트  -  해당 이벤트가 발생할 때 태그에 css스타일을 적용함. 

a:link

a:visited { color: black } 

a:hover

---

 9. 태그명 [ 속성값 ]  -  해당 속성이 지정된 태그를 가져옴 

input[ required ]

input[ readonly ]