[ 본 포스팅은 PC 환경에서 보시길 권장합니다 ]
오늘은 개발자 도구를 통해 29cm 웹 페이지의 구조와 디자인 요소,
그리고 페이지 내 인터랙션을 분석해보는 과제를 해봤다.
HTML : 화면의 구성 요소들이 어떻게 배치되어 있는지 구조를 정리해 분석해보자.
HTML은 웹페이지의 뼈대를 만드는 언어이다. 뼈대를 형성하기 위해 HTML은 기본 구조인 <head></head> 와 <body></body>로 구성된다. head태그는 웹페이지의 정보를 담고 있는 범위이고, body태그는 웹페이지의 구조를 담고 있는 범위로 볼 수 있다. 그럼 29cm에서는 head태그와 body태그가 어떻게 구성되어 있는지 살펴보자.
- <head></head> : "감도 깊은 취향 셀렉트샵 29CM" 이라는 title 정보를 먼저 확인할 수 있었다.
- <meta> 태그는 웹페이지의 정보를 담고 있는 영역으로, 검색엔진에서 노출되는 홈페이지에 대한 정보를 제공하기 위한 태그이다. (아래 이미지 참조)
- meta태그 안에 http-equiv를 볼 수 있는데, 이는 항목명을 의미하고, 웹브라우저가 서버에 명령을 내리는 속성으로 이해할 수 있다. content는 meta 정보의 내용을 지정하고, name은 몇 개의 meta 정보의 이름을 지정할 수 있는 명령어이다. 또 property는 페이스북에 노출될시 보여지게 되는 정보에 관련된 태그이다.
- <link> 태그는 외부 문서를 연결해주는 태그를 의미하고, 뒤에 rel은 현재 문서와 외부 문서와의 관계를 의미한다.
- <script>는 자바스크립트를 연결해준다.
- <style> 태그는 스타일을 지정해주는 태그로, css 속성을 HTML 내에 직접 쓸 때 사용한다고 한다.
- <meta> 태그는 웹페이지의 정보를 담고 있는 영역으로, 검색엔진에서 노출되는 홈페이지에 대한 정보를 제공하기 위한 태그이다. (아래 이미지 참조)
- <body></body> : 웹 페이지의 콘텐츠 본문에서 header, nav, section 등의 요소로 어떻게 페이지가 구성되어 있는지 간략하게 나타내보았다.
- <header> 태그가 있는 경우가 많은데, 29cm의 경우 header 태그는 찾아볼 수 없었다. 구조상 추측되는 header 태그 영역에는 <ul>로 구성되어 있는 것을 볼 수 있었다. (아래 이미지 참조)
- <ul>은 순서가 필요 없는 목록을 의미하고, 29cm에서는 다양한 카테고리 탭을 선택할 수 있는 영역으로 채워졌다.
- <nav> 태그는 메뉴를 보여주거나 목차를 만들 때 주로 사용되고, 목차 중 하나를 누르면 해당 페이지로 넘어가는 명령어이다.
- <section>은 body 내에서 페이지 콘텐츠를 담고 있는 영역이다. 29cm의 메인에는 다양한 이미지, 콘텐츠로 구성되어있었다.
- <div> 태그도 코드를 볼 때 많이 등장했는데, div는 글자나 사진 등 콘텐츠들을 묶어서 css 스타일을 적용할 때 사용하는 태그라고 한다.
- <strong> 태그는 중요성을 나타낼때 많이 사용한다고 한다. 29cm에서는 "마이페이지"(로그인/회원가입) 아이콘에 표시되어있었다.
CSS : 각 구성 요소들이 어떠한 모양을 하고 있는지 스타일을 정리해 분석해보자.
확인할 수 있었던 css 항목은 다음과 같은 것들이 있었다:
- Margin 여백
- padding 패딩은 요소의 영역을 확장하는 역할
- box-sizing 테두리 영역 크기 결정
- word-break 단어의 분리 결정
- font-size 글자 크기
- font-family 글씨체 선언
- font-weight 글자 두께
- color 색상 값
- display 노출방법
JavaScript : 각 구성 요소들이 가지고 있는 특정한 동작이 무엇인지를 정리해 분석해보자.
<body>안에 있는 <script>로 확인해보았다.
추측이지만, 확인할 수 있었던 내용을 정리해보자면 다음과 같은 항목들이 있었다:
- 유튜브 링크 연결 및 트랙킹을 위한 코드
- 구글태그매니저 연결을 위한 코드
- GA 연결 코드
- 결제시스템 연결을 위한 코드
- '와이더플래닛'이라는 퍼포먼스 마케팅 플랫폼 연결을 위한 코드
- 'criteo' 라는 커머스 미디어 플랫폼 연결을 위한 코드
- SNS 연결을 위한 코드
개발 지식이 한~참 부족해서 과제 하는 동안 괴롭기도 했다..그래도 어떻게 페이지의 코드를 읽어봤다..
(이번주 어떡하지 정말...)
.
.
.
화이팅..!
728x90
'PM삐약이🐥' 카테고리의 다른 글
| 무신사 서비스 유형 탐구🔍 네이티브 앱, 하이브리드 앱, 웹 앱 방식을 선정하는 기준 2탄 | 코드스테이츠 PMB 17기 W7D2 (0) | 2023.03.22 |
|---|---|
| 네이티브 앱, 하이브리드 앱, 웹 앱 방식을 선정하는 기준 1탄 | 코드스테이츠 PMB 17기 W7D2 (0) | 2023.03.22 |
| 서버, 클라이언트, 그리고 프레임워크 1탄 | 코드스테이츠 PMB 17기 W7D1 (0) | 2023.03.21 |
| 코로나19와 비만율의 관계는? 데이터 시각화와 DDDM 2탄 | 코드스테이츠 PMB 17기 W6D4 (0) | 2023.03.20 |
| 데이터 시각화와 DDDM 1탄 | 코드스테이츠 PMB 17기 W6D4 (0) | 2023.03.17 |
