[Daily 탐구 과제] 코드스테이츠 PMB 17기 W7D1 #FE탐색 #네이버지도 #HTML #CSS #Javascript

sosohan_challenges·2023년 3월 21일
0
post-thumbnail

PM에게 필요한 개발지식을 학습하기 위해 클라이언트, 서버, DB흐름을 유추해봤던 프로덕트 "네이버 지도"를 프론트엔드 측면으로 탐색해보려 한다.

🔗 네이버 지도의 UX를 이해하고,그 행동에 따라 프로덕트 내부에 설계된 시스템의 작동 과정을 파악했던 지난 과제 링크

프론트엔드(FE) 탐색에 앞서, HTML CSS Javascript를 간단히 소개하면,

  • HTML의 역할: 구조 만들기(뼈대, 화면의 구조)
  • JavaScript의 역할: 상호 작용 증가 (동작, 프로그래밍 영역)
  • CSS의 역할: 웹사이트 스타일 지정(꾸미기, 스타일)


출처 - 웹 기초 설명 노트

네이버 지도의 랜딩페이지 분석

웹 페이지의 개발자 도구는 페이지에서 [F12]클릭
또는 [도구] 더보기 - [개발자 도구] 클릭하면 개발자 도구를 활용해 HTML, CSS, Javascript를 탐색해볼 수 있다.
더 자세히 개발자 도구에 대해 알고 싶으시다면 여기를 클릭해주세요.

[HTML] 화면의 구성 요소들이 어떻게 배치되어 있는지 구조를 정리해보자면,

  • 메인 루트 <html> : HTML 문서의 루트(최상위 요소)를 나타내므로 root 요소라고도 한다. 다른 모든 요소는 이 요소의 자손이어야 한다.

    • 하나의 요소와 그 뒤를 따르는 하나의 요소로 구성되어 있다.
  • <html lang="ko"/>

    • HTML 정보가 시작됨을 알리는 태그에 lang 값을 넣어주어 언어를 넣어주면, 브라우저가 글꼴을 선택하는 작업을 도와주기 때문에 경우에 따라 페이지 표시가 더 빨라지고, 검색 엔진처럼 기계적으로 HTML 문서를 읽는 경우 문서가 어느 언어로 이루어져있는지 쉽게 파악하여, 문서가 더 알맞게 다루어질 수 있게 도움을 준다.
    • <html> 요소에 유효한 lang 선언이 존재해야 <title>과 같은 <head> 내부의 중요한 메타데이터를 정확한 발음으로 표현할 수 있다.
  • <head><head/> : 이 요소는 페이지를 조회하는 사람들에게 보여주는 콘텐츠가 아닌 HTML 페이지에 포함하고 싶어하는 모든 재료들을 위한 컨테이너 역할을 한다.
    • 기계가 식별할 수 있는 문서 정보(메타데이터)를 담는다. 정보로는 문서가 사용할 제목, 스크립트, 스타일 시트 등이 있다.
    • 여기에는 keywords (en-US)와 검색 결과에 표시되길 원하는 페이지 설명, 콘텐츠를 꾸미기 위한 CSS, 문자 집합 선언 등과 같은 것들을 포함한다.
  • 섹션 루트 <body><body/> : HTML 문서의 내용을 나타낸다. 문서에는 이러한 요소가 하나만 있을 수 있다.
    • 페이지에 방문한 모든 웹 사용자들에게 보여주길 원하는 모든 컨텐트를 담고 있으며, 그것이 텍스트일 수도, 이미지, 비디오, 게임, 플레이할 수 있는 오디오 트랙이나 다른 무엇이든 될 수 있다.

[CSS] 각 구성 요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해보자면,

