오늘 한 것

heading

<section class="news">
  <h2 class="news-heading" id="newsHeading">새소식</h2>
  <article class="news-article">
    <a href="#" class="news-article-link">
      <h3 class="news-article-subject">W3C 사이트가 리뉴얼 되었습니다.</h3>
      <time class="news-article-date" datetime="2020-10-28T13:30:34"
        >2020.10.28</time
      >
      <p class="news-article-brief">
        디자인 및 다양한 view 환경을 고려하여 구성되어 있으며, 기존보다 최신
        정보 및 개발자를 위한 기술 가이드도 찾기 쉽도록 구성되어 있습니다.
      </p>
      <figure class="news-article-thumbnail">
        <img
          src="./images/news.gif"
          alt=""
          aria-labelledby="newsArticleThumbnail"
        />
        <figcaption id="newsArticleThumbnail">W3C 리뉴얼</figcaption>
      </figure>
    </a>
    <a class="news-more icon-plus" href="#" aria-labelledby="newsHeading"
      >더보기</a
    >
  </article>
</section>

위와 같이 <h2></h2>, <h3></h3> 등 heading 태그를 사용하면 아래와 같이 목차에 일목요연하게 정리되는 것을 볼 수 있다.

위와 같은 논리적이고 높은 접근성을 가진 페이지를 구축하기 위해서는 heading 태그를 잘 이용해야한다.

normarl flow

normal flow란 CSS 레이아웃 기법 중 어떤 것에도 제어받지 않고 자연스러운 흐름대로 배치되는 것을 뜻한다.
사실 상 마크업 이후 CSS로 레이아웃 관련 속성을 주지 않은 상태로 자연스럽게 배치된 상태이다.
레이아웃으로 요소를 배치하는 속성은
- display: block, inline, inline-block
- float
- position
- flex
- grid 등이 있다.
아래 영상은 float 속성이 레이아웃을 어떻게 움직이고 normal flow 상태인 요소는 어떤 영향을 받았는지 설명하는 영상이다.

Grid

본래 웹 페이지에 레이아웃을 줄 때는 고전적인 <table>을 이용한 레이아웃부터 frame레이아웃을 거쳐, 지금도 많이 쓰이는 <float>, <position> 등으로 발전하였다. 하지만 비교적 최근 flex를 통해 좀 더 합리적이고 편리한 레이아웃 방법이 나왔다.
위의 레이아웃 방법들 보다 더 발전한 레이아웃 기술은 grid 속성이다. grid는 말 그대로 화면에 격자를 그려 선들의 교차로 이뤄진 바둑판에 요소를 배치하는 것이다.
아쉽게도 IE 브라우저 등에서 호환성 문제가 발생해 아직 상용화되지 못 하였다. 하지만 매우 합리적인 레이아웃 기술로 앞으로가 기대된다.

Example

위에서 heading 설명에 사용한 HTML에 디자인을 해보려한다.

위와 같은 디자인을 위해 CSS를 작성하였다.

1
2
3

.news-article {
  padding: 0 0 0 130px;
}

<img>는 position: absolute로 배치하였고 새소식란의 <heading>, <time>, <p> 등의 배치를 위해서 padding 속성을 이용했다.
아래는 grid를 이용한 CSS다.

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumbnail subject "
    "thumbnail date"
    "thumbnail brief";
}
.news-article-subject {
  grid-area: subject;
}
.news-article-date {
  grid-area: date;
}
.news-article-brief {
  grid-area: brief;
}
.news-article-thumbnail {
  grid-area: thumbnail;
}

위 코드도 마찬가지로 필요한 부분만 발췌하였다. 언뜻보면 grid를 이용한 것이 더 복잡해 보이지만, 레이아웃의 범위가 늘어나고 배치할 요소가 많아질 수록 grid를 이용하면 배치 난이도가 매우 쉬워지며 각 요소의 위치를 쉽게 조절할 수 있다.

grid-area 영역 이름

위의 예제에서 이미 아래와 같이 grid-area 영역이름을 사용했다.

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "thumbnail subject "
    "thumbnail date"
    "thumbnail brief";
}
.news-article-subject {
  grid-area: subject;
}
.news-article-date {
  grid-area: date;
}
.news-article-brief {
  grid-area: brief;
}
.news-article-thumbnail {
  grid-area: thumbnail;
}

위의 영역이름을 이용한 배치는 아래와 같이 바꿀 수 있다.

.news-article-link {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-rows: auto auto;
}
.news-article-subject {
  grid-area: 1 / 2;
}
.news-article-date {
  grid-area: 2 /2;
}
.news-article-brief {
  grid-area: 3 / 2;
}
.news-article-thumbnail {
  grid-area: 1 / 1 / 4 / 2;
}

grid-area의 단축속성 순서이다. grid-area: <grid-row-start> / <grid-column-start> / <grid-row-end> / <grid-column-end>;
이 예제는 grid를 나눈 line을 기준으로 배치한 것이다. 아래 결과를 확인하면 쉽게 이해된다.

grid는 위와 같이 line 마다 고유의 번호가 붙으며 이를 기준으로 배치하면 된다.
위 사진에서 볼 수 있듯 chrome 브라우저보다 firefox 브라우저가 grid를 이해하기 더 쉽다. 연습할 때는 참고하자.

grid 참고
grid 게임

오늘 느낀 것

grid가 참 재밌다. 빨리 상용화됐으면 좋겠다. 앞으로 IE를 사용하는 사람이 있으면 다른 브라우저를 사용하도록 회유해봐야겠다.
마크업도 CSS도 조금씩 감이 잡힌다. 한가지 큰 깨달음은 생각보다 복잡하게 생각하면 안되는 것 같다. 쉽고 단순한 설계가 좋을 때가 있다. 복잡하고 많은 기능을 사용한다고 좋은 설계는 아니다. 단순하지만 본래 목적을 잃지 않은 설계를 해보자.
벌써 한 주의 반이 지났다. 남은 날도 ‘즐코’!

Nyong’s GitHub

Nyong's Blog

201028_TIL(normal flow, Grid)

오늘 한 것

heading

normarl flow

Grid

Example

grid-area 영역 이름

오늘 느낀 것