TIL 210803 - [CSS] 레이아웃, selector (불친절에 욕이 나오는...)

에피쿠로스 학파에 관하여 (아타락시아)

에피쿠로스 학파는 쾌락을 최고의 선으로 규정하고 그것을 추구한다.

그러나 인간의 욕망은 무한하기에 육체적 쾌락은 완전히 채울 수 없다.

육체적 쾌락은 채우면 채울수록 오히려 고통을 유발한다고 한다.

그래서 에피쿠로스 학파는 정신적 쾌락의 추구를 강조한다.

그러나 이것은 지적 욕구의 충족과는 다르다.

 

에피쿠로스는 쾌락의 최대화는 고통의 최소화라고 하고

고통의 최소화는 욕망의 최소화와 동일시된다.

그래서 욕망의 최소화는 쾌락의 최대화 상태이고

어떠한 욕망도 없는 상태가 최상의 쾌락의 상태고

이러한 상태를 '번뇌없는 평정' (ataraxia, 아타락시아)이라고 했다.

욕망이 없이 그리고 그 욕망의 성취없이

인간이 살아갈 수 있는가? 생존을 위한 최소한의 욕망만

추구하고 인간이 어찌 살아갈 수 있는가?

 

우리가 가진 모든 것은 우리가 하나님으로 부터 받은 것일진대

그 욕망조차 우리는 터부시하고 쾌락의 추구를 위해

그 욕망을 외면하고 있다.

 

욕망도 우리의 주권아래 두어야 하지 않을까?

그리고 내가 품을 수 있고 나의 거룩한 이야기에 올바르게

사용될 수 있도록 그것을 경영할 수 있도록

내가 완전의 길로 가야하지 않나라는 생각이 든다.

 

에피쿠로스는 욕망의 최소화 상태인 아타락시아를 향해 가지만

나는 욕망 자체가 기준이 아닌 내가 그것을 다스리고 선하게

이타적인 방향으로 쓰일 수 있는 완전의 길로 가려고 한다.

오늘은 열두번째 날이다.

 

레이아웃과 selector 단원을 통해 UI 화면설계에 대해 본격적으로 알아보자.

Before You Learn

아래 내용은 지난 유닛에서 학습한 내용입니다. 잘 이해하고 있는지 점검하세요.

• CSS의 기본적인 셀렉터 #와 .의 차이를 이해하고 있다. // id를 가리킬 때 클래스를 가리킬 때
• 절대 단위와 상대 단위를 구분할 수 있다.// 뭔말?
• CSS 박스 모델에 대해 이해하고 있다. /margin , border, padding, content
• 박스 측정 기준(content-box, border-box) 두 가지의 차이를 이해하고 있다.// ok

Achievement Goals

• 다양한 CSS 셀렉터 규칙을 이해할 수 있다.
  • 후손 셀렉터와 자식 셀렉터의 차이는 반드시 알아야 합니다.
• 레이아웃을 위한 HTML을 만들 수 있다.
• Flexbox를 이용해 레이아웃을 만들 수 있다. (다음 속성에 대한 이해가 있어야 합니다)
  • 방향: flex-direction
  • 얼마나 늘릴 것인가?: flex-grow
  • 얼마만큼의 크기를 갖는가?: flex-basis
  • 수평 정렬: justify-content
  • 수직 정렬: align-items

 

CSS Selector(선택자)

오우 불친절한 코.스 내용도 알려주지 않고 checkpoint라는 문제부터

들이밀어 댄다. 차근차근 해보자.

앞 전에 내가 학습한 셀렉터는 #과 .이다.

각각 id selector, class selector라고 한다.

종류가 많다.

 

selector --> h1 { } div { }

전체 selector --> * { }

ID selector --> #only { }

class selector --> .widget { } .center { }

tag selector(다중 선택 가능) --> section, h1 { }

attribute selector --> a[href] { } p[id="only"] { } p[class~="out"] { } p[class|="out"] { } 

후손 selector --> header h1 { }

자식 selector --> header > p { }/ 후손 selector와 구분

인접 형제 selector --> section + p { }

형제 selector --> 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) { }

부정 selector --> input:not([type="password"]) { } div:not(:nth-of-type(2)) { }

정합성 확인 selector --> input[type="text"]:valid { } input[type="text"]:invalid { }

 

선택자 우선순위

1) ID 선택자>클래스 선택자>태그 선택자

2) 똑같은 형태의 선택자라면 맨 마지막에 등장하는 선택자가 우선순위가 높음

 

