블록요소는 모든 인라인 요소를 포함할 수 있으며, 블록요소도 포함할 수 있다.블록요소의 종류
- dt, dd, ul, li, ol, dl, div, p, h1, h2, h3, h4, h5, h6
인라인 요소는 다른 인라인 요소를 포함할 수 있으며, 기본적으로 컨텐츠가 끝나는 지점가지 넓이를 가지게 된다.인라인요소의 종류
- a, img, span, srong, input, textarea, select
*인라인은 width , height , padding-top , margin-top/bottom 이 안됨 / display : block 화 한다.
inline, block 요소를 변경해야할때 display 속성을 사용한다.
- block
- inline
- inline-block
ex) display: block; / display: inline; / display: inline-block;
- #box{visibility: hidden;} 형태를 가진채로 보이지 않게한다.
- #box{opacity: .5;} 형태를 가진채로 보이지 않게한다.
- #box{display: none;} 형태조차도 없어진다.
box-sizing: content-box | border-box | initial | inherit
- content-box : 콘텐트 영역을 기준으로 크기를 정한다.
- border-box : 테두리를 기준으로 크기를 정한다.
- initial : 기본값으로 설정한다.
- inherit : 부모 요소의 속성값을 상속받는다.
*같은 넓이와 높이의 박스 크기라도 패딩값이 들어가면 박스의 사이즈가 커지게 된다. 박스의 사이즈를 유지하려고 한다면 box-sizing:border-box 를 사용한다.
.first{
border: 10px solid #f00;
padding: 20px;
}
.last{
border: 10px solid #f00;
padding: 20px;
box-sizing: border-box;
}
position 속성을 통해 문서 상에 요소를 배치하는 방법을 지정한다.
top, right, bottom, left 속성을 통해 요소의 최종 위치를 결정한다.
사용법은 간단하다.
- 기준을 잡는다. (예- position: relative;)
- 이동시킨다. (예- top: 50px;)
결과
HTML 구성
<body>
<div class="red-box">
<div class="green-box1"></div>
<div class="blue-box">
<div class="green-box2"></div>
</div>
</div>
</body>
CSS 구성
@charset "utf-8";
*{margin: 0; padding: 0;}
.red-box{
width: 700px;
height: 400px;
background: red;
position:relative;
top: 10px;
left: 10px;
}
.green-box1{
width: 100px;
height: 100px;
background: greenyellow;
position: absolute;
top: 0;
left: 0;
}
.blue-box{
width: 100px;
height: 100px;
> background: blue;
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.green-box2{
width: 10px;
height: 10px;
background: greenyellow;
position: absolute;
left: 50%;
transform: translate(-50%,0);
}
결과
HTML 구성
<div class="purple"> <div class="red"></div> <div class="blue"></div> <div class="green"></div> </div>
CSS 구성
body{
margin:80px 80px;
}
.purple{
width: 700px;
height: 400px;
background: violet;
position: relative;
}
.red{
width: 100px;
height: 100px;
background: red;
position: absolute;
top: -50px;
z-index: 1;
}
.blue{
width: 100px;
height: 100px;
background: blue;
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.green{
width: 100px;
height: 100px;
background: greenyellow;
position: absolute;
top: 100px;
left: 0;
}
HTML 구성
<body>
<div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
CSS 구성
.box{
width: 100px;
height: 100px;
position: absolute;
}
.box:nth-child(1){
background: red;
top: 10px;
left: 10px;
z-index: 1;
}
.box:nth-child(2){
background: greenyellow;
top: 50px;
left: 50px;
z-index: 0;
}
.box:nth-child(3){
background: plum;
top: 150px;
left: 150px;
z-index: -1;
}
body>div{
width: 400px;
height: 200px;
border: 3px solid #000;
position: relative;
overflow-y: scroll;
}
결과
- 부모가 relative 자식이 absolute 로 되어있고 부모를 벗어난 영역은
overflow-y: scroll; 을 하여 스크롤을 만든다.- z-index를 사용하여 겹쳐진 요소의 우선순위를 설정할 수 있다.
결과
HTML 구성
<body>
<div id="mainHeader">
<div id="title">
<div class="heading">
<h1>Let's Explore</h1>
</div>
</div>
<div class="gnb">
<ul>
<li><a href="#"><strong>Korean</strong></a></li>
<li><a href="#"><strong>English</strong></a></li>
<li><a href="#"><strong>Chiness</strong></a></li>
</ul>
</div>
<div class="nav">
<ul>
<li><a href="#">Html</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">JQuery</a></li>
<li><a href="#">PhotoShop</a></li>
<li><a href="#">Illustrator</a></li>
</ul>
</div>
</div>
</body>
CSS 구성
@charset "utf-8";
*{margin: 0; padding: 0;}
ul{
list-style: none;
}
a{
text-decoration: none;
}
#mainHeader{
width: 1000px;
height: 200px;
background: green;
margin: 0 auto;
position: relative;
}
#title{
text-align: center;
}
#title .heading{
position: relative;
top: 70px;
}
#title .heading h1{
color: #fff;
}
.gnb{
position: absolute;
top:0;
right: 0;
}
.gnb ul{
overflow: hidden;
}
.gnb ul li{
float: left;
}
.gnb ul li a{
display: block;
padding: 2px 10px;
}
.gnb ul li:hover a{
background: #000;
color: #fff;
}
.nav ul{
/* overflow: hidden; 사라지기 때문에 clearfix로 해결해야한다.*/
position: relative;
float: left;
left: 50%;
top: 120px;
}
.nav ul li{
float: left;
position: relative;
left: -50%;
}
.nav ul li a{
display: block;
padding: 5px 40px;
}
.nav ul li a:hover{
background: #000;
color: #fff;
}
결과
HTML 구성
<body>
<div class="border-tip">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus cum officiis nisi itaque nobis illum reiciendis placeat qui dicta ipsum sapiente, officia harum facilis doloremque est rem odio dolorum obcaecati.
<div class="left"></div>
<div class="right"></div>
<div class="right-s"></div>
</div>
</body>
CSS 구성
.border-tip{
position: relative;
width: 400px;
padding: 10px;
left: 50%;
top: 100px;
transform: translateX(-50%);
background: yellowgreen;
text-align: justify;
}
.border-tip::before{
content:"";
position: absolute;
left: 50%;
transform: translateX(-50%);
border-bottom: 10px solid yellowgreen;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
top: -10px;
}
.border-tip::after{
content:"";
position: absolute;
left: 50%;
transform: translateX(-50%);
border-top: 10px solid yellowgreen;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
bottom: -10px;
}
.border-tip .left{
content:"";
position: absolute;
top: 50%;
transform: translateY(-50%);
border-right: 10px solid yellowgreen;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
left: -10px;
}
.border-tip .right{
/* content:""; 컨텐츠가 없어서 없어도 됨 */
position: absolute;
top: 50%;
transform: translateY(-50%);
border-left: 10px solid yellowgreen;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
right: -10px;
z-index: 1;
}
결과
HTML 구성
<body>
<nav id="menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</nav>
</body>
CSS 구성
@charset "utf-8";
*{margin: 0; padding: 0;}
body{
margin: 0;
color: #404040;
font: 13px/1.5 "맑은고딕", sans-serif;
background: url(../img/img.jpg) no-repeat center top/cover;
}
#menu ul{
list-style: none;
overflow: hidden;
}
#menu ul li{
float: left;
}
#menu ul li a{
text-decoration: none;
text-transform: uppercase;
padding: 10px 10px 15px 10px;
display: block;
color: #888;
font-size: 18px;
background: #292929;
margin-right: 1px;
}
#menu ul li a:hover{
border-bottom: 5px solid orange;
padding-bottom: 10px;
}
a태그 패딩으로 메뉴의 넓이를 정하고 메뉴 하단에 들어간 padding 값 만큼 border-bottom과 padding-bottom을 적용해야 잘 적용된다.
결과
HTML 구성
<body>
<nav id="menu">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
<li><a href="#">menu4</a></li>
<li><a href="#">menu5</a></li>
<li><a href="#">menu6</a></li>
</ul>
</nav>
</body>
CSS 구성
@charset "utf-8";
*{margin: 0; padding: 0;}
body{
margin: 0;
color: #404040;
font: 13px/1.5 "맑은고딕", sans-serif;
background: url(../img/img.jpg) no-repeat center top/cover;
}
#menu ul{
list-style: none;
overflow: hidden;
}
#menu ul li{
width: 100px;
text-align: center;
margin-bottom: 1px;
}
#menu ul li a{
text-decoration: none;
text-transform: uppercase;
padding: 10px 10px 10px 15px;
display: block;
color: #888;
font-size: 18px;
background: #292929;
margin-right: 1px;
}
#menu ul li a:hover{
border-left: 5px solid orange;
padding-left: 10px;
}
결과
HTML 구성
<body>
<div id="nav">
<ul>
<li><a href="#">처음으로</a></li>
<li><a href="#">등잔펜션 안내</a>
<ul>
<li><a href="#">소개합니다</a></li>
<li><a href="#">오시는 길</a></li>
</ul>
</li>
<li><a href="#">이용 방법</a>
<ul>
<li><a href="#">객실둘러보기</a></li>
<li><a href="#">요금 안내</a></li>
<li><a href="#">예약 방법</a></li>
<li><a href="#">예약 게시판</a></li>
</ul>
</li>
<li><a href="#">게시판</a>
<ul>
<li><a href="#">공지사항</a></li>
<li><a href="#">묻고 답하기</a></li>
</ul>
</li>
<li><a href="#">프로필</a></li>
</ul>
</div>
</body>
CSS 구성
@charset "utf-8";
*{margin: 0; padding: 0;}
ul{
list-style: none;
}
a{
text-decoration: none;
color: #333;
}
body{
margin: 50px;
}
#nav{
width: 100%;
height: 50px;
}
#nav>ul{
width: 1440px;
margin: 0 auto;
background: rgb(49, 127, 140);
border-radius: 5px;
}
#nav>ul::after{
content: "";
display: block;
clear: both;
}
#nav>ul>li{
float: left;
width: 150px;
margin: 0 5px;
text-align: center;
}
#nav>ul>li>a{
font-weight: bold;
padding: 15px 10px 15px 10px;
display: block;
border-radius: 3px;
}
#nav>ul>li:hover>a{
}
#nav>ul>li>ul{
display: none;
position: absolute;
width: 150px;
background: rgb(58, 182, 139);
}
#nav>ul>li:hover>ul{
display: block;
}
#nav>ul>li>ul li{}
#nav>ul>li>ul li a{
display: block;
padding: 10px;
}
#nav>ul>li>ul li:hover a{
background: pink;
color: red;
}