[230227] HTML | CSS

윤지수·2023년 2월 27일

멋쟁이사자처럼 프론트엔드스쿨💻

목록 보기

1/51

안녕하세여 멋쟁이사자처럼 프론트엔드스쿨 5기 훈련생 윤말랑입니두😊

올해는 4학년이 되는 해였지만 처음으로 휴학하고 프론트엔드스쿨 지원했는데 합격해서 너무 좋았다ㅎㅎ 4개월동안 학교 다닐때보다 더 열심히 살아야지..!🔥

첫날이었던 오늘은 하루가 후딱 지나갔다
OT 듣고(집필 꼭 참여해야겠다!!🌟) 동기분들이랑 이야기도 나눠보고(낯가려서 말 많이 못함..ㅠ) 이두희 대표님이 강의하신 코드라이언 HTML, CSS 온라인 수업 수강했다
올해 되고 자바스크립트 공부하느라 HTML, CSS는 놓고 있었는데 상기시켜보면서 정리할 수 있는 시간이었다:)
직접 코드 짜보면서 복습도 완료!!👍🏻👍🏻

📌 HTML/CSS

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="">
    </head>
    <body>
        <div class="mainbox">
            <div class="title-box">
                <h1></h1>
                <p></p>
            </div>

            <section>
                <h2></h2>
                <p></p>
            </section>
            
            <section>
                <h2></h2>
                <div class="float-wrap">
                    <p class="title-text"></p>
                    <p class="year-text"></p>
                </div>
                <p class="desc-text"></p>
                <p class="desc-subtext"></p>
                <div class="float-wrap">
                    <p class="title-text"></p>
                    <p class="year-text"></p>
                </div>
                <p class="desc-text"></p>
                <p class="desc-subtext"></p>
                <div class="float-wrap">
                    <p class="title-text"></p>
                    <p class="year-text"></p>
                </div>
                <p class="desc-text"></p>
                <p class="desc-subtext"></p>
            </section>

            <section>
                <h2></h2>
                <div class="float-wrap">
                    <p class="title-text"></p>
                    <p class="year-text"></p>
                </div>
                <p class="desc-text"></p>
            </section>

            <div class="sns-wrap">
                <a href=""><img class="sns-img" src=""></a>
                <a href=""><img class="sns-img" src=""></a>
                <a href=""><img class="sns-img" src=""></a>
                <a href=""><img class="sns-img" src=""></a>
            </div>
        </div>
    </body>
</html>

html, css 파일 반드시 구분!

div, section 잘 사용해서 구조 짜는게 중요한 것 같다

@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800&display=swap');

* {
    font-family: 'Montserrat';
}

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

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;
}

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

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

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

section {
    margin-bottom:24px;
}

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

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

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

.float-wrap {
    overflow: hidden;
}

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

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

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

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

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

왼쪽, 오른쪽 정렬 -> float: left;, float: right;
float 사용했을 때 요소 겹치지 않게 하는 방법
-> float 감싸고 있는 요소에 overflow: hidden;

border: width style color;
border: 5px solid black;

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color
box-shadow: 0 1px 20px 0 rgba(0, 0, 0, 0.1);

오늘 수업 들을 때 집중력이 조금 떨어졌는데 내일은 실시간으로 수업 들어야 하니까 더 노력해서 집중해야겠다ㅠ
내일도 뽜쟈쟈👊🏻

윤지수

다음 포스트

[230228] URL, IP, PORT | emmet 문법 | VS Code 단축키 | Git/GitHub

1개의 댓글

양지민

2023년 3월 1일

세상이 변했군요
중국어 열심히 공부하더니
이젠 컴퓨터 언어도 공부하는 모습 멋져요

답글 달기