본문 바로가기
LG U+ Why Not SW Camp 8기/학습 로그

공부 일지 #40 | HTML과 CSS 배우기

@studying:)2025. 9. 21. 14:34

학습 날짜: 2025.09.18 ~ 2025.09.19

오늘은 웹 기술의 기본 구조와 원리, 그리고 웹 페이지를 구성하는 핵심 요소들(HTML, CSS, JavaScript)을 학습했다. 

 

1. 웹 기술의 이해

1.1 정적 페이지 vs 동적 페이지

  • 정적 페이지: 서버에 저장된 그대로 사용자에게 전달되는 페이지
  • 동적 페이지: 사용자의 요청이나 상황에 따라 서버/프로그램이 처리 후 생성되는 페이지

1.2 HTTP (HyperText Transfer Protocol)

  • 정의: 하이퍼텍스트(링크로 연결되는 문서)를 주고받기 위한 약속(규약)
  • 역할: HTML 같은 문서를 전달할 때 사용
  • 대표 웹서버: Apache(아파치)
  • 웹서버는 정적 자원만 처리 가능 → 동적 자원 요청은 WAS(Web Application Server, 예: Tomcat)으로 전달

웹서비스 구조

1.3 스레드(Thread)와 컨텍스트 스위칭(Context Switching)

  • Thread: 하나의 프로세스 내에서 실행 흐름을 나누는 모델
  • 장점: CPU 코어가 많을수록 여러 스레드를 병렬로 실행할 수 있어 성능 향상
  • Context Switching: 현재 실행 중인 작업 상태를 저장하고, 다른 작업으로 전환하는 과정

1.4 NGINX

  • 동시 접속 처리에 특화된 웹서버
  • AWS 환경에서는 Apache보다 NGINX가 더 많이 사용됨
  • 주요 역할:
    • HTTP 서버 (정적 파일 처리)
    • Proxy 서버 (요청 분산)
    • 비동기 처리(Event-driven 방식)

1.5 프레임워크

  • Back-end: Spring, Django, Node.js
  • Front-end: Angular, React, Vue.js

2. 웹 서비스 기초 지식

2.1 URL (Uniform Resource Locator)

  • 구성 요소:
    1. 프로토콜 (http, https 등)
    2. 호스트명 (예: www.naver.com)
    3. 포트 번호 (HTTP = 80, HTTPS = 443)
    4. 경로(Path)
    5. 쿼리스트링(Query String, ? 시작, &로 구분)

👉 반드시 외워야 할 중요 개념!

2.2 HTTP Method

  • GET: 정보 요청 (URL에 데이터 노출) → 예: 게시판 목록 조회
  • POST: 정보 전달/저장 (데이터는 URL에 노출되지 않음) → 예: 회원가입, 로그인
  • PUT: 전체 수정 → 예: 회원정보 전체 수정
  • DELETE: 삭제 → 예: 회원정보 삭제

2.3 HTTP Request & Response

  • Request Header: Accept, Accept-Charset, User-Agent 등
    • MIME Type: 데이터 형식을 알려주는 규약 (예: text/html, application/json)
    • 👉 Accept 헤더는 MIME Type을 지정, 반면 Accept-Charset(문자 인코딩), User-Agent(브라우저 정보)는 MIME Type과 별개
  • Response Code
    • 1xx: 요청 처리 중
    • 2xx: 성공 (예: 200 OK)
    • 3xx: 리다이렉션
    • 4xx: 클라이언트 오류 (예: 404 Not Found)
    • 5xx: 서버 오류

3. HTML 기본

3.1 HTML (HyperText Markup Language)

  • 문서를 구조화하는 언어
  • 링크를 통해 문서들이 연결됨
  • 비순차적 접근 가능

3.2 태그(Tag)

  • Block-level 요소: 공간을 독립적으로 차지, 옆에 배치되지 않음 (예: <div>, <header>, <footer>, <nav>)
  • Inline 요소: 옆 공간이 있으면 같은 줄에 배치됨 (예: <a>, <img>, <button>, <input>)
  • Element: <opening tag> content <closing tag>
    • DOM(Document Object Model)에서 하나의 노드(Node)에 해당

