html / css 20210204

1. HTML/ CSS 공부
2021.02.04
솔루션개발
김민지

4. 구분 XHTML 1.0 HTML 5
태그 소문자
대문자, 소문자 모
두 사용가능
태그 닫힘 반드시 필요 선택사항
홀 태그시 닫힘 반드시 필요 선택사항

7. 항목 Inline Block Inline-block
영역 콘텐츠 크기 만큼
가로 : 부모의 가로 크기
세로: 콘텐츠 크기
콘텐츠 크기 만큼
정렬
텍스트 정렬에 영향을 받음
(텍스트 위치를 지정하는 모든 속성)
마진(auto), 패딩 이용
(테이블내의 경우 verertical aline)
텍스트 정렬에 영향 받음
(텍스트 위치를 지정하는 모든 속성)
박스모델
width/ heifht
margin/padding
적용불가
margin
(width 값 고정 시
auto 지정 가능)
margin
(auto 불가)
중첩요소 인라인 블록/ 인라인 인라인
특징
줄을 바꾸지 않고 다른 요소와 함께 한행에 위치
하려는 성향
화면 가로 폭을 100% 완전히 차지하여 아래로
다음 요소를 넘김
margin, width, height 사용할 수 있는 인라인
대표
엘리먼트
a, span, em ... div, ul, li ... input, img ...
※ Inline 안에 block 요소를 넣으면 IE 레이아웃이 틀어진다 (= Inline-block 포함)
① Block > Inline
② Block, Inline ≠ Inline_block
③ block, inline ∩ Inline_block

8. 선언순서 늦게 선언된 스타일이 우선 적용됩니다.
중요도
CSS가 어디에 선언 되었는지에 따
라서 우선순위가 달라진다.
사용자 스타일 시트
저시력자나 색약자와 같이 특별한 조건에
노출된 사용자를 위한 최상위 스타일 가이드
제작자 스타일 시트
사이트를 제작한 의도가 반영된 스타일 시트로
'!important'가 붙은 스타일을 우선 적용
브라우저 스타일 시트
브라우저마다 기본적으로 지정된 스타일이 달라
제작자가 의도한 레이아웃을 변형하게 만드는 주범
파이어폭스
1. display
2. list-style
3. position
4. float
5. clear
6. width/height
7. padding/margin
8. border/background
9. color/font
10. text-decoration
11. taxt-align/vertical-align
12. white-space
13. other text
14. content
네이버
1. display(표시)
2. overflow(넘침)
3. float(흐름)
4. position(위치)
5. width/height(크기)
6. padding/margin(간격)
7. border(테두리)
8. background(배경)
9. color/font(글꼴)
10. animation
11. 기타
명시도 대상을 명확하게 특정할 수록 명시도가 높아지고 우선순위가 높아진다.
!importnat > Inline Style > id > class > tag
- CSS 명시도 알아 맞추기 퀴즈 -
https://codepen.io/sinbi/pen/GaGVKa

10. property Inherit
width/height no
margin no
padding no
border no
box-sizing no
display no
background no
vertical-align no
text-decoration no
position no
top/right/bottom/left no
z-index no
overflow no
float no
opacity yes
visibility yes
font yes
color yes
line-height yes
text-align yes
white-space yes

11. •
•
•
•
https://validator.w3.org/nu/

16. •
•
•
•
•
•
•
•
• •
•