[CSS] 여백관리 & 애니메이션효과 & 반응형 웹

CSS첫 포스팅에 실려있는 "박스모델"에 관한 내용 응용의 내용과 웹 브라우저 내의 내용에 관계 없이 항상 footer가 하단 배치 될 수 있도록 하게 하는 방법, transition, transform, animation속성을 활용하여 기초적인 애니메이션 효과를 넣는 방법에 대해 다루었으며, 하단에는 중간의 실습 시간을 통해 직접 구축한 html페이지를 첨부하였다. 중간에는 리스트의 가로정렬과 a태그의 밑줄을 없애는 방법도 확인할 수 있다. media quary를 활용한 반응형 웹 화면을 구축하는 실습도 추가되어있다.

1. 여백관리

이해를 돕기 위한 이미지를 첨부하였다. footer는 기본적으로 웹브라우저의 내용 바로 아래로 따라붙기 때문에 별도의 설정을 해주지 않으면, 내용이 적을때는 footer가 너무 위로 올라와있는 경우가 발생할 수 있다. 여백 관리를 통해 footer가 항상 하단에 배치될 수 있도록 한다.

1) 기본설정

레이아웃이 아래와 같을때 실습을 진행할 수 있도록 기본적인 색상 등의 설정을 할 예정이다.

<header>
	<h1><a href="#">LOGO</a></h1>
</header>

<div id="container">
	<ul class="gnb">
		<li><a href="#">menu01</a></li>
		<li><a href="#">menu02</a></li>
		<li><a href="#">menu03</a></li>
	</ul>
<div class="content">
	<p>
		내용01<br>
		내용02<br>
		내용03<br>
	</p>
</div>
</div>

<footer>
	<p>ⓒcopyright</p>
</footer>

① margin & padding 0으로 설정하기

모든 요소들은 margin과 padding값이 항상 디폴트 되어있다. 때문에 내가 지정하는 요소의 높이 등을 알기 위해서는 디폴트값을 0으로 지정해줄 필요가 있다.

<style>
	body, header, div, h1, footer, p, ul, li{
		margin: 0;
		padding: 0;
	}
</style>

*{margin: 0; padding: 0;} 이러한 방법으로 설정할 수도 있지만 처리속도에 부정적 영향을 미치기에 선호되지 않는다.

② 배경색설정과 글자위치

각 요소가 차지하는 면적을 보기 쉽게 할 목적으로, 배경을 설정하였다. footer의 높이를 지정하기 위해서는 내가 생성한 각 요소들의 높이를 명확히 알아야하므로, 역시 디폴트값을 사용하지 않고 height를 통해 직접 설정한다. 이때, 글자 위치 이동없이 높이만 변경되어 정렬이 흐트러질 수 있으므로 line-height를 height와 같은 값으로 주면 중앙에 위치하게 된다.

<style>	
    header{
		background-color: lightgray;
		height: 50px;
		line-height: 50px;
	}
	.gnd{
		background-color: lightblue;
	}
	.content{
		background-color: lightpink;
	}
	footer{
		background-color: gray;
		height: 50px;
		line-height: 50px;
	}
</style>

* 추가내용 *

1. gnb : 글로벌 네비게이션바 : 메뉴바!

2.   로 tap기능을 할 수 있다.

2) 리스트의 가로정렬 & a태그의 밑줄제거

<style>
	li{
		list-style-type: none; -> 리스트 점 제거
	}
	a{
		text-decoration: none; -> a태그 밑줄 제거
	}
	
	.gnb li {
     	display: inline; -> 리스트 가로정렬(블록요소를 인라인요소로)
	}
      .gnb li a {
    	display: inline-block; -> 인라인요소이지만 블록모델의 구체설정 가능해짐
     }
</sytle>

주석으로 설명을 달았으나 display속성에 대한 설명이 필요하다면 아래 링크를 참고할 수 있다.

https://www.daleseo.com/css-display-inline-block/

[CSS] display 속성: inline, block, inline-block

Engineering Blog by Dale Seo

www.daleseo.com

3) footer하단배치

브라우저 창의 총 높이(100vh)에서 내가 지정한 요소들의 높이(header의 높이+footer높이)를 뺀 만큼을 container에 부여하면 footer가 하단에 배치될 것임을 생각할 수 있다.