먼저 CSS에 대한 구조를 정리해보면

  • CSS 를 여러 페이지에 연결할 수 있으므로, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이며, 모두 동일한 스타일 시트로 CSS 스타일을 지정할 수 있다.

  • 외부 스타일 시트는 CSS 확장자가 .css 인 별도의 파일로 작성되고, HTML 요소에서 참조하는 경우가 있다.
    외부 스타일 시트 예시는 아래와 같다.

    <!DOCTYPE html>
        <html>
          <head>
            <meta charset="utf-8">
            <title>나의 CSS 실험</title>
            <link rel="stylesheet" href="styles.css">
          </head>
          <body>
            <h1>헬로우 월드!</h1>
            <p>이것은 나의 첫 번째 CSS 예제입니다</p>
          </body>
        </html>
  • <link rel="stylesheet" href="styles.css">와 같이 요소의 href 속성은 styles.css와 같은 css 외부 파일을 참조해야 한다.

    • CSS파일(styles.css) 예제

      h1 {
          color: blue;
          background-color: yellow;
          border: 1px solid black;
        }
      
      p {
          color: red;
        }
    • 예시)

개발자 도구 사용법 설명 - 유튜브

[CSS] 네이버 지도 검색창의 스타일을 자세히 살펴보면

  • 먼저 [개발자 도구] 에서 왼쪽 상단의 아이콘을 클릭한다. (아래 그림 참고)


  • 그 후 내가 스타일을 보고 싶은 영역을 클릭한다.

  • 선택한 영역의 요소가 [개발자 도구]에서 나타난다.

  • 영역의 요소 div를 확인하면 그 아래에 스타일에서 CSS 스타일을 자세히 볼 수 있다.

    • 여기서 검색창의 스타일을 살펴보면,
    	position: relative;
        z-index: 110;
        height: 42px;
        padding-left: 45px;
        border: 2px solid #19ce60;
        border-radius: 5px;
    • position 속성은 문서 상에 요소를 배치하는 방법을 지정한다.
    • z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정한다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮는다.
    • height속성은 요소의 높이를 지정한다.
    • padding 속성은 요소의 네 방향 안쪽 여백 영역을 설정한다. padding-top, padding-right, padding-bottom, padding-left의 단축 속성이다.
    • border 단축 속성은 요소의 테두리를 설정한다.
    • border-radius 속성은 요소 테두리 경계의 꼭짓점을 둥글게 만든다.
  • border 구성 속성 구문
  /* 스타일 */
  border: solid;
  /* 너비 | 스타일 */
  border: 2px dotted;
  /* 스타일 | 색 */
  border: outset #f33;
  /* 너비 | 스타일 | 색 */
  border: medium dashed green;
  /* 전역 값 */
  border: inherit;
  border: initial;
  border: unset;

출처 - border 속성에 대한 MDN 문서

[Javascript] 각 구성 요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해보자면,

  • <body> 태그 안에 <script src=".js파일명"></script>가 있다.
 <script src="runtime-es2015.06064bdaa2df7336affa.js" type="module"></script>


  • 자바스크립트 사용 중지를 체크하고 나니 동작이 아무것도 되지 않았다. 주변에 추천하는 식당 이미지를 클릭해도 아무런 동작이 일어나지 않았다.

프론트엔드 공부하면서 도움이 되었던 자료들

HTML 요소 참고 - MDN문서
HTML 태그 참고 - MDN문서
드림코딩-입문: HTML, CSS, Javascript


지난 몇 개월간 프론트엔드 개발 공부를 하면서 구조적인 것을 보기보단 Javascript 문법이랑 리액트 프레임워크, 라이브러리 등 구현에 열을 올렸다. 이번 과제는 너무 섬세하게 보기보다는, 구조적인 측면에서 다시 익히며 화면의 큰 구성에 대해 알아보는 것으로 러프하게 과제를 진행했다. 프론트엔드 구현할 때는 html 큰 구조는 VScode가 알아서 다 자동완성해주고 해서 자세히 안봤는데... 과제를 하려고 찾아보다 보니 굉장히 깊게 들어갈 것 같아서 일단 오늘은 큰 구조만 다시 복습했다.

profile
꾸준하게 잔디심는 정원

0개의 댓글