1. wrapper vs l_wrapper
우리는 과제를 할 때 wrapper 보단 l_wrapper를 자주 사용했다. 그 이유는 레이아웃을 잡을때, header, main, footer 등으로 큰 레이아웃을 잡고, 그 아래 하위로 l_wrapper로 각 시멘틱 태그 아래 넣어주어 전체적인 레이아웃을 틀을 잡았었다.
하다보니 l_wrapper와 wrapper를 나누어 사용할 때가 있었다. 이 둘의 차이점은 무엇일까?
- wrapper : 이는 레이아웃 클래스가 아니고, 공공재 또한 아니면 그저 전체적으로 크게 묶을 때 사용한다. 예를 들면 아래와 같은 이미지를 만들때, l_wrapper가 아닌 wrapper로 전체적으로 감싸고 그리고 하위에 상세하게 레이아웃을 잡는 것이다.
- l_wrapper : 이는 공공재, 즉 재활용이 가능한가? 라는 의문에 있어, 재활용이 가능하다 라고 할 때 이를 사용한다. 이게 무슨 말이냐 하면, 공통적으로 나오는 레이아웃을 공공재, 즉 재사용이 가능한 wrapper를 만들때 사용한다. 그래서 앞에 Layout의 L을 따서 l_wrapper라고 클래스명을 짓는 것이다. 여러 섹션에 대해 공통적으로 나올 때 사용한다.
위와 비슷한 것으로 그리드를 만들 때 l_row와 l_col이 있다. 이는 보통 그리드에서 레이아웃을 잡을 때 사용을 하게 되며, 이 또한 공공재의 개념으로 사용하게 된다.
wrapper 와 l_wrapper의 사용에 대해서는 많이 만들어봐야 알 거 같다.
'HTML & CSS' 카테고리의 다른 글
object-fit: cover, contain (0) | 2024.08.17 |
---|---|
aspect-ratio 두 번째 (0) | 2024.08.17 |
z-index (0) | 2024.08.14 |
position absolute (0) | 2024.08.14 |
aspect-ratio 이란? (0) | 2024.08.13 |