프론트엔드(Front-End)/HTML&CSS&JavaScript
[CSS] CSS 기초 - CSS의 속성과 플렉스 박스(Flex box)
1-hee
2024. 4. 22. 19:00
개요
오늘은 지난 포스팅에 이어서 CSS의 다양한 스타일 속성들에 대해서 알아보도록 하겠습니다.
Font 속성
글자 하나하나에 대한 설정
- font-family : 글꼴
- font-size : 글자 사이즈
- font-style : 글자 기울임, bold 등, 일반 등
- font-variant : small-caps 속성 (주로 영어에서 소문자→ 대문자로)
- font-weight : 글자 두께
- font : Font 속성 축약 버전(글꼴, 사이즈, 기울임 등을 한번에)
.font{
font-family: "Times New Roman", monospace; /*폰트 명이 공백이 있을 때는 쌍따옴표로 묶어줌*/
font-style: normal;
font-weight: 100;
font-variant : small-caps;
font-size: 16px;
font: italic 13px Tahoma;
}Text 속성
글자 전체에 대한 설정
- color : 글자 색상
- text-align : 글자 배치, inline 요소의 가운데 정렬에 사용 가능
- text-decoration : 글 속성 (밑줄 취소선 등)
- text-transform : 영문자에서 uppercase 등을 하면 대문자로 변환
- text-indent : 첫 라인 글자 들여쓰기
- line-height : 글자 높이, 글자의 수직 정렬에 사용 가능.
- white-space : 엘리먼트 안의 white space에 대한 옵션
- vertical-align : 수직 정렬 지정
- letter-spacing : 문자 간의 space 간격을 줄이거나 늘림
- word-spacing : 단어 간의 간격 지정
.text{
color: rgb(20, 20, 20);
text-align: justify;
text-decoration: underline;
text-transform: uppercase;
text-indent: 0px;
line-height: 30px;
white-space : nowrap;
vertical-align: baseline;
letter-spacing : 10px;
word-spacing : 10px;
}
display 속성
- cursor : 마우스 모양 변경
- display : 요소의 출력 방향(block)
- display: inline; (완전히 인라인 요소의 설정을 따름)
- display: inline-block; (화면상 배치가 인라인 요소 같으나, 공간을 가짐)
- display: block; (블록요소, 문서에서 한 줄을 차지함)
- visibility : 화면 표시 여부
.display{
cursor: pointer;
display: block;
display: inline;
display: none;
display: inline-block;
visibility: hidden;
}
Background 속성
- background-color : 배경 색상
- background-image : 배경 이미지
- background-repeat : 배경의 반복 여부, 배경 이미지와 같이 사용하며, 명기하지 않을 경우 repeat이 기본 값
- background-position : 배경의 위치 값
- background-attachment : 배경의 fixed 속성
- background : background 옵션들의 축약 버전
.background{
background-color: #7621ab;
background-repeat: repeat;
background-position: center;
background-attachment: fixed;
background: url("./logo.png") right bottom no-repeat fixed;
}box 속성 (주로 block 요소의 영역에 관련한 속성)
- padding : content와 outline 사이의 중간 여백
- margin : block 요소의 전체 여백, margin은 수직으로 설정할 경우 여백 겹칩 현상 있음
- border : 외부 경계선에 대한 설정
- box-sizing : padding+outline로 전체의 여백을 조정할 때 사용.
/* box 속성을 쓰는 대표적인 html 태그가 div여서 주로 div에서 많이 씀 */
.div-box{
width: 300px;
height: 120px;
background: tan;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
padding: 20px;
border: 20px solid black;
box-sizing: content-box;
box-sizing: border-box;
}
Table 속성(테이블 속성)
- 대부분 box 속성과 유사하나, 표의 칸 사이의 여백을 조절하는 속성이 별도로 있습니다.
- table-layout : content와 outline 사이의 중간 여백
- width : Table의 너비를 지정
- height : Table의 높이를 지정
- text-align : Cell 내부 내용을 수평 정렬
- vertical-align : Cell 내부 내용을 수직 정렬
- border-collapse : 분리된 테두리 모델, 통합된 테두리 모델을 설정
- boarder-style : 테두리 스타일을 설정
- border-width : 엘리먼트의 4개 테두리 너비를 설정
- border-color : 엘리먼트의 테두리 색을 설정
- border : 테두리 관련 속성 한번에
.table{
border-collapse: separate; /* 기본값 */
border-collapse: collapse; /* 딱 붙어서 표처럼 보이게 */
}
.table{
table-layout: auto;
width: 100%;
height : 100px;
text-align: start;
vertical-align: baseline;
border-collapse : separate;
border-style: dotted;
border-width: thick;
border-color: red;
border: thick double #32a1ce;
}
Layout 속성(레이아웃 속성)
- width : 가로 길이
- height : 세로 길이
- position : 위치 기준선 제공, absolute, relative, fixed, sticky, 기준선을 제공할 뿐 직접 조절 X
- overflow : 스크롤 옵션
- html 태그의 글자나 요소들이 범위를 벗어나거나, 크기보다 작을 경우 스크롤 표시 여부
- 표시하면 스크롤을 올리거나 내리면서 전체 내용이 보이는데, 표시하지 않으면 잘린 듯 보임.
- float : 부유 옵션
- `HTML` 요소가 수직 배치가 아니라 왼쪽이나 오른쪽으로 배치될 수 있도록 함.
- clear : float 옵션 취소 옵션
- 설명 그대로 float 옵션이 있을 경우 이 옵션을 추가하면 float 옵션의 적용을 받을지 유무 조절 가능
- z-index : 화면 표시 우선순위
- 화면 상에 여러 요소가 쌓을 경우 표시의 우선순위를 정하는 상수 값
- 높을 수록 가장 상단에서 보이게 됨.
.layout{
width: 300px;
height: 300px;
position: absolute;
overflow: scroll;
float: left;
clear: both;
z-index: 999;
}
고급 CSS 기술
web font의 적용
- 구글 폰트 같은 곳에서 폰트를 직접 다운 받지 않고 옵션을 추가함으로써 사용 가능.
<!DOCTYPE html>
<!--
웹 폰트
웹 서버에 있는 폰트를 사용자의 웹 브라우져로 전송하는 방식
구글폰트 사용법
1. 구글폰트 검색
2. https://fonts.google.com/ 접속
3. 화면에서 원하는 폰트를 검색 후 "+" 버튼을 클릭
4. 화면 하단의 Family Selected 바 클릭
5. Standard 링크 복사, 페이지 붙여넣기
6. font-family 복사, 페이지 적용
-->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>WebFont</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic|Nanum+Pen+Script" rel="stylesheet">
<style>
body {
font-family: 'Nanum Pen Script', cursive;
font-size: 32px;
}
</style>
</head>
<body>
<h2 class="variant">하이브(hive)</h2>
<p>내가 살던 이 도시에 무슨 일이 일어난거지?</p>
<p>원시시대로 돌아간 지구의 대기상태</p>
<p>김규삼 작가가 선보이는 판타지 스릴러</p>
</body>
</html>icon의 적용
- 구글 폰트 같은 것 적용 하듯이 웹페이지에 아이콘을 적용하고자 할 때 사용.
<!DOCTYPE html>
<html lang="en">
<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>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css"
/>
<style>
.bi-wallet2 {
color: blue;
font-size: 30px;
}
span {
margin: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div><i class="bi bi-wallet2"></i><span>폴더</span></div>
</body>
</html>
shadow 속성
글자나, 박스 요소(div 등)의 그림자 속성
shadow는 여러 개 중첩 가능하고, 내부 그림자 효과도 가능함.
<!DOCTYPE html>
<!--
그림자 효과 내기
- text-shadow : h-shadow | v-shadow | blur | 색상
: 수평거리(필수)
- 그림자가 수평으로 얼마나 떨어져 있는지 지정,
양수값은 요소의 오른쪽에 음수값은 요소의 왼쪽에 그림자 표시
: 수직거리(필수)
- 그림자가 수직으로 얼마나 떨어져 있는지 지정,
양수값은 요소의 아래쪽에 음수값은 요소의 위쪽에 그림자 표시
: blur
- 그림자의 흐림 정도, 생략시 0을 기본값으로 진한 그림자, 값이 100에 가까워 지면 많이 번져 보인다.
음수 불가능, 값이 커지면 흐려짐
: 색상
- 그림자 색상
-->
<html>
<head>
<title> text-shadow </title>
<meta charset="utf-8" />
<style>
h1 {
font-size: 80px;
color: white;
text-align: center;
}
div.text {
background: #808080;
}
.text1 {
text-shadow: 1px 10px 20px #000;
}
.text2 {
color: black;
text-shadow: 3px -3px 5px #fff;
}
.text3 {
color:#000;
text-shadow:0 0 4px #ccc,
0 -5px 4px #ff3,
2px -10px 6px #fd3,
-2px -15px 11px #f80,
2px -19px 18px #f20;
}
.box > div {
border: 1px solid #3454;
width: 300px; height: 150px;
text-align: center;
margin: 20px;
}
.box1 {
box-shadow: 20px 10px 0px 5px #666;
box-shadow: 20px 10px 3px 5px #666;
box-shadow: 5px 5px 5px 5px #666;
}
.box2 {
box-shadow: 10px 10px 30px -1px #3453 inset,
20px 10px 3px 5px #666;
}
.box3{
width: 200px;
height: 200px;
/* border: 1px solid #ccc; */
margin: 20px;
box-shadow: 10px 10px 10px 5px rgba(0, 0, 0, .5),
-10px -10px 10px 5px rgba(0, 0, 0, .5) inset;
}
</style>
</head>
<body>
<div class="text">
<h1 class="text1">불꽃코딩</h1>
<h1 class="text2">불꽃코딩</h1>
<h1 class="text3">불꽃코딩</h1>
</div>
<div class="box">
<div class="box1">box-shadow:<br />20px 10px 5px 5px #666;</div>
<div class="box2">box-shadow:<br />10px 10px 50px -1px blue;</div>
<div class="box3">box-shadow:<br />10px 10px 50px -1px blue;</div>
</div>
</body>
</html>
transition 속성
속성 변경의 애니메이션 화
글자나 박스 요소의 크기를 애니메이션처럼 변화하게 해주는 속성.
<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<meta charset="utf-8" />
<style>
#outer > div {
width: 100px;
height: 100px;
text-align: center;
padding: 5px;
margin: 5px 10px;
color: white;
background: black;
font-size: 30px;
font-weight: bold;
transition: 5s;
}
#outer:hover > div {
width: 500px;
}
#outer:hover > .ease {
transition-timing-function: ease;
}
#outer:hover > .linear {
transition-timing-function: linear;
}
#outer:hover > .ease-in {
transition-timing-function: ease-in;
}
#outer:hover > .ease-out {
transition-timing-function: ease-out;
}
#outer:hover > .ease-in-out {
transition-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div id="outer">
<div class="ease">ease</div>
<div class="linear">linear</div>
<div class="ease-in">ease-in</div>
<div class="ease-out">ease-out</div>
<div class="ease-in-out">ease-in-out</div>
</div>
</body>
</html>애니메이션(animation) 속성
<!--
애니메이션
1. @keyframes : 애니메이션이 진행되는 상태에 따른 변경사항을 적용
- from, to
예> @keyframes 이름 {
from {background-color: red;}
to {background-color: yellow;}
}
- %
예> @keyframes 이름 {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
2. animation : 생성된 @keyframes을 적용
- animation-name: keyframes 이름;
- animation-duration : 시간(초);
- animation-delay: 시간(초);
- animation-iteration-count: 반복횟수 | infinite(무한);
- animation-direction: normal(정상) | reverse(반대) | alternate(정상 <-> 반대);
- animation-timing-function: linear;
1) linear : 시작에서 끝까지 똑같은 속도로 진행
2) ease : 처음에는 천천히 시작하고 점점 빨라지다가 마지막엔 천천히
3) ease-in : 트랜지션 시작을 느리게
4) ease-out 트랜션을 느리게 끝냄
5) ease-in-out : 느리게 시작하고 느리게 끝냄
예> div {
width: 100px; height: 100px;
background-color: red;
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
/* 단축 */
animation: example 5s linear 2s infinite alternate;
}
-->
<html>
<head>
<title> transition </title>
<meta charset="utf-8" />
<style>
div {
position: relative;
width: 200px; height: 200px;
background-color: red;
/* 애니메이션 여러 개 등록 가능 */
animation-name: ani, ani2;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes ani2 {
from {
background-color: red;
}
to {
background-color: blue;
}
}
@keyframes ani {
0% {
top: 0px; left: 0px;
}
25% {
top: 0px; left: 150px;
}
50% {
top: 0px; left: 300px;
}
75% {
top: 0px; left: 150px;
}
100% {
top: 0px; left: 0px;
}
}
</style>
</head>
<body>
<p> animation 속성 연습</p>
<div></div>
</body>
</html>
플렉스 박스 속성 ( display:flex )
플렉스 박스의 종류
display : flex; /* 플렉스 박스, box형으로 영역을 가짐, document에서 한 줄을 차지 */
display : inline-flex; /*inline의 성격을 갖는 flex 박스, box 옵션들 가능!, 그러나 한줄 다 차지 X*/
플렉스 박스의 옵션
flex-direction : flex 박스 내의 요소들의 배치 방향을 결정.
- 플렉스 컨테이너 내의 아이템을 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정합니다.
- `flex 박스` 는 요소 하나하나 마다 옵션을 넣는 게 아니라, 주로 여러 요소들을 포함하는 상위 태그 ex) `div` 등 에 옵션으로 추가하는 게 일반적인 용례입니다.
- 실제로 배치가 조정되는 것은 flex 박스 안의 요소들이 위치나 옵션 등이 조절 되는 편입니다.
<style>
.flex-container {
display: flex;
flex-direction: column-reverse;
flex-direction: row-reverse;
flex-direction: column;
flex-direction: row;
}
</style>
flex-wrap : flex 박스 용 overflow 옵션
- `flex-item` 요소들이 강제로 한줄에 배치되게 할 것인지,
- 또는 가능한 영역 내에서 벗어나지 않고 여러행으로 나누어 표현 할 것인지 결정하는 속성
- 만약 영역 내에서 벗어나지 못하게 설정한다면, 동시에 요소의 방향 축을 결정할 수 있습니다.
<style>
.flex-container {
display: flex;
flex-direction: row; /* 이 두 옵션과 같이 사용해야함 */
flex-wrap: wrap-reverse;
flex-wrap: nowrap;
flex-wrap: wrap;
}
</style>
flex-flow : flex-direction, flex-wrap속성의 단축속성
<style>
.flex-container {
display: flex;
flex-flow: row wrap;
flex-flow: row nowrap;
flex-flow: column nowrap;
flex-flow: column wrap;
}
</style>
justify-content : `flex` 요소의 요소 간 배치에 관한 설정
- 상하 좌우 여백을 두고 배치할지?
- 시작점, 종료지점 등 기준을 잡고 모으고 쌓아서 할지?
- 요소의 고유한 크기는 건드리지 않고 단순 배치에 집중한 속성.
<style>
.flex-container {
display: flex;
width: 800px;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
justify-content: space-between;
justify-content: center;
justify-content: flex-end;
justify-content: flex-start;
justify-content: space-around;
}
</style>
align-items : `flex` 요소 자체의 옵션을 건드릴 수 있는 배치 옵션
- 콘텐츠 사이와 콘텐츠 주위 빈 공간을 플렉스 박스의 교차축
- 또는 그리드의 블록 축을 따라 배치하는 방식을 결정
- 이 속성의 옵션 중 `stretch` 옵션은 요소의 크기를 컨테이너의 크기만큼 늘릴 수 있음.
.flex-container {
display: flex;
flex-flow: row wrap;
align-items: center;
align-items: stretch;
align-items: flex-end;
align-items: flex-start;
}
order : 컨테이너 안의 요소들의 배치 순서를 속성 값을 참조하여 결정
- 플렉스 또는 그리드 컨테이너 안에서 현재 요소의 배치 순서를 지정합니다.
- 컨테이너 아이템의 정렬 순서는 오름차순 `order` 값이고,
- 같은 값일 경우 소스 코드의 순서대로 정렬
- 순서에 대해 순번을 부여함 (html 작성 순서를 무시할 수 있음).
<style>
.flex-container {
display: flex;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
order: 2;
}
.flex-container > div:nth-child(3) {
order: -2;
}
.flex-container > div:nth-child(4) {
order: 5;
}
</style>
flex-basis : flex box 요소들의 너비를 지정 가능.
- 플렉스 아이템의 초기 크기를 지정
- `box-sizing`을 따로 지정하지 않는다면 콘텐츠 박스의 크기를 변경
- flex box의 크기 자체가 충분할 때에는 절대 크기를 확보 가능한데,
- 요소들을 전체 다 담기 부족하거나 할 때에는 상대적으로 크기가 조정됨.
.flex-container {
width: 800px;
height: 300px;
display: flex;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
flex-basis: 50px;
}
flex-grow : flex box 요소들 너비 차지 비중을 설정
- `flex-item`요소가, `flex-container` 요소 내부에서 할당 가능한 공간의 정도를 선언
- 숫자 값이 클수록 차지하는 너비의 비율을 크게 가져감
- 음수 값을 가질 수 없으며, 설정하지 않는 다른 요소들은 기본 값이 0인 것으로 간주
- 만약 이 옵션을 가진 요소가 있고, 한 개이며, 값이 1일 때, 그 요소의 크기가 가장 비대해짐.
<style>
.flex-container {
width: 1000px;
height: 300px;
display: flex;
flex-direction: column;
flex-direction: row;
}
.flex-container > div:nth-child(2) {
flex-grow: 1;
}
.flex-container > div:nth-child(3) {
flex-grow: 9;
}
</style>
flex-shrink : `flex-item` 요소의 크기 축소 비율
- - `flex-item` 요소의 크기가 `flex-container` 요소의 크기보다 클 때
- - flex-shrink 속성을 사용하는데, 설정된 숫자값에 따라
- - `flex-container`요소 내부에서 `flex-item` 요소의 크기가 축소
<style>
.flex-container {
width: 300px;
height: 300px;
display: flex;
flex-direction: column;
flex-direction: row;
}
.flex-container > div {
width: 100px;
flex-shrink: 0;
}
.flex-container > div:nth-child(2),
.flex-container > div:nth-child(3),
.flex-container > div:nth-child(4) {
flex-shrink: 1;
}
</style>
flex : flex-grow + flex-shrink + flex-basis
- flex-grow + flex-shrink + flex-basis 옵션의 축약형
<style>
.flex-container {
display: flex;
flex-direction: row;
width: 1200px;
width: 800px;
height: 300px;
}
/* 창에 맞게 줄어듬 */
.flex-container > * {
flex: 0 1 200px;
}
/* 크기가 늘지도 줄지도 않으므로 뚫고 나감 */
.flex-container > * {
flex: 0 0 200px;
}
/* 창에 맞게 크기가 늘어남 */
.flex-container > * {
flex: 1 0 auto;
}
</style>
align-self : `flex-item` 요소의 배치옵션
- flex 컨테이너의 아이템 딱 하나에 배치 옵션 지정.
.flex-container > div:nth-child(3) {
align-self: flex-start;
align-self: flex-end;
align-self: center;
align-self: stretch;
align-self: auto; /* align-item과 동일하게 */
}