오늘은 animation-project 실습 두번째날이었다 요번에는 완성해서 뿌듯했다!
아래는 결과화면과 코드이다!
<index.css>
<style>
@charset "utf-8";
@import url(./reset.css);
/* 공통효과 */
html {
scroll-behavior: smooth;
}
/* all layout */
body {
background: var(--primary-background);
height: 100vh;
}
.yebin-information {
width: 100%;
background: var(--primary-color);
padding: 100px 0px;
transform: skewY(10deg) translateY(90px);
padding: 100px 0 100px 0;
padding: 150px;
margin-top: -350px;
animation: rotateFiilter 25s infinite;
}
@keyframes rotate-fiilter {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(1000deg);
}
}
/* yebinInformation */
.yebin-information .inner {
transform: skewY(-10deg);
}
.yebin-information .inner {
margin-top: 230px;
text-align: right;
color: #fff;
}
.yebin-information .inner h1 {
font-size: 3rem;
text-transform: uppercase;
padding-bottom: .5rem;
}
.yebin-information .inner small {
font-size: 1rem;
display: inline-block;
width: 50%;
padding-bottom: 1rem;
border-bottom: 1px solid #fff;
}
.yebin-information .fa-home:hover {
color: rgba(192, 192, 192, 0.685);
}
.yebin-information .fa-home:active {
color: rgba(161, 161, 161, 0.377);
}
/* snsBox */
.yebin-information .sns-box {
margin-top: .5rem;
margin-right: -.3rem;
}
.yebin-information .sns-box .sns {
/* font-size: 0; */
display: inline-block;
}
.yebin-information .sns-box .sns a {
border: 1px solid #fff;
width: 50px;
height: 50px;
display: inline-block;
border-radius: 50%;
margin: .3rem;
text-align: center;
padding-top: 0.5rem;
}
.yebin-information .sns-box .sns a .fab {
transition: all .5s;
}
.yebin-information .sns-box .sns a:hover {
border: 1px solid #145e96;
}
.yebin-information .sns-box .sns a:hover .fab {
transform: rotateY(360deg);
color: #145e96;
}
</style><index.html>
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="./css/index.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>animation-project-index</title>
</head>
<body>
<div id="wrap">
<div class="inner">
<div class="yebin-information">
<div class="inner">
<a href="./main.html">
<i class="fas fa-home fa-2x"></i>
</a>
<h1>
lee yebin
</h1>
<small>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellendus sequi et vitae nesciunt ad qui omnis vero veritatis distinctio illo animi officia sed fugiat quibusdam laboriosam rerum
</small>
<div class="sns-box">
<div class="sns">
<a href="#">
<i class="fab fa-facebook-f fa-2x"></i>
</a>
</div>
<div class="sns">
<a href="#">
<i class="fab fa-instagram fa-2x"></i>
</a>
</div>
<div class="sns">
<a href="#">
<i class="fab fa-twitter fa-2x"></i>
</a>
</div>
<div class="sns">
<a href="#">
<i class="fab fa-google fa-2x"></i>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<main.css>
<style>
@charset "utf-8";
@import url(./reset.css);
@import url();
/* 공통효과 */
html {
/* scroll-behavior: smooth; */
}
/* 전체 layput */
#wrap {
background: var(--primary-background);
}
.inner {
width: 1200px;
height: 100%;
background: #fff;
margin: 0 auto;
}
/* header */
header {
animation: rotateFiilter 25s infinite;
}
@keyframes rotate-fiilter {
from {
filter: hue-rotate(0deg);
}
to {
filter: hue-rotate(1000deg);
}
}
header .logo {
display: inline-block;
background: var(--primary-color);
}
header .logo h1 {
width: 1200px;
text-transform: uppercase;
text-align: center;
color: #fff;
font-size: 2rem;
padding: 2rem;
transition: all .7s;
}
header .logo:hover h1 {
transform: scale(1.2);
}
header .menu {
font-size: 0;
}
header .menu a:hover li {
transform: skewY(-3deg);
text-shadow: 1px 2px 2px rgba(161, 161, 161, 0.692);
}
header .menu a {
width: 33.333%;
display: inline-block;
font-size: 1.5rem;
text-align: center;
padding: .5rem 0;
background: #fff;
}
header .menu a li {
font-size: 1.5rem;
transition: all .5s;
}
/* banner */
.banner {
height: 320px;
background: url(../image/moon-1859616_1920.jpg) no-repeat center ;
color: #fff;
}
.banner .txt {
padding: 5rem 7rem;
}
.banner .txt h3 {
font-size: 2rem;
margin-bottom: .5rem;
}
.banner .txt p {
line-height: 25px;
}
.banner .txt a {
margin-top: 1.5rem;
display: inline-block;
}
.banner .txt .more {
border: 1px solid #fff;
padding: .2rem 1.5rem;
border-radius: 1rem;
display: inline-block;
padding-bottom: .4rem;
}
.banner .txt .more:after {
content: ' \f30b';
font-family: 'Font Awesome\ 5 Free';
font-weight: 900;
}
.banner .more:hover {
background: rgba(161, 161, 161, 0.377)
}
.banner .more:active {
background: rgba(161, 161, 161, 0.76)
}
/* icons */
.icons-bg {
background: var(--primary-color);
height: 190px;
}
.icons {
width: 100%;
height: 100%;
text-align: center;
font-size: 0;
margin-top: .5rem;
display: inline-block;
}
.icons li:hover i {
text-shadow: 2px 3px 2px rgba(37, 131, 255, 0.603);
}
.icons li {
width: 25%;
height: 140px;
margin: 1rem;
background: #fff;
display: inline-block;
font-size: 1rem;
text-align: center;
padding: 1.4rem;
}
.icons p {
margin-top: .7rem;
font-size: 1rem;
}
/* bannerScroll */
.banner-scroll {
/* transform: translate(0, 150px); */
text-align: center;
overflow: hidden;
}
.banner-box {
width: 1200px;
height: 250px;
/* border: 1px solid #fff; */
margin: 0 auto;
}
.banner-scroll img {
width: 1200px;
height: 250px;
}
.banner-scroll .scroll {
width: 3600px;
font-size: 0;
margin-left: 0;
animation: scroll 15s infinite;
}
@keyframes scroll {
0% {
margin-left: 0;
}
50% {
margin-left: -1200px;
}
100% {
margin-left: -2400px;
}
}
/* box */
/* box one */
.box .inner {
padding: 2rem 4rem;
}
.box-one {
width: 100%;
display: inline-block;
background: var(--primary-color);
padding: 1rem;
}
.box-one:hover {
box-shadow: 3px 3px 5px rgba(28, 9, 95, 0.473);
}
.box .inner .box-one:nth-child(1) {
margin-bottom: 2rem;
}
.box .inner .box-one .photo-box:nth-child(1) {
margin-right: 1rem;
}
.box .photo-box {
width: 300px;
height: 150px;
display: inline-block;
overflow: hidden;
transition: all .5s;
}
.box .photo-box:hover img {
transform: scale(1.3);
}
.box .photo-box img {
width: 100%;
height: 100%;
margin-top: 5px;
transition: all 1s;
}
.box-txt {
display: inline-block;
width: 60%;
vertical-align: top;
margin-top: -1px;
color: #fff;
}
.box-txt:nth-of-type(1) {
text-align: right;
margin-right: 1rem;
padding-top: .5rem;
}
.box-txt h3 {
font-size: 2rem;
font-weight: bold;
margin-bottom: .3rem;
}
.box-one:hover .box-txt h3 {
text-shadow: 3px 3px 0px rgba(28, 9, 95, 0.473);
}
/* footer */
footer .inner {
width: 100%;
background: var(--primary-color);
color: #fff;
text-align: center;
padding: 2rem;
}
footer ul {
font-size: 0;
width: 30%;
display: inline-block;
}
footer li {
font-size: 1rem;
line-height: 1.8rem;
}
footer li:nth-child(1) {
font-weight: bold;
margin-bottom: .5rem;
}
footer a:hover {
text-decoration: underline;
}
</style><main.html>
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<title>animation-project-main</title>
</head>
<body>
<div id="wrap">
<div class="inner">
<header>
<div class="logo">
<a href="./index.html"><h1>lee yebin <br> introduce</h1></a>
</div>
<ul class="menu">
<a href="#"><li>intro</li></a>
<a href="#"><li>characteristic</li></a>
<a href="#"><li>explanation</li></a>
</ul>
</header>
<section>
<div class="banner">
<div class="txt">
<h3>Leeyebin</h3>
<p>안녕하세요 저는 이예빈입니다 <br>
저에 대해 궁금하지 않나요?</p>
<a href="#"><div class="more">more </div></a>
</div>
</div>
<div class="icons-bg">
<ul class="icons">
<li>
<i class="far fa-smile fa-4x"></i>
<p>미소를 잃지 않습니다</p>
</li>
<li>
<i class="fas fa-baseball-ball fa-4x"></i>
<p>야구를 좋아합니다</p>
</li>
<li>
<i class="fas fa-hamburger fa-4x"></i>
<p>음식을 좋아합니다</p>
</li>
</ul>
</div>
<div class="banner-scroll">
<div class="banner-box">
<div class="scroll">
<img src="./image/herbstastern-5938056_1920.jpg" alt="">
<img src="./image/herbstastern-5938056_1920.jpg" alt="">
<img src="./image/herbstastern-5938056_1920.jpg" alt="">
</div>
</div>
</div>
<div class="box">
<div class="inner">
<div class="box-one">
<div class="photo-box">
<img src="./image/herbstastern-5938056_1920.jpg" alt="flower" title="flower">
</div>
<div class="box-txt">
<h3>flower</h3>
<p>
꽃은 속씨식물(Angiospermae)의 생식기관을 말한다. 이에 속씨식물을 꽃식물(현화식물; flowering plant)이라 칭한다.1) 꽃은 밑씨(ovules: 배주)가 씨방(ovary, 자방)에 완전히 싸여 있는 암술군(gynoecium)을 갖은 특징으로 겉씨식물(Gymnospermae)의 생식기관과 구별된다.
</p>
</div>
</div>
<div class="box-one">
<div class="box-txt">
<h3>city</h3>
<p>
본래 도시라는 말에는 도읍, 곧 정치 또는 행정의 중심지라는 뜻과 시장, 곧 경제의 중심지라는 뜻이 내포되어 있다. 조선시대의 도시는 이러한 말뜻에 적합한 것으로, 한성을 비롯하여 공주·대구·전주·평양·의주를 일컫는다.
</p>
</div>
<div class="photo-box">
<img src="./image/japan-2014619_1920.jpg" alt="">
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="inner">
<ul>
<li>회사정보</li>
<li><a href="#">회사소개</a></li>
<li><a href="#">스토리</a></li>
<li><a href="#">채용안내</a></li>
</ul>
<ul>
<li>고객지원</li>
<li><a href="#">1:1 문의</a></li>
<li><a href="#">이용약관</a></li>
<li><a href="#">개인정보</a></li>
</ul>
<ul>
<li>제휴문의</li>
<li><a href="#">contact</a></li>
<li><a href="#">info</a></li>
<li><a href="#">email</a></li>
</ul>
</div>
</footer>
</div>
</div>
</body>
</html>
<reset.css>
<style>
@charset "utf-8";
/* 공통 색상 */
:root {
--primary-color : #1f8adc;
--primary-background : #e9e9e9;
--blue : #145e96;
}
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 1rem;
}
a {
display: inline-block;
text-decoration: none;
color: inherit;
}
ul, ol, li {
list-style: none;
/* list-style-type: disc; */
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
</style>피드백 )
1. a 태그에 inline-block을 적용하세요! (reset.css에!)
2. 배너를 넣어보세요!
3. 버튼 hover 적용해보세요!
4. width를 1200으로 늘려보세요!
느낀점 )
이때까지 a태그에 inline-block을 전체 적용 시킨적이 없었던 거 같다
선생님께서 마법의 손 f12를 눌러서 봐주셨다 난 아직 f12로 style 부분 보는 게 습관화 되지 않아서 많이 느렸는데 엄청 빠르게 빙글빙글 돌아가서 신기했다
구글과 함께한다면 어떻게든 코드를 작성할 수 있겠구나! 하는 마음이 들었다
이렇게 실습을 하면서 내 실력에 대해 짚어나갈 수 있고 손이 빨라지는 걸 확인 할 수 있어서 너무 좋다!
불과 한달전까지만해도 영타가 190타였는데 지금은 240타가 되었다!! ㅎㅎ 계속 치다보니 느는 거 같다
얼른 300타를 만들어버리겠당! 헤헤 🥰
더보기
![]()
궁금한 점 )
1. 전반적으로 홈페이지가 눌린 듯한 느낌이 들어서 height를 좀더 늘려야겠다는 생각이 들었다
아직 height와 width를 어떤 값을 줘야 적당하고 보기 편한지 감이 안온다,,
(해결)
- 이건 그냥 많이 해봐야하는 부분이고, 화면에 따라 보이는 것 또한 다르기 때문에 px보단 비율의 값을 중심으로 생각하고 h, w의 값을 주는 게 좋다!
(참고)
X
2. 그리고 inline-block을 정확히 어디에다가 주어야할 지 개념이 잘안선다 ㅠㅠ 그냥 이렇게 하다가 안되면 inline-block!주고 inline-block을 줘도 안되면 빼고 이런식으로 코딩하다보니 어느샌가 inline-block을 여기다가 왜 줘야하는 지 잘모르겠다 ,, 이론적인 개념은 알고 있지만 ,, 실사용할땐 잘모르겠는? 그런 아리쏭한 느낌이다 😥
(해결)
inline-block을 쓰는 이유는 좀 더 디테일한 보정이 필요한 녀석이다라고 생각하면 된다**
- inline-block 끼리 공백이 생기게 되는데, 이때는 상위 div에 { font-size: 0; } 를 적용하면 해결이 된다.
- inline-block 끼리 높이가 안맞을시 상위 공백이 생기는데, 이때는 { vertical-align: ---; } 값으로 top 등을 줘서 맞춰주시면 된다.
(참고)
display: inline 과 inline-block 차이 / 인라인 인라인블록 차이
{ display: inline? inline-block?; } inline은 CSS를 공부하는 초기부터 block과의 비교대상으로서 익숙...
blog.naver.com
3. 그 다음에 html에 img 주는 거랑 css에 background에 url로 이미지를 주는 거랑 차이를 잘모르겠다 겉과 속의 차이인걸까?
(해결)
- 목적은 같지만 용도가 다르다.
- img태그 사용시, 기본적으로 노출이 가능하다(에러가 떠도 alt 속성에 의해 alt 텍스트와 broken image가 보인다)
하지만 bg-url은 alt와 같은 설명이 되지 않는다 즉 아무일도 일어나지 않는다는 것!
- 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다 생각하면 img 태그를 쓰고 디자인의 꾸밈 용도로만 사용할 것이라면 bg-url을 사용한다!
(참고)
vs background-image :: 마이구미
이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다. 본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다. 지금도 비슷한 생각이지만, 스
mygumi.tistory.com
'웹 > CSS' 카테고리의 다른 글
| [코딩 공부_54] z-index 우선 순위 지정하기 (0) | 2021.04.18 |
|---|---|
| [코딩 공부_53] (**중요) position 속성에 대하여 (0) | 2021.04.15 |
| [코딩 공부_51] animation-project 실습-1 (0) | 2021.04.14 |
| [코딩 공부_50] 페이지 기획안 만들어보기 (0) | 2021.04.12 |
| [코딩 공부_49] 페이지 만들기-main편 (0) | 2021.04.09 |
댓글