3.3 HTML 실습

<!DOCTYPE html> <!-- HTML5 문서 선언 -->
<html>
<head>
  <meta charset="utf-8"> <!-- 문자 인코딩: UTF-8 -->
  <meta name="viewport" content="width=device-width"> <!-- 반응형(모바일 대응) 설정 -->
  <title>JS Bin</title> <!-- 브라우저 탭에 표시될 제목 -->
</head>
<body>
  <!-- ol = Ordered List(순서 있는 목록), li = List Item(목록 항목) -->
  <ol>
    <li id="first_id"> First </li> <!-- 첫 번째 항목, id 속성 있음 -->
    <!-- id는 주민번호처럼 고유해야 함. 같은 이름을 문서 안에서 중복 사용 불가 -->
    <li> Second </li> <!-- 두 번째 항목 -->
  </ol>
  
  <!-- 버튼 2개 -->
  <button> Button 1 </button><br> <!-- 줄바꿈 태그는 <br> -->
  <button> Button 2 </button>
  
  <!-- 내용 없는 구역(div), class로 스타일 구분 가능 -->
  <div class="region_a"></div> <!-- class는 여러 요소에 중복 적용 가능 (그룹화용) -->
  <div class="region_b"></div>
  
  <!-- 링크 모음 -->
  <div class="region_c">
    <a href="http://naver.com">Naver</a> <!-- Naver로 이동 -->
    <a href="http://google.com">Google</a> <!-- Google로 이동 -->
    <a>Nothing</a> <!-- 링크 없는 경우 -->
  </div>
</body>
</html>

4. CSS 기초

4.1 CSS (Cascading Style Sheets)

  • HTML: 구조(뼈대)
  • CSS: 디자인(살)
  • 글자, 색상, 배경, 배치 등을 꾸밈

4.2 선택자(Selector) 실습

/*
selector{
	property: value;
}
*/

/* All Tags Selecting */
* {
  color: green; /* 문서 안의 모든 글자 색을 초록색으로 */
}

/* li 태그 선택자 */
li {
  color: blue; /* 목록 항목(li)의 글자 색을 파란색으로 */
}

/* id 선택자 (#) → 고유 요소 지정 */
#first_id {
  color: red; /* id가 first_id인 항목만 빨간색 */
}

/* class 선택자 (.) → 여러 요소에 공통 적용 가능 */
.region_a {
  background: yellow; /* region_a 영역 배경을 노란색으로 */
}

.region_b {
  color: white;        /* 글자 색은 흰색 */
  width: 100px;        /* 가로 길이 100px */
  height: 100px;       /* 세로 길이 100px */
  background: black;   /* 배경을 검은색으로 */
  /* → 검은 박스 안에 흰 글자가 들어가게 됨 */
}

.region_c {
  background: blue; /* region_c 영역 배경을 파란색으로 */
}

/* 버튼 상태 선택자 (hover) → 마우스를 올렸을 때의 스타일 */
button:hover {
  color: red;        /* 글자 색이 빨간색으로 바뀜 */
  background: blue;  /* 버튼 배경이 파란색으로 바뀜 */
}

 

👉 id는 고유(문서 내 중복 불가), class는 여러 요소에 중복 적용 가능

실습 코드 결과 화면

5. JavaScript 기초

5.1 필요성

  • HTML과 CSS는 정적 구조와 디자인만 담당
  • 사용자의 상호작용(버튼 클릭, 입력 등)을 처리하지 못함

5.2 역할

  • 상호작용 제공
    • 버튼 클릭, 입력 값 검증 등
  • 동적 동작 지원
    • 서버 전송 전 유효성 검사 가능

    👉 즉, 웹 페이지에 동적인 기능을 부여

5.3 JavaScript 실습

