프론트엔드 2일차 CSS(테두리 관련 속성, 박스 그림자, 여백, position, visivility, z-index, float)
2024. 1. 15. 09:37ㆍ프론트엔드
10. 테두리 관련 속성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테두리 관련 속성</title>
<style>
/*
border-style
- 테두리 종류
border-width
- 테두리 두께
border-color
- 테두리 색상
border
- 두께 종류 색상을 한번에 쓰는 속성
*/
[class ^= box]{
width: 150px;
height: 150px;
margin: 10px;
background-color: yellow;
}
.box1{
border-top-style: solid;
border-bottom-style: dashed;
border-right-style: dotted;
border-left-style: double;
/* 위 4개의 속성과 아래 속성값이 같은 결과. 위 -> 오른쪽 -> 아래> 왼쪽순 */
border-style: solid dotted dashed double;
/* 좌우가 대치인 경우 */
border-style: solid dotted dashed double;
border-style: solid dashed;
/* 좌우가 대칭이고 위 아래가 대칭인 경우 */
border-style: solid dotted dashed double;
border-style: solid dotted dashed;
/* 상하 좌우가 모두 대칭인 경우 */
border-style: solid solid solid solid;
border-style: solid;
}
.box2{
border-style:solid;
border-top-width:10px 20px 30px 40px;
border-width: 10px;
}
.box3{
border-style: solid; border-width: 10px;
border-color: red green blue gray;
}
.box4{
border-top: 10px solid red;
border-bottom: 10px solid red;
border-left: 10px solid red;
border-right: 10px solid red;
border: 10px solid red;
}
.box5{
border: 10px solid red;
border-top-style: none;
}
.box6{
border-top: 10px solid red;
}
.box7{
border: 10px solid red;
border-top-right-radius: 10px;
border-top-left-radius: 20px;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 40px;
border-radius: 10px 20px 30px 40px;
}
.box8{
border: 10px solid red;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<!-- 외쪽, 오른쪽, 아래는 실선, 위에는 테두리가 없는 박스 만들기 위해 스타일 적용-->
<div class="box5">5</div>
<!-- 위쪽만 실선 테두리를 적용 -->
<div class="box6">6</div>
<div class="box7">7</div>
<div class="box8">8</div>
</body>
</html>11. 박스 그림자
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>박스 그림자</title>
<style>
/*
box-shadow
- 박스에 그림자 효과를 줌
- 수평 수직 흐림 번짐 [inset] 순으로 적용
*/
.box1{
width: 100px; height: 100px; border: 1px solid black;
box-shadow: 2px 2px 10px 10px red;
}
.box2{
width: 100px; height: 100px;
box-shadow: 0 1px 1px 0px rgba(0, 0, 0, 2);
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>12. 여백
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>여백</title>
<style>
/*
margin
- 테두리 밖의 여백. 요소의 위치를 조절할때 사용
- 요소의 위치를 조절할 때 사용
- 요소와 요소 사이의 간격을 조절 할 때 사용
padding
- 테두리와 컨텐츠 사이의 여백. 요소 안의 컨텐츠
- 요소 안의 컨텐츠 위치를 조절할 때 사용
- 컨텐츠의 시작 위치를 조절 할 떄 사용, 대부분의 요소에 사용
- 부모 요소에서 자식 요소의 시작 위치를 조정 할 때
*/
[class ^= box] {
width: 100px; height: 100px;
border: 1px solid black;
}
.box1{margin-left: 50px;}
.box2{padding-left: 50px;}
.box3{margin: 0 auto;}
.inner-box{
/*
width : 100%
- 부모 컨텐츠 widrh를 가져와서
자식 컨텐츠 width로 사용
- 자식 요소의 크기
=> 컨텐츠 크기 + 패딩 + 테두리
=> 100px + 0 + 3px * 2 = 106px
*/
width: 100%; height: 100%;
border: 3px solid red;
box-sizing: border-box;
}
.box4{
padding: 10px;
}
.main-box{
width: 700px; border: 1px solid black;
height: 300px; margin: 0 auto;
box-sizing: border-box;
}
/*
단위
- px, %, em, rem, vh, vw
- vh : view height의 약자로 부라우저 크기를100등분 한것이 1vh
- vw
- view width의 약자로 부라우저의 너비를 100등분 한것이 1vw
*/
.container{
padding: 10px; border: 3px solid red;
min-width: 700px;
}
/*
- margin은 겹치면 둘중에 큰 margin이 적용합이 아님
*/
.margin1{
border: 1px solid black;
height: 50px;
margin-top: 50px;
margin-bottom: 100px;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">
<div class="inner-box"></div>
</div>
<div class="container">
<div class="main-box">
</div>
</div>
<div class="margin1">1</div>
<div class="margin1">2</div>
</body>
</html>13. position
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position</title>
<style>
/*
position
- 요소를 배치하는 방식
- static(기본값), relative, absolute, fixed
position : relative
- 요소의 상대적인 위치를 계산해서 배치
- top, left, right, bottom을 이용해서 기준 위치에서
지정한 top, left, right, bottom 만큼 움직인 위치에 요소를 배치
position : absoulte
- 기준 요소를 기준으로 위치를 조절
- top, left, right, bottom을 이용
relative인 요소를 찾아서 배치
- 조상 요소 중에서 relative가 없으면 브라우저를 기준으로 배치
- absolute를 이용하면 편하기는 하지만 무분별한 사용은 자제
- 다른 요소에 영향을 주지 않으면서, 원하는 위치에 배치할 때 사용하면 좋다
- absolute 사용 시 너비와 높이를 지정하거나
top, bottom을 이용하여 너비대신,
left, right를 이용하여 너비 대신 사용해야 한다.
- absolute인 요소는 부모 요소의 높이에 영향을
*/
.relative>[class^=box]{
width: 100px; height: 100px;
border: 1px solid black; display: inline-block;
margin-left: 20px; line-height: 100px;
text-align: center;
font-size: 30px;font-weight: bold;
position: relative;
}
.relative>.box1{top: 30px;}
.relative>.box2{left : -10px}
.relative>.box3{bottom: 10px;}
.relative>.box4{right: -20px;}
.absolute{margin-top: 100px;}
.absolute div{
padding: 30px; border: 1px solid black;
}
.absolute.content-box{
position:absolute;
top: 0;
bottom: 0;
left: 0;
height: 300px;
}
.absolute.box1.absolute{
position: relative;
}
body{height: 1000px;}
/*
position : fixed
- 요소를 브라우저를 기준으로 위치를 고정 시킴
- 위로가기 버튼을 만들 때 사용
- top, bottom, left, right를 이용
*/
.fixed{position: fixed; bottom: 0;}
</style>
</head>
<body>
<div class="relative">
<div class="box1">H</div>
<div class="box2">E</div>
<div class="box3">L</div>
<div class="box4">L</div>
<div class="box5">O</div>
</div>
<div class="absolute">
<div class="box1">
<div class="inner-box">
<div class="content-box">1</div>
123 <br>
456 <br>
</div>
</div>
<div class="box2">
<div class="inner-box">
<div class="content-box">2</div>
</div>
</div>
</div>
<div class="fixed">fixed</div>
</body>
</html>14. visibility
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>visibility</title>
<style>
/*
visibility
- 요소를 보이거나 안보이게 하는 속성
- display:none과 비슷하게 보이지만 차이가 있음
*/
.display-none{display: none;}
.visivility-hidden{
visibility: hidden;
}
</style>
</head>
<body>
<div class="display-none"></div>
<div class="box">123</div>
<div class="visibility-hidden"></div>
<div class="box">123</div>
</body>
</html>15. z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index</title>
<style>
/*
z-index
- 요소들이 겹칠 때 누굴 위로 보낼지 기준이 되는 속성
- 값이 클수록 위로 올라감
- z-index가 같으면 마지막 요소가 위로올라감
*/
[class ^= box]{
position : absolute; width: 150px;
height: 300px; border: 3px solid black;
font-size: 30px;
}
.box1{z-index: 100;}
.box2{top: 50px; background: #fff;}
.box3{top : 100px; background: #fff;}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
</body>
</html>16. float
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float</title>
<style>
/*
float
- 요소를 왼쪽 또는 오른쪽으로 배치할 때 사용
- 특징
- float이 적용된 속성은 부모요소가 float속성이 적용된
요소의 높이를 인식하지 못함
- float이 적용된 속성이 있으면, 부모 속성에
::after선택지를 추가 후 clear:both, display:block,
content : ''을 추가 해서 부모 높이가 인식되게 해야함
- width를 직접 지정해야함. 지정하지 않으면 컨텐츠의 너비만큼 자동으로 잡힘
- display에 영향을 받지 않음
clear
- float이 적용된 요소가 있으면 다음 요소에 영향을 미치는데
이를 초기화하는 속성
- left를 적용하면 float이 적용된 요소들 중 왼쪽을 기준으로 높이를 계산 후 배치
- right를 적용하면 float이 적용된 요소들 중 오른쪽을 기준으로 높이를 계산 후 이후에 배치
- both를 적용하면 float이 적용된 요소들 중 왼쪽과
오른쪽 중 높이가 더 긴 요소를 기준으로 계산 후 배치
*/
.container{
border: 1px solid black;
line-height: 30px;
}
.container::after{
content: '';
display: block;
clear: left;
clear: both;
}
.float-left{
float:left
}
.float-right{float: right; height: 60px;}
</style>
</head>
<body>
<div class="container">
<div class="float-left">안녕하세요</div>
<div class="float-right">안녕하새요</div>
<div>안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. 안녕하세요. </div>
</div>
</body>
</html>'프론트엔드' 카테고리의 다른 글
| 프론트엔드 3일차 CSS(그라데이션 예제, transform 속성, transition예제) (0) | 2024.01.15 |
|---|---|
| 프론트엔드 3일차 CSS(메뉴 예제, background속성, 다단 예제, 테이블 관련 속성, 텍스트 수직 정렬, 테이블 관련 속성, 테이블 예제) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(문단 관련 속성, 말줄임, 목록 관련 속성, 크기 속성, display) (1) | 2024.01.15 |
| 프론트엔드 2일차 CSS(텍스트 관련 속성, 텍스트 그림자, 공백 처리 속성, 글자 간격 속성) (0) | 2024.01.15 |
| 프론트엔드 1일차 HTML(폼 관련 태그) (2) | 2024.01.10 |