[개발일지 54일차] toco 프로젝트2 - 사이트 리뉴얼(4)

OOMJ·2022년 7월 21일
project개발일지
0

PROJECT

목록 보기
13/34
post-thumbnail

2022-07-21

오늘 진행 사항

1) 멘토링 받기

  • 각 파트 진행 사항 설명하기 했음
    설명할 때는 자기는 어느 파트를 맡았고, 어떤 부분을 진행하고 있으며, 어떤 곳에서 어려움을 겪고 있다. 식으로 설명을 해야함

2) 멘토링 끝나고 팀모임 한 번 더 진행, 개별 목표치 설정

서로 깃헙쓰면서 수정한 부분들, 오류 난 부분들, 다시 맞춰야 할 부분들 등 자잘하지만 많이 이야기가 오갔다.
그리고 마무리로 오늘 목표치 다시 공유하고 해산.

3) 개별 작업 시간

4) 4시 40분 폼제출 시간에 다시 모여 짧게 이야기하고 해산.

3) 개별 작업

어제 레이아웃 잡은 것에서 마진과 여러 세부사항 조정을 하고 이미지도 본격적으로 넣었다.

세부 조정은 당연히 더 해야한다.

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./reset.css">
    <title>mainbody</title>
    <style>
        div {
            margin: 0 auto;
        }
        /* 새로운 소식 섹션 */
        .main-news-container, .main-project-container, .main-service-container, .main-reference-container {
            max-width: 1440px;
            margin: 0 auto;
            /* background-color: #b8b8b8;    */
        }
        .main-news-container {
            height: 450px;
        }
        .main-title {
            font-size: 2rem;
        }
        .sub-title {
            color:#999999;
        }
        .main-news-container .news-wrap {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            /* border: solid 1px red; */
        }
        .main-news-container .news-contents {
            width: 300px;
            height: 316px;
            /* border: solid 1px blue; */
        }
        .main-news-container .news-wrap .news-img {
            width: 300px;
            height: 200px;
            /* background-color: darkslateblue; */
            flex: 1;
        }
        .main-news-container .news-wrap .news-text {
            border: solid 1px blue;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowwrap;
            width:300px;
            height: 20px;
        }
        /* 프로젝트 섹션 */
        .main-project-container {
            width: 100%;
            height: 1148px; /*픽셀과 차이있음*/
            /* background-color: rgb(201, 201, 201); */
        }
        .main-project-container .main-title {
            text-align: right;
        }
        .main-project-container .sub-title {
            text-align: right;
        }
        .main-project-container .sub-text {
            text-align: right;
        }
        .main-project-container .project-wrap {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            align-content: center; 
        }
        .main-project-container .project-left-wrap,.project-right-wrap {
            /* border: solid 1px red; */
            flex: 1;
        }
        /* 프로젝트 섹션 - 왼쪽 */
        .main-project-container .project-left-wrap {
            width: 534px; /*임시*/
            height: 840px;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            align-content: flex-start;
        }
        .main-project-container .project-left-wrap .project-img{
            width: 534px;
            height: 393px;
            /* background-color: darkslateblue; */
        }
        .main-project-container .project-left-wrap .moado {
            background-image: url('./img/toco-img1/main-moaDo-back.svg');
        }
        /* 프로젝트 섹션 - 오른쪽 */
        .main-project-container .project-right-wrap{
            width: 534px; /*임시*/
            height: 840px;
            flex: 1;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            justify-content: flex-end;
            align-items: flex-end;
            align-content: flex-end;
        }
        .main-project-container .project-right-wrap .project-img2 {
            width: 680px; /*sample*/
            height: 680px;
            /* background-color: darkslateblue; */
        }
        /* 서비스 섹션 */
        .main-service-container {
            width: 100%;
            height: 1140px;
            display: flex;
        }
        .main-service-container .service-left-wrap, .service-right-wrap  {
            /* border: solid 1px red; */
            width: 720px; /*임시박스*/
            height: 100%;
            flex:1;
        }
        /* 서비스 섹션 - 왼쪽 */
        .main-service-container .service-left-wrap .service-img1 {
            width: 680px;
            height: 680px;
            background-color: rgb(145, 139, 184);
        }
        /* 서비스 섹션 - 오른쪽 */
        .main-service-container .service-right-wrap{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: flex-start;
            align-content: flex-start;
        }
        .main-service-container .service-right-wrap .service-img-wrap1,.service-img-wrap2 {
            /* border: solid 1px orange; */
            /* width: 100%; */
        }
        .main-service-container .service-right-wrap .service-img2 {
            /* background-color: darkslateblue;
            border: solid 1px blue; */
            width: 300px;
            height: 375px;
        }
        .main-service-container .service-right-wrap .service-img-wrap2 {
            margin-top: 150px;
        }
        /* 레퍼런스 섹션 */
        .main-reference-container {
            width: 100%;
            height: 734px;

        }
        .main-reference-container .ref-logo-wrap {
            border: solid 1px red;
            height: 93%;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: stretch;
            align-content: space-between;
        }
        .main-reference-container .ref-logo{
            border: solid 1px rgb(113, 113, 150);
            /* background-color: darkslateblue; */
            width: 220px;
            height: 100px;
            flex:1;
        }
        /* 푸터 */
        .common-footer{
            /* border: solid 1px blue; */
            max-width:1440px;
            width:100%;
            height: 250px;
            background: #E9E9E9;    
            display: table;
        }

        .footer-wrap {
            display: table-cell;
            vertical-align:middle;
        }
        .footer-text{ 
            /* border: solid 1px red; */
            margin-top: 30px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            text-align: left;
        } 
        .footer-text p{         
            color:#9e9e9e;
        }      
        .footer .copyright{
            color:#9E9E9E;
            font-weight:600;
        }      
        .footer-left,.footer-right{
            line-height:25px;
            flex:1;
            /* border: solid 3px orange; */
        }
    </style>
