싸이월드 만들기 1탄 피드백 부탁드립니다.

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

▶ 싸이월드 만들기 1탄

해결된 질문

작성

안녕하세요! 싸이월드 만들기 1탄 피드백 부탁 드립니다.

과제 완성 후 레퍼런스 코드를 참고해서 확인도 하였는데 궁금한 점이 있습니다.

figma에 있는 '오늘의 기분' select 박스 화살표 모양을 따라해 보고 싶어 아이콘을 사용했는데 아래 코드에서 select 태그 위에 아이콘이 잘 겹치도록 하는 부분이 어려운 것 같습니다. 이렇게 두 요소를 겹치도록 할 때 크기, 위치 같은 요소를 어떻게 계산하여 맞게 지정할 수 있을까요?

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>정현아님의 미니홈피 :: 사이좋은 사람들, 싸이월드</title>
    <link href="./styles/index.css" rel="stylesheet">
    <script src="https://kit.fontawesome.com/f9748babc2.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="background">
        <div class="outerbox">
            <div class="wrapper">
                <div class="wrapper__left">
                    <div class="wrapper__left__header">
                        <div class="today">
                            <!--  각각의 span 박스를 만들어서 관리 -->
                            <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="left__body__profile__content">
                                <i class="fa-regular fa-face-smile"></i>
                                이름
                            </div>
                            <div class="left__body__profile__content">
                                <i class="fa-solid fa-envelope"></i>
                                Phone
                            </div>
                            <div class="left__body__profile__content">
                                <i class="fa-solid fa-phone"></i>
                                E-mail
                            </div>
                            <div class="left__body__profile__content">
                                <i class="fa-solid fa-star"></i>
                                인스타그램
                            </div>
                        </div>
                        <div class="left__body__body"></div>
                        <div class="left__body__footer">
                            <div class="left__body__footer__title">
                                오늘의 기분
                            </div>
                            <div class="left__body__footer__box">
                                <select class="left__body__footer__select">
                                    <option selected="true">기쁨 😊</option>
                                    <option>슬픔 😢</option>
                                    <option>화남 😠</option>
                                    <option>행복 🥰</option>
                                </select>
                                <span class="left__body__footer__icon"><i class="fa-regular fa-square-caret-down"></i></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="wrapper__right"></div>
            </div>
        </div>
    </div>
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0px; /*위 옆 공백 제거*/
}

.background {
    width: 1024px;
    height: 600px;
    /* background-color: bisque; */
    background-image: url("../images/background.png");
    padding: 20px 0px 0px 20px; /*위 오른쪽 아래 왼쪽 - 시계방향*/
}

.outerbox {
    width: 808px;
    height: 544px;
    /* background-color: tomato; */
    background-image: url("../images/outerbox.png");
}

.wrapper{
    display: flex;
    flex-direction: row;
    /* background-color: rebeccapurple; */
    padding: 32px 0px 0px 32px;
}

.wrapper__left {
    width: 208px;
    height: 472px;
    /* 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 {
    font-size: 9px;
}

.wrapper__left__body {
    width: 100%;
    height: 100%; /*형제 속성을 제외한 나머지만 가져감*/
    /* background-color: steelblue; */
    border: 1px solid grey;
    border-radius: 15px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 30px;
}

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

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

.left__body__header__line {
    border-top: 1px dotted black;
    margin: 12px 0px; /*상하여백 좌우여백*/
}

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

.left__body__profile__content {
    height: 12px;
    font-size: 10px;
    /* margin: 0px 0px 8px 0px; */
    margin-bottom: 10px;
    color: #999999;
}

.left__body__footer {
    /* padding: 110px 0px 0px 0px; */
    width: 100%;
    margin-top: 100px;
}

.left__body__footer__title, .left__body__footer__select  {
    font-size: 11px;
}

.left__body__footer__box {
    position: relative;
    margin-top: 5px;
}

.left__body__footer__select {
    width: 141px;
    appearance: none;
}

.left__body__footer__icon {
    position: absolute;
    width: 18px;
    height: 18px;
    top: 2px;
    right: 2px;
    pointer-events: none;  /* 아이콘을 클릭해도 뒤의 select가 반응하도록 설정 */
}

.wrapper__right {
    width: 524px;
    height: 472px;
    /* background-color: violet; */
}

react node.js seo graphql next.js

답변 2

노원두

지식공유자

안녕하세요! hyunah10님!

겹치기를 하는 방법에는 1가지 절대적인 방법이 있는 것은 아니며,
상황에 따른 겹치기 방법을 다양하게 사용할 줄 아시는 것이 중요합니다!
물론, 이와 관련하여 뒤쪽 CSS&JS 마스터 수업에서 상세히 다루어 볼 것이므로 걱정하지 않으셔도 됩니다!^^

올려주신 질문과 관련된 겹치기 방식은 가장 간단한 방법을 사용해서 해결할 수 있어요!
(부모태그 위에 자식태그를 놓음으로써 자연스럽게 겹치는 방법)

그런데, 올려주신 코드를 보니, 이미 잘 작성을 해주신 것 같아요!^^
따라서, 부모 태그에 padding과 같은 여백을 조금만 주셔서 자연스럽게만 표현해 주시면 좋을 것 같아요

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

싸이월드 만들기 프로젝트에 참여하시고 성실히 과제를 수행하신 점 축하드립니다! 말씀하신 ‘오늘의 기분’ select 박스 위에 아이콘을 겹치게 하려면 CSS의 position 속성을 잘 활용하셔야 합니다. 자세한 설명을 드리겠습니다.

아이콘 위치 조정 방법

Position 사용: position: relative와 position: absolute를 활용하여 아이콘 위치를 정교하게 조정합니다.
- position: relative는 부모 요소에 설정하여, 자손 요소가 이 기준에 대해 위치를 변경할 수 있도록 합니다.
- position: absolute는 특정한 위치를 기반으로 요소의 위치를 정확하게 지정할 때 사용됩니다. 이 경우 부모 요소가 position: relative로 설정되어 있으면 그 부모를 기준으로 위치가 지정됩니다.
CSS 코드 분석:
- left__body__footer__box에 position: relative를 설정하여 그 안에 위치한 모든 자식 요소의 기준점을 설정합니다.
- 아이콘을 나타내는 left__body__footer__icon의 경우 position: absolute로 설정되었으므로, 이는 부모 요소인 left__body__footer__box를 기준으로 위치가 설정됩니다.
- right: 2px; top: 2px;와 같은 속성을 통해 아이콘의 위치를 미세 조정하여 원하는 위치에 놓을 수 있습니다.
아이콘 크기와 간격 조절:
- 아이콘의 크기나 간격이 필요하다면 font-size 및 line-height, padding 등을 활용하여 조절할 수 있습니다.
- 현재 pointer-events: none; 설정이 되어 있어 아이콘을 클릭해도 뒤에 있는 select 박스가 적용된다는 점도 유의하세요.

참고자료

이미지와 같이 구성한 UI를 보기 원하신다면, 같은 강의의 이전 질문이지만 비슷한 사례가 있었던 CSS정렬 - 회원가입 과제 코드 공유에서 많은 도움이 될 수 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변