250826 [ Day 36 ] - HTML (1)

TaeHyun·2025년 8월 26일

TIL

목록 보기
38/182

시작하며

오늘부터 웹 개발의 기본적인 내용들을 배우기 시작했다. HTML, CSS, JavaScript와 함께 React도 기본적인 내용 정도만 다뤄본다고 한다.

Web

3계층 구조 (3 Tier)

  • 화면 (클라이언트) : 프론트 앤드
  • 서버 : 백 앤드
  • 데이터베이스 : 백 앤드

화면 (클라이언트)

  • HTML : 기본 구조 생성을 위한 언어
  • CSS : Web을 꾸며주는 언어
  • Java Script : 상호작용이 가능한 기능을 추가하는 언어

HTML

  • Hypertext Markup Language
    • Hypertext : 다른 페이지로 연결되는 링크를 포함하는 텍스트
    • Markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어

HTML의 구조

  • ! + Tab : 기본 구조 자동 생성
  • <!DOCTYPE html> : 문서 형식을 HTML5로 지정
  • <html></html> : 실제적인 HTML 문서 작성

<head> 태그

  • 문서의 메타 데이터와 문서 정보를 정의하는 태그
    • 메타 데이터 : 데이터에 대한 정보를 제공하는 데이터
  • title : HTML 문서의 제목
  • style : HTML 문서의 Style 정보 정의
  • link : 외부 리소스와의 연결 정보를 정의 (CSS 파일 연계에 사용)
  • script : JavaScript를 정의
  • meta : 페이지 설명, 키워드, 저자, 화면 크기 등의 정보 / 주로 브라우저 또는 검색 엔진에서 사용

<body> 태그

  • 문서의 실제 콘텐츠를 정의하는 태그

기본 문법

  • 중첩 관계 (부모자식 관계)로 웹페이지의 구조를 표현
  • <!-- 주석 사용 -->

HTML 구성 요소

  1. 태그 : HTML 태그는 요소, 태그, 속성으로 구성
  2. 요소
    • 빈 요소 : 내용 없이 구조적인 기능만 하는 요소
    • 블록 요소
      • 부모 요소의 전체 너비를 차지
      • 태그가 시작되면 무조건 줄바꿈이 일어남
    • 인라인 요소
      • 텍스트 / 이미지 크기에 맞는 필요한 공간만을 차지
      • 너비와 높이를 지정할 수 없음
  3. 속성
    • 태그를 보조하는 명령어로 태그 안쪽에서 작동
    • 태그마다 사용 가능한 속성이 정해져 있음

태그 종류

<h1~6></h1~6>

  • 제목 태그 (Heading)
  • 자동으로 줄 바꿈
  • 하나의 HTML 문서에는 하나의 h1태그를 권장

<p></p>

  • 본분 태그 (Paragraph)

<br/>

  • 줄 바꿈 태그 (Break Line)
  • 빈 요소이기 때문에 태그에서 바로 닫기

<hr/>

  • 구분 선 태그

<ul></ul>

  • 순서가 없는 목록 (Unordered List)

<ol></ol>

  • 순서가 있는 목록 (Ordered List)

<li></li>

  • 목록의 요소

<img/>

  • 이미지를 넣을 때 사용
  • 속성 값 중 src=”” 안에 파일 / 링크를 추가해서 사용

<a></a>

  • 하이퍼 링크 (Anchor)
  • href : Hypertext Reference, 이동할 페이지의 링크
  • target : 링크 된 문서를 열었을 때 문서가 열릴 위치 표시
    • _blank : 새로운 탭에서 열기
    • _self : 현재 탭에서 열기 (기본값)

문자 꾸미기 태그

  • <b></b> : 볼드체
  • <i></i> : 이탤릭
  • <del></del> : 중간줄
  • <u></u> : 밑줄

사용자 입력

form 태그

  • 입력 받은 정보들을 서버로 전달 시키는 태그

input 태그

  • type=”button” : 버튼을 생성 / 특정 기능을 수행 시킬 때 사용
  • type=”text” : 텍스트 입력 값을 받는 폼 생성
  • type=”password” : 비밀번호 값을 받는 폼을 생성 / 입력 값을 자동으로 안보이게 처리
  • type=”checkbox” : 다중 선택 가능한 체크 박스 생성
    • name=”” : 체크 박스의 이름 / 같은 분류의 체크 박스는 같은 이름으로 설정
    • value=”” : 체크 박스가 실제로 전달하는 값을 지정 (필수)
    • checked : 최초 로딩 시에 선택 된 상태로 로딩
  • type=”radio” : 여러 선택지 중 하나만 선택 가능한 버튼
    • name=”” : 라디오 버튼의 이름 / 같은 name을 가지는 라디오 버튼은 하나만 선택 가능
    • value=”” : 라디오 버튼이 실제로 전달하는 값을 지정 (필수)
    • checked : 최초 로딩 시에 선택 된 상태로 로딩
  • type=”date” : 특정 날짜를 선택
  • <select></select> : 선택 메뉴 생성
    • name=”” : 박스 이름 설정
    • <option></option> : select 폼의 옵션 값 생성
    • <optgroup></optgroup> : option을 그룹화
      • label=”” : 그룹 이름 설정

마치며

오랜만에 하는 수업에 처음 듣는 내용들이라 초반에는 머리가 살짝 아팠지만, 기본적인 내용들이라 아직까지는 어려운 개념들이 딱히 없어서 금방 익숙해진 것 같다.
내일은 예비군 훈련 때문에 수업을 못 들어서 뒤처질 것 같아 약간 걱정이 된다. CSS나 JavaScript도 어느 정도 다룰 줄 알면 좋을 것 같아서, 내일 놓치는 부분들은 예비군 훈련 끝나고 찾아보면서 공부해봐야겠다.

profile
Hello I'm TaeHyunAn, Currently Studying Data Analysis

0개의 댓글