15_[css]css 속성 크기, 여백, 색상
CSS 속성-크기, 여백, 색상
크기, 여백, 색상과 같은 실질적으로 눈에 보이는 스타일을 지정 가능!
- 크기
a) width
- 요소의 가로 너비를 지정
- auto : 브라우저가 너비를 계산-기본값
- 단위(px, em, rem)를 이용하여 너비를 지정
🌟 블록 요소에 대해서 width: auto로 지정됐을 경우, 브라우저는
width:100%;
로 인식
🌟 (텍스트 등 내용이 없을때)인라인 요소에 대해서 width: auto로 지정됐을 경우, 브라우저는
width:0;
로 인식
div{
width: 300px;
}
div{
요소가로너비: 너비값;
}
b) height
- 요소의 세로 너비를 지정
- auto : 브라우저가 높이를 계산-기본값
- 단위(px, em, rem)를 이용하여 높이를 지정
✨ 블록 요소와 인라인 요소는 브라우저에서 해석되는 방식이 다르다! ⬇️
🌟 (텍스트 등 내용이 없을때)블록 요소 및 인라인 요소에 대해서 height: auto로 지정됐을 경우, 브라우저는
height:0;/값이 0일 경우는 어떤 단위가 와도 같으므로, CSS에서는 0뒤에 단위를 붙이지 않는 것이 원칙!/
로 인식
🌟 블록요소는 내용 유무에 상관없이 width, height을 특정 값으로 지정해줄 수 있지만, 인라인 요소는 그렇게 할 수 없다
🌟 인라인 요소는 너비와 높이를 지정할 수 없기 때문에 auto이든, 특정값으로 지정해주려고 하든지, 두 경우 모두 묵시된 것같은 느낌을 준다! 즉, 그저 컨텐츠를 감싸는 너비와 높이로 속성이 지정될 수 있게 된다!
div{
height: 150px;
}
div{
요소세로너비:너비값;
}
🌟 만약 아래와 같이 텍스트를 블록요소와 인라인요소에 추가해준 후, auto 속성값을 넣어주면
<!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>Document</title>
<style>
*{
padding:0;
margin:0;
}
span{
width: auto;
height: auto;
background-color: tomato;
}
div{
width: auto;
height: auto;
background-color: tomato;
}
</style>
</head>
<body>
<span>가나다</span>
<div>라마바</div>
</body>
</html>
인라인 요소인 span과 div는 높이가 모두 글자 높이를 감싸는 정도로 지정된다. 하지만 너비는 span은 글자컨텐츠를 감싸는 너비정도까지, div는 기준요소(위의 경우는 document)를 가득 채우는 100%로 지정됨을 확인해볼 수 있다!
즉, 인라인 요소는 너비와 높이는 항상 컨텐츠를 감싸는 정도까지 지정될 수 있다!
⭐ 블록요소는 레이아웃을 위한 목적으로, 인라인 요소는 텍스트를 다루기 위한 목적으로 자주 다루어질 수 있는 유용한 요소!
c) max-width
- 요소의 최대 가로 너비를 지정
- 기본값 - none
- 단위를 이용해서 지정 가능
- auto 속성값도 지원됨
d) min-width
- 요소의 최소 가로 너비를 지정
- 기본값 - 0
- 단위를 이용해서 지정 가능
- auto 속성값도 지원됨
max-width와 min-width를 이용해서 간단한 예제를 연습해보자
<!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>Document</title>
<style>
.parent{
width: 100px;
height: 300px;
border:3px dashed red;
margin:20px;
}
.child{
/*child의 100%는 parent에
맞춰져서 auto를 width에
설정하게 된다면 width는 500px*/
max-width:400px;
min-width:200px;
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
CSS 크기속성 max-width, min-width
위와 같이 어떠한 부모-자식 관계가 존재할 경우,
🌹 자식 요소에서 min-width와 max-width를 지정해준 후
🌹 (i) 부모요소에서 min-width이하의 값을 width로 지정하면, 자식요소는 min-width값이 width값이 되고
(ii) 부모요소에서 max-width 이상의 값을 width로 지정하면, 자식요소는 max-width값이 width값이 된다!
🌟 max-width, min-width로 width와 관련된 일련의 설정을 걸어주었다면, 그 범위 외로는 벗어날 수 없다!!
e) max-height
- 요소의 최대 세로 크기를 지정
f) min-height
- 요소의 최소 세로 크기를 지정
-높이의 경우 min-height와 max-height을 같이 지정해주면, 부모요소의 높이와 관계없이 min-height로 지정될 수 있다
-높이의 경우 min-height으로 어떤 속성값을 지정하면, 최소한 그 높이는 확보하라는 의미라고 생각하면 된다. 그리고 max-height은 만약 이 값을 넘는다면, overflow등의 속성을 이용해서 처리할 것이다 라는 의미가 짙다고 보면 된다!
<!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>Document</title>
<style>
*{
padding:0;
margin:0;
}
#lorem{
border:1px solid black;
max-width:500px;
min-height:100px;
overflow-y: scroll;
}
</style>
</head>
<body>
<p id="lorem">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</body>
</html>
CSS 크기속성 max-height
위의 경우, max-height을 지정하고 이후에 overflow-y로 scroll을 생성해줌으로써 넘치는 부분은 스크롤하여 볼 수 있도록 처리하였다. 즉, 어떤 한계까지를 높이로 볼 수 있게 된 것이다!
- 여백(margin/padding)
여백개념: margin과 padding의 개념
a) margin 🌟
- 요소 바깥에 존재하는 여백으로, 시각적으로는 두 개 요소 간 거리가 있는 것 처럼 보임
- 음수값을 사용할 수도 있음
- 속성값 1) 기본값 : 0 2) 단위 : px, em, cm 등 3) auto : 브라우저가 너비를 계산 4) % : 부모 요소의 너비(width)에 대한 비율로 지정
div{
margin:20px;/*상하좌우 방향으로 모두 20px의 마진으로 설정하자*/
}
div{
요소바깥여백: 여백값;
}
%의 경우, 부모 요소의 너비를 기준으로 비율로 계산되어 사용되는데 아래의 예제를 살펴보자
<!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>Document</title>
<style>
.parent{
width: 400px;
height: 200px;
border:4px solid red;
}
.child{
width: 100px;
height: 100px;
border:4px solid black;
margin:50%;/*200px*/
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
위의 경우, 부모요소인 parent 요소의 너비가 현재 400px 이므로 이의 절반인 200px이 child 요소의 상하좌우 여백에 대한 값으로 적용된다
CSS margin 속성
- 마진을 보다 세분화하기 위해서 한 방향씩 지정 가능(“개별 속성”)
div{
margin-top: 20px;
margin-right:20px;
margin-bottom:20px;
margin-left:20px;
}
div{
요소바깥여백-위쪽: 여백값;
요소바깥여백-오른쪽:여백값;
요소바깥여백-아래쪽:여백값;
요소바깥여백-왼쪽: 여백값;
}
- margin 을 설정할때 코드를 보다 짧게 하기 위하여 다음과 같이 작성하는 방법들이 존재 (“Margin - Shorthand Property” “단축 속성”) (개별 속성이 있는 경우, 단축속성이 있을 확률이 높음!)
margin shortenhand!
i. margin: top right bottom left
- 상 ➡️ 우 ➡️ 하 ➡️좌 (윗쪽부터 시계순서대로) 마진을 설정
ii. margin: top right&left bottom
- 상 ➡️ 좌우 ➡️ 하 순서대로 마진 설정(위, (좌우), 아래 의 삼등분으로 생각하기!)
iii. margin: top&bottom right&left
- 상하 ➡️ 좌우 순서로 마진을 설정
iv. margin: all
-
적용 순서는 관련 없이, 모든 방향으로 일정 마진값 동일하게 마진 설정
-
reference: w3cschools-margin
🌟 기본적으로 단축속성을 가진 속성들은 개별 속성들이 존재함
-margin-top, margin-bottom, margin-left, margin-right: 각각 상/하/좌/우의 여백을 설정
🌟 단축속성을 사용하면 코드가 보다 깔끔해짐!
✨ 마진 중복(병합, Collapse)
- 마진의 특정 값들이 중복되어 합쳐지는 현상
CSS margin collapse가 일어나는 상황
- CSS에서 마진 중복이 일어나는 경우는 위의 그림에서 확인할 수 있는 것처럼
1) 형제 요소들 간 margin-bottom과 margin-top이 만나는 경우
2) 부모-자식요소 간 margin-top 이 만나는 경우
3) 부모-자식요소 간 margin-bottom이 만나는 경우 ➡️ 형제 요소간에는 반대 방향이 맞물리고, 부모-자식요소간에는 같은 방향이 맞물리면 중복되게 된다!
가 존재한다! 단!! margin collapse는 버그(오류)가 아니고, 이를 우회하는 방법을 사용하면 충분히 해결할 수 있다!
🌟 형제 요소간 margin은 기본적으로 (중복되지 않는다면) 더해지게 된다!
<!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>Document</title>
<style>
*{
padding:0;
margin : 0;
}
.parent{
}
.child{
float :left;
margin:20px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
CSS margin - 형제 요소간 margin 누적
- 위의 예시에서 확인해볼 수 있는 것은, float:left를 통해서 형제 요소들이 같은 공간 내에서 같은 방향으로 정렬되어있을 때 margin이 누적되어 측면 margin이 40px이 실질적인 여백으로써 존재함을 확인해볼 수 있다
❓ 그런데 만약 위에서 기술된 바와 같이, 두 형제 요소간 margin-top , margin-bottom이 접하게 된다면 ❓
<!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>Document</title>
<style>
*{
padding:0;
margin : 0;
}
.parent{
}
.child{
margin:20px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>
margin collapse between siblings
- 위의 경우에는 수직으로 형제 요소들이 정렬되어, margin - top과 margin - bottom이 접하는 상태가 되었다. 이 경우에는 개발자 도구를 통해 확인해보았을 때, margin이 실질적으로 위 혹은 아래에 대해서 20px이 됨을 확인해볼 수 있다. 이 상황이 바로 여백이 중복된 상황이다.
🌟 즉 접하게 된 margin 중 하나가 누락된 것이다
다음은 부모-자식 요소간 마진 상쇄(충돌)에 대해서 알아보자
<!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>Document</title>
<style>
*{
padding:0;
margin : 0;
}
.parent{
width: 300px;
height: 200px;
background-color: cyan;
}
.child{
margin-top:50px;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<!-- <div class="child"></div>
<div class="child"></div> -->
</div>
</body>
</html>
CSS margin collapse between parent and child
먼저, 한 가지 확인할 필요가 있는 사실은, 브라우저에서 position 속성을 어떤 특정 요소에서 지정하지 않았다면 static 속성값이 지정된다는 사실이다
이 점을 뒷받침하여 보았을 때, 모든 요소들은 position:static 으로 적용되어, from top to bottom 순서로 렌더링됨을 알 수 있다
그리고, 기본적으로 CSS에서는 parent-child 관계를 맺고 있는 하나의 단위체에 대해서, parent 요소에서 padding이 주어지지 않았다면(현제, 처음 CSS에서 padding, margin을 초기화해준 상태였다) , child요소의 margin값을 브라우저에서 비교/확인하여 parent 요소에 적용시키게 된다!
그렇기 때문에 부모의 margin-top과 자식의 margin-top이 동일하게 적용되면서 여백충돌(상쇄)가 일어나게 되어, 실질적인 margin-top은 child요소의 50px만이 존재하게 된다. 즉 이번에도 어떤 한쪽의 margin 값이 묵시되는 것이다
앞서서 position의 기본값이 언급된 이유는 얕은 관계성이기는 하지만, child요소의 position을 absolute로 지정하게 된다면 document를 대상으로 렌더링하기 시작하게 되고, 여전히 parent 요소는 static이므로, parent요소의 margin-top과 child요소의 margion-top은 겹쳐지는 일이 없다! 그렇기 때문에 잠시 언급한 것이다!
아래는 관련 참고 사이트이다
https://stackoverflow.com/questions/1762539/margin-on-child-element-moves-parent-element
margin-bottom도 마찬가지로 적용될 수 있는데, 마찬가지로, child 요소의 margin-bottom이 (부모요소에 대해서 padding이 존재하지 않거나 position 값이 기본값일 경우 등에서) parent요소의 margin-bottom의 값으로 전달되게 되고, (공유된 면이 margin-top에서의 상황처럼 존재한다면 ) 마진 중복이 일어나고, child 요소의 margin-bottom이 실질적인 margin-bottom이 된다
- 마진 중복은 padding을 이용해서 우회할 수도 있다
📌 마진 중복 계산법 📌
마진 중복 계산은 먼저 작게 세 가지로 볼 수 있지만 , 간단하게 본다면 크게 두 가지가 존재한다(설명은 형제 요소를 대상으로 그림으로 표현하였지만, 부모-자식 요소간에도 그림의 1 &&2가 해당될 수 있다!)
- 두 요소의 마진값이 둘다 양수거나 둘다 음수인 경우, 절댓값이 더 큰 값이 마진값이 된다
- 두 요소의 마진값이 각각 음수, 양수인 경우, 두 값을 더한 값이 마진값이 된다
형제 요소간 마진 중복 계산법
b) padding 🌟
- 요소의 내부 여백을 지정 ➡️ 기존의 요소 크기보다 부피가 커짐
- 내부 여백 = 자식 요소를 감싸는 여백
- 속성값
- 기본값 :0
- 단위로 지정 : px, em, cm 등
- %로 지정 : 부모요소의 너비에 대한 비율로 지정
div{
padding: 20px;/*단축속성 all*/
}
div{
요소내부여백:여백값;
}
- 개별 속성( 한 방향씩 지정 )
div{
padding-top:20px;
padding-right:20px;
padding-bottom:20px;
padding-left:20px;
}
div{
요소내부여백-위쪽:여백값;
요소내부여백-오른쪽:여백값;
요소내부여백-아래쪽:여백값;
요소내부여백-왼쪽:여백값;
}
- padding shortenhand property! 단축속성! 속기 속성!
Padding shortenhand property
i. padding: top right bottom left
- 상 ➡️ 우 ➡️ 하 ➡️좌 (윗쪽부터 시계순서대로) 패딩을 설정
ii. padding: top right&left bottom
- 상 ➡️ 좌우 ➡️ 하 순서대로 패딩 설정
iii. padding: top&bottom right&left
- 상하 ➡️ 좌우 순서로 패딩을 설정
iv. padding: all
-
적용 순서는 관련 없이, 모든 방향으로 일정 마진값 동일하게 패딩 설정
-
reference: w3cschool-padding
🌹 개별 속성으로 padding-top, padding-bottom, padding-left, padding-right도 존재(상/하/좌/우 padding)
🌺 크기 증가
- 추가된 padding 값만큼 요소의 크기가 커지는 현상
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
background-color: yellow;
padding: 10px 20px;
}
</style>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
CSS padding 으로 인한 크기 증가
위의 경우, 처음 div 요소의 가로와 세로 크기를 100px로 설정하였지만, padding , 즉 내부 여백을 지정해줌으로써 이 내부여백도 너비와 높이에 반영이 되면서 크기가 커진 것을 확인해볼 수 있다(padding으로 인해서 가로너비는 100px+20px+20px = 140px, 세로 높이는 100px + 10px+10px=120px이 되었다)
해결방법
방법 1. 직접 계산
➡️ 크기가 커지지 않도록 padding을 포함한 크기를 직접 계산해야!
(예) 가로너비가 200px, 세로 높이가 200px인 div 요소로 만들 것인데 padding을 단축속성으로 10px 20px을 지정하고 싶은 경우
- 가로 총 너비 = 200 px = x(실질적인 div 요소의 너비)+ 20px + 20px ↔️ 200px = 40px + x px ↔️ x px = 160px
- 세로 총 높이 = 200px = y(실질적인 div요소의 높이) + 10px + 10px ↔️ 200 px = y px + 20px ↔️ y px = 180px
방법 2. 자동 계산
- box-sizing: border-box; 속성-속성값을 이용
- 이 속성을 이용하면 padding뿐 아니라 border까지 포함한 너비 , 높이를 계산, 적용하게 됨
즉, width or height속성에 지정한 값 = 실질적 요소의 크기 + padding, border 크기
로 계산, 적용하게 됨
<!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>Document</title>
<style>
*{
padding:0;
margin :0;
}
div{
width: 100px;
height: 100px;
background-color: yellow;
padding: 10px 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div>Hello World!</div>
</body>
</html>
먼저 어떻게 화면에 렌더링되는지 살펴보기 전에, 위에서 학습한 내용을 토대로 추측해보자
먼저, width로는 100px, height으로는 100px, padding-top & padding-bottom으로는 10px, padding-left & padding-right로는 20px이 적용되었으며, 여백과 border 두께까지 “포함”한 너비로써 요소를 만들기 위해서 box-sizing:border-box 를 설정해두었다
즉, width 100 px = padding-left 20px + padding-right 20 px + contents가 담긴 부분(content-box)의 너비 60px
height 100px = padding-top 10px + padding-bottom 10px + contents가 담긴 부분(content-box)의 크기 80px
로 계산되어 적용될 것이다
이제, 개발자도구로 요소를 pick하여 computed 부분으로 어떻게 여백과 너비가 지정되었는지 살펴보자
CSS box-sizing: border-box
위와 같이, width와 height으로 지정해준 크기값이 요소의 전체 크기가 되는 틀은 변하지 않으면서, padding이 적용되는 것을 확인해볼 수 있다!
✴️ 참고로, content(s)가 담긴 부분을 “content-box”라고 하는데, box-sizing의 기본값은 content-box로 내재되어 있다!
c) border
- 요소의 ‘테두리 선‘을 지정
- 단축, 개별 속성을 지원
- 속성값
- border-width : 선의 두께(너비)[기본값 medium] -border-style : 선의 종류[기본값 none][solid, dashed 등이 존재] -border-color : 선의 색상[기본값 black]
단축 속성 : border: border-width border-style border-color;
예) border: 1px solid red;
- border-width
속성값
-medium (기본값) : 중간두께
-thin : 얇은 두께
-thick : 두꺼운 두께
-단위 이용 : px, em, cm 등 단위를 이용하여 지정
🌟 medium, thin, thick 은 두께 크기가 다소 추상적이기 때문에 단위를 이용함이 보다 권장됨
🌹 border-width에 적용할 수 있는 단축 속성
-이번에도 위의 여백에서 적용된 순서에 착안하여 사용할 수 있다!
border-width : 윗쪽 오른쪽 아랫쪽 왼쪽;/*윗쪽부터 시작하여 시계방향*?
예) border-width: 10px 30px 20px 10px;
/*---------------------------------------------------------------*/
border-width : 윗쪽 왼쪽&오른쪽 아랫쪽;/*윗쪽부터 차례대로 3등분*/
예) border-width: 10px 20px 30px;
/*---------------------------------------------------------------*/
border-width : 윗쪽&아랫쪽 왼쪽&오른쪽;
예) border-width : 10px 20px;
/*---------------------------------------------------------------*/
border-width : 위&아래&오른쪽&왼쪽;
예) border-width: 10px;
-
border-style : 선의 종류를 지정 (단축속성이면서 개별속성)
-기본값-none
- solid : 실선 -dashed : 파선(일반적으로 우리가 아는 점선인데 이의 정식 명칭은 “파선”이다!!)
border-style에 대해서 몇 가지 속성값들을 알아보자
먼저 none과 hidden은 선이 없다는 점에서 동일하지만, hidden은 table 요소에서 사용된다는 점이 약간의 차이점인 것 같다(그래서 hidden은 일반 요소에서는 잘 사용하지 않는 것 같다)
border-style: none, border-style:hidden
그다음은 일반적으로 잘 알고 있는 선 종류들이라서 한번에 살펴보자
바로 solid와 dotted, dashed, double 속성값이다! 이름이 직관적이라서, 추측할 수 있듯이,
-solid : 실선
-dotted : 점선(점선의 점의 두께는 border-width로 설정된 값이 적용된다!)
-dashed: 파선 -double : 이중선
이라는 특징을 지닌다!
border-style: solid, border-style:dotted
border-style:dashed
border-style:double
그리고 이번에는 조금 특이한? border-style인데, 보통 파워포인트에서 액자형식으로 사진이 꾸며질 수 있는 형태와 매우 흡사하다!
바로 groove, ridge, inset, outset인데 groove와 inset을 먼저 살펴보자
border-style:groove
border-style:ridge
이 둘을 먼저 살펴본 것은 이 둘은 요소가 마치 어떤 “홈”을 기점으로
-groove는 그 안에 들어간 느낌(움푹까지는 아닌 것 같다)
-ridge는 그 홈에서 튀어 나와있는 느낌
을 주기 때문에 살펴보게 되었다.
이 둘의 공통점은 그 홈과 어느정도 간격이 있는 듯한 느낌인 것 같다
그 다음은 inset과 outset을 살펴보자
border-style:inset
border-style:outset
이 둘은 어떤 크기가 딱맞는 상자 내부를 기준으로
-inset은 움푹 들어가 있는 형태이고
-outset은 그 위에 튀어나와 있는 형태
라는 점에서 차이점을 보이면서, 기준이 유사하기 때문에 묶어서 살펴보았다
🌹 앞서 언급했다시피, border-style도 단축속성임과 동시에 개별속성을 지원한다. 그리고 CSS margin 등에서 사용된 기본적인 단축속성 진행방향 원리에 따라서
border-style: 위 오른쪽 아래 왼쪽;
예)border-style: solid dotted double inset;
border-style: 위 오른쪽&왼쪽 아래;
예)border-style:solid dashed inset;
border-style: 위&아래 오른쪽&왼쪽;
예)border-style:solid dashed;
border-style: 위&오른쪽&아래&왼쪽;
예)border-style:solid;
(ex)
<!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>Document</title>
<style>
*{
padding:0;
margin :0;
}
div{
width: 500px;
height: 500px;
background-color: tomato;
margin:30px 10px;
}
div:nth-of-type(1){
border-width:3px;
border-style:solid outset dashed double;
}
div:nth-of-type(2){
border-width:3px;
border-style:solid ridge dotted;
}
div:nth-of-type(3){
border-width:3px;
border-style:dashed solid;
}
div:nth-of-type(4){
border-width:3px;
border-style:double;
}
</style>
</head>
<body>
<div>border-style:위 오른쪽 아래 왼쪽</div>
<div>border-style:위 오른쪽&왼쪽 아래</div>
<div>border-style:위&아래 오른쪽&왼쪽</div>
<div>border-style:위&아래&오른쪽&왼쪽</div>
</body>
</html>
- border-color: 선의 색상을 지정(단축속성, 개별속성 지원)
- -속성값: rgb 혹은 색상명, hex 로 선의 색상을 지정
- transparent(투명한 선 ➡️ 요소의 배경색이 보이게 됨)
:기본값 - black
-단축속성은 다른 margin 등에서의 원리와 동일하게 아래와 같이 사용할 수 있다!
border-color:위 오른쪽 아래 왼쪽 ;
예)border-color:red orange orangered violet;
border-color:위 오른쪽&왼쪽 아래;
예)border-color:red orange pink;
border-color:위&아래 오른쪽&왼쪽;
예)border-color:pink red;
border-color:위&아래&오른쪽&왼쪽;
예)border-color:pink;
🌟 border-width의 medium 값은 그 크기가 몇 px인지가 명확하지 않아서, 적어도 단축 속성을 사용하고자 한다면, 두께와 종류는 명시해주어야한다!(종류는 왜❓ : 명시하지 않으면 기본값인 none이 적용되어 선이 생겨나지 않기 때문)
- 개별속성
-
border- width: 선의 두께(너비) 지정 [개별속성이면서 단축속성] -border-style : 선의 종류를 지정(예-실선, 점선 등) -border-color : 선의 색상 -border-top / border- bottom/border-left/border-right : 상/하/좌/우 방향의 경계에 대하여 속성을 단축속성처럼 사용 가능
-border-top-width, border-top-style, border-top-color : 위쪽 border에 대해서 두께나 종류, 색상을 지정
-border-bottom-width, border-bottom-style, border-bottom-color : 아래쪽 border에 대해서 두께나 종류, 색상을 지정
-border-left-width, border-left-style, border-left-color : 왼쪽 border에 대해서 두께나 종류, 색상을 지정
-border-right-width, border-right-style, border-right-color : 오른쪽 border에 대해서 두께나 종류, 색상을 지정
🌺 border도 padding처럼 요소의 크기에 반영되기 때문에 크기에 반영되는데, 이를 해결하는 방식은 padding의 크기 증가에 대해서 수동/자동으로 계산하는 방식과 동일하게 해결해볼 수 있다!
-참고: 수동 계산
<!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>Document</title>
<style>
.box{
/*실질적인 너비를 300, 높이를 300으로 하고
싶은 경우 수동계산방식 적용*/
width: 274px;
height: 274px;
padding:10px;
border:3px solid salmon;
}
</style>
</head>
<body>
<div class="box">Hello!</div>
</body>
</html>
-참고:자동 계산
▶️ box-sizing:border-box 이용
<!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>Document</title>
<style>
.box{
width: 300px;
height: 300px;
padding:10px;
border:3px solid salmon;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="box">Hello!</div>
</body>
</html>
- box-sizing
- 요소의 크기 계산 기준을 지정
😎 [리마인드!!] padding과 border는 그 값에 따라 요소의 크기가 증가되는 현상이 발생하는데 , 이때 box-sizing:border-box를 사용하면 원하는 요소크기내에서 padding과 border가 적용될 수 있다. 그러면서 자동계산되어 content-box의 크기가 줄어들게 되어 해결된다
🌹 속성값
- content-box : content-box의 크기를 보존하게 되면서, 실질적 요소 크기는 padding과 border로 인해 증가(=width 혹은 height+padding+border)[기본값]
- border-box : 해당 요소의 크기는 고유하게 유지하면서, content-box 크기를 조정하게 됨(요소크기==width 혹은 height, 그 안에 padding도, border도 포함되게 됨)(width 혹은 height=content-box크기+padding+border)
<!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>Document</title>
<style>
*{
padding:0;
margin :0;
}
.box1{
box-sizing:content-box;
width: 300px;
height: 300px;
border:10px solid red;
margin-bottom:10px;
}
.box2{
box-sizing: border-box;
width: 300px;
height: 300px;
border:10px dashed pink;
}
</style>
</head>
<body>
<div class="box1">content-box</div>
<div class="box2">border-box</div>
</body>
</html>
css box-sizing
위에서 확인해볼 수 있는 것은
1) 먼저, content-box로 설정했을 때에는
전체 요소 너비 혹은 높이 = width혹은 height(=content-box 크기)+border
2) border-box로 지정했을 때에는
width 혹은 height = 전체 요소 너비 혹은 높이 = content-box 크기+border
가 됨을 확인해볼 수 있다!
*padding-box라는 속성도 존재는 하지만, 브라우저 호환성이 떨어지는 경향이 있다
- display
- 요소의 박스 타입(유형)을 설정
- 요소가 화면에 보여지는 형태를 결정
- 속성값
1) block - 블록 요소(<div> 등)
2) inline - 인라인요소( 등)
기본적으로 우리는 div요소가 블록요소로 알고 있는데, inline으로 display를 변경하게 되면, 크기를 가질 수 없는데, 지금 컨텐츠가 없기 때문에 화면에는 아무것도 표시되지 않게 된다!
<!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>Document</title>
<style>
div{
display:inline;
width: 100px;
height: 100px;
background-color: tomato;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
3) inline-block - 인라인-블록요소( 등)
-기본 베이스는 인라인이기 때문에 수평으로 쌓이는데, 가로&세로&margin-top&margin-bottom을 가질 수 있다는 부분적인 블록요소의 특성을 가짐
<!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>Document</title>
<style>
span {
display: inline-block;
width: 100px;
height: 100px;
background-color: tomato;
margin-right:5px;
}
</style>
</head>
<body>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</body>
</html>
위의 경우, 원래 span 태그는 display: inline으로 설정되어 있어서, 텍스트 등 컨텐츠가 없으면 어떤 공간을 차지할 수도 없고, width와 height을 가질 수 없다
하지만, display:inline-block을 설정해주면서, inline의 기본 성질인 수평으로 누적되는 성질은 지켜지면서, 크기를 가지게 되어 외관상 블록요소와 인라인 요소의 중간처럼 보이게 된다!
display:inline-block
이러한 성질은 display:inline-block 이 설정되어 있는 input 태그에서도 확인해볼 수 있다
.
<!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>Document</title>
<style>
input{
width: 100px;
}
</style>
</head>
<body>
<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
<input type="text" value="5">
</body>
</html>
display:inline-block 성질을 갖는 input 태그
위와 같이 display:inline-block 속성-속성값을 갖는 input 태그는 수평으로 누적되지만, 크기와 margin-top & margin-bottom을 가질 수 있다!(위에서는 마진은 설정하지는 않았지만 이 속성의 특성상 이렇게 작동될 수 있다!)
4) 기타 - table, table-cell(<td>태그), flex 등
5) none - 요소가 있는데 안보이는 개념은 아니고, 완벽하게 존재하지 않는 개념으로 바뀌게 됨!
display:none은 보통 자바스크립트와 함께 사용되곤 하는데, 아래의 예시는 html에서 골격을 잡아둔 후, 자바스크립트에서 클래스를 부여했다가 제거하였을 때, 이에 따라 display를 none으로 함으로써 영구히 제거했다가 다시 또 보이게 하였다
<!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>Document</title>
<style>
*{
padding:0;
margin:0;
}
div{
width: 200px;
height: 200px;
background-color: tomato;
display:flex;
justify-content: center;
align-items: center;
}
div.ele{
display:none;
}
</style>
</head>
<body>
<button>toggle</button>
<div>요소</div>
<script>
const btn = document.querySelector("button");
const ELE = "ele";
const DIV = document.querySelector("DIV");
const handleClick=()=>{
DIV.classList.toggle(ELE);
};
btn.addEventListener("click",handleClick);
</script>
</body>
</html>
display:none
- overflow
- 요소의 크기 이상으로 내용(자식요소)이 넘쳤을 때 어떻게 내용을 화면에 보여줄 지 그 보여짐을 제어
- 단축 속성 지원
- 속성값
1) visible : 넘친 부분을 자르지 않고 그대로 보여줌(기본값)
overflow:visible
- 먼저 우리가 overflow 속성을 지정하지 않더라도, 기본값으로 visible이 적용되는데, 이는 넘치든지 말든지, 보여줄 컨텐츠는 틀 밖을 넘쳐서라도 보여주겠다는 의미이다!
2.) hidden
- hidden은 이 속성값에서 풍겨지는 것처럼, 틀 밖을 넘치는 content는 보여주지 않겠다는 의미를 갖고 있다
overflow:hidden
3.) scroll, auto
- scroll은 auto와 차이점 중 하나는 “틀 밖으로 overflow되기 전에도 스크롤바는 없지만 스크롤바가 가로와 세로에 스크롤바에 대한 프레임이 존재“한다는 점이다
- 또 다른 차이점은 scroll은 별다른 설정(예: overflow-x:hidden)을 하지 않는 한, 가로와 세로방향으로 스크롤바를 생성하지만, auto는 overflow-x:scroll;을 별도 선언해주지 않는 한 세로방향으로만 스크롤바가 생성된다(▶️ scroll은 강제성을 갖음)
- 이러한 차이점에 기반하여 보통은 auto속성이 scroll 속성보다 많이 사용된다!
- 아래의 그림은 두 속성값의 차이점 중 하나인 첫 번째 차이점을 잘 보여준다
overflow되었을 때 scroll의 형태
overflow되었을 때 auto의 형태
overflow가 되지 않았을 때 scroll의 형태
overflow가 되지 않았을 때 auto의 형태
🌟 overflow 속성이 적용될 부분은 content가 담긴 요소의 부모 요소가 되어야 한다! 위의 경우에는 그저 div 태그 내부에 컨텐츠를 담았을 뿐이라서 div요소에 overflow를 적용해도 괜찮다!
- opacity
- 요소의 투명도를 지정
- [0,1] 범위 내의 실수 값으로 설정(속성값)(기본값=1)
- 0: 투명, 0.5: 반투명, 1: 투명x(원래 그대로 잘 보임)
- 수치가 높아질수록 투명해지지 않음
- 수치가 낮아질수록 투명해짐
<!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>Document</title>
<style>
div{
display: inline-block;
width: 100px;
height: 100px;
background-color: tomato;
border:1px solid black;
}
.box2{
opacity:0;
}
.box3{
opacity:1;
}
.box4{
opacity:0.5;
}
.box5{
opacity:0.85;
}
</style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
<div class="box4">box4</div>
<div class="box5">box5</div>
</body>
</html>
opacity
위에서 볼 수 있듯이, opacity를 지정해주지 않으면 기본값으로 1이 적용되어 불투명(투명x)해지고, 0이 적용되면 완전투명해진다. 주의할 점은 완전히 투명해지는 것은 요소가 삭제된 것이 아니라, 존재하지만 보이지 않는 것이다!(display:none과 다르다!)(지금 위에서 box2자리가 비어있다는 것은 요소가 존재하지만 보이지 않을뿐임을 명확히 해준다!)
그리고 box4와 box5에서 확인해볼 수 있듯이, 수치가 점점 1애 가까워질수록 투명도가 떨어짐을 알 수 있다!
➕ opacity는 요소 내부의 content에도 영향을 미쳐서 흐리게 보이거나 명확하게 보이게 될 수도 있다!(위의 box4에서 알아볼 수 있다!)
🌟 아래와 같이 투명도 수치에서 .75와 같이 앞의 정수부분인 0을 생략해줄 수도 있다!
opacity: .75;
- 색상
a) color
- 글자 색상을 지정
- 주의!! font-color, text-color 속성은 없음!!
div{
color:red;
}
div{
글자색상:빨강;
}
b) background
- 요소의 배경 색상을 지정(color와 비교하여 차이를 알고 있기!) (background-color와 같은 개별 속성으로 지정 가능) (background는 단축 속성!)
div{
background-color:red;
}
div{
요소배경색상 : 빨강;
}
- TOC: Table of contents; 목차
https://github.com/hy6219/TIL-Today-I-Learned-/blob/main/FE/CSS/Basic/overflow visible.PNG?raw=true