CSS Position 정리!!
Relative : 원래 있어야되는 곳에서 벗어난 것
Absolute : 가까이에 있는 박스에서 위치 변경
Fixed : 박스를 완전히 벗어나서 웹페이지 안에서 움직이는 것
Sticky : 원래 있어야하는 자리에 있지만, 스크롤링 해도 위치 변화가 일어나지 않고 계속 붙어 있음
ex) HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서지킴이 프로그램</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<article class="container">
<div></div>
<div class="box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Ex) CSS 코드
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container {
background: pink;
left: 20px;
top: 20px;
position: relative;
}
.box {
background: blue;
left: 20px;
top: 20px;
position: sticky;
}
결과)
CSS display 정리!!
Block 레벨의 태그를 Inline 레벨로, Inline 레벨을 Block 레벨로 바꿀 수 있다. 바로 display: 라는 기능을 통해서!!
★ inline : 컨텐츠 자체만을 꾸며줌, 당연히 공간이 허용하면 한 줄에 여러 개 들어감 (크기, 너비, 배경색 등을 지정해줘도 컨텐츠가 없다면 보여지지 않겠지?)
★ inline-block : 한 줄에 여러 개 넣는데(inline 성격), 상자 단위로 (안에 컨텐츠 크기와는 상관없이 사용자가 지정한 크기가 됨-> 컨텐츠가 없어도 크기, 너비, 배경색 등을 지정했다면 보이겠지?, block 성격)
★ block : 상자 단위, 대신 한줄에 하나
Ex) HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서지킴이 프로그램</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
Ex) CSS 코드
div, span {
width: 50px;
height: 50px;
margin: 20px;
}
div {
background: red;
display: inline-block
}
span {
background: blue;
display: block;
}
결과)
※ CSS 속성값이 얼마나 많은 브라우저에서 쓸 수 있는지 보여주는 사이트
'Can I use 사이트' : https://caniuse.com/
'웹 개발 공부 : Front-end' 카테고리의 다른 글
| 프론트엔드 #6 CSS - 3 (0) | 2020.08.13 |
|---|---|
| 프론트엔드 #4 CSS - 1 (0) | 2020.07.31 |
| 프론트엔드 #3 HTML 주요 태그들 (0) | 2020.07.25 |
| 프론트엔드 #2 자주 사용하는 웹페이지 분석해보기 (0) | 2020.07.23 |
| 프론트엔드 #1 HTML에 대해서 (0) | 2020.07.22 |
CSS Position 정리!!
Relative : 원래 있어야되는 곳에서 벗어난 것
Absolute : 가까이에 있는 박스에서 위치 변경
Fixed : 박스를 완전히 벗어나서 웹페이지 안에서 움직이는 것
Sticky : 원래 있어야하는 자리에 있지만, 스크롤링 해도 위치 변화가 일어나지 않고 계속 붙어 있음
ex) HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서지킴이 프로그램</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<article class="container">
<div></div>
<div class="box">I'm Box</div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
Ex) CSS 코드
div {
width: 50px;
height: 50px;
margin-bottom: 20px;
background: red;
}
.container {
background: pink;
left: 20px;
top: 20px;
position: relative;
}
.box {
background: blue;
left: 20px;
top: 20px;
position: sticky;
}
결과)
CSS display 정리!!
Block 레벨의 태그를 Inline 레벨로, Inline 레벨을 Block 레벨로 바꿀 수 있다. 바로 display: 라는 기능을 통해서!!
★ inline : 컨텐츠 자체만을 꾸며줌, 당연히 공간이 허용하면 한 줄에 여러 개 들어감 (크기, 너비, 배경색 등을 지정해줘도 컨텐츠가 없다면 보여지지 않겠지?)
★ inline-block : 한 줄에 여러 개 넣는데(inline 성격), 상자 단위로 (안에 컨텐츠 크기와는 상관없이 사용자가 지정한 크기가 됨-> 컨텐츠가 없어도 크기, 너비, 배경색 등을 지정했다면 보이겠지?, block 성격)
★ block : 상자 단위, 대신 한줄에 하나
Ex) HTML 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>순서지킴이 프로그램</title>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div></div>
<div></div>
<div></div>
<span>1</span>
<span>2</span>
<span>3</span>
</body>
</html>
Ex) CSS 코드
div, span {
width: 50px;
height: 50px;
margin: 20px;
}
div {
background: red;
display: inline-block
}
span {
background: blue;
display: block;
}
결과)
※ CSS 속성값이 얼마나 많은 브라우저에서 쓸 수 있는지 보여주는 사이트
'Can I use 사이트' : https://caniuse.com/
'웹 개발 공부 : Front-end' 카테고리의 다른 글
| 프론트엔드 #6 CSS - 3 (0) | 2020.08.13 |
|---|---|
| 프론트엔드 #4 CSS - 1 (0) | 2020.07.31 |
| 프론트엔드 #3 HTML 주요 태그들 (0) | 2020.07.25 |
| 프론트엔드 #2 자주 사용하는 웹페이지 분석해보기 (0) | 2020.07.23 |
| 프론트엔드 #1 HTML에 대해서 (0) | 2020.07.22 |
