[TIL] 210820

Lee Syong·2021년 8월 20일

CSS TIL

TIL

목록 보기

2/204

📝 오늘 한 것

STEP 1 HTML/CSS - CSS layout - learnlayout (위치 지정 예제 ~ 칼럼)

📚 배운 것

1. 위치 지정 예제 (position 활용 레이아웃)

<body>
  <div class="container">
    <nav>
      <ul>
        <li>하나둘셋넷다섯여섯일곱여덟</li>
        <li>하나둘셋넷다섯여섯일곱여덟</li>
        <li>하나둘셋넷다섯여섯일곱여덟</li>
        <li>하나둘셋넷다섯여섯일곱여덟</li>
        <li>하나둘셋넷다섯여섯일곱여덟</li>
      </ul>
    </nav>
    <section>어느 활짝 갠 겨울날에 개미들이 자신들이 여름철에 모은 낟알(곡물)들을 말리고 있었어요. 그때 굶주림에 다 죽어가는 베짱이 한 마리가 지나가다 “먹을 걸 좀 만 나눠주겠니?”라며 빌었어요.
      개미들이 베짱이에게 물었어요. “그럼 넌 여름철에 음식을 모아두지 않고 뭘 한 거니?” 베짱이가 대답했어요. “놀 시간도 부족하던걸. 매일같이 노래하느라 다 보냈지.” 그러자 개미들이 조롱하며 말했어요.
      “여름철 내내 노래나 하고 있을 정도로 어리석다면, 그럼 겨울엔 밥을 거르면서까지 춤만 춰대면 되겠네요.” 목동이 소떼를 끌고 숲에 들어갔다 그만 어린숫송아지 한 마리를 잃고 말았어요. 한참을 정처 없이
      찾던 목동이 이렇게 맹세를 했지요. “송아지를 훔쳐간 도둑놈만 찾을 수 있다면, 헤르메스(전령의 신이자 도둑의 신. 그리스신화)와 판(목동의 신) 그리고 숲의 수호신님들을 위해 어린양 한 마리를 제물로
      내놓겠습니다.” 그 후 머지않아 그가 조금 높은 곳으로 올라가보았더니, 발(사자의 발)에 송아지를 놓고 막 잡아먹고 있는 사자를 발견하게 되었어요. 그 광경에 소스라치게 놀란 목동이 두 손을 들어 하늘을
      우러러보며 말했어요. “제가 도둑놈만 찾을 수 있다면 숲의 수호신들에게 어린양을 내 놓겠다 방금 맹세했습니다. 그런데 이제는 따질 것도 없이 저 사자로부터 저라도 안전하게 도망칠 수 있다면 제가 방금 잃은
      송아지에다 다 자란 황소까지 더해 제물로 드리겠나이다.”</section>
  </div>
  <footer>개미와 베짱이 & 목동과 그의 황소 (이솝 우화)</footer>
</body>

요기

body {
  height: 1000px;
  margin-bottom: 120px;
}

.container {
  position: relative;
  border: 2px solid lightslategray;
}

nav {
  position: absolute;
  left: 0; /* position과 left 속성 대신 float: left; 를 넣어도 결과물은 같다 */
  width: 200px;
  background-color: pink;
}

section {
  margin-left: 200px;
  background-color: powderblue;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: lightgreen;
  width: 100%;
  height: 50px;
}

(1) position: fixed;를 이용해 고정 헤더나 푸터를 만들 때는 다른 요소들이 헤더나 푸터에 가려지지 않고 온전히 보일 수 있도록 <body>에 (헤더나 푸터의 height 값보다 큰) margin 값을 설정해야 한다

(2) position: absolute;를 적용한 nav와 nav 오른쪽에 오는 section이 겹치지 않도록 section에 margin-left 값을 설정해야 한다

2. `float`, `clear`, `clearfix`

1) float

(1) float 속성이 적용된 요소 위주로 다른 요소들이 흐르듯이 배치된다

(2) 속성값: left, right...

img {
  float: right;
  margin: 0 0 1em 1em;
}

2) float 속성 사용 시 나타날 수 있는 문제점

(1) float 속성이 부여된 요소의 높이가 float 속성이 부여되지 않은 부모 요소의 높이보다 높을 때, float 요소가 바깥으로 흘러넘치게 된다 ex) 이미지가 컨테이너 바깥으로 흘러넘친다

(2) float 속성이 부여된 요소의 부모 요소가 float 속성이 부여된 요소들만을 포함할 때, 부모 요소의 높이가 0으로 처리되어 float 속성이 부여된 요소의 다음 요소가 위로 올라와 float 속성이 부여된 요소와 겹치게 된다

3) float 해체 방법

(1) float 속성을 부여한 요소의 '부모 요소'에 overflow: auto;를 적용한다 🙋‍♀️

<div class="clearfix">
  <img src="">
</div>
img {
  float: left
}

