Block 과 Inline
block : 한 줄을 전부 차지
<h1>,<p>,<ul>,<li>,<table>,<blockquote>,<pre>,<div>,<form>,<header>,<nav> 등의 태그에 적용
태그 : { display:block; }
inline : 한 줄에 차례대로 배치
<a>,<img>,<strong>,<em>,<br>,<input>,<span> 등 태그에 적용
태그 : { display: inline; }
Display 속성
display:none; 없는 것으로 간주
display:hidden; 화면에서 감춰짐
display:inline; 인라인으로 설정
display:block 블록으로 설정
좌표값 지정
요소의 위치 : top, bottom, left, right 속성으로 결정
화면 배치 속성
- position 속성 : 위치 지정 방식
absolute,fixed,static(기본값),relative : 요소와 요소 사이의 위치 지정을 상대적(relative), 고정값(static), fixed(요소 고정)
- left : 왼쪽 간격 ,right : 오른쪽 간격, top :위쪽 간격, bottom: 아래쪽 간격
- position 속성은 4가지 위치 지정 방식 지정
- 4가지 방향의 간격을 지정하는 left,right,top,bottom과 같이 사용
- top 속성이 설정되면 bottom 속성값이 지정되더라도 무시 (top이 우선)
- left속성값도 right값보다 우선시 된다.
- left,right,top,bottom 속성은 상위 박스와의 경계로부터 얼마나 간격(offset)을 둘 것인지를 지정
- 항상 엘리먼트 컨테이너가 어느 위치에서 시작되냐는 좌측상단의 좌표값이 기준점
-주로 left,top이 엘리먼트의 시작점(배치 공간의 좌측 상단 위치 결정)
- width값 height값 해서 크기를 설정
- right과 bottom로 배치 공간의 우측 하단 위치를 결정할 수 있으나, 잘 쓰이지 않음.
Position 위치 지정 방식
absolute 절대 위치 : 상위 부모 엘리먼트를 기준으로 위치 지정, 상위 박스 위치가 바뀌면 따라서 위치 이동, 다른 박스와 독립적이며 다른 박스와 중첩 가능
fixted 고정 : 웹 브라우저 창 기준 위치 지정, 페이지 안의 다른 박스와 독립적, 중첩 가능
static 정적 위치 : 웹 문서에 나열된 엘리먼트 순으로 위치 지정(표준 방식)
다른 박스와의 앞뒤 순서관계를 유지하며 중첩 불가능 표시 후 이동 불가
relative 상대 위치 : 엘리먼트 자신의 정적 위치를 기준으로 상대적인 위치 지정 , 다른 박스와 독립적
float 배치 방향
float ) 박스 정렬 방향 - left, right, none(기본값) : 박스 부유 배치 기준 설정(왼쪽, 오른쪽 정렬, 부유 비적용)
clear ) 박스 정렬 해제 방향 - left, right, both : 박스 부유 배치 해제 지정
overflow) - hidden : 하위 태그에서 설정한 부유 속성을 내부로만 제한(뒤에 오는 태그에 영향 미치지 않음)
- overflow 속성값 : visible(기본) 넘치는 부분 표시 , scroll 넘치지 않아도 스크롤바, auto : 넘치는 부분 감추고 스크롤바로 표시, hidden: 넘치는 부분 감춤
Float 속성
- 화면 상에서 떠 있는 것과 같은 박스 공간 만들 때 사용
- 이미지와 문단을 배치하거나, 수평으로 박스 공간 좌우로 정렬 시에 주로 사용하는데
- 박스 공간의 위치를 고정시키고 남은 옆 공간을 채우도록 주변 요소들을 끌어들임
- float 속성을 적용하면 태그 사이의 상하 계층 구조에 상관없이 뒤에 오는 태그에 지속적인 영향을 받는다.
- 하나의 콘텐츠 주위로 다른 콘텐츠들이 물처럼 흘러가는 스타일
float 해제 방법
- clear 속성 값을 both로 설정 : 설정한 새로운 태그 영역 위로 float 모드가 설정된 이전 태그가 더 이상 떠있지 못하도록
- float 모드를 설정한 태그를 묶어서 상위 부모 태그를 생성하고, 부모 태그의 overflow 속성값을 'hidden'으로 설정
: 원래 overflow는 하위 엘리먼트 내용이 상위 엘리먼트 영역을 벗어날 때 표시하는 방법을 지시하는 속성값이다.
: 따라서, overflow : hidden 은 범위를 벗어난 부분이 보이지 않게 하므로, 범위 밖으로 영향을 미치지 않는다는 특성 때문에 lfoat모드를 해제할 때에도 적용할 수 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float2</title>
<style type="text/css">
img{
float:left;
}
div{
float:right;
width:100px;
height:100px;
margin:10px;
background-color:yellow;
}
#div4{
clear:both; /* 위에서의 float의 효과를 상쇄시킴. */
float:left;
}
/* 웹 브라우저의 크기에 따라서 div의 위치가 바뀜 */
</style>
</head>
<body>
<img alt="" src="../image/image.png">
<p>공부를 좀 재밌게 하는 방법이 없을까? </p>
<p>이것저것 해보면서 재미를 붙여보는 게 어때애?!</p>
<P>솔직히 문과 공부보다는 재밌을 수밖에 없을텐데 그치그치?! 기술이잖아.
배우면 는다고!</P>
<div>div1</div>
<div>div2</div>
<div>div3</div>
<div id="div4">div4</div>
</body>
</html>
레이어(z-index) : 레이아웃이 겹칠 때
태그 { z -index : 값 } : z-index가 클 경우 위에 표시되고, z-index가 낮은 경우 가려진다. (3차원 큐브도형의z축)
OverFlow
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
p {
background:aqua;
width:200px;
height:50px;
}
#target {
border: 1px solid black;
width:300px;
height:100px;
overflow:auto;
/* hidden : 넘치는 요소 표시하지 않음. */
/* visible : 내용이 넘치는 부분을 표시(기본) */
/* scroll : 넘치는 부분에 스크롤바가 생긴다. */
}
</style>
</head>
<body>
<div id="target">
<p>블록1</p>
<p>블록2</p>
<p>블록3</p>
<p>블록4</p>
<p>블록5</p>
</div>
</body>
</html>레이아웃
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>mainUI</title>
<style type="text/css">
#header {
width: 100%;
height: 50px;
color: white;
}
#bar {
width: 100%;
height: 50px;
color: white;
background-color: rgb(55,79,141);
}
#nav {
background-color: #f1dcf2;
width: 30%;
height: 200px;
float:left;
}
#content {
background-color: rgb(220,220,220);
width: 70%;
height: 200px;
float:right;
}
#footer {
background-color: rgb(55,79,141);
width: 100%;
height: 50px;
color: white;
clear: both;
}
</style>
</head>
<body>
<div id="page">
<div id="header">
<img src="../image/jqmlogo.png" width="80" height="30">
</div>
<div id="bar"></div>
<div id="nav">nav</div>
<div id="content">content</div>
<div id="footer">footer</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
<style type="text/css">
#header{
width: 100%;
height: 200px;
background-image: url("../image/bg.png");
background-repeat: no-repeat;
background-size: cover; /* 배경이미지가 가로 세로 비율 유지
하면서 해당 요소의 화면을 꽉 채운다. */
color: white;
text-align:center;
}
#nav {
background-color: #f1dcf2;
width:30%;
float:left;
}
#content {
background-color : #e4f2d0;
width:70%;
float:right;
}
#footer{
background-color: #085c3c;
width:100%;
height:100px;
color:white;
text-align:center;
clear:both;
}
</style>
</head>
<body>
<div id="header">
<h1>제주도 민박</h1>
<h2>가장 제주다운 민박집</h2>
</div>
<div id="nav">
<ul>
<li><a href="#">이용안내</a></li>
<li><a href="#">객실소개</a></li>
<li><a href="#">예약방법</a></li>
<li><a href="#">예약하기</a></li>
</ul>
</div>
<div id="content">
<h2>제주 민박 소개</h2>
<h3>제주 서귀포 게스트 하우스형식의 현대적 민박집을 소개합니다.</h3>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<p>성산읍에 위치하고 있어 늘 쾌적한 바람이 불고 볼거리 많은 민박집입니다.</p>
<img id="bannerimg" alt="" src="../image/jeju3.png" width="100%" height="300px">
</div>
<div id="footer">
<p>제주특별자치도 서귀포시 성산읍</p>
<address>
예약문의 010-###-####
<a href="mailto:minpark@gmail.com">minpark@gmail.com</a>
</address>
<p>Copyright © All rights reserved.</p>
</div>
</body>
</html>'WEB > CSS' 카테고리의 다른 글
| CSS - 박스 모델 (0) | 2022.06.16 |
|---|---|
| CSS 기본 예제 (0) | 2022.06.15 |
