2025/09/11 HTML-1

김기훈·2025년 9월 11일

TIL

목록 보기

18/194

HTML

HTML은웹페이지의어느부분에텍스트가있어야할지,어느부분에이미지가있어야 할지등을나타내는역할

태그 = HTML 문서를 구성하는 명령어

<태그명> 형태로 시작 </태그명>으로 닫는다.

태그이름은소문자로쓴다
- 여는태그와닫는태그를정확히입력한다
  - 태그의콘텐츠로또다른태그가포함될수있다
    - 들여쓰기를적절하게사용하는것이좋다(적극권장)

단일태그

단일 태그는 줄바꿈이나 이미지 삽입처럼 "콘텐츠를 감싸는 구조"가 필요 없는 경우 쓰는 태그
- 처럼 슬래시(/)를 붙여 자체적으로 닫는 형태

                안녕하세요<br />반갑습니다      #   안녕하세요
                                            반갑습니다

<hr /> : 가로선 넣기
<img /> : 이미지 넣기
<input /> : 입력창 만들기 =
<meta />, <link /> 등등

속성 = 태그에 추가 정보를 제공

시작태그의 내부에 정의 (단일 태그에도 특성 추가 가능)
- <html lang="ko">
  - <html> : HTML 문서의 시작 태그 / lang="ko" : 속성(attribute)

주석 : ``

HTML 문서의 기본 구조

            <!DOCTYPE html>
            <html>
              <head>
                문서의 정보
              </head>
              <body>
                화면에 표시될 내용
              </body>
             </html>

: 문서의 타입
- <html> : head 내부의 코드와 body 내부의 코드는 힘을 합쳐 하나의 HTML문서를 구성
  - <head></head> : 문서의 정보를 기입하는 부분
  - <body></body> : 화면에 표실될 문서의 내용을 기입하는 부분

텍스트 표시

<p>태그 : 문단요소를 나타내는 태그로써 가장 많이 사용되는 텍스트 태그
- 하나의 p태그는 하나의 문단을 표현
<h>태그 : 제목(표제) 요소를 나타내는 태그, 숫자와 함께 사용 1(크기 큼),6(크기 작음)

      <h1> </h1>
      <p>  </p>

특징
- 엔터를 이용한 줄바꿈을 무시한다
- 스페이스를 이용한 공백을 한번씩만 허용한다
  - 공백을 두 번 이상 표시하고자 할때는 를 사용 = 공 백
  - 줄바꿈을 표시하기 위해서는
    을 사용 = 줄 <br/> 바 <br/> 꿈

텍스트 요소

블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성
- 항상 새로운 줄에서 시작한다. → 이전 요소와 나란히 배치되지 않고 아래로 내려감.
- 안에 다른 블록 요소나 인라인 요소를 포함할 수 있다.

분류	태그	설명
레이아웃	`<div>`	구역 나누기 (가장 대표적인 블록 요소)
	`<header>`, `<nav>`, `<section>`, `<article>`, `<aside>`, `<footer>`	시맨틱 레이아웃 태그
텍스트	`<h1>` ~ `<h6>`	제목
	`<p>`	문단
	`<blockquote>`	인용문
리스트	`<ul>`	순서 없는 리스트
	`<ol>`	순서 있는 리스트
	`<li>`	리스트 항목
테이블	`<table>`	테이블 전체
	`<tr>`	테이블 행(Row)
	`<td>`	테이블 데이터 셀(Cell)
	`<th>`	테이블 헤더 셀
폼	`<form>`	입력 양식(폼 영역)

인라인 요소 : 자기에게 필요한 만큼의 공간만 차지
- 줄 바꿈이 일어나지 않음 → 같은 줄에 이어서 배치
- 텍스트나 다른 인라인 요소와 함께 흐르듯 배치 → 문장 안에 들어가도 자연스럽게 이어짐.
- 블록 요소 안에 들어갈 수 있음

분류	태그	설명
텍스트	`<span>`	의미 없는 작은 구간 나누기
	`<a>`	하이퍼링크
	`<strong>`	굵게(강조)
	`<em>`	기울임(강조)
	`<b>`	굵게
	`<i>`	기울임
	`<u>`	밑줄
