11. 그리드 써먹기

 

<ol>태그와 <h2>,<p> 태그를 나란히 놓고 싶을때 나란히 놓기 위해 먼저 <h2>태그와 <p> 태그를 묶는다.

이때 두 태그를 묶기위해 <h1> ,<li>,<a> 태그를 쓸 수 없다. 왜냐면 모두 의미가 있고 기능이 있기 때문이다.

의미도 없고 기능도 없는 무색무취 <div> 태그를 사용하여 묶어보도록 하자

<h2>태그와 <p> 태그를 먼저 <div>태그로 묶는다.

<h2>,<p>를 묶은 <div>태그와 <ol>태그 두개가 남는데 , 이 두개를 또 감싸는 공통의 부모태그가 필요하다.

<div> 태그로 또 크게 한번 묶는다.

값을 세팅 해보겠습니다.

 

여기서 <ol>태그의 padding을 33px; 로 바꾸겠습니다.

글 밀림 현상이 보여집니다. 해당 영역을 조정하기위해 <div> 태그에 id ="article" 을 지정하고 padding을 25px정도로 설정합니다.

 

위 코드 처럼 id값이 'grid'인 태그 밑에 있는 <ol>태그 라고 지정하면 훨씬 더 의미가 분명해집니다.

<ol> 이라는 태그는 이 웹페이지에 있는 모든 <ol> 중에서 부모가 'grid' 인 태그를 선택하는 선택자가 된다.