728x90
layout
- 블록들의 위치를 나열
1. float
- 요소를 블록형태로, 특정 방향으로 정렬
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
body{
width: 300px;
}
img{
width: 100px;
height: 100px;
}
h1{
float: left;
background-color: orange;
}
p{
text-align: justify;
}
p span{
border: 3px dotted red;
float: right;
}
</style>
</head>
<body>
<h1>드래곤 라자</h1>
<p>
"우리는 별이오."
"별?"
"무수히 많고 그래서 어쩌면 보잘것없어 보일 수도 있지. 바라보지 않는 이상 우리는 서로를 잊을 수도 있소. 영원의 숲에서처럼 우리들은 서로를, 자신을 돌보지 않는 한 언제라도 그 빛을 잊어버리고 존재를 상실할 수도 있는 별들이지."
숲은 거대한 암흑으로 변했고 그 위의 밤하늘은 온통 빛무리들 뿐이었다. 칼의 말은 이어졌다.
"그러나 우리는 서로를 바라볼 줄 아오. 밤하늘은 어둡고, 주위는 차가운 암흑 뿐이지만, 별은 바라보는 자에겐 반드시 빛을 주지요. 우리는 어쩌면 서로를 바라보는 눈동자 속에 존재하는 별빛 같은 존재들이지. 하지만 우리의 빛은 약하지 않소. 서로를 바라볼 때 우리는 우리의 모든 빛을 뿜어내지."
"나 같은 싸구려 도둑도요?"
네리아의 목소리는 슬프지 않았다. 그리고 칼의 대답도 평온했다.
"이제는 아시겠지? 네리아 양. 당신들 주위에 우리가 있고, 우리는 당신을 바라본다오. 그리고 당신은 우리들에게 당신의 빛을 뿜어내고 있소. 우리는 서로에게 잊혀질 수 없는 존재들이오. 최소한 우리가 서로를 바라보는 이상은."
어둠 속에서 네리아의 눈이 별처럼 아름답게 반짝였다.
<span>
<img alt="드래곤라자 표지" src="https://w.namu.la/s/c182412ae18194dc4945588a576d1991b12e6ffd025b4742f7d4482b0e8ccdcbce3f96e251ab3a45b56c00816bf3dfd07e3558b6f859bbdc08d80136bba43018c0c44eadc68bf8e898c060c4430a1bad2eb7f57d3b300dbbf853f4195301de721cc79db0c9abba4ca19f8c5b7d763917">
</span>
나는 혹시 반짝인 것은 그녀의 눈물이 아닐까 따위의 생각은 관두기로 했다. 그래서 고개를 돌려 밤하늘을 바라보았다.
내가 바라보자, 별들은 나에게 빛을 주었다.
- 본문 중-
</p>
</body>
</html>
css 적용 전(위)과 css 적용 후(아래)
2. clear
- float을 해제할 때 사용(이전 요소의 float값을 상속받아, 같은 방향으로 정렬되는 현상 방지)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float clear</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#warpper{
width: 600px;
border: 1px dotted red;
}
#w01{
float: right;
width: 200px;
padding: 15px;
background-color:skyblue;
}
#w02{
float: left;
width: 200px;
padding: 15px;
background-color: hotpink;
}
#w03{
clear: left;
background-color: gray;
padding: 10px;
}
</style>
</head>
<body>
<h1>lorem ipsum</h1>
<div id="wrapper">
<div id="w01">
Mauris at dolor lacus. Quisque dapibus lobortis enim placerat efficitur.
</div>
<div id="w02">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse pellentesque nibh nibh, ut dignissim felis tempus vitae.
Donec pellentesque, arcu quis sagittis condimentum,
nisi augue aliquam sapien, quis eleifend sapien diam quis dolor.
</div>
<div id="w03">
Quisque consequat, metus vel ultricies hendrerit, leo quam sodales augue, ut rhoncus elit ante eget dolor.
Nulla a accumsan erat. Cras sed risus ac ligula fermentum aliquam.
Nulla tempus vel augue ac imperdiet.
Duis porta, elit at placerat sodales, ex leo placerat mauris, ac consectetur ex mi a augue.
Morbi vitae commodo ipsum, sit amet consectetur magna. Mauris at rhoncus lacus.
Duis sapien nisi, tempus a molestie sit amet, elementum ac dolor. Vivamus vel laoreet nunc, et accumsan dolor.
</div>
</div>
</body>
</html>
css 적용 전(위)과 css 적용 후(아래)
3. display
- 요소의 성격을 바꿔주는 속성 (인라인 요소 <-> 블록 요소)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>display</title>
<style type="text/css">
#menu p{
display: inline;
}
</style>
</head>
<body>
<div id="header">
<h1>제목</h1>
<div id="menu">
<p><a href="#">메뉴1</a></p>
<p><a href="#">메뉴2</a></p>
<p><a href="#">메뉴3</a></p>
<p><a href="#">메뉴4</a></p>
</div>
</div>
</body>
</html>
css 적용 전(위)과 css 적용 후(아래)
4. overflow
- 박스 안의 내용이 박스보다 클 경우, 넘치는 부분을 처리(부모 사이즈가 지정되어 있어야 사용 가능)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>overflow</title>
<style type="text/css">
#body{
width: 300px;
height: 100px;
border: 1px solid red;
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<div id="body">
<blockquote>드래곤라자 - 이영도</blockquote>
<p>
"우리는 별이오."
"별?"
"무수히 많고 그래서 어쩌면 보잘것없어 보일 수도 있지. 바라보지 않는 이상 우리는 서로를 잊을 수도 있소.
영원의 숲에서처럼 우리들은 서로를, 자신을 돌보지 않는 한 언제라도 그 빛을 잊어버리고 존재를 상실할 수도 있는 별들이지."
숲은 거대한 암흑으로 변했고 그 위의 밤하늘은 온통 빛무리들 뿐이었다. 칼의 말은 이어졌다.
"그러나 우리는 서로를 바라볼 줄 아오. 밤하늘은 어둡고, 주위는 차가운 암흑 뿐이지만, 별은 바라보는 자에겐 반드시 빛을 주지요.
우리는 어쩌면 서로를 바라보는 눈동자 속에 존재하는 별빛 같은 존재들이지. 하지만 우리의 빛은 약하지 않소. 서로를 바라볼 때 우리는 우리의 모든 빛을 뿜어내지."
"나 같은 싸구려 도둑도요?"
네리아의 목소리는 슬프지 않았다. 그리고 칼의 대답도 평온했다.
"이제는 아시겠지? 네리아 양. 당신들 주위에 우리가 있고, 우리는 당신을 바라본다오.
그리고 당신은 우리들에게 당신의 빛을 뿜어내고 있소. 우리는 서로에게 잊혀질 수 없는 존재들이오. 최소한 우리가 서로를 바라보는 이상은."
어둠 속에서 네리아의 눈이 별처럼 아름답게 반짝였다.
나는 혹시 반짝인 것은 그녀의 눈물이 아닐까 따위의 생각은 관두기로 했다. 그래서 고개를 돌려 밤하늘을 바라보았다.
내가 바라보자, 별들은 나에게 빛을 주었다.
- 본문 중-
</p>
</div>
</body>
</html>
css 적용 전(위)과 css 적용 후(아래) -> overflow: auto 적용하였음
5. position
- 블록박스의 위치를 지정하는 속성(겹치게 배열 가능)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
/*
relative : 원래 위치 기준으로
absolute : 부모 위치 기준으로
fixed : 브라우저에서의 위치
*/
#box{
position: relative;
width: 550px;
border: 1px dotted red;
}
p{
width: 130px;
height: 80px;
color: #fff;
font-weight: bold;
}
.myred{
background: red;
position: relative;
}
.myblue{
background: blue;
position: absolute;
left: 100px;
top: 30px;
z-index: 2;
}
.mygreen{
background: green;
position: relative;
left: 30px;
top: -30px;
}
.myred:hover{
z-index: 5;
}
.myblue:hover{
z-index: 5;
}
.mygreen:hover{
z-index: 5;
}
#fixed{
width: 100px;
height: 300px;
background: yellowgreen;
position: fixed;
right: 50px;
top: 100px;
}
</style>
</head>
<body>
<div id="box">
<p class="myred">박스의 크기와 위치를 잘 살펴보아야 합니다.</p>
<p class="myblue">박스의 포지션 속성을 바꿔가며 테스트 해 보아야 합니다.</p>
<p class="mygreen">포지션을 이해하기 위해서는 시험해보고 관찰해 보는 것이 절대적으로 필요합니다.</p>
</div>
<div id="fixed">
Fixed!!!
</div>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br>
</body>
</html>
css 적용 전(위)과 css 적용 후(아래)
728x90
'Web > CSS' 카테고리의 다른 글
[CSS] transform (0) | 2021.12.15 |
---|---|
[CSS] border, background, text (0) | 2021.12.14 |
[CSS] 상자(box) (0) | 2021.12.12 |
[CSS] 배경(background) (0) | 2021.12.11 |
[CSS] 단락(paragraph) (0) | 2021.12.10 |