#container{
	min-height: calc( 100vh - 80px );
}

calc( )는 그저 내부의 값을 계산하기 위해 쓰이는 함수이며, 안의 값들은 문자열로 인식될 가능성이 있으므로 각 단어별로 띄어쓰기가 필수이다. 이 설정까지 마치고 나면 footer의 값이 완벽하게 하단에 배치됨을 확인할 수 있다.

해당 실습의 총 코드를 첨부하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>footer</title>

<style type="text/css">
	body, header, div, h1, footer, p, ul, li{
		margin: 0;
		padding: 0;
	}
	header{
		background-color: lightgray;
		height: 50px;
		line-height: 50px;
	}
	.gnd{
		background-color: lightblue;
	}
	.content{
		background-color: lightpink;
	}
	footer{
		background-color: gray;
		height: 50px;
		line-height: 50px;
	}
	
	#container{
		min-height: calc(100vh-80px);
	}
	
	li{
		list-style-type: none;
	}
	a{
		text-decoration: none;
	}
	
	 .gnb li {
      display: inline;
   }
   .gnb li a {
      display: inline-block;
   }
	
	
</style>

</head>
<body>

<header>
	<h1><a href="#">LOGO</a></h1>
</header>

<div id="container">
	<ul class="gnb">
		<li><a href="#">menu01</a></li>
		<li><a href="#">menu02</a></li>
		<li><a href="#">menu03</a></li>
	</ul>
<div class="content">
	<p>
		내용01<br>
		내용02<br>
		내용03<br>
	</p>
</div>
</div>

<footer>
	<p>ⓒcopyright</p>
</footer>

</body>
</html>

2. transition

transition속성은 전환 효과의 시간당 속도를 설정하는 속성이며, 이를 통해 애니메이션효과를 주는 것이 가능하다.

1) 기본설정

애니메이션을 주기 전 화면을 설정한다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성전환 실습</title>
<style>
.gnb li{
	list-style-type: none;
}
.gnb li a{
	text-decoration: none;
	color: black;
	display: block; width:150px; height: 20px;
	background-color: lightblue;
	margin: 3px;
}

</style>


</head>
<body>

<h1>움직이는 메뉴바</h1>
<ul class="gnb">
	<li><a href="#">메일</a></li>
	<li><a href="#">카페</a></li>
	<li><a href="#">블로그</a></li>
	<li><a href="#">쇼핑</a></li>
	<li><a href="#">뉴스</a></li>
</ul>


</body>
</html>

2) 상태변화 설정

아래는 a태그에 마우스를 댔을때 일어날 상태변화를 설정한 것이다.

.gnb li a:hover{
	color: rea;
	width: 300px;
}

3) transition설정

위 2번까지의 코드로도 애니메이션 효과가 있지만, 시간초를 두며 서서히 자연스럽게 효과가 반응하도록 transition속성을 통해 설정 가능하다.

.gnb li a{
	text-decoration: none;
	color: black;
	display: block; width:150px; height: 20px;
	background-color: lightblue;
	margin: 3px;
	transition: width 1s, color 1s; -> 트랜지션이 일어날 초기화면에 속성을 설정한다.
}

.gnb li a:hover{
	color: rea;
	width: 300px;
}

해당 실습의 총 코드를 첨부하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성전환 실습</title>
<style>
.gnb li{
	list-style-type: none;
}
.gnb li a{
	text-decoration: none;
	color: black;
	display: block; width:150px; height: 20px;
	background-color: lightblue;
	margin: 3px;
	transition: width 1s, color 1s;
}

.gnb li a:hover{
	color: rea;
	width: 300px;
}

</style>


</head>
<body>

<h1>움직이는 메뉴바</h1>
<ul class="gnb">
	<li><a href="#">메일</a></li>
	<li><a href="#">카페</a></li>
	<li><a href="#">블로그</a></li>
	<li><a href="#">쇼핑</a></li>
	<li><a href="#">뉴스</a></li>
</ul>


</body>
</html>

3. 예제

위의 내용들을 적용하여 웹화면을 구현하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="shortcut icon" href="image/idea.png">

