그림자, 중첩순서, 투명도, 범람
Box-shadow : HTML요소에 그림자를 추가하는 속성
수평(-왼쪽 +오른쪽) 수직(-위, +아래) 흐림 번짐 색상 삽입효과
색이 칠해진 부분은 필수 요소!
중첩이 되어서 나타난다.
흐림 blur
번짐 spread
삽입효과 inset
폴라로이드 효과
opacity : 요소의 투명도 조정 속성
0.0 완전투명 ~ 1.0 완전 불투명, 기본값
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>그림자 효과</title>
<style>
h1 {
width: 300px;
}
.c1 {
background-color: beige;
border: 5px solid lightpink;
box-shadow: 10px 10px 50px rgb(172, 86, 115);
}
.c2 {
background-color: aqua;
border: 5px dotted darkcyan;
box-shadow: 20px 20px 15px 5px mediumspringgreen;
}
.c3 {
background-color: magenta;
border: 5px solid darkred;
box-shadow: 5px 5px 2px 5px gainsboro inset;
}
div {
width: 250px;
font-size: 20px;
text-align: conter;
line-height: 50px;
}
#d1 {
border: 1px solid lightcyan;
box-shadow: 0 0 20px 10px green;
}
#d2 {
border: 1px solid saddlebrown;
box-shadow: 10px 10px darkcyan, 20px 20px darkolivegreen, 30px 30px khaki;
}
img {
padding: 20px;
padding-bottom: 60px;
margin: 20px;
box-shadow: 5px 5px 10px black;
}
#i1 {
opacity: 0.5;
}
#i1:hover {
opacity: 1.0;
}
</style>
</head>
<body>
<h1 class="c1">박스 스타일링 1</h1>
<br>
<h1 class="c2">박스 스타일링 2</h1>
<br>
<h1 class="c3">박스 스타일링 3</h1>
<hr>
<br>
<div id="d1">박스 스타일링 4</div>
<br> <br>
<div id="d2">박스 스타일링 5</div>
<br><br>
<hr>
<h2>이미지 갤러리</h2>
<img id="i1" src="image/sea.jpg" width="300">
<img id="i2" src="image/hd-wallpaper-ga03ab01e8_640.jpg" width="300">
<br><br>
</body>
</html>
overflow : 넘침, 범람, 외부 영역 요소에 비하여 내부 콘텐츠 요소의 너비, 높이가 큰 경우 발생하는 상태를 조정하는 속성
속성값
visible : 기본값, 그대로 둔다.(아무조치 안 함)
hidden : 넘친 컨텐츠 숨김, 잘린 부분을 볼 수 없다.
scroll : 넘친 컨텐츠를 숨기고 스크롤바를 붙임(항상), 가로, 세로 둘 다 스크롤이 나오고, 넘치지 않아도 스크롤바가 나옴
auto : 넘친 경우에만 스크롤바를 붙임
텍스트의 경우 auto, 이미지의 경우 hidden을 많이 사용한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>overflow 처리</title>
<style>
div {
width: 200px;
height: 100px;
border: 1px dotted;
float: left;
}
.d1 {
overflow: visible;
}
.d2 {
overflow: hidden;
}
.d3 {
overflow: scroll;
}
.d4 {
overflow: auto;
}
</style>
</head>
<body>
<h2>overflow 처리</h2>
<div class="d1"><!--visible-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus risus non nulla sollicitudin malesuada.
Donec sit amet accumsan leo, id molestie dolor. Quisque pretium mauris sed tempus sagittis.
</div>
<div class="d2"><!--hidden-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus risus non nulla sollicitudin malesuada.
Donec sit amet accumsan leo, id molestie dolor. Quisque pretium mauris sed tempus sagittis.
</div>
<div class="d3"><!--scroll-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus risus non nulla sollicitudin malesuada.
Donec sit amet accumsan leo, id molestie dolor. Quisque pretium mauris sed tempus sagittis.
</div>
<div class="d4"><!--auto-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam dapibus risus non nulla sollicitudin malesuada.
Donec sit amet accumsan leo, id molestie dolor. Quisque pretium mauris sed tempus sagittis.
</div>
</body>
</html>
박스 (컨테이너 태그) = 레이아웃 태그
p 280
position : 요소의 위치를 처리하는 속성, 콘텐츠 (텍스트, 이미지, 테이블 등) 요소를 영역 요소에 배치할 때 사용하는 속성
속성값
static : 요소의 원래 위치 (기본값)
relative : static에서의 상대적인 위치를 설정
원래 있었던 위치에서 이동하는 것
보통 left와 top만 사용
right, bottom 사용시 다른 영역을 침범할 수 있다.
fixed : 특정 위치에 고정, 창(브라우저)에 고정
고정된 위치에서 움직이지 않는다.
원래 위치의 자리가 없어진다.
absolute : 특정 위치에 고정 문서(페이지)에 고정
스크롤을 따라서 같이 이동한다.
보이는 창의 크기를 기준으로 위치를 이동한다.
sticky : 스크롤 될 때, 특정 위치에 고정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Position 속성</title>
<style>
div {
border: 2px solid red;
width: 300px;
}
.static {
position: static;
}
.rel {
position: relative;
right: 50px;
top: 20px;
}
.fix {
position: fixed;
top: 50px;
right: 0;
}
.abs {
position: absolute;
bottom: 0;
}
</style>
</head>
<body style="height: 1000px;">
<h2>static 위치</h2>
<div class="static">이 요소의 position은 static입니다.</div>
<h2>relatiove 위치</h2>
<div class="rel">이 요소의 position은 relative입니다.</div>
<br>
<h2>fixed 위치</h2>
<div class="fix">이 요소의 position은 fixed입니다.</div>
<h2>absolute 위치</h2>
<div class="abs">이 요소의 position은 absolute입니다.</div>
</body>
</html>
sticky 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sticky의 위치</title>
<style>
body {
height: 1000px;
}
.fix {
background-color: navy;
color: white;
text-align: center;
position: fixed;
bottom: 0;
box-sizing: border-box;
width: 100%;
height: 50px;
}
.st {
background-color: tomato;
position: sticky;
top: 0;
height: 30px;
line-height: 30px;
}
</style>
</head>
<body>
<p>스크롤에 따라 아래 div가 어떻게 되는지 보세요.</p>
<br><br><br>
<div class="st">여기가 sticky 영역</div>
<div class="fix">여기는 fixed 영역</div>
</body>
</html>
전체적인 부가 속성 : top, bottom, left, right 위치값을 설정하는 속성 (static 제외)
절대 위치(absolute)와 상대위치(relative)
일반적으로 absolute이 보이는 화면(브라우저 창)을 대상으로
절대영역을 설정한다.
그런데, 부모요소의 position이 relative이고,
자식요소의 positon이 absolute라면,
자식 요소는 부모요소의 내부공간을 절대영역으로 사용한다.
부모쪽에 relative를 잡아주면 크기가 부모영역으로 제한되어
알아서 자식요소인 absolute가 이동한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position 조합</title>
<style>
div {
border: 2px solid salmon;
}
.rel {
width: 400px;
height: 200px;
position: relative;
}
.abs {
width: 200px;
height: 100px;
position: absolute;
bottom: 10px;
right: 10px;
}
</style>
</head>
<body>
<h2>relative와 absolute의 조합</h2>
<div class="rel">부모 relative
<div class="abs">자식 absolute</div>
</div>
</body>
</html>
p 270
float : 요소의 위치 지정 속성, 사전적 의미 - 부동(부유하다)
요소를 원래 위치에서 뜯어서 변경을 시킨다.
속성값 : left, right
right로 속성값을 주면 순서도 반대로 적용되어 반대로 작성해 주어야 한다.
예) 1, 2, 3, 4 - float right 적용 시 1 2 3 4(창기준)
clear 속성 : float 속성의 영향을 제거하는 속성
float를 설정한 요소 다음에 위치하는 요소에서 이전 요소의 float 속성을 지울 때 사용한다.
참고) clearfix
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float 속성</title>
<style>
img {
float: left;
}
.p1 {
padding: 5px;
border: 1px solid indianred;
/* height: 200px;
overflow: auto; */
}
.p1::after {
content: "";
clear: both;
display: table;
}
</style>
</head>
<body>
<h2>float 속성</h2>
<p>
float 속성은 웹 문서의 레이아웃을 설계하는 과정에서 많이 사용하는 속성입니다.
</p>
<p class="p1">
<img src="image/hd-wallpaper-ga03ab01e8_640.jpg" width="300">
Cras iaculis viverra erat, a pulvinar metus tempus vel. Nullam ac augue faucibus eros pharetra tincidunt. Etiam condimentum ligula eget elit luctus, sed tincidunt lorem aliquam. Praesent nec mollis quam. Aenean tempor scelerisque augue a mollis. Proin laoreet neque in nibh eleifend, at dignissim diam tincidunt. Sed in neque nec lectus imperdiet tincidunt vel at mauris.
</p>
</body>
</html>어디를 기준으로 잡느냐에 따라서 위치가 어떻게 변하는지에 대해서 생각해보고
배정을 해야 할 것 같고, 효과를 어떻게 주느냐에 따라서 이미지가 달라보이는 것이 신기했다.
'공부기록 > CSS' 카테고리의 다른 글
| 2월 23일 (2) CSS selector 2, z-index, display, flex (0) | 2023.02.23 |
|---|---|
| 2월 23일 (1) CSS clear, selector1 (0) | 2023.02.23 |
| 2월 22일 (1) CSS font (0) | 2023.02.22 |
| 2월 21일 (2) CSS 배경, 텍스트 처리 (0) | 2023.02.21 |
| 2월 21일 (1) CSS 정리 + magin, border (0) | 2023.02.21 |
