오늘 배운 것

• 트위틀러 목업을 만들기 위한 와이어프레임 설계
• CSS 선택자
• 목업 구현

와이어프레임

기본적으로 콘텐츠의 흐름은 좌에서 우로, 위에서 아래로 흐른다.
먼저 화면을 수직으로 분할하고, 수직으로 분할된 div에서 height속성을 이용해 수평 분할을 하는 것이 조금 더 수월할 수 있다.

주의사항
때로는 HTML 문서가 갖는 기본 스타일이 와이어프레임을 실제 목업으로 구현할 때 방해가 될 수 있다.

• 박스의 시작을 정확히 (0, 0)에서 시작할 수 없다(body태그가 기본적으로 약간의 여백을 가지고 있음)
• width, height 계산이 여백을 포함하지 않아 계산하기 힘들다
• 브라우저마다 여백이나 글꼴이 조금씩 다르다
  이 고충들을 해결하기 위해 초기화하는 다양한 라이브러리가 등장했지만, 사실 굳이 라이브러리를 이용할 필요는 없으며, 몇 줄의 코드를 적용시키면 큰 도움이 된다

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
}

CSS 선택자

셀렉터

h1 {}
div {}

전체 셀렉터

*{}

Tag 셀렉터

section, h1 {}

ID 셀렉터

#only {}

class 셀렉터

.widget {}
.center {}

attribute 셀렉터

a[href] {}
p[id="only"] {}
p[class~="out"] {}
p[class|="out"] {}
section[id^="sect"] {}
div[class$="2"] {}
div[class*="w"] {}

후손 셀렉터

header h1 {}

자식 셀렉터

header > p {}

인접 형제 셀렉터

section + p {}

형제 셀렉터

section ~ p {}

가상 클래스

a:link {}
a:visited {}
a:hover {}
a:active {}
a:focus {}

요소 상태 셀렉터

input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터

p:first-child { }
ul > li:last-child { }
ul > li:nth-child(2n) { }
section > p:nth-child(2n+1) { }
ul > li:first-child { }
li:last-child { }
div > div:nth-child(4) { }
div:nth-last-child(2) { }
section > p:nth-last-child(2n + 1) { }
p:first-of-type { }
div:last-of-type { }
ul:nth-of-type(2) { }
p:nth-last-of-type(1) { }

부정 셀렉터

input:not([type="password"]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type="text"]:valid { }
input[type="text"]:invalid { }