Published 2021. 9. 7. 18:46

css - 레이아웃, selector

CSS - 레이아웃, Selector: 화면 설계의 기본

학습 목표

* 다양한 CSS 셀렉터 규칙 이해
- 후손 셀렉터와 자식 셀렉터의 차이
* 레이아웃을 위한 HTML 작성
* Flexbox를 이용한 레이아웃 작성
- 방향: flex-direction
- 늘리기: flex-grow
- 크기 차지: flex-basis
- 수평 정렬: justify-content
- 수직 정렬: align-items

Checkpoint – CSS Selector

일반 셀렉터

h1 { }    // “모든” h1을 선택
div { }     // 모든 div 를 선택
등

전체 셀렉터

모든 엘리먼트를 선택(전체가 아닌 모든)

* { }

tag 셀렉터

,(쉼표)는 다중으로 선택한다

section, h1 { }    // section과 h1을 다중으로 선택

id 셀렉터

#only { }

class 셀렉터

.widget { }
.center { }

attribute 셀렉터

후손 셀렉터

(공백)으로 이어 씀

header h1 { }    //header의 후손 엘리먼트 중 h1 엘리먼트를 선택

자식 셀렉터

> 기호를 이용한다

header > p { }    // header의 자식 엘리먼트 p를 선택

→ 후손 셀렉터와 자식 셀렉터의 차이를 반드시 알아야 함!

후손 셀렉터와 자식 셀렉터의 차이?

자식은 말 그대로 직계 바로 아래의 셀렉터
후손은 손자,손녀처럼 자신에게 속하는(하위의) 셀렉터인듯?

인접 형제 셀렉터

+ 기호를 사용

section + p { }    // section과 인접한 형제 엘리먼트 p를 선택

형제 셀렉터

~ 기호를 사용

section ~ p { }    // section과 인접한 형제 엘리먼트를 “모두” 선택

가상 클래스

a:link { }
a:visited { }
a:hover { }
a:active { }
a:focus { }

요소 상태 셀렉터

input:checked + span { }
input:enabled + span { }
input:disabled + span { }

구조 가상 클래스 셀렉터

p:first-child { }    //엘리먼트 중 p가 첫번째 자식인 p 엘리먼트를 선택
ul > li:nth-child(2n) { }    // ul의 자식(>) 엘리먼트 중 2n(짝수)번째인 li 엘리먼트
section > p:nth-child(2n+1) { }    // section의 자식 엘리먼트 중 홀수번째인 p 엘리먼트
p:first-of-type { }        //p엘리먼트의 “형제” 엘리먼트 중 처음 등장하는 p 엘리먼트를 선택 
                // *first-child와는 다르게 첫번째 자식인 p가 아닌 처음 등장하는 p를 선택
div:last-of-type{ }    //div의 “형제” 엘리먼트 중 마지막에 등장하는 div 엘리먼트
p:nth-of-type(2) { }        //p의 “형제” 엘리먼트 중 2번째로 등장하는 p 엘리먼트
...

부정 셀렉터

input:not([type=”password”]) { }
div:not(:nth-of-type(2)) { }

정합성 확인 셀렉터

input[type=”text”]:valid { }
input[type=”text”]:invalid { }

레이아웃: 화면을 나누는 방법

HTML 구성하기

수직 분할: 화면을 수직으로 구분하여, 콘텐츠가 “가로”로 배치될 수 있도록 요소를 배치

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

→ CSS로 화면을 구분할 때에는 수직 분할과 수평 분할을 차례로 적용해서 만든다

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

<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>    //"row h20" 이런식으로 공백을 두고 쓰면 2개의 클래스를 하나로 합쳐서 적용가능한 효과
  </div>
</div>

* 참고: 클래스 이름으로 지정된 w10, w20, w70, 또는 h20, h40, h80을 CSS로 구현

ex) [코드] 클래스 이름에 맞는 CSS 구현

.w70 { width: 70%; }
.h40 { height: 40%; }

→ 이런식으로 클래스 이름과 구현을 1:1 매칭시켜 아주 작은 단위로 CSS를 작성하는 기법: Atomic CSS 방법론(클래스 이름을 선언하는 방법론 중 하나)

레이아웃 리셋

HTML 문서는 기본 스타일을 가지고 있는데 이 스타일이 레이아웃 작업에 방해 요소가 되기도 함

ex)
* 박스 시작을 (0,0) 위치에서 하고 싶은데 <body> 태그의 기본 스타일로 인한 여백 문제
* width, height 계산이 여백을 포함하지 않는 문제
* 브라우저마다 상이한 여백과 글꼴 등

