실무프로젝트-1주차-1일차

이주열·2022년 7월 1일

학습한 내용

1주차 - 회사 사이트 만들기

  • 리소프트 웹사이트( www.resoft.kr)를 참고
  • 기간 : 7월 1일부터 7월 8일
  • 폰트는 Noto Sans Kr, sans serif 구글 기본 폰트를 사용
  • 색은 pink #ee72d8, navy #04088a 를 기본적으로 사용

요구 화면과 기능

  • 상단 메뉴바 (메인화면) : 마우스를 올렸을 때 펼쳐지는 기능
  • 회사소개화면 (소개글, 연혁, 조직도, 오시는길) , 사업현황화면 (프로젝트), 정보마당화면 (공지사항, FAQ)

  1. 역할 분담
    먼저, 조원들의 역할 분담을 하였다.
    요구 사이트의 각 센션별로 분류하여 역할 분담
    1) 메인 배너
    2) 카드 (사업 영역)
    3) 슬라이드 카드(프로젝트)
    4) 아이템(에코스), 중간 로고
    5) 아이콘(고객사)
    6) 지도, 푸터
    으로 나누었고, 내가 맡은 부분은
    6) 지도, 푸터 영역이다.

  2. 완성 모습 확인 하기
    1)지도 섹션

    2) 푸터 섹션

  3. 코드 작성
    지도 섹션
    1) 기본 골격 구조 잡기

  • 큰 div영역 안에 지도 div와 글 div로 나누어 구성
    2) 카카오 지도 api 사용
    3) 글 div부분 css적용
    4) 지도 섹션에서 요구되는 기능이 지도와 글이 서서히 나타내기

3-1) 지도 div
카카오 지도 api 사용법

<div id="map" class="indexKakaoMap wow fadeIn" data-wow-delay="0.3s" style="position:relative; overflow:hidden; background: url(http://t1.daumcdn.net/mapjsapi/images/2x/bg_tile.png); visibility:visible; animation-delay: 0.3s; animation-name:fadeIn;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=027b7e5db240a01344d08087c7742cd4"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=027b7e5db240a01344d08087c7742cd4"></script>
    <script>
        var mapContainer = document.getElementById('map'), // 지도를 표시할 div 
            mapOption = { //지도를 생성할 때 필요한 기본 옵션
                center: new kakao.maps.LatLng(35.871691843254716, 128.62496478375644), // 지도의 중심좌표
                level: 3 // 지도의 확대 레벨
            };
    
        // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
        var map = new kakao.maps.Map(mapContainer, mapOption); //지도 생성 및 객체 리턴
    
        var imageSrc = './images/지도마커.png', // 마커이미지의 주소입니다    
        imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
        imageOption = {offset: new kakao.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
          
        // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
        var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
            markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644); // 마커가 표시될 위치입니다
    
        // 마커를 생성합니다
        var marker = new kakao.maps.Marker({
            position: markerPosition, 
            image: markerImage // 마커이미지 설정 
        });
    
        // 마커가 지도 위에 표시되도록 설정합니다
        marker.setMap(map);
    </script>

3-2) 글 div

<div class="map-info-wrap wow fadeInRight" data-wow-delay="0.5s" style="visibility:visible; animation-delay: 0.5s; animation-name: fadeInRight;">
            <div class="map-info">
                <p>TEL</p>
                <a href="tel:053-475-2100;" style="cursor: text"><p>(053) 475-2100</p></a>
            </div>
            <div class="map-info">
                <p>FAX</p>
                <a href="javascript:void(0);" style="cursor:text"><p>(0504) 257-5966</p></a>
            </div>
            <div class="map-info">
                <p>E-MAIL</p>
                <p>call@resoft.kr</p>
            </div>
            <div class="map-info">
                <p>ADDRESS</p>
                <p>(41260) 
                    <br>
                    대구광역시 동구 동구대로 465, 대구스케일업허브 (DASH) 704호
                    <br>
                     (주)리소프트
                </p>
            </div>
        </div>

3-3) css 작성

/* 전체 설정 */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
a {
    text-decoration: none;
    color: #000;
}
* {
    box-sizing: border-box;
}
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: none;
}
br {
    opacity: 0;
}
/* 지도 설정 */
.map-wrap{
    margin: 200px 200px;
    margin-left: 200px;
    display: flex;
    gap: 90px;
}

.map-wrap .map-info-wrap{
    display: flex;
    gap: 35px;
    flex-direction: column;
    font-size: 18px;
    margin-top: 75px;
}
.map-wrap .map-info-wrap .map-info > p:first-child {
    font-weight: 600;
    margin-bottom: 15px;
}
.map-wrap .map-info-wrap .map-info a p, .map-wrap .map-info-wrap .map-info p:last-child {
    color: #7b7b7b;
}
.map-wrap .map-info-wrap .map-info p:last-child {
    line-height: 25px;
}
.indexKakaoMap{
    width: 65%;
    height: 45vw;
    max-width: 1400px;
}
.fadeIn{
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
  1. 실행
  • 아직 글씨 폰트나, css를 다 적용하지 못하여 참고 사이트와 다른 모습이 있다.

학습한 내용 중 어려웠던 점 또는 해결못한 것들

지도 섹션 마무리

  • 지도 사이즈 설정
  • 폰트 설정
  • 나타내는 기능
    푸터 섹션 작성하기

해결방법 작성

학습 소감

오늘은 이때까지 배운 내용을 토대로 팀 프로젝트를 시작하였다. 조원들과 함께 상의해 프로젝트 진행 방향과 역할 분담 및 일정을 조율하였다. 내가 맡은 지도 영역에서 api 사용하는 부분이 처음에는 적용이 안 되어서 당황했지만, 로컬에서 실행된다는 것을 잊고 그냥 적용하여 발생하는 문제였다. 아직 다 완성이 안 되었지만, 점차 참고 사이트와 같이지는 것을 보고 있으니 재미있었다.

profile
이주열
예비 프론트엔드 개발자
이전 포스트

React-5일차

다음 포스트

실무프로젝트-1주차-2일차

0개의 댓글