게시 됨 업데이트 됨web몇 초안에 읽기 (약 66 단어)

flex box로 수평수직 가운데 정렬하기

index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style>
  html {
    height: 100vh;
  }

  body {
    height: 100%;
  }

  .flexbox-container {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
  }

  .flexbox-item {
    background-color: #ddd;
  }
</style>

<div class="flexbox-container">
  <div class="flexbox-item">hello world!</div>
</div>
1
2
3
4
.flexbox-container {
  justify-content: center;
  align-items: center;
}
  • flex box로 수평수직 가운데 정렬하기
 게시 됨 업데이트 됨web몇 초안에 읽기 (약 52 단어)

inline style vs !important

!important 승

  • 갑자기 인라인에서 정의한 스타일과 !important 중에 누가 더 강력한지 궁금해 졌다
1
2
3
h1 {
  color: red !important;
}
index.html
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1 style="color: blue">hello world</h1>
  </body>
</html>

카테고리

아카이브

광고

×