본문 바로가기
코딩 나도 할 수 있다!!

2024.04.17 (수) HTML 개인 소개 페이지

혹시나도? 2024. 4. 17. 20:30

어제는 네비게이션 바를 만들었다

오늘은 개인 소개 페이지를 만들어 볼 거다

배경부터 만들었다

 

그리고 어제 만들었던 네비게이션 바를 넣었다

 

이다음에는 자기소개를 적어 놓을 박스를 만들었다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            
            background-color: #fff6ec;
            margin: 0;
        }

        nav {
            background-color: #ffbdd6;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 30px 60px;
            text-decoration: none;
            font-size: 25px;
        }

        nav a:hover {
            background-color: #e4deff;
            color: black;
        }

        .box {
            width: 1700px;
            height: 300px;
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
        }
        
        .box img {
            display: block;
            margin: auto 0;
        }

        .box .text {
            display: block;
            text-align: left;
            margin: 260px -135px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="https://www.naver.com">11</a>
        <a href="https://www.google.co.kr/?hl=ko">22</a>
        <a href="https://www.daum.net">33</a>
    </nav>
    <div class="box">
        <p></p>
    </div>
</body>
</html>

 

 

 

.box 부분이 흰색 박스이다

.box .text를 쓴 이유는 박스 안에 쓰일 텍스트를 통제하기 위해서 썼다

그다음 박스 안에 들어갈 작은 박스를 하나 더 만들어준다

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            
            background-color: #fff6ec;
            margin: 0 auto;
        }

        nav {
            background-color: #ffbdd6;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 30px 60px;
            text-decoration: none;
            font-size: 25px;
        }

        nav a:hover {
            background-color: #e4deff;
            color: black;
        }

        .box {
            width: 1700px;
            height: 300px;
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
        }
        .box img {
            display: block;
            margin: auto 0;
        }

        .box .text {
            display: block;
            text-align: left;
            margin: 260px -135px;
        }

        .card {
            float: left;
            width: 250px;
            height: 250px;
            background-color: #fff2f2;
            position: relative;
            bottom: 380px;
            left: 150px;
            padding: 30px;
            margin: 30px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <nav>
        <a href="https://www.naver.com">11</a>
        <a href="https://www.google.co.kr/?hl=ko">22</a>
        <a href="https://www.daum.net">33</a>
    </nav>
    <div class="box">
        <img src="2079 복사본.JPG" alt="My Image" width="200" height="250" />
        <div class="text">
            <p>이름</p>
            <div class="card">
                <p>안녕하세요</p>
            </div>
            <div class="card">
                <p>취미</p>
            </div>
            <div class="card">
                <p>TMI</p>
            </div>
            <div class="card">
                <p>MBTI</p>
            </div>
        </div>
    </div>

</body>
</html>

 

작은 박스는 .card로 명시해 뒀다

정렬의 위해 float를 사용하였다

그다음 카드의 위치, 색상, 크기 등을 조절해 주었다

 

이렇게 정렬과 함께 카드들이 잘 나온 걸 확인할 수 있다

그다음 소개 카드들 밑에 블로그와 깃허브로 갈 수 있는 버튼을 만들었다

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body { 
            background-color: #fff6ec;
            margin: 0 auto;
        }

        nav {
            background-color: #ffbdd6;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 30px 60px;
            text-decoration: none;
            font-size: 25px;
        }

        nav a:hover {
            background-color: #e4deff;
            color: black;
        }

        .box {
            width: 1700px;
            height: 300px;
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
        }

        .box img {
            display: block;
            margin: auto 0;
        }

        .box .text {
            display: block;
            text-align: left;
            margin: 260px -135px;
        }

        .card {
            float: left;
            width: 250px;
            height: 250px;
            background-color: #fff2f2;
            position: relative;
            bottom: 380px;
            left: 150px;
            padding: 30px;
            margin: 30px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
            line-height: 40px;
        }

        .box2 {
            display: flex;
            margin: 50px auto;
            width: 600px;
            position: relative;
            background-color: #ffbdd6;
            font-size: 25px;
            overflow: hidden;
        }

        .box2 a {
            color: black;
            text-align: center;
            padding: 30px 270px;
            text-decoration: none;
        }

        .box2:hover {
            background-color: #e4deff;
            color: black;
        }
    </style>
</head>

<body>
    <nav>
        <a href="https://www.naver.com">11</a>
        <a href="https://www.google.co.kr/?hl=ko">22</a>
        <a href="https://www.daum.net">33</a>
    </nav>
    <div class="box">
        <img src="2079 복사본.JPG" alt="My Image" width="200" height="250" />
        <div class="text">
            <p>이름</p>
            <div class="card">
                <p>안녕하세요</p>
            </div>
            <div class="card">
                <p>취미</p>
            </div>
            <div class="card">
                <p>TMI</p>
            </div>
            <div class="card">
                <p>MBTI</p>
            </div>
        </div>
    </div>
    <div class="box2">
        <a href="#" onclick="location.href='https://hoxynado.tistory.com/'">블로그</a>
    </div>
    <div class="box2">
        <a href="#" onclick="location.href='https://github.com/'">깃허브</a>
    </div>
</body>

</html>

 

 

이 버튼들도 네비게이션 바와 비슷하게 작동하도록 만들었다

그런데 이 버튼들을 위아래가 아닌 양옆으로 배치하고 싶다

하지만 어떻게 수정해도 바뀌지가 않았다

그래서 코딩을 하고 있는 친구에게 물어봤다

해답은 버튼들을 같은 영역에 두고 싶으면 div 태그를 하나 만들어 사용하라는 것이었다

바로 실행

.button {
            display: flex;
        }
<div class="button">
        <div class="box2">
            <a href="#" onclick="location.href='https://hoxynado.tistory.com/'">블로그</a>
        </div>
        <div class="box2">
            <a href="#" onclick="location.href='https://github.com/'">깃허브</a>
        </div>
    </div>

 

.button을 만들고 그 밑으로 버튼들을 넣어줬다

결과는?

 

양옆으로 잘 배치되었다

그리고 폰트도 넣어주었다

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url('https://noonnu.cc/');

        @font-face {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2307-2@1.0/Cafe24Supermagic-Bold-v1.0.woff2') format('woff2');
            font-weight: 700;
            font-style: normal;
        }

        body {
            font-family: 'Cafe24Supermagic-Bold-v1.0';
            background-color: #fff6ec;
            margin: 0 auto;
        }

        nav {
            background-color: #ffbdd6;
            overflow: hidden;
        }

        nav a {
            float: left;
            display: block;
            color: black;
            text-align: center;
            padding: 30px 60px;
            text-decoration: none;
            font-size: 25px;
        }

        nav a:hover {
            background-color: #e4deff;
            color: black;
        }

        .box {
            width: 1700px;
            height: 300px;
            background-color: #ffffff;
            margin: 100px auto;
            padding: 40px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
        }

        .box img {
            display: block;
            margin: auto 0;
        }

        .box .text {
            display: block;
            text-align: left;
            margin: 260px -135px;
        }

        .card {
            float: left;
            width: 250px;
            height: 250px;
            background-color: #fff2f2;
            position: relative;
            bottom: 380px;
            left: 150px;
            padding: 30px;
            margin: 30px;
            border-radius: 10px;
            color: black;
            text-align: left;
            font-size: 26px;
            display: flex;
            line-height: 40px;
        }

        .box2 {
            display: flex;
            margin: 50px auto;
            width: 600px;
            position: relative;
            background-color: #ffbdd6;
            font-size: 25px;
            overflow: hidden;
        }

        .box2 a {
            color: black;
            text-align: center;
            padding: 30px 270px;
            text-decoration: none;
        }

        .box2:hover {
            background-color: #e4deff;
            color: black;
        }

        .button {
            display: flex;
        }
    </style>
</head>

<body>
    <nav>
        <a href="https://www.naver.com">11</a>
        <a href="https://www.google.co.kr/?hl=ko">22</a>
        <a href="https://www.daum.net">33</a>
    </nav>
    <div class="box">
        <img src="2079 복사본.JPG" alt="My Image" width="200" height="250" />
        <div class="text">
            <p>이름</p>
            <div class="card">
                <p>안녕하세요</p>
            </div>
            <div class="card">
                <p>취미</p>
            </div>
            <div class="card">
                <p>TMI</p>
            </div>
            <div class="card">
                <p>MBTI</p>
            </div>
        </div>
    </div>
    <div class="button">
        <div class="box2">
            <a href="#" onclick="location.href='https://hoxynado.tistory.com/'">블로그</a>
        </div>
        <div class="box2">
            <a href="#" onclick="location.href='https://github.com/'">깃허브</a>
        </div>
    </div>
</body>

</html>

 

잘 적용된 모습을 볼 수 있다
이렇게 간단하게 소개 페이지를 만들었다
보기에는 간단해 보여도 여기까지 하루 이상이 걸렸다
보기에는 쉬워 보여도 나 같은 초보는 쉽지가 않다
그래도 시간 가는 줄 모르고 집중할 수 있는 시간이었다

 

'코딩 나도 할 수 있다!!' 카테고리의 다른 글

2024.04.25 (목) 코틀린 계산기 만들기 2  (0) 2024.04.25
2024.04.24 (수) 코틀린 계산기 만들기 1  (0) 2024.04.24
2024.04.16 (화) HTML 네비게이션 바  (0) 2024.04.16
2024.03.27 (수) SQL 같은답 다른풀이  (0) 2024.03.27
2024.03.25 (월) SQL SET  (0) 2024.03.25

'코딩 나도 할 수 있다!!' Related Articles

티스토리툴바