- 생활코딩 WEB2 - CSS (2)2022년 01월 10일
- 슬용이
- 작성자
- 2022.01.10.오후09:45
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 다음글이전글이전 글이 없습니다.댓글
스킨 업데이트 안내
현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)