- CSS display
요소의 내부와 외부 디스플레이 유형을 설정하는 것을 의미한다.
| block | 기본적으로 가로 영역을 모두 채운다. 다음태그는 다음 줄에 배치된다. (줄바꿈 O) width (너비), height(높이)를 지정할 수 있다. 대표적으로 <div> <p> <header> <h1>가 있다. |
| inline | line-height, 요소를 가로로 나열한다. 다음에 오는 태그가 block이 아닌 이상 같은 줄에 위치한다. (줄바꿈X) block와 다르게 크기를 지정할 수 없다. 대표적으로 <span> <img> <a>가 있다. |
| inline-block | block, inline의 속성을 모두 가지고 있다. inline 처럼 다른 요소를 같은 줄에 배치할 수 있으며, block 처럼 크기를 지정할 수 있다는 장점을 가진다. |
| none | 웹 페이지에서 해당 요소가 나타나지 않고 레이아웃에서 사라진다. |
인라인 블럭 사용해보기!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1_인라인 블럭</title>
<style>
.box1 {
border:3px solid blue;
width:400px;
/* line-height: 200px; */
height:200px;
padding:30px;
}
.box2 {
border:3px solid green;
width:300px;
height:100px;
padding:20px;
/* border, padding과 실제 width값(height값)을 합쳐서
속성값으로 지정 해 주고 싶은 경우엔 box-sizing : border-box;
를 이용한다.*/
box-sizing: border-box;
dispaly:inline-block;
}
</style>
</head>
<body>
<div class ="box1">
박스 1의 내부입니다.
</div>
<div class = "box2">
박스 2의 내부입니다.
</div>
</body>
</html>box1은 <div> 태그로 block이고, box2는 display로 inlie-block을 주었기 때문에 block와 inline의 속성 모두를 가진다.
- CSS Position
: CSS 요소들의 위치를 결정하는 방식을 설정한다.
1. 정적(static)위치 지정 방식
기본값
HTML 요소의 위치를 결정하는 기본적인 방식이다.
top, left, right, bottom 속성 값을 사용할 수 있다.
단순히 웹 페이지의 흐름에 따라 차례대로 요소들의 위치를 결정하는 방식이다.
2. 상대 (relative)위치 지정방식
HTML 요소의 기본 위치를 기준으로 위치를 재설정하는 방식
기본 위치는 정적 위치 지정방식 일 때 결정되는 위치를 의미한다.
3. 고정 (fixed)위치 지정방식
웹 사이트 창을 기준으로 위치를 설정하는 방식이다.
웹 페이지가 스크롤 되어 고정 위치로 지정된 요소는 항상 같은 곳에 위치한다.
4. 절대 (absolute) 위치 지정 방식
위치가 설정된 조상 요소를 기준으로 위치를 지정하는 방식이다.
위치가 설정된 조상 요소가 없다면 body를 기준으로 위치를 결정한다.
위치가 설정되었다는 뜻은 static을 제외한 나머지 방식으로 위치가 설정됐다는 의미이다.
- border-radius
왼쪽 상단부 부터 시계방향으로 설정된다.
border-radius : (왼쪽 위부터 x축 길이) / (왼쪽 위부터 y축 길이)
대각선끼리 길이가 같을 때
border-radius : top-left-x top-right-x / top-left-y top-right-y
실습해보기!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>2_상대위치</title>
</head>
<style>
div {
width:200px;
height:140px;
}
.p1 {
background-color: none;
padding: 20px;
border: 3px solid deepskyblue;
}
.p2 {
position:relative;
left : 100px;
top: -70px;
background-color:none;
padding: 20px;
border: 3px solid deeppink;
/* position 속성과 함께 쓰이며 요소의 위, 아래를 결정 짓는
속성 (값이 클수록 위로 올라오고 작을수록 아래로 내려간다.) */
z-index: -10;
}
</style>
<body>
<div class ="p1">상대위치 지정방식1</div>
<div class = "p2">상대위치 지정방식2</div>
</body>
</html>p2를 p1에 상대 위치로 지정하였다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3_고정,절대위치</title>
<style>
#wrap {
position: relative;
width: 500px;
height: 500px;
border: 30px solid #90caf9;
background-color: #b3e5fc;
}
.box {
background-color: #f1f8e9;
color : deepblue;
width:50px;
height: 50px;
border:2px solid #ccc;
position: absolute;
}
#ab1 {
top:0;
right:0;
}
#ab2 {
bottom:0;
left:20px;
}
#ab3 {
/*top:436px;*/
bottom: 0;
right:0;
}
#ab4 {
top:223px;
left:223px;
}
#ab5 {
position: fixed;
right:30px;
bottom:100px;
/* div로 원 만들때는 border-radius 속성을 50%로 준다.*/
border-radius: 50%;
}
</style>
</head>
<body>
<div id = "wrap">
<div class = "box" id ="ab1">1번</div>
<div class = "box" id ="ab2">2번</div>
<div class = "box" id ="ab3">3번</div>
<div class = "box" id ="ab4">4번</div>
<div class = "box" id ="ab5">5번</div>
</div>
</body>
</html>
ab5 만 position이 fixed이기 때문에 큰 창이건 작은 창이건 오른쪽 하단에 위치하는 것을 볼 수 있다.
'WEB > HTML,CSS' 카테고리의 다른 글
| DAY 14 : 미디어 쿼리 (0) | 2022.02.12 |
|---|---|
| DAY 12 : 상속, 폰트, 배경 (0) | 2022.01.25 |
| DAY 11 : 선택자, 우선순위 ,.. (0) | 2022.01.22 |
| DAY 10 : CSS, 선택자 (0) | 2022.01.21 |
| DAY 09 : progress, 시맨틱 태그 (0) | 2022.01.20 |