→ 그래서 레이아웃 리셋 작업이 필요. 문제 해결을 위한 몇줄의 코드만 적용 시키면 기본 스타일링이 제거됨

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

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

Flexbox로 레이아웃 잡기

flex라는 CSS 속성이 무엇을 뜻하는가?

display: flex 분석하기

부모 박스요소에 display:flex를 적용하여 자식 박스의 방향과 크기를 결정
기본값으로 display:flex가 적용된 부모 박스의 “자식 요소”는 “왼쪽”부터 차례로 이어 배치됨

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

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

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

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

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

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

flexbox는 박스가 수직으로 분할되는 것(수직 분할: 컨텐츠가 가로로 이어짐)이 기본값.
→ 방향을 설정해주면 수평 분할도 가능
→ flex-direction 속성을 “부모” 박스 요소에 적용
→ 주요 속성으로 row(기본값), column

#outer {
  display: flex, column;    // column으로 수평 분할시킴    //부모 요소인 display: flex에 적용
  border: 1px dotted blue;
  padding: 10px;

}

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

반드시 알아두기: grow(팽창 지수), shrink(수출지수), basis(기본 크기)

자식 박스에 어떤 속성도 주지 않으면 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됨
다음과 같은 기본 값이 적용됨
flex: 0 1 auto
flex: <grow> <shrink> <basis>

[코드] 자식요소에 flex 속성을 추가하지 않으면 적용되는 기본값

flex: 0 1 auto;    // flex: <grow> <shrink> <basis>

→ flex속성에 적용되는 3가지는 “기본크기”를 바탕으로 필요에 따라 늘리거나 줄일 수 있는 값이 적용
→ grow, shrink 속성은 단위가 없고 비율로 계산됨

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

flex 속성의 하위 속성

grow: 박스 늘리기

→ flex-grow 속성에 적용하는 값은 비율을 의미

shrink: 박스 줄이기

→ grow와는 반대로 설정한 비율만큼 박스 크기가 작아짐

그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장

→ flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방

basis: 박스의 기본 크기

→ 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기
flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됨

ex) basis를 적용한 CSS 예
/* grow를 0으로 설정해줘야 100px 이상으로 늘어나지 않습니다. */
.left {
  flex: 0 1 100px;
}

/* 우측 박스는 grow를 1로 설정해 나머지 공간을 채워줍시다 */
.right {
  flex: 1 1 auto;
}

참고)
* width와 flex-basis 를 동시에 적용하면 flex-basis가 우선
* 콘텐츠가 많아 자식 박스가 넘친다면 width가 정확한 크기를 보장 못함
* (flex-basis를 사용하지 않는 경우) 자식 박스가 넘치는 경우를 대비해 width 대신 max-width 사용

콘텐츠 정렬 방법

flexbox 제어를 위한 axis(축)에 대한 이해
→ axis는 main axis와 cross axis로 구분됨
→ axis는 flex-direction 속성에 따라 반전될 수 있다(row, colunm)
→ 기본값인 row 상태이면 main axis: 가로축/cross axis: 세로축

(axis를 기준으로 한 정렬 속성)
* justify-content: “main” axis를 기준으로 정렬
* align-content: “cross” axis를 기준으로 정렬

콘텐츠 수평 정렬(justify-content): flex-direction이 row 기본값인 경우

부모 박스에 해당 속성을 적용하면 자식 박스를 수평 정렬시킴

→ 주요 속성값

flex-start
flex-end
center
space-between

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

부모 박스에 align-items 속성을 적용하여 자식 박스를 수직 정렬시킴

→ 주요 속성값

flex-start
flex-end
center
stretch

Bare minimum requirements

VS Code 레이아웃 클론 만들어 보기

웹 앱 화면 설계하기

학습목표

* 앱의 와이어프레임 구성
* 와이어프레임을 HTML로 코딩
* div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유
* HTML 문서에서 언제 id 혹은 class를 사용하는지?

와이어프레임 설계 및 목업 구현

와이어프레임(Wireframe)

레이아웃의 뼈대를 그리는 단계
→ 아주 단순하게 레이아웃과 제품의 구조를 보여주는 용도
→ 처음에는 화면의 영역을 구분하는 것을 목적으로 주요 태그를 메모하는 형식으로 작성해 볼 것!

목업(Mock-up)

목업이란 실물 크기의 모형을 뜻함. 여기서는 실제 제품이 작동하는 모습과 동일하게 “HTML 문서”를 작성
→ 예를 들면 트윗 작성자, 트윗 내용, 작성일자 등을 HTML 문서에 “하드코딩” 하는 것

하드코딩?

변수를 사용하지 않고 하나하나 수작업으로 직접 입력하는 코딩 방식(손 노가다?)
ex) 변수를 사용하지 않고 구구단 만들기

