'서핏'의 프론트엔드 요소 분석

jw.jeong·2022년 6월 29일

CODESTATES PM부트캠프 코드스테이츠

코드스테이츠 PM_부트캠프

목록 보기

25/28

프론트엔드

HTML : 구조
CSS : 표현
JavaScript : 동작, 기능 (행동)

HTML (Hyper Text Markup Language)

웹 컨텐츠의 의미와 구조 정의

Hyper : 정보가 다중으로 연결
Hyper Text : 참조(하이퍼링크)를 통해 한 문서에서 다른 문서로 즉시 접근 가능한 텍스트 (비선형적 텍스트)
Markup
Language : 태그를 이용하여 데이터 구조 명시 -> HTML, Markdown

기본 구조

<!DOCTYPE html>
<html lang="ko">
<head> <!-- 문서 정보, 브라우저에서 보이지 X, CSS 선언, 외부 로딩 파일 지정 -->
    <meta charset="UTF-8"
    <title>Document</title>
</head>
<body> <!-- 브라우저에 보임, 실제 내용 -->
    
</body>
</html>

DOM(Document Object Model) 트리

구조화된 표현 (Structured Representation) 제공, 언어가 DOM 구조에 접근 방법 제공 -> 문서 구조, 스타일 내용 변경
동일한 문서 표현, 저장, 조작 방법 제공
Web Page의 객체 지향 제공

요소 (Element)

<h1>contents</h1> <!-- 여는/시작 태그, 닫는/종료 태그 -->

태그와 내용
태그 : 내용을 감싸는 것, 정보 성격과 의미 정의
내용 X 태그 : br, hr, img, input, link, meta
중첩 가능 : 오류 반환 X, 레이아웃이 깨진 상태로 출력 -> 디버깅 힘듦

속성 (Attribute)

<a href="https://google.com"></a> <!-- 속성명="속성값", 공백 X, "" -->

태그 부가적인 정보 설정 -> 경로, 크기
요소 시작 태그에 작성, 이름과 값이 한 개의 쌍
태그와 상관 없이 사용 가능한 속성 (HTML Global Attribute)
- id, class / hidden / lang / style / tabindex / title

시맨틱 태그

non semantic : div, span
header (머릿말), nav (내비게이션), aside (사이드, 메인과 관련성 적은), section (일반적인 구분, 컨텐츠 그룹 표현), article (독립적으로 구분되는 영역), footer (마지막 부분)
'의미' -> 가독성, 유지 보수

CSS (Cascading Style Sheet)

스타일, 레이아웃을 통해 문서 표시 방법 지정

h1 { /* 선택자 */
    color: blue /* 속성(property): 값(value) */
    font-size: 15px
}

Box Model

box-sizing : content-box
- padding 제외 순수한 contents 영역
border-box로 설정

마진 상쇄 : block A top, block B bottom margin이 큰 margin value로 결합(겹침)

Display

Block
- 줄 바꿈
- 화면 크기 전체 가로 폭
- Block 안 Inline 가능
Inline
- 줄 바꿈 X
- Content 너비만큼 가로 폭
- width, height, margin-top, margin-bottom 지정 X
- 상하 여백 : line-height
Inline-Block
- block, inline 모두
- inline처럼 한 줄에 표시 가능
- block처럼 width, height, margin 모두 지정 O
None
- 화면에 표시 X, 공간 X
- hidden : 공간 O, 표시 O

Position

static : 기본 값 (기준 위치)
relative
- 자기 자신 static 위치 기준
- 차지 공간 : static과 same
absolute
- 간 차지 X
- 가장 가까이 있는 부모 요소 기준 이동
- 과거 위치 공간 : 존재 X -> 독자적
- 격리된 UI 기능 제작
fixed
- 공간 차지 X
- Viewport 기준 이동
- 스크롤 시에도 항상 같은 곳에 위치

JavaScript

브라우저
- 웹 서버에서 이동, 클라이언트 ~ 서버 양방향 통신
- HTML 문서, 파일 출력 GUI 기반 SW
- 인터넷 컨텐츠 검색, 열람
JavaScript 필요성
- 브라우저 화면 동적
- 브라우저 조작 유일 언어
브라우저 기능
- DOM 조작
  - 문서 (HTML) 조작
- BOM 조작
  - navigator, screen, location, frames, history, XHR
- JavaScript Core (ECMAScript)
  - Data Structure (Object, Array), Conditional Expression, Iteration

DOM (Document Object Model)

DOM
- HTML, XML 문서 다루는 문서 프로그래밍 인터페이스
- 문서 구조화, 구조화된 구성 요소 -> 하나 객체로 취급 : 논리적 트리 모델
- 각 요소 -> 객체 (object) 취급
- 단순 속성 접근, 메서드 활용 + 프로그래밍 언어적 특성 활용
- 주요 객체
- 해석
  - 파싱 (Parsing) : 구문 분/해석 -> DOM Tree 제작 과정
- 조작
BOM
- Browser Object Model
- JavaScript ~ Browser 소통 모델

조작

순서 : 선택 (Select) -> 변경 (Manipulation)
상속 구조
- EventTarget : Event Listener 가질 수 있는 객체가 구현한 DOM 인터페이스
- Node : 여러 가지 DOM 타입들이 상속하는 인터페이스
- Element : Document 안 모든 개체 상속 -> 가장 범용적 기반 클래스 => 부모 Node, 그 부모 EventTarget 속성 상속
- Document : 브라우저 불러온 웹 페이지, DOM 트리 진입점 (entry point)
- HTMLElement : 모든 종류 HTML, 부모 element 속성 상속
선택
변경
- Creation
  - Document.createElement() : 작성한 태그 명 HTML 생성 반환

Event

~하면 ~한다

handler
취소
- Event.preventDefault() : 현재 이벤트 기본 동작 중단

서핏

커리어 지식 플랫폼

HTML

<html lang="ko">
<head>...</head>
<body class="body-scrollbar theme-light is--loaded">...</body>
</html>

header

<header class="header-comp">
	<div class="header-inner">
    	<div class="global-menu-area">...</div>flex
        <div tableindex="-1" class="sub-menu-area">...</div>
    </div>
</header>