-
css - 레이아웃! 수직수평태그 그리고 displayCSS 2020. 12. 3. 02:02728x90
레이아웃이란? 웹페이지에서 박스, 텍스트, 이미지, 동영상 등의 html요소를 배치하는 것을 말한다.
인라인(수평 방향 레이아웃)
→
<span>
<img>
<a>
<input>
<select>
<textarea>
등등
블록 (수직 방향 레이아웃)
↓
<h1>~<h6>
<p>
<div>
<table>
<ul>
<ol>
<li>
등등
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> h3{ margin-left: 40px; } li{ list-style-type: none; /* 글머리 기호 없애기 */ } #menu li{ padding: 5px; display: inline; /* 블록(수직)의 태그에 적용하여 블록을 인라인으로 변경 */ } </style> </head> <body> <h3>컴퓨터의 기본 구성</h3> <ul id="menu"> <li>모니터</li> <li>|</li> <li>키보드</li> <li>|</li> <li>마우스</li> </ul> </body> </html>
'CSS' 카테고리의 다른 글
CSS - cursor 마우스 커서 모양 (0) 2020.12.12 CSS - position 태그의 위치 설정 (0) 2020.12.11 css - table (0) 2020.12.03 css - 레이아웃, box model (0) 2020.12.02 css - 글자와 list-style-type 속성과 값 (0) 2020.12.02