21.6.30 TIL (css 레이아웃,seletor)

ljy·2021년 7월 1일

JAVASCRIPT

목록 보기

2/11

css 중급

학습목표

다양한 CSS 셀렉터 규칙을 이해할 수 있다.

후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.

레이아웃을 위한 HTML을 만들 수 있다.

Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)

방향: flex-direction

얼마나 늘릴 것인가? :flex-grow

얼마만큼의 크기를 갖는가?: flex-basis

수평 정렬: justify-content

수직 정렬: align-items

css 셀렉터

*트리구조에서 같은부모엘리먼트 에서 나온 자식엘리먼트 끼리 형제 엘리먼트 라고 하며
 부모엘리먼트에서 1단계밑에 있는 엘리먼트를 자식엘리먼트
 부모엘리먼트 밑에 1단계를 포함한 모든 엘리먼트를 후손엘리먼트 라고 한다 (후손엘리먼트 안에 자식엘리먼트가 있다)
 
 1.자식셀렉터 = header > p { } // > 는 header의 자식 엘리먼트 p를 선택합니다.
 2.후손셀렉터 = section h2 { } // 띄어쓰기로 부모와 후손엘리먼트를 구분하여 section의 후손 엘리먼트 중 h2 엘리먼트를 선택합니다.
 3.tag셀렉터 = section, h1 { }  // 쉼표(,)는 section태그와 h1태그를 다중으로 선택한다
 4.인접 형제셀렉터 = article + p { }  // + 는 article 태그의 인접한 형제 엘리먼트 p를 선택한다
 5.형제셀렉터 = section ~ p { }  // ~는 section과 형제 엘리먼트 p를 모두 선택한다
 6.id , class 셀렉터 = #label.center { }  // id가 label이면서 동시에 class가 center인 엘리먼트를 선택한다
 
 7.속성 셀렉터 = // 대괄호([])한에 선택할 속성을 넣는다  
 a[href] { }  //a 엘리먼트 중에서, href 속성을 갖는 모든 엘리먼트를 선택한다    
 p[id='only'] { } // p 엘리먼트 중에서, id가 only인 속성을 갖는 모든 엘리먼트를 선택한다
 div[class='center'] { }  // div 엘리먼트 중에서, class가 center인 속성을 갖는 모든 엘리먼트를 선택합니다.
 
 
 8.구조 가상 클래스 셀렉터 
 p:first-child { }  // :first-child는 p 엘리먼트 중에서, 첫 번째 자식 엘리먼트인 p 엘리먼트를 선택한다 
 div:last-child { } // :last-child는 div 엘리먼트 중에서, 마지막 자식 엘리먼트인 div를 선택한다
 div:nth-last-child(2) {…}  // nth-last-child(2)는 div 엘리먼트 중에서, 마지막에서 두 번째 자식 엘리먼트인 div를 선택한다
 ul > li:last-child {…} // :last-child는 li 엘리먼트 중에서, 마지막 자식 엘리먼트인 li를 선택한다
                       // ul의 자식 엘리먼트 중에서, 마지막 자식 엘리먼트가 li인 것을 선택한다
 ul > li:nth-child(3) {…} //  :nth-child는 li 엘리먼트 중에서, 세 번째 자식엘리먼트인 li를 선택한다
                         // ul의 자식 엘리먼트 중에서, 세 번째 자식 엘리먼트가 li인 것을 선택합니다.
 p:first-of-type {…}  // p 엘리먼트의 형제 엘리먼트 중 첫 번째 p 엘리먼트를 선택한다
                      // (first-child와는 다르게 첫 번째 자식 엘리먼트가 아닌, 처음 등장하는 p를 선택합니다)
 div:last-of-type {…}  // div 엘리먼트의 형제 엘리먼트 중 마지막 div 엘리먼트를 선택한다
 p:nth-of-type(2) {…}  // p 엘리먼트의 형제 엘리먼트 중 두 번째 p 엘리먼트를 선택합니다.
 p:nth-last-of-type(2) {…}  // p 엘리먼트의 형제 엘리먼트 중 마지막에서 두 번째 p 엘리먼트를 선택한다
 p:not(#only) {…}  // p 엘리먼트 중에서, id가 only인 엘리먼트를 제외하고 모두 선택한다
 div:not(:nth-of-type(2)) {…} // div 엘리먼트의 형제 엘리먼트 중 두 번째 div 엘리먼트를 제외한 모든 div 엘리먼트를 선택한다

레이아웃을 위한 html

html 구성하기
CSS로 화면을 구분할 때에는 수직분할과 수평분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행합니다.

수직분할 : 화면을 수직으로 구분하여, 콘텐츠가 가로로 배치될 수 있도록 요소를 배치
수평분할 : 분할된 각각의 요소를 수평으로 구분하여, 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치
- 수평으로 구분된 요소에 height 속성을 추가하면, 수평분할을 보다 직관적으로 할 수 있다

예시

<div id="container">
  <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>
</div>

[코드] 레이아웃을 고려해 작성한 HTML 파일


.w70 { width: 70%; }
.h40 { height: 40%; }
[코드] 클래스 이름에 맞는 CSS 구현

클래스 이름과 구현을 1:1로 일치시켜 아주 작은 단위로 CSS를 작성 기법을 Atomic CSS 방법론이라고 한다

레이아웃 리셋

html의 기본 문서 스타일이 레이아웃이 방해가 될수 있다

예시
- 박스의 시작을 정확히 (0,0)의 위치에서 시작하고 싶은데, <body> 태그가 가진 기본 스타일에 약간의 여백이 있습니다.
- width, height 계산이 여백을 포함하지 않아 계산에 어려움이 있습니다. (이전 유닛을 통해 박스 크기 측정 기준(box-sizing)에 대해 학습한 내용입니다.)
- 브라우저(크롬, 사파리 등)마다 여백이나 글꼴과 같은 기본 스타일이 조금씩 다fmek

때문에 레이아웃을 하기전 기본 스타일링을 제거하는 코드를 적용한다

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

[코드] 기본 스타일링을 제거하는 CSS 코드의 예시

Flexbox로 레이아웃 잡기

display: flex 분석하기

flexbox로 레이아웃을 구성한다는 것은, 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법이다
display: flex가 적용된 부모 박스의 자식 요소는 왼쪽부터 차례대로 이어 배치됩니다.

  <div id="outer">
  <div class="box">box1</div>
  <div class="box">box2</div>
  <div class="box">box3</div>
</div>

[코드] "display: flex"를 적용시키는 예시를 위해 작성한 HTML 코드


#outer {
  display: flex;
  border: 1px dotted red;
  padding: 10px;
}