<meta charset="UTF-8">
<title>실습</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Indie+Flower&display=swap" rel="stylesheet">
<style type="text/css">

	*{
		font-family: 'Indie Flower', cursive;
	}
	
	body, header, div, h1, footer, p, ul, li{
		margin: 0;
		padding: 0;
	}
	
	header{
		background-image: url('data:image/jpeg;base64,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');
		height: 200px;
		line-height: 300px;
	}
	.gnb{
		background-color: green;
		text-align: center;
	}
	.content{
		background-color: lightblue;
		padding: 20px;
	}
	
	footer{
		background-color: yellow;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	
	#container{
		min-height: calc( 100vh - 250px );
	}
	
	li{
		list-style-type: none;
		margin: 100px;
	}
	a{
		text-decoration: none;
		color: black;
	}
	
	.gnb li {
      display: inline; 
   }
   .gnb li a {
      display: inline-block;
      transition: font-size 0.6s;
   }
   .gnb li a:hover {
      color: yellow;
      font-size: 30px;
      background-color: #33CC00;
   }
   .introduce{
   	margin: 20px;
   }
   .TMI{
   	margin: 20px;
   }
   
   .introduce p{
   	margin: 20px;
   	border: dotted 2px;
   }
   .TMI p{
   	margin: 20px;
   	border: dotted 2px;
   }
   
	
</style>

</head>
<body>

<header>
	<h1><a href="#">&nbsp;&nbsp;&nbsp;이훈이 블로그</a></h1>

</header>

<div id="container">
	<ul class="gnb">
		<li><a href="#">훈이의 대나무 숲</a></li>
		<li><a href="#">셀카 모음</a></li>
		<li><a href="#">그림 모음</a></li>
	</ul>
	
<div class="content">
	<section class="introduce">
		<h2>자기소개</h2>
		<p>이름 : 이훈이<br>나이: 꽃같은 5살<br>별명: 주먹밥<br>성격: 착하고 듬직함<br>좋아하는것: 떡잎유치원 다니는 수지</p>
	</section>
	<section class="TMI">
		<h2>TMI</h2>
		<p>01. 서울특별시 금천구 시흥동 떡잎마을 살고있음<br>02. A형<br>03. 스펙 106.2cm에 20kg임<br>04. 떡잎마을 방범대에서 3번째 장신<br>05. 롤모델 옆동네 노진구형아<br>06. 유리때문에 급성위염 진단받은적 있음</p>
	</section>
</div>

</div>

<footer>
	<p>ⓒhoonbalrom</p>
</footer>

</body>
</html>

기본화면

화면에 커서는 보이지 않지만 커서를 올렸을때에만 지정한대로 반응하는 것을 확인할 수 있다.

4. 애니메이션효과

animation속성과 transform속성을 활용하여 애니메이션 효과를 주는것도 가능하다.

1) animation

효과를 주기 위해 구현한 코드를 먼저 제시하고, 그 하단에서 단계별로 설명할 예정이다.

@keyframes ham{
	0% {background: rea; transform: translate(0,0);}
	50%{background: cornflowerblue;transform: translate(70px, 50px);}
	100%{background: lightgreen;transform: translate(0,0);}
}

p{
	width: 100px; height: 100px;
	padding: 5px;
	background: pink;
	
	animation-name: ham;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

① @keyframes

transform을 사용하여 애니메이션에 대한 효과를 설정한 뒤, 해당 설정들을 @keframes을 사용해 묶어야한다. 아래와 같이 키워드 바로 뒤에 해당 키프레임의 이름을 설정한다.

@keyframes ham{
	0% {애니메이션이 0%일때 지정할 효과}
	50%{애니메이션이 50%일때 지정할 효과}
	100%{애니메이션이 100%일때 지정할 효과}
}

② animation속성

효과를 줄 요소 내에서 animation속성을 활용하여 세부적인 작동을 조절할 수 있다. 다양한 속성이 있으며, 자주 사용되는 속성은 아래와 같다.

속성	설명
animation-name	애니메이션 효과의 이름을 설정함
animation-duration	애니메이션 효과를 재생할 시간을 설정함.
animation-delay	애니메이션 효과가 나타나기까지의 지연 시간을 설정함.
animation-iteration-count	애니메이션 효과가 몇 번 반복될지를 설정함.

p{
	<!-- p요소의 기초 설정값 -->
	width: 100px; height: 100px;
	padding: 5px;
	background: pink;
	
    <!-- animation속성 -->
	animation-name: ham;
	animation-duration: 3s;
    	animation-delay: 2s;
	animation-iteration-count: infinite; //혹은 그냥 숫자로 작성
}

정리하면, ham이라는 이름의 키프레임으로 설정한 애니메이션의 내용이 2초 뒤에 3초의 시간으로 실행되며, 반복회수는 무한이다.

2) transform

