25일차(2)/CSS(4) : Text, CSS가중치, Unit 외
<z-index>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step11_z-index.html</title>
<style>
.wrapper{
position: relative;
border: 1px solid red;
}
.wrapper img{
position: absolute;
width: 200px;
}
#one{
top: 100px;
left: 100px;
/* z-index 값이 상대적으로 크면 작은거 보다 위에 배치 된다.*/
z-index: 10;
}
#two{
top: 150px;
left: 150px;
z-index: 9;
}
#three{
top: 200px;
left: 200px;
z-index: 8;
}
</style>
</head>
<body>
<h1>z-index 테스트</h1>
<div class="wrapper">
<img id="one" src="images/image1.png"/>
<img id="two" src="images/image2.png"/>
<img id="three" src="images/image3.png"/>
</div>
</body>
</html>
- 이미지가 여러개 겹쳐져서 배치될 때, 어떤 것을 위로 오게 할 것인가를 결정하는 코드!
- z-index를 지정하지 않으면 코드상으로 위에 있는 컨텐츠가 밑에 깔리게 된다.
(나중에 작성한 것이 상위로 올라온다고 생각하면 된다.)
- 가로세로 xy축과 앞으로 향해있는 z축이 있다고 생각해 보면,
z축의 숫자가 클수록 앞에 나와있는 것!
- z-index에 상대적인 숫자를 지정해서 이미지의 앞, 뒤 위치를 지정할 수 있다.
<Text1>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step12_Text.html</title>
<style>
.wrapper1{
/* [ 글자 스타일 ]
normal | italic
상속된다.
*/
font-style: italic;
/* [ 글꼴 ]
좌측에서 부터 순서대로 적용된다.
상속된다.
*/
font-family: "Times New Roman", Consolas, NanumGothic, Gothic, serif, sans-sefif;
/*
[글자의 굵기]
normal | bold
상속된다.
*/
font-weight: bold;
/*
[글자의 크기]
상속된다.
*/
font-size: 20px;
/*
[글자 꾸미기]
none | underline | overline | line-through
상속된다.
*/
text-decoration: underline;
/*
[글자 색상]
상속된다.
*/
color: red;
}
.wrapper2{
/*
[ 글자 변환 ]
none | uppercase | lowercase | capitalize
상속된다.
*/
text-transform: capitalize;
/*
[ 자간 ]
상속된다.
*/
letter-spacing: 5px;
/*
[ 행간 ]
상속된다.
*/
line-height: 30px;
/*
[첫단어 들여쓰기]
상속된다.
*/
text-indent: 100px;
}
</style>
</head>
<body>
<div class="wrapper1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita in
excepturi corrupti odit molestiae quas illum error, eaque! Sapiente, eius.
Suscipit natus eveniet, saepe maiores culpa ea dicta deserunt.</p>
</div>
<div class="wrapper2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum libero magnam
itaque, sequi corporis maxime ipsum natus aliquam ad expedita hic perferendis doloremque
commodi, ea! Commodi voluptatibus alias ex accusamus.</p>
</div>
<div class="wrapper3">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum libero magnam itaque,
sequi corporis maxime ipsum natus aliquam ad expedita hic perferendis doloremque commodi,
ea! Commodi voluptatibus alias ex accusamus.</p>
</div>
</body>
</html>
- 글꼴은 폰트명에 띄어쓰기가 있으면 " " 으로 감싸면 된다.
띄어쓰기가 없으면 굳이 감싸지 않아도 된다.
ex) "Times New Roman"
- text-decoration 글자 꾸미기의 종류
none | underline | overline | line-through (가운데를 통과하는 선)
→ 각각 없음, 밑줄, 윗줄, 가운데 긋는 줄
- text-transform : 소문자/대문자 전환
- letter-spacing : 자간. 철자 하나하나의 간격
- line-height : 행간. 줄 간격. 한줄한줄이 떨어진 정도
- text-indent : 첫단어 들여쓰기
- console에서 체크박스를 없애보면서 css 정의했을때의 차이점 보기!
<Text2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step12_Text2.html</title>
<style>
div{
border: 1px solid red;
}
#one{
/* 글자 정렬 : 왼쪽 ; */
text-align: left;
}
#two{
/* 글자 정렬 : 가운데 ; */
text-align: center;
}
#three{
/* 글자 정렬 : 오른쪽 ; */
text-align: right;
}
.wrapper{
/* inline 혹은 inline-block 요소의 가운데 정렬에도 활용할수 있다.*/
text-align: center;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
display: inline-block;
}
#four{
/* 늘리기 */
text-align: justify;
}
</style>
</head>
<body>
<div id="one">바나나</div>
<div id="two">딸기</div>
<div id="three">복숭아</div>
<div class="wrapper">
<div class="box"></div>
</div>
<p id="four">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus ut
excepturi maxime at enim, quod mollitia neque quae rem inventore quam numquam molestiae
possimus accusamus consequatur sint eveniet aspernatur eligendi.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique in quos quis
laboriosam quasi impedit totam animi voluptates recusandae dolore et nesciunt alias quaerat
nulla debitis rem, minus labore explicabo!</p>
</body>
</html>
- 정렬을 inline 요소에 적용해 볼 수도 있다.
- wrapper 박스 안에 들어가는 것들은 전부 가운데정렬
→ 박스도 글자로 취급되어 정렬된 것을 볼 수 있음!
<CssWeight 가중치>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step13_CssWeight.html</title>
<style>
/* 단계적으로 적용되는 css 법칙 확인하기*/
p{
background-color: red;
}
/* 선택자의 가중치(구체적)가 동일 하다면 나중에 정의한 css 가 적용된다. */
p{
background-color: yellow;
}
</style>
</head>
<body>
<p class="myClass">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum eaque minima inventore nulla molestias, quam corporis iusto, rerum labore consectetur saepe ex nam neque asperiores delectus aliquam deleniti, magnam accusantium.</p>
</body>
</html>
- 선택자의 구체성이 동일하다면 나중에 지정한 선택자가 이긴다!
<CssWeight 2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step13_CssWeight2.html</title>
<style>
/*
[ css 가중치 정리 ]
1. css 는 선택자가 상세할수록 가중치가 크다.
2. 가중치가 같으면 나중에 정의한 css 가 적용된다.
요소명 선택자 가중치 : 1점
클래스 선택자 가중치 : 10점
아이디 선택자 가중치 : 100점
인라인 css 가중치 : 1000 점
!important 가중치 : 10000점
*/
li{ background-color: yellow; } /* 1 */
ul li{ background-color: blue; } /* 2 */
.active{ background-color: green; } /* 10 */
li.active{ background-color: red; } /* 11 */
#one{ background-color: pink; } /* 100 */
#one{ background-color: white !important; } /* 10000 */
</style>
</head>
<body>
<div class="wrapper">
<div class="nav">
<ul>
<li style="background-color: #999;" class="active" id="one">하나</li>
</ul>
</div>
</div>
</body>
</html>
- 다른사람이 작성한 CSS를 수정하고 싶을 때, 가중치가 중요하다.
- CSS를 재정의하고자 한다면 가중치(구체성)을 높여야 수정할 수 있다.
- !important 로 최종적으로 적용되어 있다.
- 각각 가중치가 다르다면 정의한 순서와는 상관없이 순서를 뒤바꿔도 가중치가 높은 것이 이긴다.
<Visibilty, Opacity>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step14_etc.html</title>
<style>
#one{
/* 공간은 차지하고 보이지만 않음 */
visibility: hidden; /* visible(default) | hidden */
}
#two{
/*
1.0 : 완전 불투명
0.5 : 반투명
0.0 : 완전 투명(안보임)
*/
opacity: 0.5; /* 0.0 ~ 1.0 */
}
</style>
</head>
<body>
<h1>visiblity 속성</h1>
<img src="images/kim1.png" id="one"/>
<img src="images/rabbit_1.png" id="two"/>
</body>
</html>
Visibility (가시성 설정)
- hidden / visible(기본) 중에 선택가능
- 공간은 차지하고 있지만 보이지 않는다.
- display: none; 과는 다르다. display 는 공간도 차지하지 않는다.
Opacity (투명도)
- 투명도 0~1사이의 숫자를 입력해서 투명도 조정이 가능하다.
<Overflow>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step14_etc2.html</title>
<style>
.wrapper1{
width: 300px;
height: 300px;
background-color: yellow;
border: 1px solid green;
color: white;
overflow: visible; /* default 값 */
}
#one{
width: 500px;
height: 100px;
background-color: blue;
}
.wrapper2{
width: 300px;
height: 300px;
background-color: yellow;
border: 1px solid green;
color: white;
/*
넘친 컨텐츠 처리
visible | hidden | scroll | auto
overflow, overflow-x, overflow-y
*/
overflow: scroll;
}
#two{
width: 100px;
height: 500px;
background-color: blue;
}
</style>
</head>
<body>
<h1>overflow 처리</h1>
<div class="wrapper1">
<div id="one">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, quia illo veritatis. Repellendus, numquam? Quisquam iste, dicta dignissimos magni dolores incidunt vel ipsam natus vero voluptatum enim voluptatibus cum maiores!</div>
</div>
<div class="wrapper2">
<div id="two">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, quia illo veritatis. Repellendus, numquam? Quisquam iste, dicta dignissimos magni dolores incidunt vel ipsam natus vero voluptatum enim voluptatibus cum maiores!</div>
</div>
</body>
</html>
- 자식요소의 크기가 부모요소를 벗어날 때(overflow),
- 넘어가는 해당 컨텐츠를 숨기거나 보여줄 수 있다.
또는 숨기지도 보여주지도 않고 스크롤하는 창으로 만들 수 있다.
- overflow 속성에서 작성 가능!
- visible : 이렇게 내용이 보이도록 밖으로 튀어나가는 형태가 기본값(default)
- 넘친 컨텐츠 처리 방법: visible | hidden | scroll | auto
- hidden : 넘치는 부분은 잘라내고 부모요소의 영역만큼만 보여준다.
- auto : 자식요소의 내용이 넘칠때 만 스크롤바를 보이고, 넘치지 않으면 보이지 않는다.
- scroll : 자식요소의 내용이 넘치든 넘치지 않든 스크롤바를 보이게 한다.
- overflow: scroll 안에 overflow-x: scroll, overflow-y: scroll 이 있다.
- x, y축의 스크롤바가 모두 지정되어 있는 상태!
<Boxsizing>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step15_boxSizing.html</title>
<style>
.box{
width: 100px;
height: 100px;
background-color: yellow;
border: 10px solid red;
padding: 10px;
margin: 10px;
/*
content-box (default) | border-box
content-box : width 와 height 에 아무것도 포함하지 않음
border-box : width 와 height 에 padding 과 border 포함
*/
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>box-sigzing 속성</h1>
<div class="box">.box</div>
</body>
</html>
- 가로세로 100px의 박스를 만들었는데,
border, padding을 포함해서 전체가 100px로 만들어진 것을 볼 수 있다.
- 콘솔에서 box-sizing 을 빼면 순수 컨텐츠의 크기만 100*100픽셀이 된다.
- border, padding 크기까지 고려하면 컨텐츠의 크기를 가늠할때 계산이 복잡해지므로
box-sizing으로 합쳐서 디자인을 많이 한다.
- content-box (default) | border-box 두가지 선택지가 있다.
<Unit> 단위
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step16_Unit.html</title>
<style>
/*
[ 크기나 거리를 나타내는 단위 ]
px, %, em, rem
px => 점(화소)의 갯수
% => 부모의 크기에 대한 상대적 비율
em => 상속받은 글자의 크기의 배수
ex) 상속받은 글자의 크기가 16px 이라면
1em 은 16px
1.5em 은 24px
2em 은 32px
3em 은 48px
rem => 최상위요소(html) 의 글자의 크기의 배수
html 의 font-size: 14px 이라면
1rem => 상속받은 글자의 크기와 상관없이 14px
2rem => 상속받은 글자의 크기와 상관없이 28px
*/
.wrapper{
background-color: yellow;
width: 500px;
margin: 0 auto;
}
.wrapper2{
background-color: yellow;
width: 50%; /* 부모 width 의 50% */
margin: 0 auto;
}
</style>
</head>
<body>
<div class="wrapper">.wrapper</div>
<div class="wrapper2">.wrapper2</div>
</body>
</html>
- px : 점(화소)의 갯수
- % : 부모의 크기에 대한 상대적 비율
- em : 상속받은 글자의 크기의 배수
ex) 상속받은 글자의 크기가 16px 이라면
1em 은 16px
1.5em 은 24px
2em 은 32px
3em 은 48px
- rem : 최상위요소(html) 의 글자의 크기의 배수
- html 의 font-size: 14px 이라면
- 1rem : 상속받은 글자의 크기와 상관없이 14px
- 2rem : 상속받은 글자의 크기와 상관없이 28px
- 최근에는 rem을 많이 쓴다.
- em은 상속받은 글자크기에 따라 달라져서 헷갈리기 때문에...
- rem 으로 지정해두면 html 글자크기를 바꾸는 것만으로도 전체 글자크기를 한번에 바꿀 수 있어 편하다.
- 상대적인 비율 값을 가지고있는 것!
<Unit2>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step16_Unit2.html</title>
<style>
#one{
font-size: 16px;
}
#two{
font-size: 1em; /* inherit 된 글자 크기의 1배 */
}
#three{
font-size: 2em; /* inherit 된 글자 크기의 2배 */
}
#four{
font-size: 3em; /* inherit 된 글자 크기의 3배 */
}
.box{
width: 10em;
height: 10em;
background-color: yellow;
margin-left: 5em;
border: 1px solid red;
}
.wrapper{
font-size: 20px;
}
</style>
</head>
<body>
<h1>기본 글자의 크기는 16px 이다. </h1>
<p>ABCD 글자크기:16px</p>
<p id="one">ABCD 글자크기:16px</p>
<p id="two">ABCD 글자크기:16px</p>
<p id="three">ABCD 글자크기:32px</p>
<p id="four">ABCD 글자크기:48px</p>
<div class="box"></div>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
- 16px = 1em
- 가로세로 10em으로 지정되어 있는 박스는 160px의 모서리를 가진 것!
- em은 물려받은 글자 크기에 따라 값이 달라진다.
<Unit3>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Step16_Unit3.html</title>
<style>
html{
/* 1 rem 의 기준 크기 (default 값은 16px) */
font-size: 10px;
}
#one{
font-size: 16px;
}
#two{
/*
[ css3 에서 추가된 단위 rem ]
-최상위(root) 글자 크기의 배수
-html 요소의 글자 크기의 배수 이다.
*/
font-size: 1rem;
}
#three{
font-size: 2rem;
}
#four{
font-size: 3rem;
}
.box{
width: 10rem;
height: 10rem;
background-color: yellow;
margin-left: 5rem;
border: 1px solid red;
}
.wrapper{
font-size: 20px;
}
</style>
</head>
<body>
<p>ABCD</p>
<p id="one">ABCD</p>
<p id="two">ABCD</p>
<p id="three">ABCD</p>
<p id="four">ABCD</p>
<div class="box"></div>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
</html>
[ css3 에서 추가된 단위 rem ]
- 최상위(root) 글자 크기의 배수
- html 요소의 글자 크기의 배수
- rem은 물려받은 글자크기와 상관없이 항상 같은 배율!
- html{ font-size: 10px; } 으로 해두면 전체의 크기값이 정해지고,
이 값에 따라 나머지 요소들의 크기가 결정된다.
'국비교육(22-23)' 카테고리의 다른 글
| 26일차(1)/jsp(1) : Eclipse Server, Emmet 설정 등 (0) | 2022.11.13 |
|---|---|
| 25일차(3)/CSS(5) : Bootstrap, Form, Grid, Flex (1) | 2022.11.10 |
| 25일차(1)/CSS(3) : Float, Display (0) | 2022.11.09 |
| 24일차(3)/CSS(2) : Margin, Padding, Border / Pseudo Class / Position (0) | 2022.11.09 |
| 24일차(2)/CSS(1) : 내부, 외부, inline CSS / Selector (0) | 2022.11.08 |