[코드] 하드코딩한 HTML 문서

<!-- 실제로는 어떤 로직에 의해서 적절한 위치에 값이 들어감 -->
<div class="writer">김코딩</div>
<div class="content">SNS는 인생의...</div>

와이어프레임과 목업 단계를 건너 뛰는 것은 마치 설계도 없이 건물을 짓는 것과 같다

HTML로 웹 앱의 구조 잡기

→ 네이버 뉴스 댓글 창을 예시로 생각!

1.큰 틀에서 영역 나누기
ex) 영역을 쓰기 영역/읽기 영역 으로 나누기

2.각 영역을 태그로 표현 하기

ex) 쓰기 영역
<div>
    <div>댓글 9M</div>
    <input type=”text” placeholder=”댓글을 입력해 주세요”>
    <button>등록</button>
</div>

ex) 읽기 영역
<ul>    //각각의 댓글이 unordered list 이므로 ul로 감쌌
<li>        
    <div>아이디명</div>
    <div>댓글 내용</div>
    <span>작성일자</span>
    <button>
        <img/>
    </button>
    <button>
        <img/>
    </button>
</li>
</ul>

id 및 class를 목적에 맞게 사용하기

id: 하나밖에 없는 스타일의 경우에 사용
class: 자주 사용되는 스타일의 경우에 사용

어떨 때는 id를 사용하고 또 어떨 때는 class를 사용하는지를 이해
→ 태그에 이름 붙이기 작업

id    고유(unique)한 이름을 붙일 때
class    반복되는 영역을 유형 별로 분류할 때

→ 즉, 고유한 것인지? 반복되는 것인지 파악!
→ id는 중복을 허용치x!

selector 표기법

id는 #으로 class는 .으로 표기

html 태그                selector(CSS에서 작성시)
======================================
<div id=”writing-sec”>        div#writing-sec

<li class=”comment”>        li.comment

태그에 이름 붙이기

ex) 쓰기 영역
<div id="writing-sec">    //1개만 있으므로 id든 class든 무방?
    <div>댓글 9M</div>
    <input id="new-comment-content" type=”text” placeholder=”댓글을 입력해 주세요”>
    <button id="register">등록</button>
</div>

ex) 읽기 영역    //반복되는 부분이 많다→ class로 지정하여 동일한 유형임을 알 수 있음!

<ul id="comments">    //각각의 댓글이 unordered list 이므로 ul로 감쌌    //읽기 영역은 고유하므로 id해도됨
<li class="comment">        
    <div class="username">아이디명</div>
    <div class="content">댓글 내용</div>
    <span class="createAt">작성일자</span>
    <button class="voteUp">
        <img/>
    </button>
    <button class="voteDown">
        <img/>
    </button>
</li>
</ul>

Sprint – Twittler 목업 만들기

flex-grow/shrink/basis 에 대한 요약 정리

grow: 아이템이 늘어나서 여백을 채우는 늘어나는 비율에 대한 속성
shrink: 공간이 부족할 때 각 아이템의 사이즈를 얼마까지 줄일 것인지 속성
(0이면 브라우저 창 줄이면 줄인만큼 안보이는데 1하면 창 줄이는만큼 그 사이즈도 상대적으로 작아짐)
basis: 아이템의 기본 크기

css 라이브러리 사이트

bootstrap
material-ui

유용한 사이트들

핀터레스트: 와이어프레임 작업에 유용
figma: 목업 작업에 유용
codepen: html, css 작업에 유용
css-tricks.com: flex박스 속성에 대한 이론 내용

html 자동 완성 기능

html 작성시 `!탭` 누르면 자동완성된 html껍데기가 나온다(vscode)

html에서 2개의 클래스를 동시에 쓸때는 띄워쓰기 “ “를 이용하면 된다

.a .b {
    }

css의 부모 박스 속성 vs 자식 박스 속성

<부모 박스에 적용할 수 있는 속성들>
display
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

<자식 박스에 적용할 수 있는 속성들>
order
flex-grow
flex-shrink
flex-basis
flex
align-self

hover 속성

마우스를 롤오버 했을 때 나타나는 속성
해당엘리먼트: hover { }

ex) a:hover 의 형태
.tweetUser:hover { 
/* 마우스를 올렸을때 반응되는 것 */
color: aqua;
}

'SE Bootcamp 내용 정리' 카테고리의 다른 글

js/node - spread/rest 문법 (0)	2021.09.09
js/node - 자료형, 스코프, 클로저 (0)	2021.09.08
js/node - 배열, 객체 checkpoint (0)	2021.09.06
js/node - 배열, 객체 (0)	2021.09.03
git 기초 (0)	2021.09.02