Code States 11일차
오늘의 키포인트
CSS (중급) 와이어프레임(Wireframe) 목업(Mock-up)
나의 이해
와이어프레임(Wireframe) : html만들기전 설계하는거
목업(Mock-up) : html문서 내에 하드코딩하는 것
문법 및 중요
####
: html의 id속성 부여 // id는 문서내 하나의 요소에만 부여 가능
<h1 id=’hi’> ~~<h1>~</li>
. : html의 class속성
<li class=’menu>
셀렉터
h1{} : 일반적인 셀렉터
*{} : 전체 셀렉터
section, h1{} : tag 셀렉터
#only{} : id 셀렉터
.only{} : class 셀렉터
–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 { }
—————————-
–부정 셀렉터–
input:not([type=”password”]) { }
div:not(:nth-of-type(2)) { }
—————————
–정합성 확인 셀렉터–
input[type=”text”]:valid { }
input[type=”text”]:invalid { }
후손(하위) 셀렉터 : 자신과 그 아래 또 그 아래 모두
자식 셀렉터 : 자신의 자식만
*{} : 모든 엘리먼트 선택 // html싹다 선택
, 는 다중선택 // h1, h2{} 하면 둘다 선택
#laber.center : id가 laber이면서 class가 center인 것 선택 // 이땐 , 필요없음
#laber .center : id가 laber인 엘리먼트의 후손(하위)중 class가 center인 엘리먼트 선택
p > b : p의 자식 엘리먼트 b 선택 // ex) header > p : header의 자식 엘리먼트 p 선택
p + b : p와 인접한 형제 엘리먼트 b 선택
p ~ b : p와 인접한 형제 엘리먼트 b 모두 선택
p[b] : p 엘리먼트 중에서 b속성을 갖는 모든 엘리먼트
p[id=’b’] : p엘리먼트 중에서 id가 b인 속성을 갖는 모든 엘리먼트
p[class=’b’] : p엘리먼트중에서 class가 b인 속성을 갖는 모든 엘리먼트 // p중에서임 a하위에 b 클래스 있어도 해당 안됨
p:first-child : p의 엘리먼트 중에서 첫 번째 자식 엘리먼트 선택 // 첫 번째라는건 자식여부가 아
닌 그냥 첫줄 말하는거
ul > li : last-child : ul의 자식 엘리먼트 중 마지막 자식 엘리먼트가 li인것
ul > li : nth-child(3) : 3번째
section > p : nth-last-child(2n+1) : section의 자식 엘리먼트 p가 뒤에서부터 홀수인것
p : first-of-type : p의 형제 엘리먼트중 처음으로 나오는 p //first-child랑 다르게 첫 번째 자식 엘
엘리먼트가 아닌 처음 등장하는 p
p : nth-of-type(2) : 2번쨰의 p
p : not(#only) : p엘리먼트 중 id가 only인 것을 제외하고 모두
ul > li : last-child : ul의 자식 엘리먼트 중에서 마지막 자식 엘리먼트가 li인 것 선택
기본적인 레이아웃을 제거하는 코드
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
flexbox
부모박스에 display : flex를 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 방법
기본적으로 display : flex가 적용된 부모박스의 자식 요소는 왼쪽부터 차례로
flexbox는 박스가 수직으로 분할되는게 기본값
flex-direction : row : 기본값 수직분할, column : 수평분할
grow(팽창 지수), shrink(수축 지수), basis(기본 크기)
자식요소에 flex속성을 추가하지 않으면 flex : 0 1 auto; 라는 기본값 적용
flex :
shink : 비율만큼 작아짐 width, flex-basis속성에 따른 비율을 쓸 때 씀 일반적으론 예측 힘듦
basis : 박스 크기 지정 grow가 0일때만 적용
–참고–
wudth와 flex-basis를 동시에 적용하면 flex-basis가 우선
콘텐츠가 많아 자식 박스가 넘치면 width가 정확한 크기 보장x
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해, width대신 max-width를 사용 가능
flex-direction이 기본상태 즉 row일 때 main axis : 가로축, cross axis : 세로축
justify-content : main axis를 기준으로 정렬
부모 박스에 justify-content를 적용하면 자식 박스를 수평으로 정렬
flex-start : 처음
flex-end : 끝
center : 중앙
space-between : 양끝
align-items : cross axis를 기준으로 정렬
부모 박스에 align-items속성을 적용하면 자식 박스를 수직으로 정렬
flex-start
flex-end
center
stretch
와이어프레임(Wireframe)
html만들기전 설계하는거
목업(Mock-up)
html문서 내에 하드코딩하는 것
하드코딩 : 변수, 반복문 이런거 안쓰고 싹 노가다로 하는거
마크업(Markup) 언어 : 태그 등을 이용하여 문서나 데이터의 구조를 만드는 언어
보통 묶을 때 <div> 쓰는데