폼	`<input>`	입력 필드
	`<textarea>`	여러 줄 입력 (크기 조절 가능, 블록처럼 동작 가능)
	`<label>`	입력 필드와 연결된 라벨
	`<button>`	버튼
멀티미디어	`<img>`	이미지 삽입
	`<audio>`	오디오 (controls 속성을 쓰면 블록처럼 보일 수 있음)
	`<video>`	비디오 (controls 속성을 쓰면 블록처럼 보일 수 있음)

컨테이너

콘텐츠나 레이아웃에 아무런 영향도 주지않고,단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는역할을 하는 요소
- 콘텐츠 내용을 구분하거나, 공통적인 스타일을 적용하고자 할 때 컨테이너를 사용 하는것이 좋다
  - <div></div> : 블록 레벨 컨테이너 : 굳이 text가 아니더라도 여러종류의 태그를 묶
    - 한줄을 더 차지함
  - <span></span> : 인라인 컨테이너 : 텍스트를 묶을때 자주 사용

전역 속성

모든 HTML 태그에서 공통으로 사용할 수 있는 특성

이미지 태그

img 태그는 이미지를 표시할 때 사용하는 태그
- 단일 태그이기 때문에 닫는 태그는 필요없다.
  - 표시 할 이미지에 대한 정보를 속성으로 지정해 주어야 한다.

    <img 
    src="이미지의 이름,이미지의 url" : 서버에 위치한 이미지,내 컴퓨터에 저장된 사진 다 가능
    alt="~~~" :  이미지가 로딩에 실패한 경우 이미지 대신에 대체 택스트가 표시 
    width="100" : 이미지가 표시될 크기를 지정할 수 있다. 둘중 하나만 적어도 알아서 조정됨
    height="200"     
    >

링크 표시하기

<a>태그 요소는 다양한 유형의 콘텐츠로 연결되는 링크 역할을 한다.

<a> 태그 안에서 href, target, title 같은 속성들은 어떤 순서로 적어도 브라우저가 정상적으로 해석

목록 만들기

목록은 연관 있는 항목(item)들을 나열한 것을 의미
- 순서 없는 목록 : <ul></ul>
- 순서 있는 목록 : <ol></ol>
<li></li> : 목록에 들어가는 항목 하나 하나를 표현할 때 사용하는 태그

start="1" : 리스트 번호가 어디서부터 시작할지 저장
type="a" : 리스트 번호의 표시형식을 지정
- 1 : 1,2,3,4~ / a : a,b,c,d~ / i : i,ii,iii~

표 만들기

표는 행과 열로 이루어진 구조로, 행과 열이 만나는 지점인 셀(cell)이 콘텐츠를 나타내는 최소단위
<table> : 하나의 표를 나타내는 태그
- boder="1" : 테이블 테두리의 두께를 지정
<tr> : 표안에서 하나의 행을 나타내는 태그
<th> : 행안에서 제목에 해당하는 셀을 나타내는 태그
<td> : 행안에서 콘텐츠에 해당하는 셀을 나타내는 태그
<caption></caption> : table 태그의 안쪽에서 제목 또는 표에 대한 설명을 나타냄
- 기본적으로 가운데 정렬
<thead> : 표의 제목이나 주제를 나타내는 영역
<tbody> : 표의 본문을 나타내는 영역
<tfoot> : 표의 요약글이나 맺음말을 나타내는 영역

입력 태그`<input>`

<input = "데이터 유형">
- placeholder : 입력창(<input>) 안에 힌트 텍스트를 보여주는 속성
  - 사용자가 입력을 시작하면 그 텍스트는 사라짐
- text : 기본값.텍스트를 입력 받는다
- email : 이메일을 입력 받는다
- password : 비밀번호를 입력 받는다
- search : 검색할텍스트를 입력 받는다
- date : 날짜와 시간을 지정한다.
<label>태그는 입력요소에 라벨을 붙이는 역할을 한다.
- 웹 이용자에게는 좀 더 직관적인 입력 요소를 제공할 수 있다
- 코드의 가독성 및 명확성이 향상
<label for="pw">비밀번호</label>
- "비밀번호"라는 텍스트를 입력창과 연결
- for="pw" → id="pw"인 입력창과 연결됨

input 외 입력 태그들

