728x90
반응형
SMALL
작성일: 2026.5.19
📌 오늘 학습한 주제
- 풀스택 프론트엔드 역량 강화 / HTML5 기본 구조, 글로벌 속성, 다양한 입력 양식(Form) 및 공간 분할 태그 실습
💡 오늘 배운 것
-> 클라이언트(사용자)가 원하는 웹페이지나 데이터에 접근하기 위해 서버의 IP 주소와 상세 포트, 그리고 정확한 폴더 경로를 명시하여 요청을 보내는 과정
->HTTP 상태 코드(Status Code)
- HTML(HyperText Markup Language) : 웹페이지의 뼈대를 만드는 가장 기본적인 마크업 언어
[작성코드]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align ='center' id='info'>
섭섭이와 함께하는 즐거운<br/>
Front-End (html, css, javascript)
</div>
<header>
<nav>
<a href="https://example.com" target="_blank">새 창으로 이동 링크</a>
</nav>
</header>
<section>
<h1>주요 실습 내용</h1>
<p>여기는 일반적인 본문 텍스트 문단을 작성할 때 사용하는 p 태그입니다.</p>
<img src="logo.png" alt="서비스 로고 이미지">
<button type="button" class="btn-main">클릭 버튼</button>
</section>
<br/><br/> <label>현재시간 : </label>
<span id="time"></span>
<script>
// 1. 기존 코드: ID가 'info'인 요소를 탐색
document.getElementById('info');
// 2. 이미지 속 신규 추가 코드:
// current = new Date();
// -> 컴퓨터의 현재 날짜와 시간 정보를 가진 객체(상자)를 생성하여 current 변수에 저장
current = new Date();
// console.log("debug >>> current , ", current);
// -> 브라우저 개발자 도구(F12)의 콘솔창에 디버깅(확인)용으로 현재 시간 데이터를 출력
console.log("debug >>> current , ", current);
// document.getElementById('time').textContent = current.toLocaleTimeString();
// -> (1) HTML 문서 전체에서 id가 'time'인 <span> 태그를 찾아서 붙잡은 뒤
// -> (2) 그 안의 텍스트 내용(.textContent)을
// -> (3) 사용자가 보기 편한 국문 시간 형태의 문자열(current.toLocaleTimeString())로 바꾸어 채워 넣음
document.getElementById('time').textContent = current.toLocaleTimeString();
</script>
</body>
</html>
🧱 핵심 개념 3가지
- 태그(Tag): <> 기호로 감싸진 코드로, 웹 브라우저에게 "이 부분은 제목이다", "이 부분은 이미지다"라고 알려주는 역할을 합니다. 보통 시작 태그(<p>)와 종료 태그(</p>)가 쌍으로 존재합니다.
- 트리 구조 (DOM): HTML 문서 안의 태그들은 서로 부모와 자식 관계를 가지며 거대한 나무(트리) 같은 구조를 이룹니다.
- 웹 표준과 시맨틱 태그: 단순히 화면을 예쁘게 꾸미는 것이 아니라, 의미에 맞는 올바른 태그(예: <header>, <article>, <nav>)를 사용하여 브라우저와 검색엔진이 문서 구조를 명확히 이해할 수 있도록 작성하는 것이 중요합니다.
🏷️ 자주 쓰는 필수 태그 요약
- 구조 정의: <html>, <head>(메타데이터 정보), <body>(실제 화면에 보이는 영역)
- 텍스트: <h1> ~ <h6>(제목, 숫자가 작을수록 큼), <p>(본문 문단), <span>(줄 바꿈 없는 텍스트 영역)
- 레이아웃/그룹화: <div>(가장 흔하게 쓰는 블록 영역 분할 태그)
- 링크 및 미디어: <a>(페이지 이동 링크), <img>(이미지 삽입)
- 목록 및 입력: <ul>/<li>(불릿 리스트), <input> / <button> (사용자 입력 필드 및 버튼)
- <script>는 HTML 문서(document)를 제어하기 위한 전용 구역이며, 그 안의 코드는 특정 요소를 붙잡아 동적으로 화면을 바꾸거나 움직이게 만드는 '작업 지시서'입니다.
- <span> 태그 :인라인(inline) 형식으로 분할
🧩 CSS 적용법
-> css 클래스 선택자 : class로 지정해주고 css파일 연결후 해당 클래스에 대한 css 작성
Bootstrap: 복잡한 CSS 코딩 없이 HTML 태그에 약속된 class 이름만 적어주면 반응형 웹사이트가 완성되는 'UI 디자인 조립 키트'
오늘의 회고: 이전에 프론트엔드를 경험해 본 적이 있지만, 이번 기회를 통해 HTML의 기본 뼈대와 레이아웃 구조, 그리고 기본적인 웹 서비스 통신 메커니즘을 아래 레이어부터 다시 확실하게 잡는 계기가 되었다. 특히 URL 구조와 HTTP 상태 코드의 명확한 인과관계를 학습하면서, 과거에 무심코 지나쳤던 프론트엔드와 백엔드 간의 데이터 흐름을 아키텍처 관점에서 재정립하는 유익한 시간이었다. 오늘 다진 탄탄한 기본기를 발판 삼아, 내일부터 진행될 자바스크립트의 깊이 있는 핵심 원리들도 막힘없이 파고들어 완벽한 풀스택 역량으로 확장해 나갈 것이다.
728x90
반응형
LIST
'LG CNS AM INSPIRE CAMP' 카테고리의 다른 글
| <LG CNS 5기> 6일차 TIL :React 컴포넌트 설계와 현대 자바스크립트(ES6+) 핵심 문법 (0) | 2026.05.26 |
|---|---|
| <LG CNS 5기> 5일차 TIL : 자바스크립트 제어문 및 비동기 통신(Promise / Async-Await) (0) | 2026.05.22 |
| <LG CNS 5기> 4일차 TIL : 동적 DOM 렌더링 및 이벤트 처리 (0) | 2026.05.21 |
| <LG CNS 5기> 3일차 TIL HTML5 Core 레이아웃 제어: Form, Box Model, Table, Media Query (0) | 2026.05.20 |
| [Day 1] LG CNS AM Inspire Camp 5기 TIL (0) | 2026.05.18 |