2022-01-10
박스모델 / 그리드
Padding 부분의 숫자를 더블 클릭하고 방향키 위,아래를 이용해 숫자를 변경할 수 있다.
실시간으로 바로바로 바뀌는 값을 확인 가능!
<style>
#grid {
display: grid;
grid-template-columns: 160px 1fr;
}
#article {
padding-left: 25px;
}<body>
<h1>가방 후보군</h1>
<div id="grid">
<ol>
<li>DANKER (댄커)</li><Br>
<li>DANKER (댄커)</li><Br>
<li>DANKER (댄커)</li>
</ol>
<div id="article">
<a href="https://www.styleshare.kr/goods/987303"><h2>1. DANKER (댄커) (U0323CBP92) 🔗</h2></a>
<p><img src="https://usercontents-d.styleshare.io/images/36dfab25-4615-4d32-af1e-94187297a250/1440x1440" width="250" height="250"></p>
<p style="margin-top: 50px;">
<strong>브랜드</strong> : DANKER (댄커)<br>
<strong>가격</strong> : 80,460<br>
<strong>비고</strong> : 노트북수납칸이 있음<br>
</p>
</divㅑ>
</div>
</body>
</html>
그럼 하단 <div>에 id값 article을 추가해주고,
웹페이지를 보면서 적당한 padding-left 값을 style에 추가해주도록 하자.
#ol → #grid ol작성한 코드 중에서 grid내에 있는 ol에 대하여 스타일이 지정되어 있는데,
이 값은 나중에 본문에 ol이 추가될 경우를 위해 표기를 명확히 해주는 것이 좋다.
#grid ol {
border-right: 1px solid gray;
width: 120px;
margin: 0;
padding: 20px;
}
'🔗 HTML & CSS' 카테고리의 다른 글
| CodeAcademy - HTML Table (0) | 2022.01.12 |
|---|---|
| 생활코딩 WEB2 - CSS (3) (0) | 2022.01.11 |
| 생활코딩 WEB2 - CSS (1) (0) | 2022.01.09 |
| 생활코딩 WEB1 - HTML & Internet (3) (1) | 2022.01.05 |
| 생활코딩 WEB1 - HTML & Internet (2) (0) | 2022.01.04 |
댓글