FDS12_Markup_Summary
CSS 기초 문법, Web Cafe Header Markup
CSS에서 가장 중요한 기초 문법
-
- 상속(Inheritance)
- 부모에게 적용한 style이 자식에게 적용되는 것
-
- 겹침(Cascading)
- 하나의 element에 여러 style이 겹쳐질 수 있다.
-
- 우선순위
- 각각 selector마다 가진 우선순위가 다름
CSS 중요한 개념들 : box-model - layout적 관점
-
- display
-
block, inline, inline-block
-
flex (modern box-model)
-
grid
- float
- position
< !DOCTYPE html >
- : DTD(DocType Definition)
-
html5부터는 version을 명시하지 않고 무조건 최신 version으로 rendering 하겠다는 뜻
External stylesheet vs Embeded stylesheet
: external stylesheet가 효율성 더 좋음.
한 번 css file 받아서 cache에 저장해놓을 수 있기 때문. Internal은 매번 css가져온다.
Inheritance
- em 단위는 상위 요소 크기의 몇 배인지로 크기를 정한다.
-
상속되는 개체가 늘어날수록 em 단위는 배가 된다.
- 그렇다면 모든 속성이 자식요소에 상속되는가?
- border는 상속되지 않음
- 객체 영역 관련한 layout은 상속되지 않음 (margin, padding, background-color 등)
- 꾸미기에 관련한 속성이 상속됨.
Cascading
- 같은 selector를 이용해 여러 번에 걸쳐 같은 속성을 지정했을 때, 가장 마지막에 적용한 속성이 부여된다.
.box{ color: red; } .box{ color: blue; } /* 더 아래에서 지정한 blue 컬러가 적용될 것이다. */
Priority
-
구체적으로 selector 명시할수록 우선순위가 높아진다.
- 구체성 점수
- Element selector : 1
- Closs selector : 10
- Id selector : 100
- Inline-style : 1000
- !important : ??? 구체성을 무력화시키고 우선순위를 차지함
- 이해를 위해 대강 부여한 점수임
- Important는 재정의가 안 됨. 강제로 기존 style을 씌워야할 때 써야함
Web Cafe | Header Markup
- 논리적인 순서 결정
위치에 관계 없이 컨텐츠 관점으로 순서를 결정.
1) 로고
2) 텍스트링크모음
3) 메인메뉴
-
의미에 맞는 마크업 : semantic tag 사용 권장
-
네이밍
CSS reset
- font : font-style, font-weight, font-variant line-height( /1.6 ) font-size font-family(글꼴);
- table { border-collapse: collapse; border-spacing: 0; }
- border-collapse하면
<td>seperate 안 하고 겹치는 border 안 두껍게 할 수 있음!
Position
- Static : 기본
- Relative : normal flow 유지하며, 자기가 있던 자리에서 top, left, right, bottom 등 지정한만큼 이동!!
-
Absolute : float처럼 화면에 고정되지만 밑에 다른 요소를 덮을 수 있음.
- position: absolute되는 순간 block 상자 됨.
- Size 정해주지 않으면 content 크기.
- 상위요소가 position:static이면 더 상위로 올라가서position:relative인 걸 기준으로 위치 잡음.
- Normal flow 벗어남!
- Fixed
- Stricky
Block
- Float 또는 position: absolute, fixed 하면 무조건 block됨
- Width를 지정했을 때 반영되면 block
- display : inline 바꾸면 width, height 적용되지 않고 content 크기로
- Padding은 먹음
- padding: 50px줬을 때
- inline-block : flow는 inline, box는 block처럼
Margin Collapse
- Nomal flow에서만 발생
- Container의 border를 넘어갈 수 없음
-
display: flex;
flex-direction: column; > normal flow 벗어나서 collapsing안됨
rem (root equal m)
- 그냥 em은 상속될 수 있으므로 rem으로 fix
- root = html
- rem은 IE 구버전에서 지원 안되므로 f-s: 14px; f-s: 1.4rem; 해놓으면 됨
Line-height
- number 단위는 em과 다르게 현재 글자 크기에 비례함
- height와 같게 해서 세로 가운데 정렬 시키는 trick
-webkit-text-size : webkit 계열의 engine에 적용
Web Cafe | Navigation
Section 관리 element
- :
<section><article><aside><nav> - 기본적으로 제목을 가져야함
<header>에<h1>썼으니<nav>에는<h2>을 쓴다.
아웃라인 알고리즘(Outline Algorithm)
- 암묵적 outline :
<h1>밑에<p>오면 둘이 암묵적으로 outline이 그려짐 : 이 밑에<h2>오고<p>오면<h2>가<h1>의 하위로 들어감 - 명시적 outline: HTML5에서는 암묵적으로 하지 말고 명시적으로 outline을 써야한다.
<h>가 level이 아니라<section>으로 contents를 묶어 outline을 명시할 수 있음.
숨김 컨텐츠 : hidden contents
.readable-hidden{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
- Clip : absoute나 fixed일 때만 쓸 수 있는데, rect(top, right, bottom ,left) 크기만큼 자르는 것
- Clip은 specout되고 clip-path로 대체될것임