.clearfix {
  overflow: auto;
/* IE6을 지원하려면 ZOOM: 1; 추가 */
}
Q1. overflow: auto;의 의미는 아는데 이게 어떻게 여기서 float를 해체해주는지 연관지어 생각이 안 된다. 내용물이 넘치면 스크롤을 만들어주는 속성 아닌가.

A1. overflow: auto; mdn 사이트 설명

내용이 패딩 상자 안에 들어갈 경우 표시되는 내용과 동일하게 보이지만, 새 블록 형식 지정 컨텍스트를 설정합니다. 데스크톱 브라우저는 콘텐츠가 오버플로될 경우 스크롤 막대를 제공합니다.

(2) float 속성을 부여한 요소 바로 다음에 '형제 요소'를 하나 생성하고, 여기에 clear 속성을 부여한다

속성값: left, right, both...
clear 속성이 지정된 요소부터는 float 속성에 의한 효과가 나타나지 않는다
아무 의미 없는 요소를 생성해야 한다는 단점이 있다

(3) float 속성을 부여한 요소의 '부모 요소에 가상 요소'를 생성하고, 여기에 clear 속성을 부여한다

.clearfix::after {
  content: '';
  display: table; /* 또는 display: block; */
  clear: both;
}

3. 미디어 쿼리 (@media)

'브라우저'와 '디바이스'에 반응하는 사이트를 만들기 위해 사용된다

1) 퍼센트 너비 레이아웃 + 미디어 쿼리

메뉴를 사이드바에 놓기에는 브라우저 창의 크기가 너무 작을 때 메뉴가 한 칼럼(열)에 표시되도록 만들기

요기에서 nav, section 부분 대신 이걸 넣는다
@media (min-width: 600px) {
  nav {
    float: left;
    width: 25%;
  }
 
  section {
    margin-left: 25%;
  }
}

@media (max-width: 599px) {
  nav li {
    display: inline;
  }
}
Q2. 높이 599px 이하부터는 왜 nav li에 display: inline;을 쓰면 nav가 section 위로 자동으로 올라가는가. nav li에서 줄바꿈이 사라지는 건 알겠는데 화면 너비를 줄임에 따라 왜 더는 콘텐츠가 밑으로 길어지지 않고 nav가 자동으로 위로 올라가는 건지 모르겠다.

4. `display: inline-block;`

줄바꿈이 이루어지지 않는다 (inline 특징)
width와 height를 지정할 수 있다 (block 특징)
width와 height를 지정하지 않으면, 콘텐츠만큼 영역이 잡힌다

1) 줄바꿈 박스 그리드 만들기

.box{foo}*10+.swan{bar}

/* ① float 적용 */

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
  background-color: lime;
}

.swan {
  clear: left;
  background-color: yellow;
}

/* ② inline-block 적용 */

.box {
  display: inline-block;
  width: 200px;
  height: 100px;
  margin: 1em;
  background-color: lime;
}
.swan {
  background-color: yellow;
}

①과 ②의 결과물은 같다

2) inline-block 레이아웃 🙋‍♀️

nav {
  display: inline-block;
  vertical-align: top;
  width: 25%;
  background-color: pink;
}

section {
  display: inline-block;
  vertical-align: top;
  width: 74.6%;
  background-color: powderblue;
}
Q3. 74.6%...nav와 section 사이에 있는 공백이 어떻게 해도 안 사라짐

A3. 원래 display: inline-block; 적용 시 요소들 사이에는 (font-size에 비례해) 공백이 생김

해결 방법
① HTML에서 </nav>와 <section>을 줄바꿈 하지 않고 붙여 쓴다 → 비추천
② 조상(상위) 요소에 font-size: 0;을 추가한다
대신, display: inline-block이 적용된 요소 안의 콘텐츠는 계속 보일 수 있도록 해당 요소에도 font-size 속성을 추가해줘야 한다

5. column 속성

cf. 컬럼=단=열

1) `column-count`

단의 개수 고정
화면이 넓어지면 단의 너비가 넓어짐

2) `column-width`

단의 너비 고정
화면이 넓어지면 단의 개수가 많아짐

3) `column-gap`

단과 단 사이의 여백

4) `column-rule`

단과 단을 구분하는 수직선
column-rule: 너비(width) 스타일(style) 색상(color)

5) `column-span`

여러 개의 단을 합침 (=이 속성이 적용된 요소는 모든 열에 걸쳐 있게 됨)
속성값: none(기본값), all(전체 단을 하나로 합침)

6) `column-fill`

열을 채우는 방법을 지정
balance(기본값): 콘텐츠가 열에 균등하게 나뉜다.
auto: 열의 높이만큼 콘텐츠를 순차적으로 채운다. 반드시 모든 컬럼을 채우는 것은 아니므로 일부 열이 비어있을 수 있다.

