Before you learn,

  • CSS의 기본적인 셀렉터 #와 .을 이해하고 있다.→ id, class

  • 어떤 단위가 절대 단위인지, 상대 단위인지 알고 있다. → px 절대, em,rem 상대

  • CSS 박스 모델에 대해 이해하고 있다. → position, margin, border, padding, content

  • 박스 측정 기준 두가지의 차이를 이해하고 있다.(box-sizing)

    • content-box: 컨텐츠 기준으로 height, width 측정.

    • border-box: border, padding, 컨텐츠 모두 포함하여 height, width 값 측정.

Achievement Goals

  • 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
  • 레이아웃을 위한 HTML을 만들 수 있다.
  • Flexbox를 이용해 레이아웃을 만들 수 있다.
    • 방향: flex-direction
    • 얼마나 늘릴 것인가? :flex-grow
    • 얼마만큼의 크기를 갖는가?: flex-basis
    • 수평 정렬: justify-content
    • 수직 정렬: align-items

셀렉터종류

//셀렉터
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 { }

 

레이아웃

화면을 나누는 방법

 

Example) 다음과 같이 화면 레이아웃을 만들어라. 이를 위해 알아야하는 속성 flex.

flex CSS 속성은 하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성입니다. flex는 flex-grow, flex-shrink, flex-basis 의 단축 속성 입니다.

: developer.mozilla.org/ko/docs/Web/CSS/flex

 

 

HTML Part

<body>
      <div class="col w10">
	<div class="icon">아이콘 1</div>
	<div class="icon">아이콘 2</div>
	<div class="icon">아이콘 3</div>
      </div>
      <div class="col w20">
	<div class="row h40">영역1</div>
	<div class="row h40">영역2</div>
	<div class="row h20">영역3</div>
      </div><div class="col w70">
	<div class="row h80">영역4</div>
	<div class="row h20">영역5</div>
      </div>
</body>

클래스 이름과 구현을 1:1로 일치시키는 CSS 작성 기법,

Atomic CSS 기법(Block-Element-Modifier)를 적용한 코드는 아래와 같다.

 

CSS Part

* {
    box-sizing: border-box; /*테두리를 포함한 크기를 지정*/
}

body {
    border: 1px solid black;
    margin: 10px;
    padding: 0;
    display: flex;
    width: 500px;
    height: 400px;
}

.col {
    border: 1.5px solid red;
    margin: 3px;
    display: flex;
    flex-direction: column;
}

.icon {
    border: 1px dotted orange;
    margin: 5px;
}

.row {
    border: 1px dotted blue;
    margin: 5px;
    margin-top: 0px;
}

.w10 {
    flex: 1 1 0%; /*엄밀한 비율을 위해 flex를 사용할 경우, flex-basis값에 % 또는 px을 붙여줘야 한다.*/
}

.w20 {
    flex: 2 1 0%;
    padding-top: 5px;
}

.w70 {
    flex: 7 1 0%;
    padding-top: 5px;
}

.h40 {
    flex: 4 1 0%;
}

.h20 {
    flex: 2 1 0%;
}

.h80 {
    flex: 8 1 0%;
}

 

'BootCamp_Codestates > HTML &amp; CSS' 카테고리의 다른 글

Block-Element-Modifier (BEM)  (0) 2020.11.08
웹 앱 화면 설계하기  (0) 2020.11.08
CSS 기초  (0) 2020.11.08

티스토리툴바