select : 다수의 옵션을 포함할 수 있는 선택메뉴
textarea : input는 한줄밖에 입력받지 못하지만 textarea는 여려 줄을 입력받을 수 있다
progress : 작업이 어느 정도 진행되었는지를 나타낼 때 사용
- max : 작업 완료에 필요한 작업량을 지정하는 속성
button : 클릭을 입력으로 받는 버튼 요소를 만드는 태그
- radio : 한가지만 선택가능 (name를 똑같이 맞춰야 성능 발휘)
- checkbox : 여러가지 선택가능 (name를 안묶어도 되지만 가능하면 하는게 좋음)

양식을 만들고 입력 정보를 보내기

<form> : 입력 양식을 만들어 주는 태그
- 입력한 데이터를 서버로 보내는 것을 목적으로 사용하는 태그
<action> : 입력값을 전송할 서버의 url
<method> : 클라이언트가 입력한 데이터를 어떤 식으로 전할할지 (GET or Post)
- GET : 서버에 요청을 보내어 응답을 받아낸다.
- POST : 서버에 요청을 보내어 작업을 수행한다.

시맨틱 태그

개발자와 브라우저에게 의미를 제공한다.
- 컨테이너면서 콘텐츠의 역할 의미를 강조

사용했을때의 이점
- 검색 엔진은 시맨틱 태그를 중요한 단서로 본다.
- 시각 장애가 있는 사용자가 화면 판독기로 페이지를 탐색할 때 참조된다.
- 코드의 가독성이 좋아진다.
- 컨테이너의 남용을 방지할 수 있어 코드 쓰기가 편하다.

문서 정보 관리하기

<meta> : HTML 문서에 대한 메타데이터를 정의
- meta 태그는 항상 head 태그의 안에 들어감
- 문자 세트, 페이지 설명, 키워드, 문서의 작성자 및 뷰포트 설정을 지정
웹페이지에 대한 정보를 제공 하므로 검색엔진이 페이지를 검색할 때 참고가능하고, 검색 결과에도 반영 가능
meta 태그가 제공하는 메타데이터의 유형&속성
- charset:문자세트
  - 문자 인코딩에 대한 요약 정보를 기입하는 속성
  - 문자 인코딩이란 한글을 표시하기 위해 문자 세트를 지정하는 작업
- http-equiv:콘텐츠속성정보에대한http헤더
  - HTTP : 인터넷에서 데이터를 주고 받을 수 있는 프로토콜
  - http-equiv가 http 관련 정보를 지정하면, content가 그에 대한 정보를 지정
- name:문서정보
- content:메타데이터내용
  - name 속성을 이름으로,content 속성을 값으로 하여 문서 정보를 이름+값 쌍의 형태로 제공할 때 사용할 수 있다.

파트별로 영역을 나눔
: 시맨틱 태그
header : 메인 main : 중간 footer : 마지막

form 서버에 데이터를 보내기 위한 장치

김기훈

안녕하세요.

이전 포스트

2025/09/10 SQL - 기초 문제

다음 포스트

2025/09/11 HTML-1

TIL

HTML

태그 = HTML 문서를 구성하는 명령어

단일태그

속성 = 태그에 추가 정보를 제공

주석 : ``

HTML 문서의 기본 구조

텍스트 표시

텍스트 요소

컨테이너

전역 속성

이미지 태그

링크 표시하기

목록 만들기

표 만들기

입력 태그`<input>`

input 외 입력 태그들

양식을 만들고 입력 정보를 보내기

시맨틱 태그

문서 정보 관리하기

2025/09/10 SQL - 기초 문제

2025/09/12 CSS

0개의 댓글

2025/09/11 HTML-1

TIL

HTML

태그 = HTML 문서를 구성하는 명령어

단일태그

속성 = 태그에 추가 정보를 제공

주석 :

HTML 문서의 기본 구조

텍스트 표시

텍스트 요소

컨테이너

전역 속성

이미지 태그

링크 표시하기

목록 만들기

표 만들기

입력 태그<input>

input 외 입력 태그들

양식을 만들고 입력 정보를 보내기

시맨틱 태그

문서 정보 관리하기

2025/09/10 SQL - 기초 문제

2025/09/12 CSS

0개의 댓글

주석 : ``

입력 태그`<input>`