CSS - 7. 그리드를 사용해보자
https://opentutorials.org/course/3086/18322
*생활코딩 강의를 따라가고 있습니다.
이미지 출처 : 생활코딩알다시피 우리의 목표는 이런 모양의 사이트를 만드는 것이다. 이를 위해 지난 시간에 배운 그리드를 한 번 적용해보자.
1. 자, 일단 부모 태그로 감싸 보자.
본문의 제목과 내용을 div로 먼저 한 번 감싸주어 하나의 박스 안에 들어가도록 만들고, 다시 우리가 나란히 놓아야 할 <ol>이라는 목차 태그와 본문을 div 태그로 감싸주자
2. 스타일에 그리드를 적용해주자
자, 그리고 목차와 본문을 감싼 <div>태그에 grid라는 id를 지정한 뒤에, 마찬가지로 스타일을 적용시켜보자.
그렇게 되면 짠-
원하는 모양이 어느 정도 나왔다!
3. 디테일 보정
원하는 모양이 어느 정도 나왔으나 아직 만족하긴 이르다 우클릭> 검사를 통해, 웹페이지에 직접 움직여보면서 수정한다. 이를테면 <ol>이 선택된 상태에서 녹색 부분의 여백을 한 번 조정해 보고 싶다면 왼쪽 아래의 값을 더블클릭, 그리고 키보드의 위, 아래 화살표를 통해 바꿔볼 수 있다.
padding-left가 32일 때 내 눈에 가장 예뻤다padding-left: 32px;
그리고 바꿔본 값의 경우 바로 적용되는 것이 아니라 움직여본 값이기 때문에, 이 추가된 부분을 내 코드에 적용시켜줘야 검사에서 바꿔본 코드가 적용된다.
4. <ol>이 여러 개가 된다면 - 선택자에 부모와 자식을 넣을 수 있다.
지금 본문에는 왼쪽에 목차로 쓰고 있는 <ol> 코드가 하나이기 때문에 저렇게 모든 <ol>에 대하여 패딩 값을 32픽셀을 준다고 자신 있게 코드를 짤 수 있다. 하지만 만약 본문에도 뭔가 1. 2. 3. 과 같은 순서대로 써야 할 것이 튀어나와 <ol>을 쓰게 된다면? 갑자기 본문에 뭔지 않는 패딩 디자인이 적용될지도 모른다.
그렇기 때문에 이러한 피해를 줄이기 위해 우리는 지금 쓴 이 <ol> 값이 다른 <ol> 값이 아니라 #grid라는 부모 밑에 있는 <ol>만 적용이 된다는 것을 표현 해 놓을 필요가 있다. 그럴 땐 자연스럽게 선택자가 이렇게 변한다.
자 이제 본문이나 다른 곳에서 마음껏 <ol>을 써도 안심이다!
