Code States 11일차

오늘의 키포인트

CSS (중급)
와이어프레임(Wireframe)
목업(Mock-up)

 

나의 이해

와이어프레임(Wireframe) : html만들기전 설계하는거
목업(Mock-up) : html문서 내에 하드코딩하는 것

 

문법 및 중요

 

 

# : html의 id속성 부여  // id는 문서내 하나의 요소에만 부여 가능
 <h1 id=’hi’> ~~~~<h1>
. : html의 class속성
 <li class=’menu>~~~</li> 

 

셀렉터
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 : <grow> <shrink> <basis>   // 이 순서임
grow : 자식 박스들의 grow를 다 더하고 그 비율대로 크기 할당
  ex) 자식 박스3개의 grow를 각각 2, 1, 1로 하면 처음 박스의 크기가 전체의 50%

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> 쓰는데
<section>은 제목, 컨텐츠가 포함된 구획나눌 때 렌더링은 div와 크게 다른건 없음
<form>은 사용자 입력을 제출하는 용도로 보통 컨트롤(input, button)을 포함 그런데 화면을 전환
  해버리는 액션이 있음

 

새로 안것

css도 위에서부터 아래로 감중복되는거에 대한 값이 바뀐다면 아래꺼가 적용

보통 묶을 때 <div> 쓰는데
<section>은 제목, 컨텐츠가 포함된 구획나눌 때 렌더링은 div와 크게 다른건 없음
<form>은 사용자 입력을 제출하는 용도로 보통 컨트롤(input, button)을 포함 그런데 화면을 전환
  해버리는 액션이 있음