[ codeit ] 웹 퍼블리싱 - HTML/CSS 핵심 개념 (4)

 반응형 웹 

1강. 반응형 웹

h1{font-size: 24px;}

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

 

2강. 반응형 그리드

<meta name="viewport" content="width=device-width, initial-scale=1.0">

 

3강. 이노

//세로정렬
.helper{
   display:inline-block;
   vertical-align: middle;
}
.center{
   display:inline-block;
   vertical-align: middle;
}

<div class="helper"></div><!--inline-block 여백 삭제
--><div class="center"></div>

 

 부트스트랩 

1강. 새로운 기술을 배우는 법

2강. 부트스트랩 소개

twitter 개발자 제공의 HTML, CSS, JS 프레임워크

css, js 스타일태그 가져오기

 

3강. 부트스트랩 그리드

container, row(행), column(열)

container > row > column

부트스트랩 그리드에는 한 줄에 기본적으로 12칸의 열(column)이 존재, 예를 들어서 한 줄을 정확히 3등분하고 싶으면 네 칸을 차지하는 열 세 개로 나눔, 한 행에 12칸이 넘는 열이 들어간다면, 새로운 줄로 넘어감

<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>

 

4강. 부트스트랩 반응형 그리드

부트스트랩 구간

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

 

컨테이너(container) :기본적으로 가운데 정렬, 그리드의 행을 감싸주는 역할(행은 열을 감싸줌)

- <div class="container"> : 구간별로 그리드에 고정된 width 설정

- <div class="container-fluid"> : 항상 100%의 그리드

//고정너비 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;
  }
}

//100%너비의 container-fluid css 코드
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

 

열(row) : 기본으로 12개의 열을 가짐

//구간별로 모두 설정되어 있는 경우
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2">

//Extra Small (< 576px): 12칸을 모두 차지
//Small (≥ 576px): 6칸 차지
//Medium (≥ 768px): 4칸 차지
//Large (≥ 992px): 3칸 차지
//Extra Large (≥ 1200px): 2칸 차지



//특정 구간만 설정되어 있는 경우
<div class="col-12 col-lg-3">

//Extra Small (< 576px): 12칸을 모두 차지
//Small (≥ 576px): 12칸을 모두 차지
//Medium (≥ 768px): 12칸을 모두 차지
//Large (≥ 992px): 3칸 차지
//Extra Large (≥ 1200px): 3칸 차지

 

HTML entity 

ex) &nbsp(띄어쓰기), &times(x)..