[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 1일차 기록 및 복습

Front-end 개발 2023. 7. 4. 08:38

1. HTML/CSS

2. 김멋사 이력서

1. HTML/CSS

1-1. HTML

- Section Tag

1-2. CSS

- montserrat 폰트를 가져와서 전체 문서의 폰트로 변경

- Lorem Ipsum

- 행간은 16px (160% 를 주는게 가장 보기 좋음)

- Browser 간 다를 수 있는 마진 때문에 body, h1, h2 를 마진, 패딩 초기화

- div 가운데 정렬은 (margin-right: auto; margin-left: auto;)

- div 그림자 주기 (box-shadow: 가로축 세로축 blur spray rgba(red, green, blue, 투명도);)

- Floating 하고 겹치지 않게 overflow hidden 하는 법

- div 와 같지만 다르게 부르는 div 속의 section 과 들여쓰기 방법

2. 김멋사 이력서

- '김멋사 이력서' 백지코딩으로 복습 (이두희 강사님 지시)

- 07/04(화) 오전 6시 ~ 8시30분 1차 백지코딩 수행 (종종 원본 코드 보며 수행)
> 원본 코드를 보지 않고 혼자서 빠르게 할 수 있도록 다시 해봐야 겠다고 느낌

2-1. HTML Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>김멋사의 이력서</title>
        <link rel="stylesheet" href="codelion.css">
    </head>
    <body>
        <div class="main-box">
            <div class="title-box">
                <h1>김멋사</h1>
                <p class="name-text">HTML/CSS 개발자<p>
            </div>
            <section>
                <h2>ABOUT ME</h2>
                <p class="about-me-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dapibus odio sit amet pharetra bibendum. Aliquam fringilla aliquet sollicitudin. Vivamus ornare, magna quis maximus ultricies, arcu odio facilisis magna, quis sollicitudin est sapien accumsan massa. Fusce eget pulvinar quam. Sed id erat a nisl molestie convallis eu sit amet sapien. Maecenas diam dolor, congue in purus a, imperdiet sagittis urna. Vestibulum eleifend ultrices maximus. Aliquam ac enim imperdiet, sagittis sem eget, pulvinar odio. Suspendisse pretium ligula non sagittis pretium. Nam rhoncus id arcu id tempor. Sed vitae sapien sodales, sodales turpis et, facilisis elit. Donec consequat, lectus at aliquam tincidunt, quam justo pretium ipsum, eu rhoncus erat quam sed risus.
                </p>
            </section>
            <section>
                <h2>EXPERIENCE</h2>
                <div class="float-wrap">
                    <p class="title-text">Awesome Programming Company</p>
                    <p class="year-text">2020 - Now</p>
                </div>
                <p class="desc-text">Front-End Web Developer</p>     
                <p class="desc-subtext">HTML/CSS, JS, React, ...</p>
                
                <div class="float-wrap">
                    <p class="title-text">Ministry of Health</p>
                    <p class="year-text">2015 - 2018</p>
                </div>
                <p class="desc-text">UI/UX Designer</p>     
                <p class="desc-subtext">Web design</p>
                
                <div class="float-wrap">
                    <p class="title-text">Freelance Work</p>
                    <p class="year-text">2011 - 2015</p>
                </div>
                <p class="desc-text">Graphic Designer</p>     
                <p class="desc-subtext">Graphic Design, Editorial Design</p>
            </section>
            <section>
                <h2>ACTIVITIES</h2>
                <div class="float-wrap">
                    <p class="title-text">Front-End Web Developer Forum Volunteer</p>
                    <p class="year-text">2019 - 2020</p>
                </div>
                <p class="desc-text">Application Page Developmet</p>     
                <p class="desc-subtext">Lorem ipsum dolor amet.</p>
                
                <div class="float-wrap">
                    <p class="title-text">LIKELION SEOUL</p>
                    <p class="year-text">2017 - 2018</p>
                </div>
                <p class="desc-text">Teacher in Mutsa University</p>     
                <p class="desc-subtext">Lorem ipsum dolor amet.</p>
                
                <div class="float-wrap">
                    <p class="title-text">Open Source Committer</p>
                    <p class="year-text">2011 - 2013</p>
                </div>
                <p class="desc-text">Angular JS</p>     
                <p class="desc-subtext">Lorem ipsum dolor amet.</p>
            </section>
            <section>
                <h2>EDUCATION</h2>
                <div class="float-wrap">
                    <p class="title-text">Mutsa University</p>
                    <p class="year-text">2008 - 2012</p>
                </div>
                <p class="desc-text">Computer Science and Engineering</p>     
                <p class="desc-subtext"></p>
                
                <div class="float-wrap">
                    <p class="title-text">Mutsa Hight School</p>
                    <p class="year-text">2006 - 2008</p>
                </div>
                <p class="desc-text">Visual Communication Design</p>     
                <p class="desc-subtext"></p>
                
                <div class="float-wrap">
                    <p class="title-text">Online Programming Academy</p>
                    <p class="year-text">2006 - 2007</p>
                </div>
                <p class="desc-text">Python Course</p>     
                <p class="desc-subtext"></p>
            </section>
            <section>
                <h2>AWARDS</h2>
                <div class="float-wrap">
                    <p class="title-text">LIKELION SEOUL</p>
                    <p class="year-text">2018</p>
                </div>
                <p class="desc-text">Best Developer Award</p>
            </section>
            <div class="sns-wrap">
                <a href="http://facebook.com"><img class="sns-image" src="images/facebook.png"></a>
                <a href="http://instagram.com"><img class="sns-image" src="images/insta.png"></a>
                <a href="http://linkedin.com"><img class="sns-image" src="images/linked-in.png"></a>
                <a href="http://twitter.com"><img class="sns-image" src="images/twitter.png"></a>
            </div>
        </div>
        <footer>Copyright CODE LION ALL rights reserved.</footer>
    </body>
</html>

2-2. CSS Code

@import url('https://fonts.cdnfonts.com/css/montserrat');

* {
    font-family: montserrat;
}

body, h1, h2 {
    padding: 0;
    margin: 0;
}

body {
    min-width: fit-content;
}

h1 {
    font-size: 36px;
    font-weight: bold;
    font-style: italic;
}

h2 {
    font-size:20px;
    color:#282828;
    font-weight: lighter;
    margin-bottom: 16px;
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 5px;
}

.name-text {
    font-weight: bold;
    color: #7c7c7c;
    font-size: 16px;
}

.main-box {
    width: 610px;
    padding: 30px;
    margin: 30px;
    margin-right: auto;
    margin-left: auto;
    box-shadow: 0 1px 20px 0 rgba(0,0,0,0.1);
}

.title-box {
    text-align: right;
}

.about-me-text {
    font-size: 10px;
    line-height: 16px;
}

section {
    margin-bottom: 24px;
}

.float-wrap {
    overflow: hidden;
}

.title-text {
    font-size: 11px;
    font-weight: bold;
    color: #282828;
    float: left;
}

.year-text {
    font-size: 11px;
    font-weight: bold;
    color: #282828;
    float: right;
}

.desc-text {
    font-size: 9px;
}

.desc-subtext {
    font-size: 9px;
    color: #282828;
    padding-left: 16;
}

.sns-wrap {
    text-align: right;
}

.sns-image {
    width: 12px;
    height: 12px;
}

footer {
    background-color: #1e1e1e;
    text-align: center;
    font-size: 12px;
    padding: 20px;
    color: #919191;
}

'Front-end 개발' 카테고리의 다른 글

[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 스터디 계획 세우기 (0)	2023.07.05
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 2일차 기록 및 복습 (0)	2023.07.04
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 상세 훈련과정 (0)	2023.06.27
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 최종 합격 (0)	2023.06.24
[멋쟁이사자처럼] 테킷 프론트엔드 스쿨 7기 지원 - 2차 과제 수행 (0)	2023.06.08

ABOUT ME

2023년부터 로그 기록 2023년부터 로그 기록

1. HTML/CSS

2. 김멋사 이력서

'Front-end 개발' 카테고리의 다른 글

티스토리툴바

ABOUT ME

1. HTML/CSS

2. 김멋사 이력서

'Front-end 개발' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바