오늘은 self-introduce를 만드는 실습을 했다
나는 하드코딩한다고 엄청 헤맸다 😥 열심히 꾸미려고 하니 시간이 끝나서 허겁지겁 캡처하고 압축해서 제출했다 ,,
코딩을 하면 할수록 엄청 어렵고 머리 아파서 재미있는 지 잘몰랐었는데 이번 실습을 하면서 코딩에 대한 재미가 느껴졌다! 주말에 더 꾸며보는 시간을 가져볼 것이다!! 😎
<reset.css>
<style>
@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
</style>
<style.css>
<style>
@charset "utf-8";
@import "./reset.css";
/* 전체적인 틀 잡기 */
#wrap {
height: 100%;
background: rgb(9, 67, 143);
color: #fff;
/* width: 100%; */
}
.inner {
width: 900px;
margin: 0 auto;
padding: 15px;
transition: 0.75s;
}
/* 공통적인 효과 */
h1, h2, h3, h4, h5, h6, p, .skills .container span {
opacity: 0.6;
}
h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, h6:hover, p:hover, .skills:hover .container span:hover {
opacity: 1.0;
}
header, .intro, .profile, .skills {
text-align: center;
}
/* header */
header {
text-align: center;
padding-top: 60px;
}
header p {
margin-top: 10px;
margin-bottom: 40px;
line-height: 25px;
}
/* intro */
.intro {
text-align: center;
}
.intro h2, .intro p {
text-align: left;
}
.intro p {
line-height: 25px;
}
.intro .photo {
width: 150px;
display: inline-block;
}
.intro img {
width: 100%;
text-align: center;
border-radius: 80%;
border: 1px solid #fff;
}
/* profile */
.profile .inner {
padding: 3rem 0;
}
.profile ul {
font-size: 0;
}
.profile li {
width: 30%;
box-shadow: 0 0 3px #fff;
display: inline-block;
font-size: 1rem;
margin: 10px;
transition: 1s;
line-height: 25px;
}
.profile li:hover {
width: 32%;
}
.profile img {
width: 100%;
margin-bottom: -50px;
}
.profile ul li h2 {
margin-bottom: 35px;
}
.profile ul li p {
margin-bottom: 15px;
}
/* skills */
.skills {
padding-bottom: 60px;
}
.skills .container {
border: 1px solid #fff
/* padding: 2rem; */
}
.skills .container h1, .skills .container p {
text-transform: uppercase;
}
.skills .container h1 {
margin-top: 30px
}
.skills .container .item {
text-align: left;
padding: 10px 30px 10px 30px;
}
.skills .container p {
display: inline-block;
width: 100px;
}
.skills .item {
margin: 15px;
}
.skills .item p span:first-child {
display: inline-block;
width: 100px;
}
.skills .progress {
border: 1px solid #fff;
padding: 5px;
margin-top: 10px;
margin-bottom: 15px;
}
.skills .progress-bar {
transition: 1.5s;
height: 20px;
background: #fff;
}
.skills .inner .container .item .progress:nth-of-type(1) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(1) .progress-bar {
width: 90%;
}
.skills .inner .container .item .progress:nth-of-type(2) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(2) .progress-bar {
width: 80%;
}
.skills .inner .container .item .progress:nth-of-type(3) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(3) .progress-bar {
width: 90%;
}
.skills .inner .container .item .progress:nth-of-type(4) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(4) .progress-bar {
width: 60%;
}
.skills .inner .container .item .progress:nth-of-type(5) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(5) .progress-bar {
width: 80%;
}
.skills .inner .container .item .progress:nth-of-type(6) .progress-bar {
width: 0%;
}
.skills .inner .container .item:hover .progress:nth-of-type(6) .progress-bar {
width: 90%;
}
</style>
<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/style.css">
<title>my introduce</title>
</head>
<body>
<div id="wrap">
<header>
<div class="inner">
<h1>yebin.lee</h1>
<p>
안녕하세요 저는 예빈이에요! <br>
코딩도 디자인도 너무너무 재미있어요! 가끔 머리 아프지만 결과물을 보면 뿌듯하고 두근거려요!<br>
얼른 배워서 저만의 홈페이지를 만들고 싶어요 엄청 뿌듯하겠죠?ㅎㅎ
</p>
</div>
</header>
<section class="intro">
<div class="inner">
<div class="photo">
<img src="./image/프로필.jpg" alt="">
</div>
<h2>intoduce</h2>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. A nisi aspernatur quasi velit eos sint enim, atque distinctio voluptate ab, dignissimos animi cum, natus maiores doloremque? Quasi, possimus! Quaerat, quam?
</p>
</div>
</section>
<section class="profile">
<div class="inner">
<ul>
<li>
<img src="./image/음식.jpg" alt="">
<h2>food</h2>
<p>
저는 음식을 정말 좋아합니다! <br> 밥 먹는 게 너무 좋아요
</p>
</li>
<li>
<img src="./image/c4d.jpg" alt="">
<h2>c4d</h2>
<p>
배우고 있는데 너무 어려워요! <br> 머리가 어지러워요
</p>
</li>
<li>
<img src="./image/구름.jpg" alt="">
<h2>painting</h2>
<p>
그림 그리는 건 취미에요! <br> 너무 즐거워요
</p>
</li>
</ul>
</div>
</section>
<section class="skills">
<div class="inner">
<div class="container">
<h1>
software skills
</h1>
<div class="item">
<p>html5</p>
<span>90%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<p>css3</p>
<span>80%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<p>javascript</p>
<span>90%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<p>jqurey</p>
<span>60%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<p>photoshop</p>
<span>80%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
<p>illustator</p>
<span>90%</span>
<div class="progress">
<div class="progress-bar">
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</body>
</html>
- 요번 실습을 진행하면서 헷갈렸던 점 : software skills의 bar 그룹에서 width를 다르게 주는 부분에서 엄청 헤맸다
소속 그룹을 명확하게 표시했어야했는데 그 부분이 미흡해서 오래 걸렸었다
- 깨달은 점 : 전체적인 틀만 잘잡으면 어렵지 않구나 하는 생각이 들었다 선생님께서 계속 강조해주신 부분이었는데 왜 계속 강조해주셨는 지 이제 알았다 ㅎㅎ.... 전체적인 틀과 세부적인 그룹만 머릿속에 있다면 금방 할 수 있는 부분인데 너무 어렵다고만 생각한 거 같아서 반성하게 된다 !
주석으로 정리하면서 코드를 작성하니 쉽게 코드를 수정할 수 있었고 우리가 배운 부분이 별로 없다고 생각했었는데 이렇게 응용해보니 많은 것을 배웠고 완성된 결과물로 확인할 수 있으니 너무 뿌듯하다
- 요번 실습은 다른 분이 제작한 페이지도 함께 보며 공부했던 시간인데 다들 너무 잘하셔서 우왕 하면서 본 거 같다😊
나도 열심히 해서 멋진 페이지를 만들어야겠다는 생각도 같이 하게 되었다! 화이팅
'웹 > CSS' 카테고리의 다른 글
[코딩 공부_44] self_introduce 만들기_2 (0) | 2021.04.04 |
---|---|
[코딩 공부_43] transform - translate, scale, skew, rotate? (0) | 2021.04.02 |
[코딩 공부_41] transitions 적용하기 (0) | 2021.03.31 |
[코딩 공부_40] 음수마진(negative margin)에 대하여 (0) | 2021.03.29 |
[코딩 공부_39] 가상 요소 셀렉터 (0) | 2021.03.26 |
댓글