Portfolio, Project/Project(Programming)

홈페이지 만들기 - 1

잇(IT) 2023. 8. 21. 17:54

- index.html

<!doctype html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>ㅇㅇㅇ님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title>
    <link href="./styles/index.css" rel="stylesheet"/>
    <script src="https://kit.fontawesome.com/15afd4a933.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="background">
    <div class="outerbox">
        <div class="wrapper">
            <div class="wrapper__left">
                <div class="wrapper__left__header">
<!--                    TODAY 0 | TOTAL 12345-->
                    <div class="today">
                        <span>TODAY</span>
                        <span>0</span>
                        <span> | TOTAL</span>
                        <span>12345</span>
                    </div>
                </div>
                <div class="wrapper__left__body">
                    <div class="left__body__header">
                        <div class="left__body__header__gray"></div>
                        <div class="left__body__header__line"></div>
                    </div>
                    <div class="left__body__profile">
                        <div class="profile_detail">
                            <i class="fas fa-solid fa-user"> 이름</i>
                        </div>
                        <div class="profile_detail">
                            <i class="fas fa-solid fa-phone"> Phone</i>
                        </div>
                        <div class="profile_detail">
                            <i class="fas fa-solid fa-envelope"> E-mail</i>
                        </div>
                        <div class="profile_detail">
                            <i class="fas fa-solid fa-star"> 인스타그램</i>
                        </div>
                    </div>
                    <div class="left__body__footer">
<!--                        window 버튼 + . (마침표)-->
                        <div class="wrapper__feel">
                            <div class="feel__title">오늘의 기분</div>
                            <select class="feel__select">
                                <option>기쁨 😊</option>
                                <option>슬픔 😢</option>
                                <option>화남 😡</option>
                                <option>분노 👺</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="wrapper__right"></div>
        </div>
    </div>
</div>
</body>
</html>

- class명을 지정할 때, 보통 최대 4개까지 작성하도록 한다. 종속 클래스 명을 지을 때 제일 대표가 되는 맨 앞의 단어 하나정도는 생략해도 된다. (class는 어차피 구분하기 위해 작성하는 것이기 때문에 이름이 꼭 종속 될 필요는 없지만, 구분하기 편하게 하기 위해 작성한다.)

- index.css

* {
    box-sizing: border-box;
    /*border-box로 설정하면, 요소의 크기를
    width와 height 값에 padding과 border를 포함한 총 크기로 설정 */
    margin: 0px;
}

.background {
    width: 1024px;
    height: 600px;
    background-image: url("../images/background.png");
    padding: 20px 0px 0px 20px;
    /*가장 배경이 될 박스의 속성을 지정한다. 넓이와 높이를 지정하고,
    bacground-image를 해당 박스에 사진을 집어넣는다.
    padding을 통해 bacground의 속성과의 띄어질 거리를 지정한다.*/
}

.outerbox {
    width: 808px;
    height: 544px;
    background-image: url("../images/outerbox.png");
    /* background에 속한 첫번째 박스이다.
    마찬가지로 이미지를 넣는다.
    background에서 padding을 20px 0px 0px 20px로 지정하였기 때문에 
    outerbox와의 거리를 북쪽에서부터 시계 방향으로 20px 0px 0px 20px만큼 떨어지게 된다.*/
}

.wrapper {
    display: flex;
    flex-direction: row;
    padding: 32px 0px 0px 32px;
    /* outer에 속한 첫번째 박스이다.
    flex-direction을 통해 해당 태그에 여러 속성들을 하나로 묶는다.
    또, padding을 통해 flex에 속한 속성들을 부모 태그인 wrapper와의 거리를 
    32px 0px 0px 32px만큼 띄운다.*/
}

.wrapper__left {
    width: 208px;
    height: 472px;
    /* display 설정을 해주지 않으면 472의 값이 그래도 전달되어 범위를 벗어나게 된다.??? */
    /*background-color: bisque;*/
    display: flex;
    flex-direction: column;
}

.wrapper__left__header {
    width: 100%;
    height: 30px;
    /*background-color: aqua;*/
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.today {
    /* css속성은 상속이 된다. */
    font-size: 9px;
}

.wrapper__left__body {
    width: 100%;
    height: 100%;
    /*background-color: steelblue;*/
    border: 1px solid gray;
    border-radius: 15px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px 20px 30px;
}

.left__body__header {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.left__body__header__gray {
    width: 148px;
    height: 133px;
    background-color: gray;
}

.left__body__header__line {
    border-top : 1px dotted black;
    margin: 12px 0px;
}

.left__body__profile {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.profile_detail {
    color: #999999;
    font-size: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: row;
}

.left__body__footer {
    width: 100%;
    margin-bottom: 30px;
}

.wrapper__feel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /*align-items: center;*/
    width: 100%;
}

.feel__title {
    font-size: 11px;
    /*padding: 5px 5px;*/
    margin-bottom: 5px;
    color: gray;
}

.feel__select {
    font-size: 11px;
    color: gray;
}

.wrapper__right {
    width: 524px;
    height: 472px;
    background-color: violet;
}
disply: flex

- flexbox 레이아웃을 설정하는 데 사용된다.

- flex-direction, justify-content, align-items, align-self 등의 속성을 사용하여 유연한 배치와 정렬을 조절할 수 있다.

https://fontawesome.com/icons

- 위 홈페이지를 통해 icon을 삽입 할 수 있다.

728x90
저작자표시

'Portfolio, Project > Project(Programming)' 카테고리의 다른 글

회원가입 페이지 만들기 - 1 (HTML, CSS)  (0) 2023.08.25
홈페이지 만들기 - 2  (0) 2023.08.25
Project (7-3) 장바구니 상품 주문하기  (0) 2023.08.18
Project (7-2) 장바구니 조회, 수정, 삭제  (0) 2023.08.17
Project (7-1) 장바구니 담기  (0) 2023.08.16

'Portfolio, Project/Project(Programming)'의 다른글

  • 현재글홈페이지 만들기 - 1

관련글

티스토리툴바