지우너

HTML 간단 정리 본문

Programming/Tips

HTML 간단 정리

지옹 2025. 3. 19. 14:10

todo리스트 프로젝트에서 아래와 같은 방식으로 화면을 구성했습니다.

  1. 부트스트랩 공식문서만 보고도 어느 정도 조립
  2. gpt로 원하는 동작과 상응하는 자바 스크립트 요청

하지만 여러 번 시행착오를 겪으며, 결국 기본기는 알아야 한다는 생각이 들었습니다.

아래는 유데미의 web developer 부트캠프 2025의 html 파트를 들으며 주요 부분을 정리한 글입니다.

해당 강의를 들으며 todo리스트 프로젝트를 조금씩 수정해 나갈 예정입니다.

 

편의상 "-다" 체를 사용합니다. 감사합니다.

기초

<head>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head

웹페이지, 스크립트의 메타데이터 요소, css 스타일 속성을 입력하는 공간.

css, java script, 폰트, 아이콘 등을 여기에 적는다.

<title>

탭에 나타나는 문서의 제목 지정. 모든 html 문서에는 head 안에 title이 존재해야 한다.

 

<body>

문서의 모든 내용을 담고 있는 요소.

 

<a>

앵커 태그

<a href="주소">클릭하면 이동됩니다</a>

<p>

단락 요소

<h1> ~ <h6>

제목 요소

<ul>

순서가 없는 목록. unordered list

<ol>

순서가 있는 목록. ordered list

<img>

이미지 요소.

<img src ="이미지 주소" alt = "대체 텍스트">

<div>

블록 요소(한 라인을 전부 차지함). 콘텐츠를 그룹화하고 한 번에 css 스타일을 적용할 수 있음.

<span>

인라인 요소(좌우로 다른 태그가 나란히 위치 가능). 아래와 같이 적용해두면 span.name{color: #f00} 등으로 name으로 지정된 그룹의 스타일을 한 번에 바꿀 수 있다.

<span class = "name"></span>

<hr>

구분선

<br>

줄바꿈

<sup>

위 첨자

<sub>

아래 첨자

엔티티코드

&로 시작해서 ; 로 끝남. 예를 들어 <나 >는 태그를 적을 때 사용되므로 문자를 사용하지 않고 &lt; &rt; 와 같이 작성해야 한다.

 

시맨틱(semantics)

모든 구역을 div로 구분할 수도 있지만 이는 유지보수를 어렵게 한다. 주로 사용되는 구역의 쓰임에 맞게 아래 태그들이 만들어짐.

<main>

<nav>

<section>

<article>

<aside>

문서의 일부는 아니지만 사이드바나 말풍선 등.

<header>

<footer>

<time>

<figure>

<data>

 

form과 table

<form>

여러 입력을 그룹화하여 담는 껍데기(컨테이너, container)

해당 입력을 어떤 url로 보낼 지 어떤 http 메서드를 이용할지를 지정.

적용

todo리스트 프로젝트에서 할 일을 입력하는 부분을 그냥 div로 감쌌었다.

gpt와 부트스트랩을 이용했으니 이게 맞겠거니 생각했는데, 이런 부분은 form 태그로 처리해야 한다고 강의에 나와서 form 태그로 수정했다.

변경 전(좌) 변경 후(우)

<input>

form 안에 들어가는 가장 일반적인 요소.

  • type

type 속성에 따라 어떤 입력을 받을지 정할 수 있다. default type은 text.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

input type = "submit" 이건 잘 사용하지 않는다. 제출 버튼 안의 글자를 바꾸려면 value = "" 을 이용해야 하기 때문에 조금 투박함.

대신 button 태그를 사용!

  • name

서버로 데이터를 보낼 때 중요함! 검색창에 검색어를 입력하면 url이 이런식으로 나간다. google.com/search?q=김밥 input에 name="q"라고 되어 있기 때문에 김밥을 검색하면 input의 name 속성값(q) + 입력값(김밥)이 되는 것

로그인을 만든다고 하면 <input name="id"> <input name="password"> 이런 식으로 작성하게 될 것.

두 input이 하나의 <form>으로 묶여 있을 것이므로 /주소?id="id입력값"&password="password입력값" 이런식으로 요청이 나가게 된다.

 

radio

name 속성을 통해 radio 버튼들을 연결(연결된 radio버튼은 1개만 선택할 수 있게 됨)

value 속성에 입력된 값이 name=value 형태로 요청에 들어가게 된다. 예를 들어 아래에서 email을 선택하고 submit 하게 되면 /주소?contact=email 이렇게 이동된다.

<form>
  <fieldset>
    <legend>Please select your preferred contact method:</legend>
    <div>
      <input type="radio" id="contactChoice1" name="contact" value="email" />
      <label for="contactChoice1">Email</label>
      <input type="radio" id="contactChoice2" name="contact" value="phone" />
      <label for="contactChoice2">Phone</label>
      <input type="radio" id="contactChoice3" name="contact" value="mail" />
      <label for="contactChoice3">Mail</label>
    </div>
    <div>
      <button type="submit">Submit</button>
    </div>
  </fieldset>
</form>
<pre id="log"></pre>

<label>

for 속성을 이용해 input과 연결할 수 있다(label의 for값과 input의 id값이 동일한 것이 연결됨)

연결하면 label을 눌렀을 때 연결된 input과 상호작용된다

<div class="preference">
  <label for="cheese">Do you like cheese?</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

적용

todo리스트 프로젝트에서 이 부분을 연결하지 않았었다. 해당 부분을 듣고 할 일 이름을 클릭하면 체크박스가 작동하도록 연결할 수 있었다.

 

<table>

구조와 관련: <thead> 표의 제목 <tbody> 표의 내용 <tfoot> 표의 가장 아래 줄(주로 합계 등을 작성)

셀과 관련: <td> table data 하나의 셀을 만들 때 사용 <tr> table row 하나의 줄임을 알려줌 <th> table header 표의 제목열(칸)

셀 병합 같은 부분 표현을 위해 사용됨: <colspan> <rowspan>

<button>

form 안에 button을 만들면 기본 값이 submit → form의 값으로 http 요청을 보낸다.

form 밖에 <button>은 기본 값이 button  → 그냥 버튼의 기능.

form 안에서 button type="button" → form 안에 있어도 그냥 버튼의 기능.

 

<select>

드롭다운 메뉴

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
  <option value="">--Please choose an option--</option>
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="hamster">Hamster</option>
  <option value="parrot">Parrot</option>
  <option value="spider">Spider</option>
  <option value="goldfish">Goldfish</option>
</select>

 

참고 사이트

[HTML 기초] 시맨틱(semantic) 태그

 

'Programming > Tips' 카테고리의 다른 글

QueryDsl 설정  (0) 2025.02.13
IntelliJ 파일 겹쳐짐 분리  (0) 2025.01.20
[MAC/IntelliJ] 알고 있으면 편한 IntelliJ 단축키  (0) 2024.08.02
[Unity] build and run 없이 에디터에서 Application.Quit() 테스트하는 법  (0) 2023.12.11
[Mac] 유니티 자동완성 private 안 나오게 하기  (0) 2023.04.08
'Programming/Tips' Related Articles more