display:inline-block 이 부분이 뭔지 잘 이해가 되지 않았다.
http://tcpschool.com/css/css_position_display
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
display 속성
display 속성은 웹 페이지의 레이아웃(layout)을 결정하는 CSS의 중요한 속성 중 하나입니다.
이 속성은 해당 HTML 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정합니다.
대부분의 HTML 요소는 display 속성의 기본값으로 다음 두 가지 값 중 하나의 값을 가집니다.
1. 블록(block)
2. 인라인(inline)
블록(block)
display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지합니다.
인라인(inline)
display 속성값이 인라인(inline)인 요소는 새로운 라인(line)에서 시작하지 않습니다.
또한, 요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지합니다.
display 속성의 기본 설정값의 변경
HTML의 모든 요소는 각각의 기본 display 속성값을 가지고 있습니다.
하지만 display 속성값이 블록인 요소의 속성값을 인라인으로 바꿀 수 있습니다.
또한, 반대로 display 속성값이 인라인인 요소의 속성값을 블록으로 바꿀 수도 있습니다.
이렇게 HTML 요소의 display 속성값을 변경함으로써 웹 페이지를 개발자가 원하는 모양으로 변경할 수 있습니다.
위의 예제에서 블록 요소인 <li>요소의 display 속성값을 인라인으로 변경하고 있습니다.
display 속성값이 인라인으로 변경된 <li>요소는 해당 라인의 모든 너비를 차지하는 블록 요소의 특징을 잃어버리게 됩니다.
display 속성값을 변경해도, 실제로 해당 요소가 완전히 다른 타입의 요소로 바뀌는 것은 아닙니다.
즉, display 속성값을 인라인에서 블록으로 변경했더라도, 변경된 요소는 내부에 다른 요소를 포함할 수 없습니다.
왜냐하면, 처음부터 display 속성값이 블록인 요소만이 내부에 다른 요소를 포함할 수 있기 때문입니다.
인라인-블록(inline-block)
인라인과 블록 이외에도 display 속성에 자주 사용되는 속성값에는 인라인-블록(inline-block)이 있습니다.
display 속성값이 인라인-블록으로 설정된 요소는 해당 요소 자체는 인라인(inline) 요소처럼 동작합니다.
하지만 해당 요소 내부에서는 블록(block) 요소처럼 동작합니다.
이처럼 인라인-블록 요소는 인라인 요소와 비슷하지만, 너비와 높이를 설정할 수 있습니다.
또한, 블록 요소처럼 margin을 이용하여 여백을 지정할 수도 있게 됩니다.
다음 예제는 다양한 display 속성값의 동작을 보여주는 예제입니다.
<style>
div { width: 100px; height: 50px; }
.first { background-color: aqua; }
.second { background-color: green; }
.third { background-color: yellow; }
.inline { display: inline; }
.inline-block { display: inline-block; }
</style>
위의 예제처럼 display 속성값이 인라인-블록으로 설정된 요소들은 인라인 요소처럼 한 줄로 늘어서게 됩니다.
하지만 블록 요소처럼 너비와 높이를 설정할 수 있게 됩니다.
따라서 웹 사이트의 메뉴나 내비게이션 바를 만들 때 자주 사용됩니다.
처음에는 잘 이해가 되지 않았지만, 위 내용을 보니 어느정도 이해가 가기 시작하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="../css/reset.css">
<style type="text/css">
/*--------------스킵네비게이션----------------*/
#skip{position: relative;}
#skip a {position: absolute; left: 0; top: -100px; border : 1px solid #fff; color: #fff; background: #333;
line-height: 30px;width: 140px;text-align: center;
}
#skip a:active,
#skip a:focus{top: 0;}
/*----------------header-menu-----------------*/
.header{}
.header-menu{
text-align: right
}
.header-menu a{
padding: 10px 0px 10px 13px; display: inline-block;color: #fff;
}
.header-menu a:hover{
color: #666;
}
.container{
width: 900px;
height: inherit;
margin: 0 auto;
background: rgba(0,0,0,0.3);
}
#header{
width: 100%;
height: 100px;
background-color: #b78b7b;
}
#cont_nav{
width: 100%;
height: 200px;
background-color: #9f654f;
}
#cont_tit{
width: 100%;
height: 200px;
background-color: #ab7865;
}
#cont_ban{
width: 100%;
height: 200px;
background-color: #e9f5f9;
}
#cont_tit{
width: 100%;
height: 200px;
background-color: #e6e7d3;
}
#cont_cont{
width: 100%;
height: 200px;
background-color: #873e23;
}
#footer{
width: 100%;
height: 100px;
background-color: #28130a;
}
</style>
</head>
<body>
<!--//스킵 네비게이션-->
<div id="skip">
<a href="#cont_nav">네비게이션 바로가기</a>
<a href="#cont_tit">타이틀 바로가기</a>
<a href="#cont_ban">배너 바로가기</a>
<a href="#cont_cont">콘텐츠 바로가기</a>
</div>
<div id="wrap">
<div id="header"><div class="container">
<div class="header-menu">
<a href="Designer">Designer</a>
<a href="Publisher">Publisher</a>
<a href="Youtube">Youtube</a>
</div>
</div></div>
<div id="cont_nav"><div class="container">cont_nav</div></div>
<div id="cont_tit"><div class="container">cont_tit</div></div>
<div id="cont_ban"><div class="container">cont_ban</div></div>
<div id="cont_cont"><div class="container">cont_cont</div></div>
<div id="footer"><div class="container">footer</div></div>
</div>
</body>
</html>위 코드를 주의깊게 잘 보자..!
'웹 프로그래밍(풀스택-->java) > 웹프로그래밍(프론트엔드-->java)' 카테고리의 다른 글
| 6. 전체 메뉴 수정 (0) | 2021.12.15 |
|---|---|
| 5. reset.css 기본 템플릿~! (0) | 2021.12.12 |
| 4. 웹 표준 사이트 만들기 - 헤더 아이콘 수정 (0) | 2021.12.12 |
| 3. 헤더 타이틀 & 웹 폰트 (0) | 2021.12.12 |
| 1. 웹 표준 사이트 만들기 (스킵네비게이션) (0) | 2021.12.10 |