.box {
  border: 1px solid green;
  padding: 10px;
}

[코드] HTML의 div 요소를 선택하여, 부모요소에 "display: flex"를 적용한 예시

[그림] "display: flex"가 적용된 빨간 박스 내의 자식요소는 왼쪽부터 차례대로 배치됩니다.

Flex 요소에 방향 지정하기 (flex-direction)

flexbox는 기본으로 박스가 수직분할된다 방향을 설정하는 flex-direction 속성을 부모박스요소에 적용하여 수평으로 분할 할 수 있다

flex-direction 속성 = row(기본값), column
-부모요소에는 display 속성에 flex를 적용 (display: flex)
-자식요소에는 flex 속성에 값을 적용 (flex: 0 1 auto)

자식요소에 적용하는 flex 속성에는 grow(팽창 지수), shrink(수축 지수), basis(박스의 기본 크기) 값이 있다
자식박스에 속성값을 주지 않으면 flex 속성에 값이 기본값이 적용된다

flex: 0 1 auto;  (순서대로 grow, shirink, basis)
[코드] 자식요소에 속성값을 주지않을때 flex 속성의 기본값

grow, shirink 속성은 비율에 따라 결과가 달라진다

grow

예를들어, 부모 박스 안에 여러개의 자식 박스가 있다고 가정할때. 각
자식 박스가 갖는 grow값의 총 합이 n이라면,
grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미이다 grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미한다

shirink

shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아진다
보통 레이아웃 할때는 shirink를 1로 설정하고 grow 속성에 변화를 주는 방식이 권장된다
이유는 shrink 속성은 width나 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문이다

basis

자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기이다,
grow가 0일때 basis 크기를 지정하면 크기가 유지된다
<div id="outer">
  <div class="left">메뉴</div>
  <div class="right">본문</div>
</div>
[코드] HTML 파일에 작성된 메뉴와 본문이라는 두 가지 자식 박스
.left {
  flex: 0 1 100px;
}  /* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.right {
  flex: 1 1 auto;
} /* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */  
[코드] 왼쪽 메뉴 박스는 크기를 유지해야 하므로 flex-basis 속성에 100px을 적용합니다.

[그림] 오른쪽 본문 박스는 flex-basis 속성이 auto로 설정되어 flex-grow 속성의 영향을 받습니다.

콘텐츠 정렬

axis(축) 는 main axis 와 cross axis로 구분합니다.

flex-direction의 기본 값인 row 인 상태일 때 main axis 는 가로축이 되고
main axis가 가로일 때 cross axis는 세로가 된다

axis(축)을 기준으로 정렬할수 있는 속성
justify-content , align-items
justify-content 속성은 main axis를 기준으로 align-items 속성은 cross axis를 기준으로 정렬합니다.
만약, flex-direction 속성의 값을 column 으로 준다면 main axis과 cross axis는 서로 바뀐다

콘텐츠 수평 정렬 (justify-content)
부모 박스에 justify-content 속성을 적용하면, 자식 박스를 수평으로 정렬할 수 있습니다

flex-start

flex-end

center

space-between

콘텐츠 수직 정렬 (align-items)

flex-start

flex-end

center

stretch