ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap1 * {
background-color: yellow;
margin: 10px;
width: 100px;
height: 100px;
}
.wrap1 > div {
display: block; /* div는 dispaly 기본값이 block */
}
</style>
</head>
<body>
<div class="wrap1">
<div>블럭요소</div>
<span>인라인요소</span>
</div>
</body>
</html>
- 그냥 .wrap1 { } 하면 제일 바깥의 div이 선택됨. .wrap1 * { } 해야 그 안에 것들이 선택된다.
- 블럭 요소는 크기 지정이 가능. 인라인 요소는 크기 지정이 불가.
(1) 블럭 요소를 인라인 요소화
.wrap1 > div {
display: block; /* div는 dispaly 기본값이 block */
display: inline; /* 블럭 요소를 인라인 요소화 */
}
(2) 인라인 요소를 블럭 요소화
.wrap1 > span {
display: block; /* 인라인 요소를 블럭 요소화 */
}
(3) 가로로 배치는 하되, 크기 지정이 초기화되지는 않게끔 하기.
- display: inline-block : 인라인 요소(가로 배치)이면서 블럭요소(크기 지정 가능)의 특징도 가짐.
.wrap2 * {
width: 100px;
height: 100px;
background-color: orange;
margin: 10px;
display: inline-block;
}
ㅁ 옆으로 배치되는 메뉴바 만들어보기
- 메뉴바는 거의 목록태그로 작성한다.
- 보통 nav로 표현한다.
<ul>
<li><a href="">메뉴1</a><a href="">메뉴2</a><a href="">메뉴3</a><a href="">메뉴4</a><a href="">메뉴5</a></li>
</ul>
- 괄호를 씌워줘야 한다.
<ul>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
<li><a href="">메뉴4</a></li>
<li><a href="">메뉴5</a></li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav { box-sizing: border-box; }
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">메뉴1</a></li>
<li><a href="#">메뉴2</a></li>
<li><a href="#">메뉴3</a></li>
<li><a href="#">메뉴4</a></li>
<li><a href="#">메뉴5</a></li>
</ul>
</body>
</html>
.nav > li {
display: inline-block;
}
.nav > li {
display: inline-block; /* 가로로 배치하고, 크기도 지정 */
width: 100px;
height: 50px;
border: 1px solid gray;
}
.nav a {
text-decoration: none; /* a태그는 기본적으로 underline. 이렇게 태그마다 스타일이 적용되어있는 경우가 있다. */
color: gray;
text-align: center;
}
- 가운데 정렬이 안 된다. border를 넣어서 확인해 본다.
.nav a {
text-decoration: none; /* a태그는 기본적으로 underline. 이렇게 태그마다 스타일이 적용되어있는 경우가 있다. */
color: gray;
text-align: center;
border: 1px solid red;
}
- a가 인라인 요소여서 가운데 정렬이 의미가 없다. a 태그를 블럭요소로 바꾼다.
.nav a {
text-decoration: none; /* a태그는 기본적으로 underline. 이렇게 태그마다 스타일이 적용되어있는 경우가 있다. */
color: gray;
text-align: center;
border: 1px solid red;
display: block;
/* vertical-align: middle; 이건 인라인 요소에만 사용 가능. 세로 가운데 정렬. */
height: 50px;
line-height: 50px;
}
- 세로 가운데 정렬하려면 height와 line-height를 같게 주면 된다. 많이 쓰는 방법.
<style>
.nav { box-sizing: border-box; }
.nav > li {
display: inline-block; /* 가로로 배치하고, 크기도 지정 */
width: 100px;
height: 50px;
/* border: 1px solid gray; */
}
.nav a {
text-decoration: none; /* a태그는 기본적으로 underline. 이렇게 태그마다 스타일이 적용되어있는 경우가 있다. */
color: gray;
text-align: center;
/* border: 1px solid red; */
display: block;
/* vertical-align: middle; 이건 인라인 요소에만 사용 가능. 세로 가운데 정렬. */
height: 50px;
line-height: 50px;
}
.nav a:hover {
background-color: black;
color: white;
}
</style>
- (최종) li와 a의 border를 지우고 hover 적용
ㅁ float 스타일
- float. 특정 요소를 살짝 띄울 수 있다. 옛날 방식이지만 많이 쓰는 곳도 있다.
※ HTML 요소 배치
1) 블럭 요소 : 기본적으로 위에서 아래로 배치
2) 인라인 요소 : 기본적으로 왼쪽에서 오른쪽으로 배치
※ float 스타일 속성
1) HTML 요소의 기본 배치를 무시하고 배치 가능
2) 요소를 띄워서 왼쪽 또는 오른쪽에 배치 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap1 {
border: 1px solid gray;
}
.wrap1 > div {
width: 100px;
height: 100px;
border: 1px solid gray;
}
.wrap1 > .box1 {
background-color: red;
}
.wrap1 > .box2 {
background-color: yellow;
}
</style>
</head>
<body>
<div class="wrap1">
<div class="box1"></div>
<div class="box2"></div>
군인은 현역을 면한 후가 아니면 국무총리로 임명될 수 없다. 제2항의 재판관중 3인은 국회에서 선출하는 자를, 3인은 대법원장이 지명하는 자를 임명한다.
헌법재판소의 장은 국회의 동의를 얻어 재판관중에서 대통령이 임명한다. 법률이 정하는 주요방위산업체에 종사하는 근로자의 단체행동권은 법률이 정하는 바에 의하여 이를 제한하거나 인정하지 아니할 수 있다.
제2항과 제3항의 처분에 대하여는 법원에 제소할 수 없다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 정기회의 회기는 100일을, 임시회의 회기는 30일을 초과할 수 없다.
국회가 재적의원 과반수의 찬성으로 계엄의 해제를
</div>
</body>
</html>
.wrap1 > .box1 {
background-color: red;
float: left;
}
- float이 들어가면 이 화면에서 살짝 띄워져 있다. 뒤에 가려져 있다.
화면으로부터 띄워져 있기 때문에 아래에 깔려 있다.
.wrap1 > .box2 {
background-color: yellow;
float: right;
}
- 왼쪽 아니면 오른쪽. 계속 블럭 요소다.블럭 요소인데도 좌우에 배치가 되어있다.
.wrap1 > .box1 {
background-color: red;
float: left;
}
.wrap1 > .box2 {
background-color: yellow;
float: left;
}
ㅁ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap2 { border: 1px solid gray;}
.wrap2 > div {
width: 200px;
height: 200px;
border: 1px solid gray;
}
.wrap2 > .box1 {
background-color: red;
}
.wrap2 > .box2 {
background-color: yellow;
}
.wrap2 > .box3 {
background-color: green;
}
</style>
</head>
<body>
<div class="wrap2">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
</body>
</html>
.wrap2 { border: 1px solid gray;}
.wrap2 > div {
width: 200px;
height: 200px;
border: 1px solid gray;
}
.wrap2 > .box1 {
background-color: red;
float: left;
}
.wrap2 > .box2 {
background-color: yellow;
float: left;
}
.wrap2 > .box3 {
background-color: green;
width: 420px;
}
- box3은 float된 box1과 box2 뒤에 깔려있다.
- float 영역에서 벗어나기 위해 clrear 사용.
.wrap2 > .box3 {
background-color: green;
width: 420px;
clear:left;
}
- clear: right는 안 됨. 아니면 모를 땐 both 써도 됨. clear: both; 많이 쓴다.
- 사실 display inline-block 잘 안씁니다. float은 많이 씁니다. 아직까지도 많은 웹사이트에서 .
ㅁ position style
※ position: static;
- 이때까지 만든 모든 요소가 다 position: static;이었다..
- HTML 요소 기본 배치를 의미함.(기본값) (인라인은 왼쪽에서 오른쪽, 블럭은 위에서 아래)
- 내 마음대로 위치 조정이 불가능 (top, botton, left, right)
특정 요소를 상위 요소로부터 내가 원하는 곳에 가져다 주려면 postion이 static이어서는 안 됨.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap1 {
width: 500px;
height: 200px;
border: 1px solid gray;
}
.wrap1 > div {
position: static; /* 쓰지 않아도 기본값 */
top: 100px; /* 위에서 100px 아래로 이동하겠다. 그런데 position이 static이라 안 됨. */
left: 100px; /* 위에서 100px 아래로 이동하겠다. 그런데 position이 static이라 안 됨. */
}
</style>
</head>
<body>
<div class="wrap1">
<div>box</div>
</div>
</body>
</html>
(1) position: relative;
- HTML 요소 기본 배치를 따른다.
- 자기 자신을 기준으로 위치 조정이 가능하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap2 {
width: 500px;
height: 200px;
border: 1px solid gray;
}
.wrap2 > div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div class="wrap2">
<div>box</div>
</div>
</body>
</html>
.wrap2 > div {
width: 100px;
height: 100px;
border: 1px solid tomato;
position: relative;
top: 50px; /* 위에서 50px 떨어진 곳에 배치 */
left: 50px; /* 왼쪽에서 50px 떨어진 곳에 배치 */
}
(2) position: absolute;
- HTML 요소의 배치 흐름을 따르지 않음.
- 가장 가까운 상위요소 중에 position:relative로 설정되어있는 (부모) 요소 기준으로 위치 조정 가능.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap3 {
width: 500px;
height: 400px;
border: 1px solid gray;
}
.wrap3 > div {
width: 200px;
height: 100px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div class="wrap3">
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</div>
</body>
</html>
<style>
.wrap3 {
width: 500px;
height: 400px;
border: 1px solid gray;
position: relative;
}
.wrap3 > div {
width: 200px;
height: 100px;
border: 1px solid tomato;
}
.wrap3 > .box1 {
background-color: red;
position: absolute;
right: 100px; /* relative인 부모로부터 오른쪽으로부터 100px 떨어져있다. */
top: 100px; /* 얘네도 화면으로부터 띄워져 있다. 겹쳐있는 경우 어떤게 더 위에 있는지 매번 달라짐*/
}
.wrap3 > .box2 {
background-color: yellow;
position: absolute;
left: 50px;
top: 50px;
}
.wrap3 > .box3 {
background-color: green;
position: absolute;
right: 50px;
bottom: 150px;
}
</style>
- 부모인 .wrap3에 position: relative;
- 얘네도 화면으로부터 띄워져 있다. 겹쳐있는 경우 어떤게 더 위에 있는지 매번 달라짐.
- 빨간색 박스를 노란색, 초록색 박스보다 더 위에 두고 싶다면, z-index를 주면 된다.
z-index는 요소가 겹쳐져 있을 때 타 요소보다 더 위에 표현하고 싶으면 z-index를 크게 주면 된다.
- z-index는 요소들을 순서대로 위로 쌓는 속성. 숫자가 커질수록 위로 올라옴.
.wrap3 > .box1 {
background-color: red;
position: absolute;
right: 100px; /* relative인 부모로부터 오른쪽으로부터 100px 떨어져있다. */
top: 100px;
z-index: 1;
}
.wrap3 > .box2 {
background-color: yellow;
position: absolute;
left: 50px;
top: 50px;
}
.wrap3 > .box3 {
background-color: green;
position: absolute;
right: 50px;
bottom: 150px;
z-index: 2;
}
ㅁ 특정 요소를 상위 요소 내에 정가운데에 배치하는 방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap4 {
width: 500px;
height: 200px;
border: 1px solid gray;
}
.wrap4 > div {
width: 100px;
height: 100px;
border: 1px solid tomato;
}
</style>
</head>
<body>
<div class="wrap4">
<div>box</div>
</div>
</body>
</html>
.wrap4 {
width: 500px;
height: 200px;
border: 1px solid gray;
position: relative;
}
.wrap4 > div {
width: 100px;
height: 100px;
border: 1px solid tomato;
margin: auto;
}
- margin: auto;만 있으면 부모요소 기준으로 수평 가운데 정렬은 됨.
수직 가운데 정렬은 안 됨.
.wrap4 {
width: 500px;
height: 200px;
border: 1px solid gray;
position: relative;
}
.wrap4 > div {
width: 100px;
height: 100px;
border: 1px solid tomato;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
margin: auto;
}
- 상위 요소에 relative 해놓고
움직이곶 ㅏ하는 요소에 absoollute, 다 0, marginauto 이거 자주 씀.
상하좌우로붕터 0px떨어지게 하겠다. 이러면 결국 한가운데로 옴.
ㅁ position: fixed;
- HTML 요소의 배치 흐름을 따르지 않음.
- 뷰포트의 초기 컨테이너 블럭 기준으로 위치 조정.
뷰포트의 초기 컨테이너 블럭은 body라고 보면 된다. 화면 전체.
가로길이를 이 기기의 가로길이로 맞춘다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.fixed-box {
width: 1000px;
height: 100px;
background-color: violet;
position: fixed;
z-index: 10000;
top:0px /* 스크롤을 왔다갔다 해도 항상 상단에 고정된다. */
}
</style>
</head>
<body>
<div class="fixed-box"></div>
</body>
</html>