</head>
<body>
    <!-- 헤더 -->
    <header class="main-header">

    </header>
    <!-- 새로운 소식 섹션 -->
    <section class="main-news-container">
        <h1 class="main-title">리소프트의 새로운 소식</h1>
        <p class="sub-title">RESOFT NEWS</p>
        <div class="news-wrap">
            <div class="news-contents">
                <img class="news-img" src="./img/toco-common/sample-img.png" alt="">
                <p class="news-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro fuga inventore quae illum voluptatibus</p>
                <p>2022-07-20</p>
            </div>
            <div class="news-contents">
                <img class="news-img"  src="./img/toco-common/sample-img.png" alt="">
                <p class="news-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro fuga inventore quae illum voluptatibus</p>
                <p>2022-07-20</p>
            </div>
            <div class="news-contents">
                <img class="news-img"  src="./img/toco-common/sample-img.png" alt="">
                <p class="news-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro fuga inventore quae illum voluptatibus</p>
                <p>2022-07-20</p>
            </div>
            <div class="news-contents">
                <img class="news-img"  src="./img/toco-common/sample-img.png" alt="">
                <p class="news-text">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro fuga inventore quae illum voluptatibus</p>
                <p>2022-07-20</p>
            </div>
        </div>
    </section>
    <!-- 프로젝트 섹션 -->
    <section class="main-project-container">
        <h1 class="main-title">프로젝트</h1>
        <p class="sub-title">RESOFT PROJECT</p>
        <p class="sub-text">쾌적한 서비스 제공을 위해 사용자 입장에서<br>생각하고 항상 새로운 도전을 시도합니다.</p>
        <div class="project-wrap">
            <div class="project-left-wrap">
                <img class="project-img" src="./img/toco-img1/main-ecoce.png" alt="">
                <img class="project-img moado" src="./img/toco-common/main_N_business-moaDo.png" alt="">
            </div>
            <div class="project-right-wrap">
                <div class="project-img2">
                    
                </div>
            </div>
        </div>
    </section>
    <!-- 서비스 섹션 -->
    <section class="main-service-container">
        <div class="service-left-wrap">
            <h1 class="main-title">서비스</h1>
            <p class="sub-title">SERVICE</p>
            <p class="sub-text">다양한 기술플랫폼을 제공하여 가능성을 열어주고<br>의미있는 성공으로 인도하는 서비스를 제공합니다.</p>
            <div class="service-img1"></div>
        </div>
        <div class="service-right-wrap">
            <div class="service-img-wrap1">
                <div class="service-img2"><img src="./img/toco-img1/main-card-APP.png" alt=""></div>
                <div class="service-img2"><img src="./img/toco-img1/main-card-AI.png" alt=""></div>
            </div>
            <div class="service-img-wrap2">
                <div class="service-img2"><img src="./img/toco-img1/main-card-WEB.png" alt=""></div>
                <div class="service-img2"><img src="./img/toco-img1/main-card-XR.png" alt=""></div>
            </div>
        </div>
    </section>
    <!-- 레퍼런스 -->
    <section class="main-reference-container">
        <h1 class="main-title">레퍼런스</h1>
        <p class="sub-title">REFERENCE</p>
        <div class="ref-logo-wrap">
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-KIRA.png" alt="KIRA대구광역시건축사회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DCU.svg" alt="DCU대구가톨릭대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KMOU.svg" alt="KMOU국립한국해양대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DGtech-Highschool.png" alt="TECH대구공업고등학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-dalseo.svg" alt="대구광역시 달서구"></div>
            </div>
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-colorfulDG.svg" alt="컬러풀 대구"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-songpa.svg" alt="송파구"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DCCI.png" alt="DCCI대구상공회의소"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_DG-ICT.png" alt="대경ICT산업협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DIP.png" alt="DIP대구디지털산업진흥원"></div>
            </div>
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-maeil-newsletter.svg" alt="매일신문"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_people-power.svg" alt="국민의힘"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-CAK.svg" alt="CAK대한건설협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_KR-Master-Chef.png" alt="MasterChef한국조리기능장협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo_Rotary.png" alt="국제로타리"></div>
            </div>
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KNU.svg" alt="경북대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Lions-clubs.svg" alt="라이온즈 클럽 인터네셔널"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-JCI.svg" alt="JCI한국청년회의소"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Kibwa.png" alt="IT여성기업인협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-suseong.svg" alt="행복수성"></div>
            </div> 
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-MBC.png" alt="대구MBC"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KECA.png" alt="KECA한국전기공사협회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-KMU.svg" alt="계명대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-eupjong.svg" alt="eupjong중소기업융합중앙회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-TBN.svg" alt="TBN대구교통방송"></div>
            </div>
            <div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-SportsCouncil.png" alt="sports대구광역시체육회"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-Bareumi.png" alt="바르미 (주)즐거운세상"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-MMU.svg" alt="MMU국립목포해양대학교"></div>
                <div class="ref-logo"><img src="./img/toco-img1/logo-DG-Credit.png" alt="대구신용보증재단"></div>
            </div>
        </div>
    </setion>
    <!-- 푸터 -->
    <footer class="common-footer">
        <div class="footer-wrap">
            <img class="footer_logo" src="./img/toco-common/logo-Resoft.svg" alt="리소프트 로고 이미지">
            <span class="copyright">ⓒ RESOFT CO.LTD. ALL Rights Reserved.</span>
            <div class="footer-text">
                <div class="footer-left">                        
                    <p>상호 : (주)리소프트</p>                    
                    <p>사업자등록번호 : 722-81-02219</p>
                    <p>주소 : (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</p>   
                </div> 
                <div class="footer-right">
                    <p>대표이사 : 오유나 &nbsp;&nbsp; 개인정보책임자 : 이현지</p> 
                    <p>전화 : (053) 475-2110 &nbsp;팩스 : (0504) 257-5966 &nbsp;이메일 : call@resoft.kr</p>       
                </div>
            </div>
          </div>   
    </footer>
</body>
</html>

어려운 점

저번 시간 0. h1 선택자, p 선택자를 했을 때 속성효과가 따로 적용됨

  1. json 파일을 html로 불러내본 적이 없어서 어려움을 겪고 있다
 .main-project-container .main-title, .sub-title, .sub-text {
            text-align: right;
  }

해결 방법

  1. 알고보니 ,콤마는 선택자와 선택자를 함께 선택하는 것이 아니었다,,ㅎㅎ; 내가 용도를 잘못 이해하고 썼다. 클래스를 개별로 주어 해결했음. 코드를 편하게 쓰려고 했는데 이런 부분은 어쩔 수 없나보다.
 .main-project-container .main-title {
            text-align: right;
        }
        .main-project-container .sub-title {
            text-align: right;
        }
        .main-project-container .sub-text {
            text-align: right;
  1. 아직 찾는 중

소감

생각보다 내 작업속도가 느리다는 걸 깨달았다. 작업하면서 이것저것 다 해야할게 보이니까 생각 정리가 안되니, 어디서부터 시작해야될지 감이 잘 안잡히는게 그 원인인 것 같다. 해결 방법이 없을까?

또 그거와 달리 내가 코드 짜는 것에 대한 만족감이 조금 있다. 다른 분들 코드를 보다가 내껄 보니, 꽤나 효율적으로 코드를 짜는 것 같았다. 다만 부모 자식 태그를 간결히 선택할 수 있는 + > , 선택자에 대해서는 좀더 공부할 필요가 있겠다.

profile
OOMJ
제로부터 시작하는 프로그래밍&코딩
이전 포스트

[개발일지 53일차] toco 프로젝트2 - 사이트 리뉴얼(3)

다음 포스트

[개발일지 54일차] toco 프로젝트2 - 사이트 리뉴얼(5)

0개의 댓글