일지 #2 마크업(Markup)과 태그(Tag)

- 이전 글 -

2026.09.19 - [무한도전!!/홈페이지 만들자!!] - 일지 #1 서버(Server), 클라이언트(Client), 도메인(Domain), IP 주소

일지 #1 서버(Server), 클라이언트(Client), 도메인(Domain), IP 주소

 

 

 

..... 작심삼일도 아니고 벌써 어제 하루 공부했다고 질림;;

그래도 그냥 꼭 2일차 분량을 다 해야 할 필요는 없고 할 수 있는 곳까지만 하자 라는 마음으로 책상에 앉았다...

 

 

# 웹 개발을 위해 공부해야 할 기술

 

웹 개발은 크게 3가지 영역으로 나뉜다.

@ 기본 영역 : HTML, CSS, 자바스크립트, 깃/깃허브
@ 프런트엔드 영역
   - 제이쿼리, D3.js, 부트스트랩 등
   - 리액트, 앵귤러, 뷰 등
@ 백엔드 영역
   - 리눅스 서버, 네트워크, 데이터베이스 구축 기술
   - 파이썬, 자바, PHP, 닷넷 등
   - 노드제이에스, 스프링, 장고, 코드이그나이터 등

 

공부할 것들이 참 많구나.....

 

 

 

 

# 웹 개발의 기본 - HTML, CSS, 자바스크립트

 

1. HTML - 문서 구조

    웹 브라우저 창에 웹 문서의 내용을 보여 주는 데 필요한 약속

2. CSS - 디자인

    HTML로 만든 내용을 배치 (디바이스에 따라 화면이 자동으로 바뀌는 반응형 웹 디자인 등이 해당)

3. 자바스크립트 - 사용자와 상호작용

    클릭/스크롤 같은 사용자 동작에 반응 (팝업 창 등)

 

 

---

 

# 마크업하기(Markup)

 

.html 파일에 여러 줄의 문장이나 단어를 쓰면 단락 구분이 되지 않고 한줄로 표시된다.

웹 개발 기초
HTML
CSS
자바스크립트

 

이렇게 .html 파일을 작성하면 웹에서는 이렇게 보임.

 

* html 블럭 *

웹 개발 기초 HTML CSS 자바스크립트

 

 

 

따라서 웹 문서의 각 부분이 어떻게 표시되어야 하는지 내용마다 코드를 붙이는 것을 '마크업(Markup)'을 해주어야 한다.

(내용마다 붙이는 코드는 '태그(tag)'라고 한다)

 

제목 : <h1>
텍스트 단락 : <p>

 

이렇게 마크업을 해서 수정해주고 다시 창을 새로고침하면 용도에 맞게 태그가 사용된다!

 

<h1>웹 개발 기초</h1>
<p>HTML</p>
<p>CSS</p>
<p>자바스크립트</p>

 

 

* html 블럭 *

 

웹 개발 기초

HTML

CSS

자바스크립트

 

 

---

 

# 웹 개발자 도구

 

[F12}를 누르면 웹 개발자 도구를 열 수 있다.

탭 중에서 [Elements(요소)]를 누르면 왼쪽에는 HTML 코드가 나타나고, 오른쪽에는 CSS 속성이 보인다.

 

 

 

따라하다보니 벌써 2일차 분량을 완료했다!

아싸~!!

 

 

 

- 다음 글 -

2026.09.24 - [무한도전!!/홈페이지 만들자!!] - 일지 #3 HTML 기본 문서 만들기 (HTML 문서, 시맨틱 태그)

일지 #3 HTML 기본 문서 만들기 (HTML 문서, 시맨틱 태그)