<div class="column">
  어느 활짝 갠 겨울날에 개미들이 자신들이 여름철에 모은 낟알(곡물)들을 말리고 있었어요. 그때 굶주림에 다 죽어가는 베짱이 한 마리가 지나가다 “먹을 걸 좀 만 나눠주겠니?”라며 빌었어요.
  개미들이 베짱이에게 물었어요. “그럼 넌 여름철에 음식을 모아두지 않고 뭘 한 거니?” 베짱이가 대답했어요. “놀 시간도 부족하던걸. 매일같이 노래하느라 다 보냈지.” 그러자 개미들이 조롱하며 말했어요.
  “여름철 내내 노래나 하고 있을 정도로 어리석다면, 그럼 겨울엔 밥을 거르면서까지 춤만 춰대면 되겠네요.” 목동이 소떼를 끌고 숲에 들어갔다 그만 어린숫송아지 한 마리를 잃고 말았어요. 한참을 정처 없이
  찾던 목동이 이렇게 맹세를 했지요. “송아지를 훔쳐간 도둑놈만 찾을 수 있다면, 헤르메스(전령의 신이자 도둑의 신. 그리스신화)와 판(목동의 신) 그리고 숲의 수호신님들을 위해 어린양 한 마리를 제물로
  내놓겠습니다.” 그 후 머지않아 그가 조금 높은 곳으로 올라가보았더니, 발(사자의 발)에 송아지를 놓고 막 잡아먹고 있는 사자를 발견하게 되었어요. 그 광경에 소스라치게 놀란 목동이 두 손을 들어 하늘을
  우러러보며 말했어요.
  <div class="merge">
    “제가 도둑놈만 찾을 수 있다면 숲의 수호신들에게 어린양을 내 놓겠다 방금 맹세했습니다. 그런데 이제는 따질 것도 없이 저 사자로부터 저라도 안전하게 도망칠 수 있다면 제가 방금 잃은
    송아지에다 다 자란 황소까지 더해 제물로 드리겠나이다.”
  </div>
</div>

.column {
  padding: 1em;
  -moz-column-count: 3;
  -webkit-column-count: 3;
  -column-count: 3;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  -column-gap: 1em;
  -moz-column-rule: 1px solid black;
  -webkit-column-rule: 1px solid black;
  -column-rule: 1px solid black;
}

.merge {
  -moz-column-span: all;
  -webkit-column-span: all;
  -column-span: all;
  margin: 20px 0;
}

column 속성은 생긴 지 얼마 안 됐기에 여러 브라우저를 지원하기 위해 접두사를 붙여 써야 한다

🙋‍♀️ 질문

Q1. 바로가기 → 해결 (210925)
Q2. 바로가기
Q3. 바로가기 → 해결

✨ 내일 할 것

learnlayout
Google Clone
HTML 요소 참고서

Lee Syong

능동적으로 살자, 행복하게😁

이전 포스트

[TIL] 210817 ~ 210819

다음 포스트

[TIL] 210820

TIL

📝 오늘 한 것

📚 배운 것

1. 위치 지정 예제 (position 활용 레이아웃)

요기

2. `float`, `clear`, `clearfix`

1) float

2) float 속성 사용 시 나타날 수 있는 문제점

3) float 해체 방법

3. 미디어 쿼리 (@media)

1) 퍼센트 너비 레이아웃 + 미디어 쿼리

요기에서 nav, section 부분 대신 이걸 넣는다

4. `display: inline-block;`

1) 줄바꿈 박스 그리드 만들기

①과 ②의 결과물은 같다

2) inline-block 레이아웃 🙋‍♀️

5. column 속성

1) `column-count`

2) `column-width`

3) `column-gap`

4) `column-rule`

5) `column-span`

6) `column-fill`

column 속성은 생긴 지 얼마 안 됐기에 여러 브라우저를 지원하기 위해 접두사를 붙여 써야 한다

🙋‍♀️ 질문

✨ 내일 할 것

[TIL] 210817 ~ 210819

[TIL] 210821

0개의 댓글

[TIL] 210820

TIL

📝 오늘 한 것

📚 배운 것

1. 위치 지정 예제 (position 활용 레이아웃)

요기

2. float, clear, clearfix

1) float

2) float 속성 사용 시 나타날 수 있는 문제점

3) float 해체 방법

3. 미디어 쿼리 (@media)

1) 퍼센트 너비 레이아웃 + 미디어 쿼리

요기에서 nav, section 부분 대신 이걸 넣는다

4. display: inline-block;

1) 줄바꿈 박스 그리드 만들기

①과 ②의 결과물은 같다

2) inline-block 레이아웃 🙋‍♀️

5. column 속성

1) column-count

2) column-width

3) column-gap

4) column-rule

5) column-span

6) column-fill

column 속성은 생긴 지 얼마 안 됐기에 여러 브라우저를 지원하기 위해 접두사를 붙여 써야 한다

🙋‍♀️ 질문

✨ 내일 할 것

[TIL] 210817 ~ 210819

[TIL] 210821

0개의 댓글

2. `float`, `clear`, `clearfix`

4. `display: inline-block;`

1) `column-count`

2) `column-width`

3) `column-gap`

4) `column-rule`

5) `column-span`

6) `column-fill`