본문 바로가기
웹/CSS

[코딩 공부_42] self-introduce 만들기_1

by BEE_0o0 2021. 4. 1.

오늘은 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

관련글

댓글

티스토리툴바