<!DOCTYPE html> <!-- HTML5 문서임을 선언 -->
<html>
<head>
  <meta charset="utf-8"> <!-- 문자 인코딩: UTF-8 -->
  <meta name="viewport" content="width=device-width"> <!-- 반응형(모바일 대응) -->
  <title>JS Bin</title>
  
  <script type="text/javascript">
    // inputA, inputB 값 가져와서 화면에 출력하고 합을 계산하는 함수
    function doSomething(){
      // inputA의 값 가져오기
      let a = document.getElementById('inputA').value;
      // inputB의 값 가져오기 (오타 주의: documnet → document)
      let b = document.getElementById('inputB').value;
      
      // span 태그에 각각의 입력값 표시
      document.getElementById('valueA').innerHTML = a;
      document.getElementById('valueB').innerHTML = b;
      
      // 두 입력값을 숫자로 변환 후 합산하여 표시
      document.getElementById('valueC').innerHTML =  Number(a) + Number(b);
    }

    // 현재 시간을 알림창(alert)으로 띄우는 함수
    function whatTimeIsIt(){
      alert(new Date()) // new Date() → 현재 날짜와 시간 객체
    }
  </script>
</head>
<body>
  <!-- 입력창 A -->
  <label for="inputA">a</label>
  <input id="inputA" value="1" onkeyup="doSomething()"> 
  <!-- onkeyup: 키보드를 뗄 때마다 doSomething() 실행 -->

  <!-- 입력창 B -->
  <label for="inputB">b</label>
  <input id="inputB" value="2" onkeyup="doSomething()">

  <br><br> <!-- 줄바꿈 2줄 -->

  <!-- 결과 영역 -->
  <div>
    result:
  </div>  
  
  <div>
    <!-- 입력값 a, b, 합계를 각각 표시 -->
    <!-- 기본값: 1 + 2 = 3 -->
    <span id="valueA">1</span> + <span id="valueB">2</span> = <span id="valueC">3</span>
  </div>
  
  <!-- 버튼: 클릭 시 현재 시간을 알림창에 표시 -->
  <button onclick="whatTimeIsIt()">현재 시간</button>
</body>
</html>

5.4 DOM Tree와 HTML

HTML은 그냥 텍스트 파일임.
브라우저는 이걸 그대로 쓰지 않고, 태그랑 내용을 분석해서 DOM(Document Object Model) Tree라는 구조로 바꿔놓음.

5.4.1 DOM Tree 생성 과정

  1. HTML 로딩
    페이지 요청하면 HTML 파일 불러옴.
  2. 파싱(Parsing)
    태그(<html>, <body>, <div> 등)랑 텍스트 읽어들임.
  3. DOM Tree 구성
    • Document: 최상위 루트
    • Element Node: 태그 노드 (div, h1 등)
    • Text Node: 태그 안 텍스트 ("나를 소개합니다")
  4. 브라우저 출력
    DOM Tree 해석해서 최종 화면에 그림.

5.4.2 예시 (그림 설명)

  • 왼쪽: 원본 HTML 코드
  • 가운데: 브라우저가 만든 DOM Tree
  • 오른쪽: 실제 브라우저 화면에 출력된 결과

5.4.3 정리

  • HTML = 원본 문서(텍스트)
  • DOM Tree = HTML 파싱해서 만든 객체 구조
  • JavaScript = DOM 조작해서 화면 동적으로 바꾸는 도구

'LG U+ Why Not SW Camp 8기 > 학습 로그' 카테고리의 다른 글

공부 일지 #42 | Flask & Django 실습  (0) 2025.09.28
공부 일지 #41 | Flask & 크롤링 첫걸음  (0) 2025.09.21
공부 일지 #39 | GitHub & Sourcetree 시작하기  (0) 2025.09.17
공부 일지 #38 | 머신러닝: 시계열 데이터  (1) 2025.09.14
공부 일지 #37 | 머신러닝: 차원 축소와 추천 알고리즘  (0) 2025.09.14
studying:)
@studying:) :: what i studied

studying:) 님의 학습 여정을 기록하는 블로그입니다.

목차

    티스토리툴바