왜 ID선택자가 더 강한가?

페이지에서 ID값은 단 한번만 등장한다.

ID값으로 active를 썼으면 문서의 다른 곳에서 등장하면 안된다.

웹페이지에 있는 모든 <a> 태그를 가리키는 선택자와 비교했을 때

<a> 태그 선택자가 훨씬 포괄적이다.

 

그래서 CSS 제작자들은 좀더 구체적인 것의 우선순위를 포괄적인 것보다 높였다.

웹페이지를 제작할 때 태그 선택자를 통해 전체적인 태그의 디자인을

하고 그중에서 예이적인 것에 ID 값을 부여해서 디자인 하는 것이

훨씬 효율적이기 때문이다.

 

자식 선택자와 후손 선택자

<div class="container">     
  <h1> TITLE </h1>     
  <ul>         
     <li>list 1</li>         
     <li>list 2</li>         
     <li>list 3</li>     
  </ul> </div>

 

div태그의 자식 선택자는 h1, ul 후손 선택자는 li 이다. (너무나도 불친절하군. 좀 알려주라.)

 

자 선택자 끝!

 

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

HTML 구성하기

대부분 콘텐츠의 흐름은 좌에서 우

CSS로 화면을 구분할 때 수직분할과 수평분할을 

차례대로 적용하여 콘텐츠 흐름에 따라 작업을 진행

 

수직분할은 화면을 가로로 분할하여 요소를 배치하고

수평분할은 가로 분할된 화면에 수평으로 분할하여

내부 콘텐츠가 세로로 배치될 수 있도록 한다.

(수평으로 구분된 요소에 height 속성을 추가하여

수평분할을 작업을 직관적으로 할 수 있다.)

 

 

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

 

레이아웃 리셋

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

많은 개발자가 박스의 시작을 (0, 0)으로 세팅하고 싶어서

위와 같은 코드를 많이 쓴다.

 

초기화(리셋)을 위한 다양한 라이브러리(Normalize.css)

 

 

Flexbox로 레이아웃 잡기

flextbox로 레이아웃을 잡는 다는 것은 박스를 유연하게 늘리거나

줄여서 레이아웃을 구성하는 방법

 

display: flex 분석하기

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

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

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

부모 요소에 display: flex; 를 적용하면

수직으로 분할된 box1, box2, box3가 왼쪽 부터 차례대로 이어지게 된다.

 

display :  flex ;  적용 전

display :  flex ;  적용 후

 

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

flexbox는 수직으로 분할 되는 것이 기본이다.

그런데 flex-direction으로 방향을 지정해주면

수평분할도 가능하다.

flex-direction 속성은 부모 박스 요소에 적용한다.

(row, colum)

 

display: flex --> 부모요소에 적용방법

flex: 0 1 auto --> 자식요소에 적용방법

 

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

flex: 0 1 auto; 자식 박스 요소에 어떠한 효과도 주지 않으면 기본적으로 세팅되는 값

왼쪽 부터 오른쪽으로 콘텐츠 크기 만큼 배치된다.

 

flex-grow: 0;

flex-shrink: 1;

flex-basis: auto;

 

grow, shrink 속성은 단위가 없고, 비율에 따라 결과가 달라집니다.

부모 박스 안에 n개의 자식 박스가 있다고 가정합니다.

각 자식 박스가 갖는 grow값의 총 합이 n이라면,

grow 속성의 값을 1로 설정하는 것은 1/n 가로 또는 세로길이를 적용한다는 의미입니다.

grow 속성의 값을 2로 지정하면, 2/n의 길이를 의미합니다.

(햐 내용도 많고 이해하는 것에도 시간이 걸리고.....)

 

flex 속성의 하위 속성

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

첫번째 자식 박스 요소에 target 클래스 추가

.target {
  flex: 1 1 auto;
}

target 클래스에서, flex-grow 속성의 값을 1로 변경합니다. target 클래스를 가지고 있는 첫 번째 자식박스는, 부모 박스의 가로 길이 중에서 남은 빈 영역만큼 늘어납니다. 위 설명대로라면 전체 자식요소가 가진 grow 값의 합은 1+0+0 = 1이므로, target 클래스를 가지고 있는 자식 박스의 가로 크기는 1/1 = 100% 입니다. 그러나 다른 자식 박스 안에 이미 콘텐츠가 존재하므로, 다른 자식 박스안의 콘텐츠가 담긴 길이를 제외한 나머지 가로 길이가 target 클래스를 가진 자식박스의 가로 길이입니다.

