[TIL] 210824

Lee Syong·2021년 8월 24일

TIL html

TIL

목록 보기

6/204

📝 오늘 한 것

poiemaweb - CSS (display ~ 폰트와 텍스트 8.text-decoration)

📚 배운 것

1. display 속성

1) block 레벨 요소

width, height, margin, padding 속성을 지정할 수 있다
ol, ul, li, hr, table, form 등

2) inline 레벨 요소

width, height, margin-top, margin-bottom, padding-top, padding-bottom 속성을 지정할 수 없다.
margin-left, margin-right, padding-left, padding-right 속성은 지정 가능하다.
상, 하 여백은 line-height로 지정할 수 있다.
a, img, br, input, select, textarea, button 등

3) inline-block 레벨 요소

inline 레벨 요소처럼, content의 너비만큼 가로폭을 차지한다.
block 레벨 요소처럼, width, height, margin, padding 속성을 모두 지정할 수 있다.
상, 하 여백은 margin과 line-height 두 가지 속성 모두를 이용해 지정 가능하다.

  <div>
    <div class="container one">
      <div>왕왕왕</div>
      <div>신기해</div>
    </div>
    <div class="container two">
      <div>배고파</div>
      <div>진짜로</div>
    </div>
  </div>
.container div {
  display: inline-block;
  border: 2px solid sienna;
  width: 300px;
  vertical-align: middle;
}

.container div:first-child {
  height: 70px;
}

.container div:nth-child(2) {
  height: 150px;
}

.two {
  font-size: 0;
}

.two div {
  font-size: 20px;
}
❗ [공유] Vertical-align 파헤치기! – 1부 참고

vertical-align → inline-block 등을 포함한 모든 inline 요소의 수직 정렬을 위해 사용됨

vertical-align: middle; → 해당 요소의 인라인 박스의 수직 중앙 지점을, 그 부모 요소의 중앙 지점에 정렬

2. visibility 속성

visibility: hidden; → 해당 요소를 보이지 않게 하지만, 해당 요소의 공간은 남아 있게 된다
display: none; → 해당 요소를 보이지 않게 하며, 해당 요소의 공간도 사라지게 된다

3. opacity 속성

0.0(투명) ~ 1.0(불투명) 사이의 값을 가진다
:hover에 적용 가능

4. background 속성

1) background-image : url("");

2) background-repeat : repeat(기본값) / repeat-x / repeat-y / no-repeat;

3) background-size

px : px 값 그대로 설정
% : 화면의 크기를 변경하면 배경 이미지도 같이 찌그러들면서 변경됨
cover : 원본 배경 이미지의 크기 비율을 유지한 채, width와 height 중 큰 값을 기준으로 설정 (배경 이미지가 일부 잘려 보일 수 있다)
contain : 원본 배경 이미지의 크기 비율을 유지한 채, 그 배경 이미지 전체가 잘리는 부분 없이 다 보이도록 설정

4) background-attachment

<html>
  <body>
    <div class="image one">
      <div class="lorem">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure debitis itaque aut quasi. Aspernatur, perspiciatis nisi officiis fugiat quod at ipsam quos, nulla cum itaque dolorum eveniet sunt delectus ratione? Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur distinctio repudiandae neque error a quo repellendus porro optio voluptatibus obcaecati illum similique debitis, quam ab beatae atque pariatur modi odit!
        Odit alias earum accusamus nesciunt quo iure dolores odio. Ex, repellat aspernatur laborum necessitatibus recusandae, obcaecati praesentium quam quisquam doloribus voluptatum quos soluta laboriosam consectetur tempora distinctio modi aliquid sed.
      </div>
    </div>
    <div class="image two"></div>
  </body>
</html>

html,
body {
  width: 100%;
  height: 100%;
}

.image {
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: auto;
}

.one {
  background-image: url("https://cdn.pixabay.com/photo/2021/07/18/18/36/tree-6476331_960_720.jpg");
  background-attachment: fixed;
}

.two {
  background-image: url("https://cdn.pixabay.com/photo/2020/12/16/14/56/farm-5836815_960_720.jpg");
}

.lorem {
  background-color: white;
  width: 400px;
  margin: 100px auto;
  padding: 20px;
  font-size: 18px;
}

🙋‍♀️ Q1. overflow: auto;를 적용하면 텍스트 윗부분 배경 이미지가 안 나왔다가 갑자기 나온다. 이 속성값은 스크롤 바를 만들어주는 게 아닌가. 여기선 무슨 관계가 있는 건지 모르겠다.

🙋‍♀️ Q2. 풀이를 보면 CSS 맨 앞에 이게 추가되어 있다. 여기서 저 속성값을 :after, :befor 선택자에 적용한 이유가 뭘까.

*, *:after, *:before {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

5) background : color | image | repeat | attachment | position

5. 폰트와 텍스트

1) `font-family`

여러 개의 폰트명을 지정할 수 있다. 마지막에는 보통 Serif, Sans-serif, Mono space를 지정한다
폰트명은 따옴표("")로 감싸주며, 폰트명이 한 단어인 경우에는 따옴표를 쓰지 않아도 된다.

2) `font`

속기 속성값 : font-style | font-variant | font-weight | font-size | line-height | font-family

3) `line-height`

텍스트 높이를 지정
텍스트 수직 정렬(vertical-align)에 응용되어 사용됨
대부분 브라우저의 기본값은 110~120%

4) `letter-spacing`

글자 사이의 간격

5) `text-align`

텍스트 수평 정렬
<a>와 같은 inline 레벨 요소에는 text-align: center;를 지정해도 가운데 정렬이 일어나지 않는다. inline 레벨 요소는 width 속성을 갖지 못해 중앙 개념이 존재하지 않기 때문이다. inline 레벨 요소를 중앙 정렬하기 위해서는 먼저 display: block; 등을 지정해 block 레벨 요소로 바꿔 주어야 한다.

✨ 내일 할 것

git, github
Google Clone

Lee Syong

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

이전 포스트

[TIL] 210823

다음 포스트

[TIL] 210824

TIL

📝 오늘 한 것

📚 배운 것

1. display 속성

1) block 레벨 요소

2) inline 레벨 요소

3) inline-block 레벨 요소

❗ [공유] Vertical-align 파헤치기! – 1부 참고

2. visibility 속성

3. opacity 속성

4. background 속성

5. 폰트와 텍스트

1) `font-family`

2) `font`

3) `line-height`

4) `letter-spacing`

5) `text-align`

✨ 내일 할 것

[TIL] 210823

[TIL] 210825

0개의 댓글

[TIL] 210824

TIL

📝 오늘 한 것

📚 배운 것

1. display 속성

1) block 레벨 요소

2) inline 레벨 요소

3) inline-block 레벨 요소

❗ [공유] Vertical-align 파헤치기! – 1부 참고

2. visibility 속성

3. opacity 속성

4. background 속성

5. 폰트와 텍스트

1) font-family

2) font

3) line-height

4) letter-spacing

5) text-align

✨ 내일 할 것

[TIL] 210823

[TIL] 210825

0개의 댓글

1) `font-family`

2) `font`

3) `line-height`

4) `letter-spacing`

5) `text-align`