키프레임 내부에서 사용되며, 애니메이션의 효과를 지정한다.

속성	설명
translate(x,y)	현재 위치에서 해당 요소를 주어진 x축과 y축의 거리만큼 이동시킴.
translateX(n)	현재 위치에서 해당 요소를 주어진 x축의 거리만큼 이동시킴.
translateY(n)	현재 위치에서 해당 요소를 주어진 y축의 거리만큼 이동시킴.
rotate(각도)	해당 요소를 주어진 각도만큼 시계 방향이나 반시계 방향으로 회전시킴.
scale(x,y)	해당 요소의 크기를 주어진 배율만큼 늘리거나 줄임.
scaleX(n)	해당 요소의 x축 크기를 주어진 배율만큼 늘리거나 줄임.
scaleY(n)	해당 요소의 y축 크기를 주어진 배율만큼 늘리거나 줄임.

@keyframes ham{
	0% {transform: translate(?, ?)}
	50%{transform: rotate(?deg);}
	100%{transform: scale(?, ?);}
}

이때, translate와 rotate는 음수 입력시 반대방향으로 이동하며, scale은 음수입력이 불가능하다. 일반적으로 실수로 표현하고, 1이 원본사이즈의 기준이 된다.

3) 실습

3d transform도 사용해보았으나 지원되지 않는 브라우저라 적용되지 않았다.

<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="shortcut icon" href="image/idea.png">