[그림] target 클래스에만 flex-grow 속성에 1을 적용한 경우

 

 

.box {
  flex: 1 1 auto;
}

 

box 클래스의 flex-grow는 기본값인 0입니다. 만약 box 클래스의 flex-grow 속성에 값을 1로 설정하면, 모든 박스가 늘어나려고(grow) 합니다. 결과적으로 모든 박스가 동일한 비율로 가로 길이가 늘어납니다. (총 grow 값 1+1+1, 각 박스는 1/3씩 크기를 가짐)

[그림] box 클래스의 flex-grow 속성에 1을 적용한 경우

 

 

 

 

box 클래스의 flex-grow 속성에는 1을 그대로 두고, target 클래스의 flex-grow 속성의 값을 변경해보겠습니다. target 클래스를 가지고 있는 자식 박스는, 다른 자식 박스와의 비율만큼 크기가 더 커집니다.

.box {
  flex: 1 1 auto;
}

/* 
 * 자식 박스가 총 세개인데, target만 2의 비율을 가집니다.
 * 2(target) + 1(box2) + 1(box3) = 4 이므로,
 * target의 비율은 50% 입니다.
 */
.target {
  flex: 2 1 auto;
}

 

 

[그림] 모든 자식 박스의 flex-grow 속성에 같은 값을 설정한 경우

* target 클래스에 적용된 flex-grow 속성의 값이 1, box 클래스에 적용된 flex-grow 속성의 값이이 1일 경우, grow가 적용된 전체 값은 1+1+1 = 3입니다. 따라서, 각 자식 박스의 가로 길이는 1/3의 길이를 가집니다.

 

 

 

[그림] target 클래스의 flex-grow 속성에만 2를 적용하고, box 클래스의 glex-grow 속성은 1로 설정한 경우

* target 클래스의 flex-grow 속성의 값이 2, box 클래스의 flex-grow 속성의 값이 1일 경우, grow가 적용된 전체 값은 2+1+1 = 4입니다. 따라서, target 클래스를 가지지 못한 나머지 자식 박스는 1/4의 길이를 가집니다.

 

 

 

shrink: 자식 박스는 얼마나 줄어들 수 있을까요?

shrink는 grow와 반대로, 설정한 비율만큼 박스 크기가 작아집니다. 그러나 flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않습니다. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장합니다. flex-shrink 속성은 width나 이후 설명할 flex-basis 속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문입니다. flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방합니다.

 

너무 어려워서 일단 읽기만 하고 건너 뛰었다.

만들다 보면 이해된다! 믿자!

 

 

웹 화면 설계하기 시작!!

Before You Learn

이번 챕터를 시작하기 전에, 만들고 싶은 앱이 무엇인지 생각해보세요. 코드스테이츠 소프트웨어 엔지니어 부트캠프를 수강하려고 결심했을 때, 여러분은 무엇을 만들고 싶었나요?

Achievement Goals

• 만들고 싶은 앱의 와이어프레임을 그려볼 수 있다.
• 와이어프레임만 보고 HTML로 코딩할 수 있다.
• div 태그 또는 section, header 등의 시맨틱 태그로 영역을 구분하는 이유를 이해할 수 있다.
• HTML 문서에서 언제 id 혹은 class를 사용해야 하는지 이해할 수 있다.

음 잘 보았다. 내용은 생략한다.

 

설명할 수 있어야 한다고 과정 초반에 말하면서

자세한 설명은 생략하는 이 넌센스를 어찌할꼬.

 

HTML로 웹 앱의 구조 잡기

마크업 언어(Mark up) : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

일반적으로 데이터를 기술하는 언어라고 보기에 프로그래밍 언어와는 구별된다.

 

주요 마크업 언어

SGML
HTML
XML
XHTML
SVG
MathML
MXML
XAML
SAMI

 웹앱 구조를 잡기 위해 첫번째 할 일

그릴 화면의 영역을 구분하고

각 영역을 태그로 표현하는 것이다.

구성요소(컴포넌트)의 태그가 어떤 요소로 해야 하는지 고민

 

div 외 

seciton : 영역에 의미를 담고 싶을 때/제목, 콘텐츠가 포함된 

구획을 나눌 때 사용/랜더링은 div와 크게 다른 점이 없음

 

form: 사용자 입력을 제출하는 용도/보통 컨트롤(input, button)

등을 포함/화면을 전환하는 액션이 있음

 

 

first page

id 고유한 영역에 

class 반복되는 영역을 유형별로 분류할 때