TIL_210315
8673 단어 프론트엔드CSS자바스크립트HTML와이어프레임CSS
오늘 배운 것
- 트위틀러 목업을 만들기 위한 와이어프레임 설계
- 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 { }
Author And Source
이 문제에 관하여(TIL_210315), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://velog.io/@ccrjun/TIL210315
저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
셀렉터
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 { }
Author And Source
이 문제에 관하여(TIL_210315), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@ccrjun/TIL210315저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)