CSS : 그리드 미리보기

 

참조: 그리드 - 생활코딩

 

이번 강의의 결과물

 

두 칼럼이 있는 그리드 적용 결과

 

이번 강의를 통해 알게 된 것

1. div의 존재
2. HTML/CSS에는 위계질서가 중요하다!

---

 

1. div 태그

 

<div> 태그는 '태그를 위한 태그'로서, 그 자체로는 아무 의미를 가지지 않는다. 여러 태그들을 하나의 클래스 또는 아이디로 감싸고 싶을 때, 또는 그러한 묶음을 하나의 요소로 지정하고 싶을 때 '포장지' 같은 개념으로 사용한다. 

 

 이 때, block level의 경우 <div>, in-line의 경우 <span>을 흔히 쓴다고 한다.

 

 

 

 

2. 코드 간 계층

물론 이 때의 위계질서란 직급이 아니라, 어떤 코드가 '선행'하는지, 또는 어떤 코드를 '포함'하는지의 여부이다.

 

<div id="grid">
    <ol>
      <h2> 메뉴 </h2>
      <br>
      <li><a href="2.html" class="saw">강연</a> </li>
      <li><a href="3.html" class="saw">읽을거리</a> </li>
      <li><a href="4.html" class="saw">충전</a> </li>
    </ol>
    <div id="article">
      <h3> 강연 </h3>
      <p>
        제가 들은 강연을 정리해놓았습니다. 커리어연세에서 열리는 강의, CP Team에서 열어준 글로벌 취업 콘서트, 여성 테크 행사 등 발로 뛰어 찾아낸 강연들을 정리하고, 간략한 감상문을 올릴 예정입니다.
      </p>
    </div>
  </div>

 

들여쓰기를 통해 코드 간 계층을 표현한다.

 

위의 예시에서 보면, "grid"라는 아이디 밑에 1) ol과 2) article 아이디의 두 요소가 포함되어 있는 것을 알 수 있다.

여기서 ol 하단에 있는 h2와 3개의 리스트들은 ol에 직접적으로 포함되어 있으므로 들여쓰기로 article과 구별을 해주어야 한다.

(여기서 잠깐 ol의 속성을 설명하자면, ol 밑에 리스트가 아닌 요소가 오는 것도 가능하다. 다만 자동으로 숫자를 매기지 않는다.)

 

 

 

---

 

그리도 미리보기

 

'그리드'라는 것은 기본적으로 하나의 공간에서 여러 요소들을 병렬적으로 배치하는 개념이기에, 그리드를 활용하려면 우선 여러 요소를 하나의 공통분모로 묶어야만 한다.

 

<style>
#grid {
    display: grid;
    grid-template-columns: 150px 1fr;
  }
  #grid ol {
    border-right: thick double #32a1ce;
    width: 100px;
    margin:0px;
    padding: 30px;
  }
  #grid ol h2{
    border-bottom: 1px lightgray solid;
    margin: 0px;
    text-align: center;
    font-size: 20px;
  }
  #grid #article {
    padding-left:25px;
  }
</style>

 

ol, h2는 각각 하나밖에 존재하지 않기에 선택자를 그냥 ol 또는 h2라고 해도 무방하지만, 후에 쓸 수 있을 코드를 위해 태그는 구체적일 수록 좋다고 한다.

 

h2의 경우 ol에 포함된 h2의 관계성을 보여주기 위해 ol h2로 작성하였다. 

 

그리드에서 각 요소의 비례 관계는 '1fr', '2fr' 등 (숫자)fr로 표현이 가능하다. 1fr은 1:1 관계, 2fr은 1:2를 의미한다.

그리드를 활용하면 화면 크기에 따라 길이를 동적으로 조절할 수 있다. 

 

예시에서는 우선 첫 번째 column인 ol을 150px로 고정하였고, 이후 아이템은 남는 공간 안에서 가변적으로 1:1로 크기를 조절하도록 하였다. 아쉽게도 column을 단 두 개만 지정했기 때문에 (왜 그랬지) 실제로 1fr 비율이 적용된 형태는 볼 수 없었다.