<meta charset="UTF-8">
<title>실습</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dokdo&family=Indie+Flower&display=swap" rel="stylesheet">
<style type="text/css">

	*{
		font-family: 'Indie Flower', cursive;
	}
	
	body, header, div, h1, footer, p, ul, li{
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
	
	header{
		background-image: url('data:image/jpeg;base64,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');
		height: 200px;
		line-height: 300px;
	}
	.gnb{
		background-color: green;
		text-align: center;
	}
	.content{
		padding: 20px;
	}
	
	footer{
		background-color: yellow;
		height: 50px;
		line-height: 50px;
		text-align: center;
	}
	
	#container{
		min-height: calc( 100vh - 250px );
	}
	
	li{
		list-style-type: none;
		margin: 100px;
	}
	a{
		text-decoration: none;
		color: black;
	}
	
	.gnb li {
      display: inline; 
   }
   .gnb li a {
      display: inline-block;
      transition: font-size 0.6s;
   }
   .gnb li a:hover {
      color: yellow;
      font-size: 30px;
      background-color: #33CC00;
   }
   .introduce{
   	margin: 20px;
   }
   .TMI{
   	margin: 20px;
   }
   
   .introduce p{
   	margin: 20px;
   	border: dotted 2px;
   }
   .TMI p{
   	margin: 20px;
   	border: dotted 2px;
   }
   
   body{
   background-color: lightblue;
   }
   
   @keyframes movingHoon01 {
	0%{color: red;}
	20%{color: orange; transform: rotate(30deg);}
	30%{color: yellow; transform: rotate(-30deg);}
	50%{color: green; transform: rotate(30deg);}
	70%{color: blue; transform: rotate(-30deg);}
	100%{color: purple; transform: rotate(30deg);}
   }
   
   @keyframes movingHoon02 {
	0%{color: red; transform: translate(10px, 10px);}
	20%{color: orange; transform: translate(110px, 200px);}
	30%{color: yellow; transform: translate(200px, 20px);}
	50%{color: green; transform: translate(20px, 50px);}
	70%{color: blue; transform: translate(200px, 60px);}
	100%{color: purple; transform: translate(50px, 80px);}
   }
   
   @keyframes movingHoon03 {
	0%{color: red; transform: translate3d(100px, 50px, -150px);}
	20%{color: orange; transform: translate3d(50px, 320px, 100px);}
	30%{color: yellow; transform: translate3d(200px, 200px, 10px);}
	50%{color: green; transform: translate3d(150px, 200px, 300px);}
	70%{color: blue; transform: translate3d(40px, 300px, -10px);}
	100%{color: purple; transform: translate3d(300px, 50px, 200px);}
   }
   
   .hoon01{
   margin: auto;
   background-image: url('https://t1.daumcdn.net/cfile/tistory/99D77C485C6A8D042C');
   background-repeat: no-repeat;
   background-size: 200px;
   border: solid 4px;
   width: 200px;
   height: 110px;
   text-align: center;
   
   animation-name: movingHoon01;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   }
   
   
   .hoon02{
   background-image: url('https://img.insight.co.kr/static/2020/08/14/700/9x958897t7a9ktzei33h.jpg');
   background-repeat: no-repeat;
   background-size: 200px;
   border: solid 4px;
   width: 200px;
   height: 110px;
   text-align: center;
   
   animation-name: movingHoon02;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   }
   
   .hoon03{
   margin-left: 30%;
   background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQpM5oZWbrLjuRq4icrs8o9VFeXSpt0hYmAwA&usqp=CAU');
   background-repeat: no-repeat;
   background-size: 200px;
   border: solid 4px;
   width: 200px;
   height: 110px;
   text-align: center;
   
   animation-name: movingHoon03;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   }
   
   .hoon04{
   margin-left: 600px;
   background-image: url('data:image/jpeg;base64,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');
   background-repeat: no-repeat;
   background-size: 200px;
   border: solid 4px;
   width: 200px;
   height: 110px;
   
   transition: background-size 3s, width 3s, height 3s, font-size 3s;
   }
   
   .hoon04:hover{
   background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQPOx5dUpnFnBP9T_N1U0e-JKnbUvSEwC6WJg&usqp=CAU');
   background-repeat: no-repeat;
   background-size: 700px;
   border: solid 10px;
   width: 700px;
   height: 400px;
   color: red;
   font-size: 50px;
   }
   
   .clear:after{
		content: "";
		display: block;
		clear: both;
	}
	
	@media all and (min-width: 1025px){
		.gnb{
			float: left;
			width: 100%;
		}
		.content{
			float: left;
			width: 100%;
		}
	}
	
	@media all and (min-width: 768px) and (max-width: 1024px){
		.gnb{
			float: left;
			width: 100%;
		}
		.content{
			float: left;
			width: 100%;
		}
	}
	
</style>

</head>
<body>

<header>
	<h1><a href="test02.html">&nbsp;&nbsp;&nbsp;이훈이 블로그</a></h1>

</header>

<div id="container" class="clear">

	<ul class="gnb">
		<li><a href="test05.thml">훈이 파티</a></li>
		<li><a href="#">셀카 모음</a></li>
		<li><a href="#">그림 모음</a></li>
	</ul>
	
<div class="content">

<p class="hoon01">메롱 약오르지</p>
<p class="hoon02">덤벼라!</p>
<p class="hoon03">부끄,,>< </p>
<p class="hoon04">커서 올리지망</p>

</div>
</div>

<footer>
	<p>ⓒhoonbalrom</p>
</footer>

</body>
</html>

5. 반응형 웹

media quary를 활용하여 디바이스 화면 크기별 웹 반응을 설정할 수 있다. 이때 로고와 푸터를 제외한 내용들만이 웹 화면마다 크기 및 순서가 상이해지는 것을 알 수 있다. 따라서 header, footer를 제외한 부분들이 한개의 cotainer로 묶여있음을 파악할 수 있다.

작업의 순서는 다음과 같다.

기본 구조 작성
레이아웃 설정
header, footer제외 container로 묶기
스타일 적용
@media로 반응 적용

