CSS - 다양한 옵션들

프로그래밍/HTML & CSS 2021. 9. 22.

요소의 박스에 컨텐츠가 넘칠때 이 넘친걸 어떻게 처리할지 지정.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px; margin: 50px;
	border: 2px dotted gray;
}

.visible { overflow: visible; }
.hidden { overflow: hidden; }
.scroll { overflow: scroll; }
.auto { overflow: auto; }
</style>

</head>
<body>

<h3>overflow : 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정</h3>

<div class="box">
    <h3>default</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box visible">
    <h3>visible</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box hidden">
    <h3>hidden</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box scroll">
    <h3>scroll</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

<div class="box auto">
    <h3>auto</h3>
    html css javascript jquery node.js react vue.js java oracle mysql bigdata maven spring spring-security mybatis 
</div>

</body>
</html>

이번에는 스크롤 바를 이용한 처리 방법을 소개한다.

auto 옵션을 쓰면 알아서 넘치면 스크롤 바를 달아주고, scroll 옵션 자체를 그냥 줘버리면 넘치지 않아도 스크롤바가 달린다.

요소의 크기를 보는 사람이 조절 할 수 있게 만듬

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px; margin: 30px;
	border: 2px dotted gray;
	overflow: hidden; /* div에서 resize가 가능하도록 hidden 또는  auto 로 지정 */
}

.ta {
	width: 150px; height: 150px; padding: 10px; margin: 50px;
}

.b { resize: both; }
.h { resize: horizontal; }
.v { resize: vertical; }
.n { resize: none; }
</style>

</head>
<body>

<h3>resize : 요소의 크기를 조정할 수 있는지 여부와 방향을 결정</h3>

<div class="box"><h3>default</h3></div>
<div class="box b"><h3>both</h3></div>
<div class="box h"><h3>horizontal</h3></div>
<div class="box v"><h3>vertical</h3></div>

<textarea class="ta">default</textarea>
<textarea class="ta n">none</textarea>

</body>
</html>

소스 내용을 보면 모두 같은 클래스 box를 받아서 너비나 높이가 전부 동일 해야 하지만.

resize 옵션을 줘서 각각 어떤 resize 옵션을 줬냐에 따라 크기를 변경한 모습

resize를 주기 위해서 overflow를 hidden이나 auto로 하는게 좋다.

요소에게 불투명도 주기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px; margin: 30px;
	border: 2px double green;
	background: orange;
}

.light { opacity: 0.2; }
.medium { opacity: 0.5; }
.heavy { opacity: 0.9; }

</style>

</head>
<body>

<h3>opacity : 불투명도. 요소 뒤쪽 콘텐츠가 숨겨지는 정도</h3>

<div class="box">기본</div>
<div class="box light">배경 위로 겨우 볼 수 있음</div>
<div class="box medium">배경 위로 조금 더 잘 보임</div>
<div class="box heavy">잘보임</div>

</body>
</html>

opacity 옵션을 주면 요소의 불투명도를 내가 설정 할 수 있다.

세부 옵션은 총 3가지로

light = 배경 위로 겨우 볼 수 있을 수준

medium = 배경 위로 좀 더 잘 보임

heavy = 잘 보이지만 안준거 보단 좀 투명함

어차피 수치로 내가 제어하기 때문에 정해진건 없음

opacity: 내가 원하는 숫자 (1이 최대치)

마우스 올렸을때 색깔 변하게 하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px; margin: 30px;
	background: blue; 
	line-height: 150px;
	text-align: center; font-weight: bold;
	color: #fff;
	opacity: 0.5
}

.img {
	width: 150px; height: 150px; padding: 10px; margin: 50px;
	display: block;
	opacity: 0.5;
}

.box:hover, .img:hover { opacity: 1.0; }

.box1 {
	width: 150px; height: 150px;
	position: relative;
	opacity: 0.5;
}

</style>

</head>
<body>

<div class="box">마우스</div>
<img class="img" src="../img/img1.png">

<div class="box1" style="background: red;"></div>
<div class="box1" style="background: blue; left:50px; top:-100px;"></div>


</body>
</html>

hover 옵션이 마우스 올렸을때 나타나는 이벤트인걸 생각해서 만들 수 있다.

우리가 겉으로 봤을때는 색깔이 변한 것 같지만

소스 내용을 보면 단지 투명도만 조절했을 뿐이다.

이미지로 보면 투명도가 보인다.

::after 머리글 처럼 내용 뒤에 뭔가 자동으로 붙일 수 있음.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style type="text/css">
.box {
	position: relative;
}

.box::after {
	content: "sadasdadsadads";
	display: block;
	position: absolute;
	top:0;
	left: 0;
	background-image: url("../img/bg.png");
	width: 100%;
	height: 100%;
	opacity: 0.2;
	z-index: -1;
}
</style>

</head>
<body>

<div class="box">
	<div style="height: 500px;">내용입니다.</div>
</div>

</body>
</html>

내용입니다 뒤에 보면 dsds가 붙어있는데

box의 클래스를 받는 모든 애들은 저렇게 붙어서 나온다.

경계선에 R값 주기 (둥글게 하기)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px;
	margin: 30px;
	background: yellow;
	border: 10px solid #999;
}

.br1 { border-radius: 30px; }
.br2 { border-radius: 30px 0; }
.br3 { border-radius: 150px; }

</style>
</head>
<body>


<div class="box br1"></div>
<div class="box br2"></div>
<div class="box br3"></div>


</body>
</html>

경계선 있는 요소를 만들고 옵션으로 border-radius를 주면 된다.

요소에 그림자 주기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.box {
	width: 150px; height: 150px; padding: 10px;
	margin: 30px;
	background: yellow;
	border: 2px solid #999;
}

.bs1 { box-shadow: 10px 10px 10px tomato; }
.bs2 { box-shadow: 0 0 20px tomato; }
.bs3 { box-shadow: 0 0 10px tomato inset; } /* inset : 안쪽 그림자 */

</style>
</head>
<body>

<div class="box bs1"></div>
<div class="box bs2"></div>
<div class="box bs3"></div>

</body>
</html>

box-shadow 옵션을 사용하면 그림자를 줄 수 있다.

저작자표시

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

CSS - float 개요 (0)	2021.09.22
CSS - margin 마진 겹침 현상 (0)	2021.09.22
CSS - 영역 관련 (0)	2021.09.22
CSS - 기초(5) / 글자의 공백 처리 및 배경 이미지 다루기 (0)	2021.09.21
CSS - 기초(4) (0)	2021.09.18

ABOUT ME

요소의 박스에 컨텐츠가 넘칠때 이 넘친걸 어떻게 처리할지 지정.

요소의 크기를 보는 사람이 조절 할 수 있게 만듬

요소에게 불투명도 주기

마우스 올렸을때 색깔 변하게 하기

::after 머리글 처럼 내용 뒤에 뭔가 자동으로 붙일 수 있음.

경계선에 R값 주기 (둥글게 하기)

요소에 그림자 주기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

티스토리툴바

ABOUT ME

요소의 박스에 컨텐츠가 넘칠때 이 넘친걸 어떻게 처리할지 지정.

요소의 크기를 보는 사람이 조절 할 수 있게 만듬

요소에게 불투명도 주기

마우스 올렸을때 색깔 변하게 하기

::after 머리글 처럼 내용 뒤에 뭔가 자동으로 붙일 수 있음.

경계선에 R값 주기 (둥글게 하기)

요소에 그림자 주기

'프로그래밍 > HTML & CSS' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바