HTML/CSS로 그려보자

Daily-Log·2024년 3월 7일

초안도 만들었겠다 이제 한 화면씩 구상해볼 시간이다🔥

디자인과 동적화면, 반응형 웹사이트 라는 최종관문들은 지금해볼 수가 없으니..
우선 HTML/CSS로 만들어보기로 하자

화면 분석을 해보면

첫 화면의 가장 큰 구성은

나를 나타내는 로고
가장 먼저 나를 소개할 텍스트

인데, 아무리 정적화면들이어도 넣어야할 컴포넌트는 조금 있긴했다.
뭐 그래도 웹 소스는 열어볼 수 있으니 참고해서 만들면 되겠지😁

그런데 왠걸.. 이건 뭐지😂

::before과 ::after은 도대체 무엇인가
::before과 ::after이 합쳐져 어떤 상호작용을 하는데 예약어가 저런게 있다는 사실에 좀 당황했음;;

바로 실습해보기~

저런 신기한게 있다니 바로 코드에 실행해봄

실패한 화면
ㅎㅎㅎ 역시 바로 안되는군
~~당연함. CSS도 안넣었고 애초에 변수같은 개념이겠지~~

찾아보자 저게 뭔지

아하 CSS3의 가상요소라고 하나봄

https://www.geeksforgeeks.org/css-pseudo-elements/?ref=gcse

HTML 분석하다가 CSS가 나와서 당황스럽긴한데, 일단 HTML먼저 진행 계속 해야겠음

결과물

어찌저찌 만들긴했다! ..메뉴바만 ㅎㅎ
네비게이션바 까지 만들었음

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Log's Web Portfolio</title>
    <link rel="stylesheet" href="css/main.css" />
</head>

<body>
    <header class="header-in-body">
        <div class="div-in-header">
            <h1 class="title"><a href="/">Log's Web Portfolio</a></h1>
            <nav class="menu">
                <ul>
                    <li><a class="link" href="/about">ABOUT</a></li>
                    <li><a class="link" href="/story">STORY</a></li>
                    <li><a class="link" href="/stack">STACK</a></li>
                    <li><a class="link" href="/project">PROJECT</a></li>
                    <li><a class="link" href="/contect">CONTECT</a></li>
                </ul>
                <div>
                    <label>
                        <input role="switch" type="checkbox" />
                        <span>다크 모드</span>
                    </label>
                </div>
            </nav>
        </div>
    </header>

    <main></main>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}

div {
    display: block;
}

a {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: #333333;
}

body {
    font-size: 16px;
}

.title {
    flex-basis: 30%;
    font-size: 1.8rem;
    letter-spacing: -.02em;
}

.header-in-body {
    display: block;
    position: relative;
    height: 100%;
    background-color: aliceblue;
}

.div-in-header {
    width: 1280px;
    margin: 0 auto;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.div-in-header {
    width: 100%;
    margin: 0 auto;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0px 36px;
}

.menu {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -webkit-box-align: flex-end;
    -ms-flex-align: flex-end;
    align-items: flex-end;
    margin-left: 40px;
    width: 100%;
}

.menu ul{
    padding: 7px 0;
}

.menu ul li {
    float: left;
    line-height: 30px;
    text-align: center;
    padding: 20px 0;
}

ul li a {
    display: block;
    font-size: 15px;
    padding: 8px 16px;
    font-family: paybooc, Apple SD Gothic Neo, "돋움", Dotum, Helvetica Neue, arial, sans-serif;
}

.menu .link {
    width: 100px;
    color: black;
    font-weight: bold;
}

.menu .link:hover {
    color: blue;
}

label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 40px 0;
}

[type="checkbox"] {
    appearance: none;
    position: relative;
    border: max(2px, 0.1em) solid gray;
    border-radius: 1.25em;
    width: 2.25em;
    height: 1.25em;
}

[type="checkbox"]::before {
    content: "";
    position: absolute;
    left: 0;
    width: 1em;
    height: 1em;
    border-radius: 50%;
    transform: scale(0.8);
    background-color: gray;
    transition: left 250ms linear;
}

[type="checkbox"]:checked {
    background-color: blue;
    border-color: blue;
}

[type="checkbox"]:checked::before {
    background-color: white;
    left: 1em;
}

[type="checkbox"]:disabled {
    border-color: lightgray;
    opacity: 0.7;
    cursor: not-allowed;
}

[type="checkbox"]:disabled:before {
    background-color: lightgray;
}

[type="checkbox"]:disabled+span {
    opacity: 0.7;
    cursor: not-allowed;
}

[type="checkbox"]:focus-visible {
    outline-offset: max(2px, 0.1em);
    outline: max(2px, 0.1em) solid tomato;
}

[type="checkbox"]:enabled:hover {
    box-shadow: 0 0 0 max(4px, 0.2em) lightgray;
}

fieldset {
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}