TIL 5. HTML/CSS

epi·2021년 3월 21일
CSSTILhtml
0
post-thumbnail

복습용으로 정리해둔 코드잇 자료

선택자 정리

자식 (children)

  • HTML
<p class="important">Paragraph 1</p>
<p>Paragraph 2</p>
<p class="important">Paragraph 3</p>
<p class="important">Paragraph 4</p>
<p id="favorite">Paragraph 5</p>
<p>Paragraph 6</p>
  • CSS
*/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */*.div1 i {
  color: orange;
}

직속 자식 (direct children)

  • HTML
<i>Outside</i>
<div class="div1">
  <i>Inside 1</i>
  <p>Blah blah <i>Inside 2</i></p>
  <i>Inside 3</i>
</div>
  • CSS
/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

복수 선택

  • HTML
<p class="one">Outside 1</p>
<p class="two">Outside 2</p>
<div>
  <p class="one">Inside 1</p>
  <p class="two">Inside 2</p>
  <p class="three">Inside 3</p>
  <p class="four">Inside 4</p>
  <p class="five">Inside 5</p>
</div>
  • CSS
*/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */*
.two, .four {
  color: orange;
}

여러 조건

  • HTML
<p class="outside one">Outside 1</p>
<p class="outside two">Outside 2</p>
<div>
  <p class="inside one">Inside 1</p>
  <p class="inside two">Inside 2</p>
  <p class="inside three">Inside 3</p>
  <p class="inside four">Inside 4</p>
  <p class="inside five">Inside 5</p>
</div>
  • CSS
/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

Pseudo-class (가상 클래스)

콜론(:)을 사용하면 몇 가지 '가상 클래스'를 선택할 수 있습니다.

n번째 자식

  • HTML
<div class="div1">
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
  <p>Paragraph 4</p>
  <p>Paragraph 5</p>
  <p>Paragraph 6</p>
</div>
  • CSS
*/* .div1의 자식인 <p> 태그 중 3번째 */*.div1 p:nth-child(3) {
  color: blue;
}

*/* .div1의 자식인 <p> 태그 중 첫 번째 */*.div1 p:first-child {
  color: red;
}

*/* .div1의 자식인 <p> 태그 중 마지막 */*.div1 p:last-child {
  color: green;
}

*/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */*.div1 p:not(:last-child) {
  font-size: 150%;
}

*/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */*.div1 p:not(:first-child) {
  text-decoration: line-through;
}

마우스 오버 (hover)

  • HTML
<h1>Hello World!</h1>
  • CSS
h1 {
  color: orange;
}

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}

CSS 상속

CSS에는 '상속'이라는 개념이 있습니다. 말 그대로 부모 요소의 속성들을 자식들한테 넘겨주는 것인데요. 예시를 한 번 봅시다.

  • HTML
<div class="div1">
  <h1>Heading 1</h1>
  <p>Paragraph bla bla bla</p>
</div>
  • CSS
.div1 {
  color: blue;
}

.div1의 폰트 색을 blue로 설정해주었고, <h1>과 <p>에 대해서는 별도의 설정이 없었습니다. 그런데도 <h1>과 <p> 태그의 폰트 색이 파란색으로 설정되었죠? 그 이유는 .div1의 스타일이 자식들에게 상속되었기 때문입니다.

상속되는 속성들

하지만 태그와 속성에 따라 상속이 되지 않는 경우도 많이 있습니다. 예를 들어서 부모 태그에 설정한 margin이 모든 자식들에게도 적용되면 총체적 난국이 되겠죠?

웬만하면 상속되는 몇 가지 속성들입니다:

  1. color
  2. font-family
  3. font-size
  4. font-weight
  5. line-height
  6. list-style
  7. text-align
  8. visibility

이외에도 많지만 일단 자주 사용하는 몇 가지만 적어두었습니다.

위에 있는 속성들도 항상 상속되는 건 아닙니다. 대표적인 예로 <a> 태그에는 color 속성이 상속되지 않습니다. <a> 태그가 억지로 상속을 받아오기 위해서는 해당 속성에 inherit 값을 쓰면 됩니다!

  • HTML
<div class="div1">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

<div class="div2">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>
  • CSS
.div1 {
  color: green;
}

.div2 {
  color: orange;
}

.div2 a {
  color: inherit;
}

CSS 우선 순위

순서

우선 가장 간단한 겁니다. 완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 됩니다.

  • CSS
h1 {
  color: blue;
  text-align: center;
}

h1 {
  color: green;
}

명시도 (Specificity)

같은 요소를 가리키지만 선택자가 다르다면, '명시도(specificity)'에 따라 우선 순위가 결정됩니다.

명시도 계산기

명시도 계산 방법을 알려드리겠습니다.

  1. 인라인 스타일이 가장 우선 순위가 높습니다.
  2. 선택자에 id가 많을 수록 우선 순위가 높습니다.
  3. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높습니다.
  4. 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서입니다.

<ul> 태그 안에 <li> 태그 안에 <a id="link">가 있다고 가정해봅시다.

첫 번째 경우에는 일반 요소가 세 개, 가상 클래스가 한 개 있어서 '명시도 점수'가 13입니다. 두 번째 경우에는 일반 요소가 두 개, 가상 클래스가 한 개, 그리고 id가 한 개 있어서 112점입니다.

따라서 두 선택자에서 겹치는 스타일이 있는 경우, 두 번째 경우인 ul li:first-child #link 선택자의 스타일이 적용되는 거죠!

  • HTML
<ul>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
  <li><a id="link" href="#">Link 1</a></li>
</ul>
  • CSS
ul li:first-child #link {
  color: green;
}

ul li:first-child a {
  color: orange;
}

CSS의 다양한 단위들

CSS에는 px, rem, em, % 등 여러 단위가 있습니다. 폰트 크기 뿐만 아니라 padding, margin, width 등 다양한 속성들에 이 단위들을 사용할 수 있습니다.

이 단위들의 차이에 대해 알아봅시다.

px

px는 절대적인 값입니다. 다른 요소의 값에 영향을 받지 않는다는 거죠.

rem

rem 은 상대적인 값입니다. 하지만 오직 <html> 태그의 font-size에만 영향을 받습니다.

2rem은 <html> 태그의 font-size의 2배 크기입니다.

em

em도 rem과 마찬가지로 상대적인 값입니다. em은 자기 자신의 font-size를 기준으로 합니다.

2em은 자기 자신의 font-size의 2배 크기입니다. 자기 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 합니다.

만약 자기 자신에게 정해진 font-size가 있다면 그 값을 기준으로 em이 결정됩니다.

퍼센트 (%)

% 역시 상대적인 값이겠죠? %는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용됩니다.

예를 들어 font-size에서 %가 쓰일 경우, 상위 요소의 font-size에 곱해주는 방식으로 계산합니다.

%가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산됩니다.

재미있는 점은 margin-top이나 padding-bottom 등 세로(상하) 속성를 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산된다는 것입니다.

참고

더 자세히 알아보고 싶으신 분들은 아래 링크를 참고해보세요:

https://webdesign.tutsplus.com/ko/tutorials/comprehensive-guide-when-to-use-em-vs-rem--cms-23984

display의 종류

HTML 요소의 레이아웃을 결정하는 가장 중요한 속성 중 하나는 display입니다.

모든 요소는 딱 한 개의 display 값을 갖고 있습니다. 가질 수 있는 display의 종류는

  1. inline
  2. block
  3. inline-block
  4. flex
  5. list-item
  6. none

등 여러 가지가 있는데, 대부분의 요소들은 inline과 block 중 한 가지입니다.

inline display

inline 요소들은 다른 요소들과 같은 줄에 머무르려고 하는 성향과, 필요한 만큼의 가로 길이만 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 inline입니다.

  1. <span>
  2. <a>
  3. <b>
  4. <i>
  5. <img>
  6. <button>

block display

block 요소들은 다른 요소들과 독단적인 줄에 가려고 하는 성향과, 최대한 많은 가로 길이를 차지하는 성향이 있습니다.

다음 요소들은 기본 display 값이 block입니다.

  1. <div>
  2. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
  3. <p>
  4. <nav>
  5. <ul>
  6. <li>

display 바꾸기

모든 요소는 기본적으로 정해진 display 값이 있는데요. CSS를 통해서 이를 바꿀 수 있습니다!

inline 요소를 block으로 바꾸기

  • CSS
i {
  display: block; */* <i> 태그를 block으로 바꾸기 */*background-color: green;
}

block 요소를 inline으로 바꾸기

  • CSS
div {
  display: inline; */* <div> 태그를 inline으로 바꾸기 */*
}

.div1 {
  background-color: green;
}

.div2 {
  background-color: blue;
}

inline-block

Block 요소에게는 가로 길이와 세로 길이를 직접 설정해줄 수 있지만, inline 요소는 자동으로 설정이 됩니다. Inline 요소에게는 가로, 세로 길이의 개념이 딱히 없는 셈이죠.

만약 inline 요소처럼 다른 요소들과 같은 줄에 머무르면서 block 요소처럼 가로, 세로 길이도 설정해주고 싶으면 어떻게 해야 할까요? 바로 그 둘을 섞어놓은 inline-block을 사용하면 됩니다!

  • CSS
i {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: green;
}

가운데 정렬

가로 가운데 정렬

세로 가운데 정렬을 알아보기 전에, 간단하게 가로 가운데 정렬을 알아봅시다.
어떤 요소를 가로로 가운데 정렬하려면 어떻게 해야 할까요? 간단합니다.

inline 요소

inline 또는 inline-block 요소면 부모 태그에 text-align: center;를 써주면 됩니다.

  • CSS
.container {
  text-align: center;
  background-color: lime;
}

block 요소

block 요소면 margin-left: auto;, margin-right: auto;를 써주면 되죠?

  • CSS
.block-element {
  width: 100px;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
  background-color: lime;
}

세로 가운데 정렬

가짜 요소 더하기

vertical-align: middle;을 하면 해결될까요? 우선 vertical-align 속성은 인라인 또는 인라인 블록 요소에 적용되기 때문에 .info를 인라인 블록으로 바꾸겠습니다. 그리고 vertical-align: middle;을 설정해주면...?

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

vertical-align: middle;은 요소의 가운데를 부모 요소의 소문자 'x'의 가운데와 맞춥니다. 확인해봅시다.

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

.info 요소를 완전 가운데로 오게 하려면 우선 소문자 'x'가 가운데로 와야 합니다. 방법이 하나 있습니다. 세로 길이가 100%인 요소를 만들고, 그 요소에도 vertical-align: middle;을 하는 거죠!

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  
  */* 설명을 위해서 */*width: 10px;
  background-color: red;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

이제 거의 다 되었습니다. 여기서 소문자 'x'를 지우고, .helper 요소의 가로 길이를 없애면 되겠죠?

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
}

근데 아직도 문제가 조금 있습니다. .info의 가로 길이가 100%라면 어떻게 되는지 봅시다.

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

갑자기 이상한 곳에 위치되네요. 사실 .helper 와 .info 요소 사이에 띄어쓰기가 한 칸 있어서, 가로 길이 100%인 .info 요소는 자리 부족으로 다음 줄로 가버립니다!

이 문제를 해결하기 위해서는 두 가지 방법이 있습니다.

우선 띄어쓰기를 없애는 방법:

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;
}

띄어쓰기 공간 만큼의 마이너스 여백을 주는 방법:

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
}

.helper {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.info {
  background-color: lime;
  display: inline-block;
  vertical-align: middle;
  width: 100%;

  */* 이 경우 띄어쓰기는 5~7px 정도였습니다! */*margin-left: -7px;
}

주의 사항:

어떤 요소에 height: 100%;를 설정하기 위해서는 부모의 height가 설정되어 있어야 합니다. 위 경우에는 .helper의 부모인 .container에 height가 설정되어 있었기 때문에 가능했던 것이죠.

line-height로 해결

.info를 인라인 블록으로 설정해주면, line-height 속성을 활용해볼 수도 있습니다. 부모인 .container에 height와 동일한 line-height를 줘보세요.

line-height 속성은 자식들에게 상속되기 때문에 .info에는 line-height: normal;을 꼭 써주셔야 합니다!

  • CSS
.container {
  width: 300px;
  height: 400px;
  background-color: gray;
  text-align: center;
  line-height: 400px;
}

.info {
  background-color: lime;
  display: inline-block;
  line-height: normal;
  vertical-align: middle;
}

다른 방식?

위의 방법들 말고도 세로 가운데 정렬을 하는 다양한 방식들이 있습니다. 포지셔닝을 이용할 수도 있고, 최근에 나온 flexbox를 이용할 수도 있습니다. 위의 방식으로는 해결되지 않는 상황들도 있을 수 있기 때문에, 다양한 방식들을 연구하는 걸 추천드립니다!

포지셔닝

relative 포지션

b {
position: relative;
top: 30px;
left: 50px;
}
  • 겹치는 레이아웃을 하고 싶을 때 사용합니다.
  • 이동하고 싶은 곳의 반대로 써줘야합니다.

fixed 포지션

b {
position: fixed;
top: 30px;
left: 50px;
}
  • 스크롤을 해도 같은 자리에 고정되어 있습니다.
  • 원래 있던 공간은 그대로 비어있습니다.
  • 네비게이션바에 많이 사용합니다.

absolute 포지션

b {
position: absolute;
top: 30px;
left: 50px;
}
  • 가장 가까운 포지셔닝이 된 조상(Ancestor)요소가 기준

Float

#youtoo {
float: right;
margin-bottom: 15px;
margin-left: 15px;
}
  • 위로 뜨면서 그 공간에는 아무것도 들어갈 수 없습니다.
  • 신문처럼 사진을 글이 감싸는 형식을 할 때 사용합니다.

multiple floats

  • 공간을 채우고, 공간이 부족하면 다음 줄에 배치됩니다.
  • 그리드 레이아웃에 사용합니다.

clear

  • 옆 공간에 아무것도 없게 하고 싶을 때(새로운 줄로 갑니다.)
<div class="clearfix"> </div>

.clearfix {
clear: left;
}

→ Float 밑으로 글을 옮기고 싶을 때

리스트 

    <ol type="a">
    <li>집 청소</li>
    <li>공부하기</li>
    <li>책 읽기</li>
</ol>

--------------------------------------

<ol type="A">
    <li>집 청소</li>
    <li>공부하기</li>
    <li>책 읽기</li>
</ol>

--------------------------------------

<ol type="i">   
    <li>집 청소</li>
    <li>공부하기</li>
    <li>책 읽기</li>
</ol>

--------------------------------------

<ol type="I">
    <li>집 청소</li>
    <li>공부하기</li>
    <li>책 읽기</li>
</ol>
    -순서를 매기지 않을 경우

<ul>
<li>집 청소</li>
    <li>공부하기</li>
    <li>책 읽기</li>
</ul>
    ul {
padding-left: 0;
width: 200px;
}

li {
list-style: none;      //리스트 표시x
margin-bottom: 10px;
background-color: #77abff;
color: white;
padding: 10px 20px;
}

    반응형 웹사이트

    h1 {
font-size: 24px;
}

p{
font-size: 16px;

@media (min-width: 768px;) {
h1 {
font-size: 36px;
}

p{
font-size: 24px;

@media (min-width: 992px;) {
h1 {
font-size: 48px;
}

p{
font-size: 32px;
}

    BOOTSTRAP

    부트스트랩 그리드

    제가 부트스트랩을 사용할 때 가장 마음에 드는 점은 간편한 그리드 시스템입니다.

    기본 구성원

    부트스트랩 그리드 시스템에는 세 가지 구성원이 있습니다:

    1. 컨테이너 (container)
    2. 행 (row)
    3. 열 (column)

    기본 규칙

    부트스트랩 사이트에 자세히 설명되어 있지만 많은 분들이 무시하는 몇 가지 규칙입니다:

    1. 행(<div class="row">)은 꼭 컨테이너(<div class="container">) 안에 넣어주세요.
    2. 열(<div class="col">)은 꼭 행(<div class="row">) 안에 넣어주세요. 오직 열만 행의 직속 자식이 될 수 있습니다.
    3. 콘텐츠(우리가 그리드에 넣고 싶은 내용)는 꼭 열(<div class="col">) 안에 넣어주세요.

    이 규칙들만 지켜도 예상치 못한 레이아웃이 나오지는 않을 것입니다!

    기본 사용법

    구성원들과 규칙을 알았으면 이제 사용법을 알아봅시다.

    부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 있다고 생각하시면 됩니다. 예를 들어서 한 줄을 정확히 3등분하고 싶으면 네 칸을 차지하는 열 세 개를 쓰면 되는 거죠. 네 칸을 사용하는 열은 <div class="col-4">입니다.

    아래의 코드에서는 다양한 방식으로 12칸을 나누어보았습니다.

    • HTML
    <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      *<!-- 정확히 3등분 -->*<div class="col-4 first">first</div>
      <div class="col-4 second">second</div>
      <div class="col-4 third">third</div>
    </div>

    <div class="row">
      *<!-- 정확히 2등분 -->*<div class="col-6 first">first</div>
      <div class="col-6 second">second</div>
    </div>

    <div class="row">
      *<!-- 1대 5 비율 -->*<div class="col-2 first">first</div>
      <div class="col-10 second">second</div>
    </div>

    <div class="row">
      *<!-- 1대 2대 1 비율 -->*<div class="col-3 first">first</div>
      <div class="col-6 second">second</div>
      <div class="col-3 third">third</div>
    </div>
  </div>
</body>
    • CSS
    .container {
  text-align: center;
}

.first {
  background-color: yellow;
}

.second {
  background-color: lime;
}

.third {
  background-color: orange;
}

    12칸을 넘어가면?

    만약 한 행에 12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어가게 됩니다.

    • HTML
    <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-3 first">first</div>
      <div class="col-6 second">second</div>
      <div class="col-4 third">third</div>
      <div class="col-7 fourth">fourth</div>
    </div>
  </div>
</body>
    • CSS
    .container {
  text-align: center;
}

.first {
  background-color: yellow;
}

.second {
  background-color: lime;
}

.third {
  background-color: orange;
}

.fourth {
  background-color: blue;
}

    Why 12?

    부트스트랩을 만든 분들은 왜 하필 12라는 숫자로 정했을까요?

    12는 상당히 많은 숫자들(1, 2, 3, 4, 6, 12)로 나누어지기 때문에 굉장히 유연합니다!

    예를 들어서 8칸으로 나누고 싶더라도 12라는 숫자의 유연함 덕분에 쉽게 할 수 있습니다. col-6를 두 개 쓰면 2등분 할 수 있고, 그 안에서 또 col-3로 4등분을 하면 8칸이 생기겠죠?

    이런식으로 열을 또 여러 열로 나누는 것을 '중첩(nesting)'한다고 부릅니다. 중첩을 하기 위해서는 우선 열(<div class="col-6">) 안에 새로운 행(<div class="row">)을 쓰셔야 합니다. 예제를 통해 살펴보세요:

    • HTML
    <head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-6">
        <div class="row"> *<!-- 중첩을 위한 새로운 행 -->*<div class="col-3 first">1</div>
          <div class="col-3 second">2</div>
          <div class="col-3 third">3</div>
          <div class="col-3 fourth">4</div>
        </div>
      </div>

      <div class="col-6">
        <div class="row"> *<!-- 중첩을 위한 새로운 행 -->*<div class="col-3 first">5</div>
          <div class="col-3 second">6</div>
          <div class="col-3 third">7</div>
          <div class="col-3 fourth">8</div>
        </div>
      </div>
    </div>
  </div>
</body>
    • CSS
    .container {
  text-align: center;
}

.first {
  background-color: yellow;
}

.second {
  background-color: lime;
}

.third {
  background-color: orange;
}

.fourth {
  background-color: blue;
}

    부트스트랩 반응형 그리드

    부트스트랩의 그리드 시스템은 반응형 웹 디자인을 할 때 가장 빛을 발합니다.

    다음은 부트스트랩에서 정해둔 구간들입니다.

    1. Extra Small (< 576px): 모바일
    2. Small (≥ 576px): 모바일
    3. Medium (≥ 768px): 타블릿
    4. Large (≥ 992px): 데스크탑
    5. Extra Large (≥ 1200px): 와이드 데스크탑

    컨테이너 (container)

    기본적으로 컨테이너는 가운데 정렬이 되어 있고, 그리드의 행들을 감싸주는 역할을 합니다 (행들은 열들을 감싸주고 있고요!). 컨테이너의 종류는 두 가지인데요.

    1. <div class="container">: 구간별로 그리드에 고정된 width를 설정해줍니다.
    2. <div class="container-fluid">: 그리드는 항상 width: 100%;입니다.

    만약 구간별로 그리드에 고정된 가로값을 설정해주고 싶으면 "container" 클래스를 사용하세요. 구간별로 그리드가 고정되어 있으면 레이아웃이 더 예상 가능합니다. 따라서 저는 개인적으로 "container" 클래스를 사용하는 것을 선호하고, 디자이너에게 이렇게 구간별로 고정되는 방식으로 만들기를 부탁합니다!

    "container"클래스를 사용하면 아래의 CSS 코드가 적용됩니다.

    .container {
  width: 100%;/* extra small */padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* small */@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* medium */@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

