2024-10-10
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul {
width: 100%; /* 가로 너비 속성 */
height: 50px; /* 세로 너비 속성 */
background-color: #069; /* 배경 색상 속성 */
list-style-type: none; /* 리스트의 점을 제거하는 속성 */
}
ul li a{
color: #fff;
text-decoration: none; /* a 링크 태그의 밑줄 제거 속성 */
}
ul li {
display: inline-block;
margin: 10px 120px;
padding: 5px;
}
</style>
</head>
<body>
<!--
display 속성
- 웹 페이지 상에서 요소들이 어떻게 보여지고 다른 요소와
어떻게 상호 배치 되는지를 결정하는 속성.
* inline : display 속성이 inline으로 지정된 요소는
전후 줄바꿈이 없이 한 줄에 다른 요소들과 나란히
배치가됨. 하지만 margin 이나 padding 여백은
줄 수가 없음.
* block : dispalay 속성이 block 으로 지정된 요소는 전후
줄 바꿈이 들어가 다른 요소들을 다른 줄로 밀어내고
혼자 한 줄을 차지함.
* inline-block : display 속성이 inline-block 으로 지정된
요소는 기본적으로 inline 요소처럼 전후
줄 바꿈 없이 한 줄에 다른 여서들과 나란히
배치가 됨.
하지만 inline 요소에서 불가능하던 width와
height 속성 및 margin, padding 속성을
간격 지정이 가능함.
-->
<ul>
<li> <a href="#">회사소개</a></li>
<li> <a href="#">사업영역</a></li>
<li> <a href="#">제품문의</a></li>
<li> <a href="#">고객센터</a></li>
</ul>
</body>
</html>