해당 순서로 작업한 코드를 첨부하였다.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>media query</title>
<style type="text/css">
	*{//실습시 시간 관계상 전체선택자 사용
		margin:0;
		padding:0;
		box-sizing: border-box;
        //미디어 쿼리 적용시 위치가 번잡한데,
        //해당 설정을 통해 제대로된 위치를 잡을 수 있다.
        // 관련 설명은 하단에 링크를 통해 참조하였다.
	}
	
	.clear:after{
		content: "";
        //가상의 클래스를 생성하여 footer 상단에 배치
        //footer가 상단으로 올라오는 것을 방지한다.
		display: block;
		clear: both;
	}
	
	li{ list-style-type: none;}
	a{ color: black;}
	header{background: coral;}
	h1{color:white;}
	.gnb li{background: lightgreen; margin: 10px; padding: 10px;}
	.content{padding:20px;}
	.ext{background: lightgreen;  margin: 10px; padding: 10px;}
	footer{background: gray;}
	
	@media all and (min-width: 1025px){
		.gnb{
			float: left;
			width: 20%;
		}
		.content{
			float: left;
			width: 50%;
		}
		.aside{
			float: right;
			width: 30%;
		}
	}
	
	@media all and (min-width: 768px) and (max-width: 1024px){
		.gnb{
			float: left;
			width: 30%;
		}
		.content{
			float: left;
			width: 70%;
		}
		.aside{
			clear: both;
		}
	} 
	
	
	
</style>
</head>
<body>

<header>
	<h1>LOGO</h1>
</header>

<div id="container" class="clear">
<div class="gnb">
	<ul>
		<li><a href="#">메일</a></li>
		<li><a href="#">카페</a></li>
		<li><a href="#">블로그</a></li>
	</ul>
</div>

<div class="content">
	<h2>==페이지목록==</h2>
	<p>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
		<a href="#">상세페이지로 이동</a><br>
	</p>
</div>

<div class="aside">
	<ul class="ext">
		<li>
			<h3>네이버</h3>
			<a href="#">네이버로 이동</a>
		</li>
		<li>
			<h3>카카오</h3>
			<a href="#">카카오로 이동</a>
		</li>
	</ul>
</div>
</div>

<footer>
	<p>ⓒcopyright</p>
</footer>

</body>
</html>

* box-sizing *

https://opentutorials.org/course/2418/13405

box-sizing - 생활코딩

box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하

opentutorials.org

'HTML & CSS' 카테고리의 다른 글

[CSS] 상대경로, 절대경로 (0)	2022.09.27
[CSS] Display속성_float, flex, grid (0)	2022.02.11
[CSS] 의사클래스&웹폰트&템플릿적용 (0)	2022.02.09
[CSS] 기초_문법 & 적용 & 기본속성 & 선택자 (0)	2022.02.08
[HTML] 요소 : 태그 (0)	2022.02.08

개발 노트

[CSS] 여백관리 & 애니메이션효과 & 반응형 웹

1. 여백관리

1) 기본설정

① margin & padding 0으로 설정하기

② 배경색설정과 글자위치

* 추가내용 *

2) 리스트의 가로정렬 & a태그의 밑줄제거

3) footer하단배치

해당 실습의 총 코드를 첨부하였다.

2. transition

1) 기본설정

2) 상태변화 설정

3) transition설정

해당 실습의 총 코드를 첨부하였다.

3. 예제

4. 애니메이션효과

1) animation

① @keyframes

② animation속성

2) transform

3) 실습

5. 반응형 웹

* box-sizing *

'HTML & CSS' 카테고리의 다른 글

티스토리툴바

[CSS] 여백관리 & 애니메이션효과 & 반응형 웹

1. 여백관리

1) 기본설정

① margin & padding 0으로 설정하기

② 배경색설정과 글자위치

* 추가내용 *

2) 리스트의 가로정렬 & a태그의 밑줄제거

3) footer하단배치

해당 실습의 총 코드를 첨부하였다.

2. transition

1) 기본설정

2) 상태변화 설정

3) transition설정

해당 실습의 총 코드를 첨부하였다.

3. 예제

4. 애니메이션효과

1) animation

① @keyframes

② animation속성

2) transform

3) 실습

5. 반응형 웹

* box-sizing *

'HTML & CSS' 카테고리의 다른 글

관련글

티스토리툴바