본문 바로가기
🏕️ Bootcamp

| PMB 12기 | W7D1 | 코드스테이츠 HTML, CSS, JavaScript 웹 프론트엔드 탐색

by 기획자 슈 2024. 11. 12.

최초 작성일 : 2022.06.22

 

 

 

© CODESTATES

 

 

코드스테이츠 검색 후에 나오는 랜딩 페이지의 HTML, CSS, JavaScript 웹 프론트엔드를 탐색해보려고 한다.

 

CODESTATES Web Front-end

 

.

웹 페이지의 개발자 도구는 페이지에서 [F12]를 누르면 확인할 수 있다.

 

개발자 도구를 활용해 HTML, CSS, JavaScript를 탐색해보자.

 

 

HTML

HTML (Hyper Text Mark up Language)
<head>
  • 문서의 형태, 타이틀 정보, 스타일 정보, JS에 대한 정보가 들어가는 부분
<body>
  • 정보 전달을 위한 화면에 직접 노출되는 데이터가 들어가는 부분

 

 

⚙ HTML 구조 한눈에 보는 코드

[F12] 개발자 도구 - Console - 코드 붙여넣기

['div', 'span', 'ul', 'li', 'dd', 'dl', 'section', 'h1', 'a', 'img', 'form', 'button', 'header', 'footer', 'input', 'p'].forEach(e => {
    document.querySelectorAll(e).forEach(element => {
        element.style.outline = "1px solid dodgerblue"
    })
})
 
 
 

⚙ HTML 구조 한눈에 보기

 
 

⚙ Web Developer 프로그램을 통해서 CSS를 해제한 코드스테이츠의 HTML 랜딩페이지

 
 

 

CSS

CSS (Cascading Style Sheets)
  • 스타일을 위한 용어, 화면, 구조와 색상, 디자인 등을 다루는 언어

 

 

⚙ CSS 개요 한눈에 보기

[F12] 개발자 도구 - 환경설정 옆 더보기 - More tools - CSS Overview

코드스테이츠의 CSS 개요 요약을 보면 요소는 1,705개로 색상 정보, 글꼴 정보, 미디어 쿼리를 확인 할 수 있다.

 

 

JavaScript

 
  • 디자인만 표현 가능한 HTML, CSS 뿐만 아니라 동작이나 데이터 처리 수행을 위해
  • 웹 브라우저상에서 다양한 기능과 알고리즘의 구현이 가능한 JavaScript

⚙ JavaScript 해제하기

[F12] 개발자 도구 - 환경설정 Preferences - Debugger - Disable JavaScript

 

 
 

⚙ JavaScript 해제한 랜딩페이지

 

Disable JavaScript을 하자 반응하지 않은 랜딩페이지의 요소는 다음과 같다.

1️⃣ 마이페이지 클릭시 You need to enable JavaScript to run this app.

2️⃣ 이미지 배너 움직임과 < >

3️⃣ 직무 부트캠프, 왜 코드스테이츠일까요? 의 더보기

4️⃣ 도전에 성공한 수료생들의 후기가 이어지고 있어요 < >

5️⃣ 함께한 수료생 현황을 공개합니다의 이미지

6️⃣ 수료생들이 취업한 기업들

7️⃣ 코드스테이츠 STORY < >

8️⃣ Education for the real world ↑ 위로가기

9️⃣ 문의하기

 

HTML의 기본구조 시멘틱 태그엔 <header>, <nav>, <section>, <article>, <aside>, <footer>, <div>가 있다.

사이트의 제목과 로고, 검색 창 등이 있는는 헤더(header) 부분과 여러 내용이 있는 콘텐츠(content) 부분, 본문 외의 내용을 나타내는 사이드 바(side bar), 그리고 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 부분이 문서의 대부분이며, 사이트에 따라 한두 가지 영역이 추가된다.

 
<header>
  • <head>는 <html>바로 밑에 쓰이지만 <header>는 <body>안에 있기 때문에 둘은 전혀 다르며 주로 머리말, 제목을 표현하기 위해 쓰임
<nav>
  • HTML5에서 새롭게 생기 시맨틱 태그이고 네비게이션이라고 불림
  • 콘텐츠를 담고 있는 문서를 사이트간에 서로 연결하는 링크를 담당
<section>
  • <body> 영역은 콘텐츠를 <header>, <section>, <footer>의 3가지 공간에 콘텐츠를 저장하는데 그 중 <section>은 본문 콘텐츠를 담고 있음
<article>
  • <section>이 콘텐츠를 분류한다면 이 <article> 태그안에는 실질적인 내용 상입
<aside>
  • 사이드바라고 불르기도 하며, 본문 이외의 내요을 담고 있는 시맨틱 태그
<footer>
  • 화면의 구조 중 제일 아래에 위치하고, 회사소개 / 저작권 / 약관 / 제작정보 기입
<div>
  • HTML5에 와서 글자나 사진등 콘텐츠들을 묶어서 CSS 스타일을 적용시킬때 사용

참고자료에 있는 HTML의 기본구조 시멘틱 태그를 참고해 정리했다.

이렇게 많은 HTML이 있지만, 코드스테이츠의 랜딩페이지를 다 정리하기엔 힘들어서, 간결하게 정리했다.

HTML 구조 한눈에 보는 코드도 한번 사용해보면 좋은 것 같다!

 

 

'🏕️ Bootcamp' 카테고리의 다른 글

| PMB 12기 | W8D2 | 스크럼 가이드 정리  (2) 2024.11.12
| PMB 12기 | W8D1 | 무다 MOODA 유저 스토리, 백로그 작성  (2) 2024.11.12
| PMB 12기 | W7D4 | 멜리즈 meliz UI, 클라이언트, 서버, DB 다시보기  (6) 2024.11.12
| PMB 12기 | W7D3 | 카페24 오픈 API 살펴보기  (4) 2024.11.12
| PMB 12기 | W7D2 | 앱 유형 4가지 분석  (2) 2024.11.12

관련글

티스토리툴바