렝무식
❤️ 공통된 컨텐츠의 나열, li 영역 예제 본문
간혹 홈페이지들을 보다보면 이런 레이아웃들이 있습니다.
맥도날드 홈페이지 메인입니다.
이렇게 관련된 것들이 한 줄에 나열되어있는 형태죠!
이런 것들도 마찬가지입니다.
(요건 춘천시민축구단 홈페이지 갤러리입니다 ㅎ 제가 춘시축을 조아해서 ...)
아무튼 이런 레이아웃을 많이 확인할 수 있는데요!
저번에 inline-block 포스팅 할 때 한 번 언급한 적이 있지만, 이런 레이아웃들은 보통 ul과 li 태그를 이용해서 만듭니다.
이번에는 저렇게 관련있는 것들을 한 줄에 배치하는 레이아웃을 예시로 복습해볼게요!
저번 포스팅과 다른 점은 이미지와 텍스트가 추가 되었다는 점입니다.
이런 형태의 레이아웃입니다.
사용된 이미지는 .. 제가 그냥 쉬는시간에 마우스로 그린 애들입니다.
예제로 이미지를 많이 넣게될텐데 그 때 사용할 이미지가 여러개 있으면 좋을 것 같아서요 ㅎㅎ
(이건 그냥 명분이고 그냥 그림그리고싶어서 그렸습니다)
html 영역은 이런 식으로 나누면 됩니다.
✅ HTML
코드 텍스트는 접어놓겠습니다..!
들여쓰기 간격이 너무 커서 접어놓은건데, css 편집으로 들여쓰기 간격을 설정할 수 있군요!
code {
tab-size: 4;
}
스킨 편집창에 들어가 html 설정에서 css 코드들 맨 아래에 추가해주면
탭사이즈를 원하는 크기로 바꿀 수 있더군요 ㅎㅎ 굿굿.
<body>
<div id="wrap">
<ul>
<li>
<dl>
<dt><img src="img/test_img1.jpg" alt="1"></dt>
<dd>
<b>1번 리스트입니다.</b>
<span>포차코 귀여워</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/test_img2.jpg" alt="1"></dt>
<dd>
<b>2번 리스트입니다.</b>
<span>치이카와 귀여워</span>
</dd>
</dl>
</li>
<li>
<dl>
<dt><img src="img/test_img3.jpg" alt="1"></dt>
<dd>
<b>3번 리스트입니다.</b>
<span>우사기 귀여워</span>
</dd>
</dl>
</li>
</ul>
</div>
</body>
여기서 갑자기 dl dt dd가 나온다고 ..?
dl dt dd 태그는 본래 용어를 설명하가 위한 태그입니다. 다음과 같은 단어의 약자입니다.
dl : Description-List
dt : Description-Term
dd : Description-Description
dt에는 용어 또는 이미지, dd에는 dt에 사용된 이미지, 용어에 대한 설명을 넣는 태그입니다.
dl dt dd 순서대로 모두 사용해야하며, 그 사이에는 관련없는 다른 태그가 끼면 안 됩니다. (한마디로 dd 태그에만 다른 태그가 들어갈 수 있다는 점..!)
그런데 꼭 용어를 설명하는 용도로 사용하지 않아도 됩니다.
dt와 dd가 관련된 한 쌍일 경우 많이 사용합니다.
잠깐 다른 홈페이지 한 번 봐볼게요!
여기는 스타벅스 홈페이지 이벤트 탭입니다.
f12를 눌러 개발자도구 탭을 확인해보니, 스타벅스 홈페이지에서도 dl dt dd를 사용한 것을 확인할 수 있습니다.
dl dt dd를 사용하든, li에 img와 텍스트영역을 사용하든 딱히 정해진 방법이 있는 것은 아니지만 모두 알아놓으면 좋겠죠.
✅ CSS
#wrap {width: 1200px; margin: 50px auto;}
#wrap ul {text-align: center;}
/* height를 주는 것 보다 padding-bottom 권장 (반응형에 용이) */
#wrap ul li {display: inline-block; width: 380px; padding-bottom: 100px; background: #eee;}
/* 좌우에 딱 맞게 붙이기 위해 가운데 li 영역만 잡아서 margin을 적용 */
#wrap ul li:nth-of-type(2) {margin: 0 24px;}
#wrap ul li dl {}
#wrap ul li dl dt {}
#wrap ul li dl dt img {width: 100%; height: 300px; object-fit: cover;}
#wrap ul li dl dd {}
/* <br>로 문장을 띄지 않고 block 속성 사용
1. br태그 중복 사용을 방지 2. inline 속성에서 나오는 여백 제거 */
#wrap ul li dl dd b {display: block; padding: 35px 0 10px;}
#wrap ul li dl dd span{}
우선 모든 것을 감싸주는 div 영역이 하나 있어야 합니다.
이유는 가운데 정렬(margin: 0 auto)을 위해서도 있고, 관련있는 것들끼리 하나로 묶으려는 의도도 있습니다.
ul에는 하위 영역들의 가운데 정렬을 위해 align center를 넣어주었습니다.
-
li 안에는 이제 눈에 보이는 요소들이 들어갑니다.
inline-block을 이용해서 가로로 정렬한 모습입니다.
li 내부에 면적을 주고 싶을 때 height로 높이를 주기보다는 padding을 사용하는 것을 권장합니다.
그 이유는 주석에도 적었다시피 반응형 홈페이지를 만들 때 height 속성을 넣는 것은 좋지 않기 때문입니다.
요즘은 다양한 디바이스가 존재하기 때문에 반응형 웹도 중요한 요소 중 하나입니다.
해상도에 따라 변하는 레이아웃에서 높이 값을 주면 반응형으로 만들기가 거의 불가능하기 때문에 높이 값 속성은 부여하지 않았습니다.
그리고 사진에서는 잘 안보이지만, 각 li의 간격을 떨구기 위해 가운데 요소만 잡아서 margin을 주었습니다.
잠시 wrap 부분에 배경색을 입혀서 확인해보겠습니다.
이렇듯 양쪽 끝 리스트를 딱 맞춰서 붙이기 위해 가운데 요소만 margin을 부여합니다.
이때 주의할 점은, wrap(또는 ul)의 전체 너비와 li너비를 잘 계산해서 margin값을 넣어야한다는 점입니다.
지금 wrap에 1200px 너비가 주어져있죠!
li하나는 380px 입니다. li 너비를 모두 합하면 1140px입니다.
따라서 margin값이 60px을 넘어가면 레이아웃이 틀어집니다.
하지만! 원래 li간 주어져있는 기본 여백이 있기 때문에 .. margin값을 딱 60px에 맞추면 안됩니다.
아무튼 여백 값을 25px로 변경해볼게요.
우리가 원하는 모양이 안나옵니다.
전체너비를 넘어갔기 때문에, 아래로 내려가버린거죠
따라서 inline-block으로 레이아웃을 정렬할 때에는 너비 계산을 잘 해서 속성값을 부여해야 합니다.
-
img에 width값과 height값을 부여한 이유는 .. 그냥 그림이 정사각형 모양인데 , 너비가 좀 더 넓은 형태였으면 좋겠다고 생각해서 입니다. ㅎ
그럼 그 다음에 object-fit: cover는 무슨 의미일까요?
원래 원본이미지의 크기와 다르게 설정된 경우, 다르게 설정했는데 종횡비가 맞지 않을 경우 원래는 이미지가 찌그러지게 됩니다.
이렇게 찌그러집니다 ㅋㅋ
이때 object-fit: cover 속성을 넣게 되면 이미지가 변형되지 않은 상태로 이미지 크기를 변경해서 사용할 수 있습니다!
-
아래 텍스트 부분은 <br> 태그로 줄 바꿈을 하지 않고, b 태그에 block 속성을 부여했습니다.
b태그와 span태그는 모두 인라인 요소이기 때문에 줄 바꿈 없이 한 줄로 나열됩니다.
하지만 한 태그에 block 속성을 부여할 경우, 너비 100%가 적용되기 때문에, 다른 태그는 자동으로 아래로 내려가게 됩니다. 더군다나 텍스트와 텍스트 간의 간격도 설정할 수 있게 됩니다.
이전에 포스팅할 때 인라인 요소에는 약간의 여백이 존재한다고 했죠. 그렇기 때문에 불필요한 여백을 없애기 위해 block 요소로 변경하는 경우도 있습니다. 보통 img 태그에 여백을 없애기 위해 block 속성을 부여하는 경우가 많습니다 ㅎㅎ
이러한 레이아웃 예제는 사실 grid와 flex를 사용하면 매우 편리하고 예쁘게 나옵니다!
그치만 .. 또 다시 말하자면, grid와 flex는 소외된 브라우저에서 잘 안먹히는 경우가 있습니다.
따라서 inline-block으로 만드는 방법도 알아두는 것이 좋겠습니다.
뿅.~
'웹퍼블리싱 수업정리 > html + css + js' 카테고리의 다른 글
| 🧡 메인 슬라이드 영역 예제 (0) | 2024.03.31 |
|---|---|
| 💛 button 태그 사용 예제 (1) | 2024.03.31 |
| 💚 display: inline-block 속성을 이용한 레이아웃 예제 (0) | 2024.03.30 |