/* large */@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* extra large */@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

    저는 많은 경우에 "container" 클래스를 선호하지만, 상황에 따라 그리드가 항상 100%의 가로 길이를 갖는 것이 좋을 때가 있습니다. 그럴 때는 "container-fluid" 클래스를 사용하면 됩니다.

    "container-fluid"클래스를 사용하면 아래의 CSS 코드가 적용됩니다.

    .container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

    열 (column)

    반응형 구간별로 (총 12칸 중) 열이 차지하는 칸의 개수도 다르게 할 수 있습니다.

    예시를 몇 가지 봅시다.

    예시 1 (구간별로 모두 설정되어 있는 경우)

    <div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">
    1. Extra Small (< 576px): 12칸을 모두 차지
    2. Small (≥ 576px): 6칸 차지
    3. Medium (≥ 768px): 4칸 차지
    4. Large (≥ 992px): 3칸 차지
    5. Extra Large (≥ 1200px): 2칸 차지

    예시 2 (특정 구간만 설정되어 있는 경우)

    아래와 같이 특정 구간에만 열 수가 설정되어 있는 경우도 있습니다. 그렇다면 그 구간부터 새로운 설정이 있는 상위 구간까지는 같은 칸 수를 차지합니다.

    <div class="col-12 col-lg-3">
    1. Extra Small (< 576px): 12칸을 모두 차지
    2. Small (≥ 576px): 12칸을 모두 차지
    3. Medium (≥ 768px): 12칸을 모두 차지
    4. Large (≥ 992px): 3칸 차지
    5. Extra Large (≥ 1200px): 3칸 차지
    <div class="col-6">
    1. Extra Small (< 576px): 6칸 차지
    2. Small (≥ 576px): 6칸 차지
    3. Medium (≥ 768px): 6칸 차지
    4. Large (≥ 992px): 6칸 차지
    5. Extra Large (≥ 1200px): 6칸 차지
    profile
    epi
    👀
    이전 포스트

    TIL 4. HTML/CSS

    다음 포스트

    다들 Git Flow 쓰고 계신가요?

    0개의 댓글