TIL - 20250516

1. HTML 코드 작성 팁과 주석 활용

1. 깔끔한 코드의 중요성
2. 들여쓰기
3. 태그와 속성 작성법 : HTML 태그와 속성 이름은 일반적으로 소문자로 작성
4. 태그 닫기
5. 코드 블록 구분하기 : ex. 헤더 섹션 , 메인 콘텐츠 , 푸터 섹션 (주석으로 달기)
6. 주석 활용하기
   • 코드 설명
   • 코드 임시 비활성화
   • 버전 히스토리나 작업자 정보
   • 디버깅 도구로 활용
7. 주석 작성 시 주의사항
   • 너무 많은 주석은 피하기
   • 불필요한 정보 피하기
   • 주석 최신 상태 유지하기
8. 파일 명명 규칙
   1. 소문자 사용하기: 일부 웹 서버는 대소문자를 구분하므로 모두 소문자로 통일하는 것이 안전해요. 예: main- page.html (O), Main-Page.html (X)
   2. 공백 대신 하이픈 사용하기: 파일 이름에 공백을 사용하면 URL에서 문제가 생길 수 있어요. 예: contact-us.html (O), contact us.html (X)
   3. 특수문자 피하기: 알파벳, 숫자, 하이픈, 밑줄만 사용하세요. 예: page1.html (O), page#1.html (X)
   4. 의미 있는 이름 사용하기: 파일 내용을 알 수 있는 이름을 붙이세요. 예: product-list.html (O), p1.html(X)

• https://developer.mozilla.org/ko/
  : html,css,js 등 백과사전

• alt+1 단축키 ": 왼쪽 네비게이션바 숨기기

• h{안녕하세요}*6 : h1~6+안녕하세요1~6 한 번에 생성

• alt+shift+방향키 위아래 : 커서 있는 줄 위 아래로 옮기기

2. 제목 태그 (h1~h6)와 콘텐츠 계층 구조

제목 태그란?

• HTML에서 제목 태그는 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>의 6가지가 있어요. 숫자가 작을수록 더 중요하고 큰 제목을 나타냅니다.

제목 태그의 중요성
1. 페이지 구조화
2. 접근성 향상
3. SEO(검색 엔진 최적화)

제목 태그 사용 시 주의사항
1. 계층 구조 지키기
2. 한 페이지에 하나의 h1
3. 디자인 목적으로 사용하지 않기(글씨 크기 등은 css로 조절)

콘텐츠 계층 구조의 중요성

웹페이지는 단순히 보이는 것 이상의 의미가 있습니다. 정보를 논리적으로 구조화하는 것은 다음과 같은 이점이 있어요:

1. 사용자 경험 향상: 사용자가 정보를 쉽게 찾고 이해할 수 있게 해줍니다.
2. 검색 엔진 최적화: 검색 엔진이 콘텐츠를 더 잘 이해하고 관련 검색에 노출시킵니다.
3. 유지보수 용이성: 나중에 수정이 필요할 때 구조적으로 정리된 코드는 더 쉽게 업데이트할 수 있습니다.
4. 접근성: 모든 사용자가 콘텐츠에 접근하고 이해할 수 있게 합니다.

마치 책의 목차, 챕터, 문단이 잘 구성되어 있으면 내용을 더 쉽게 이해하는 것과 같아요.

3. 단락 태그 (p)

단락 태그란?

• 단락 태그 <p>는 HTML에서 문단을 정의할 때 사용하는 태그입니다. 웹 페이지에서 텍스트 내용을 구조적으로 표현하는 가장 기본적인 방법이에요.

단락 태그의 특징
1. 블록 레벨 요소
2. 자동 여백
3. 자동 줄바꿈

단락 태그의 특징
1. 공백 처리 (여러 개의 공백(스페이스,탭)을 하나의 공백으로 처리하고 줄바꿈도 무시됨.)
2. 줄바꿈 적용하기 (
태그 이용)

단락 태그의 활용
1. 기본 텍스트 구성
2. 다양한 콘텐츠와 함께 사용(링크,강조,굵게 등의 태그 넣기)

단락 태그 사용 시 주의사항
1. 빈 단락 피하기
2. 적절한 태그 사용하기

4. 줄바꿈과 구분선 (br, hr)

줄바꿈 태그 (br)

• 줄바꿈 태그 <br>은 텍스트에서 강제로 줄바꿈을 일으키는 태그입니다. 이 태그를 사용하면 태그가 위치한 곳에서 새로운 줄이 시작됩니다.

언제 br 태그를 사용해야 할까?
<br> 태그는 문단 내에서 특정 지점에서 줄바꿈이 필요한 경우에만 사용해야 합니다.
1. 주소나 연락처 표시
2. 시나 노래 가사
3. 짧은 문장이나 항목을 나열할 때

br 태그 사용 시 주의사항
1. 문단 구분을 위해 사용하지 않기: 새로운 문단을 시작하려면 
을 여러 번 사용하는 대신 새로운 

태그를 사용하세요.
2. 공간 만들기 위해 사용하지 않기: 요소 사이에 공간을 만들기 위해 
 태그를 사용하는 것은 지양하세요. 공간 조절은 CSS의 margin이나 padding으로 처리해야 합니다.
3. 레이아웃 구성을 위해 사용하지 않기: 페이지 레이아웃을 만들기 위해 
 태그를 사용하는 것은 피해야 합니다. 레이아웃은 CSS 기법으로 처리하세요.

구분선 태그 (hr)
구분선 태그 <hr>은 수평선을 그려 내용을 시각적으로 구분해주는 태그입니다. 주제의 전환이나 섹션의 구분을 나타낼 때 유용합니다.

언제 hr 태그를 사용해야 할까?
<hr> 태그는 내용상 주제가 바뀌거나, 시간적 흐름에 변화가 있을 때 사용하면 좋습니다.
1. 주제 전환 표시
2. 시간적 흐름 구분
3. 긴 콘텐츠에서 가독성 향상

br과 hr의 차이점
두 태그 모두 내용을 시각적으로 구분하는 역할을 하지만, 사용 목적과 의미가 다릅니다:

1. <br> : 동일한 문단 내에서 줄바꿈을 일으킵니다. 내용의 흐름은 계속되지만 표시 방식만 바뀌는 거예요.
2. <hr> : 내용상 주제나 흐름의 전환을 나타냅니다. 하나의 섹션이 끝나고 다른 섹션이 시작됨을 의미하는 거죠.

이건 마치 책에서 문장의 줄바꿈과 장(chapter)의 구분을 생각하면 이해하기 쉬워요. 문장은 계속해서 내용이 이어지지만 페이지 끝에서 다음 줄로 넘어가고, 장이 바뀌면 완전히 새로운 주제가 시작되는 것과 같은 차이입니다.

5. 특수문자와 엔티티 코드 활용하기

특수문자와 HTML의 관계

• HTML에서는 <, >, &와 같은 문자들이 태그나 특별한 의미를 가진 기호로 사용됩니다. 그렇다면 이런 문자를 화면에 그대로 표시하고 싶을 때는 어떻게 해야 할까요? 이때 HTML 엔티티(Entity)를 사용합니다.

6. 순서 없는 목록 (ul, li)

순서 없는 목록이란?

• 순서 없는 목록은 항목의 순서가 중요하지 않은 목록을 만들 때 사용합니다. 각 항목 앞에는 일반적으로 작은 원이나 점(bullet)이 표시되어 목록임을 시각적으로 나타냅니다.

순서 없는 목록의 구조

• 순서 없는 목록은 <ul> 태그(Unordered List)로 시작하고, 그 안에 여러 개의 <li> 태그(List Item)로 각 항목을 정의합니다.

• ul 태그 바로 밑에는 무조건 li를 쓰기 (ex.
• 망고
같이 쓰면 안 됨.)
• div 태그는 뭐라고 붙일지 모를 때 마지막으로 선택하는 태그(비추천)

7. 순서 있는 목록 (ol, li)

순서 있는 목록이란?

• 순서 있는 목록은 이름 그대로 항목의 순서가 중요한 경우에 사용하는 목록 형태입니다. 각 항목 앞에는 기본적으로 숫자(1, 2, 3...)가 표시되어 항목의 순서를 명확히 나타냅니다.

8. 하이퍼링크 (a)

하이퍼링크란?

• 하이퍼링크는 웹페이지에서 다른 페이지나 같은 페이지의 특정 부분으로 이동할 수 있게 해주는 요소입니다. HTML에서는 <a> 태그(anchor 태그)를 사용해 하이퍼링크를 만듭니다. 하이퍼링크는 웹의 가장 기본적인 기능 중 하나로, 페이지와 페이지를 연결해 웹을 '거미줄'처럼 만드는 역할을 합니다.

하이퍼링크의 기본 구조

• 하이퍼링크는 <a> 태그와 그 속성인 href(Hypertext Reference)를 사용해 만듭니다.

• ctrl alt t 단축키 : 태그로 둘러싸기

링크 사용 시 주의사항
1. 명확한 링크 텍스트 사용하기
2. URL 유효성 확인하기
3. 외부 링크는 새 탭에서 열기(target="_blank"사용)
4. 접근성 고려하기

9. 이미지 삽입하기 (img)

img 태그의 기본 구조

• HTML에서 이미지를 삽입할 때는 <img> 태그를 사용합니다. 이 태그는 빈 태그(empty tag)로, 닫는 태그가 없습니다.
  ''

• alt(alternative) 속성은 웹접근성(시각장애인)

• ctrl e 단축키 : 예전 파일 선택 이동

• shift 두 번 단축키 : 통합검색(파일검색, 설정)

10. 오디오와 비디오 (audio, video)

오디오 요소 (audio)

• <audio> 태그는 음악, 팟캐스트, 음성 메시지 등의 사운드 파일을 웹페이지에 삽입할 때 사용합니다.

비디오 요소 (video)

• <video> 태그는 영화, 클립, 애니메이션 등의 비디오 콘텐츠를 웹페이지에 삽입할 때 사용합니다.

11. 표 만들기 (table, tr, td, th)

표의 기본 구조

HTML 표는 다음과 같은 기본 태그로 구성됩니다:

• <table>: 표 전체를 감싸는 컨테이너
• <tr>: 표의 행(Table Row)
• <td>: 행 안의 데이터 셀(Table Data)
• <th>: 헤더 셀(Table Header)

이런 태그들의 관계는 마치 빌딩의 구조와 비슷합니다. <table>은 건물 전체, <tr>은 각 층, <td>와 <th>는 각 층의 방으로 생각할 수 있어요.

• emmet (shift 두 번으로 통합검색 후 확인 가능)

• table과 tr 사이에 tbody가 자동으로 들어감.(따라서 tr을 바로 감싸는 것은 table 태그가 아니라 tbody태그)

colspan rowspan 속성 : 혼자 몇 칸을 먹을지 정하는 속성

12. 폼 요소 이해하기 (form)

기본 폼 구조

• HTML에서 폼의 기본 구조는 <form> 태그로 시작합니다. 이 태그는 다양한 입력 요소(텍스트 필드, 체크박스, 라디오 버튼 등)를 감싸고, 이를 어떻게 처리할지에 대한 정보를 제공합니다.

form 태그의 주요 속성
1. action 속성 : 데이터를 전송할 URL(서버의 처리 프로그램)을 지정
2. method 속성 : 데이터를 서버로 전송하는 HTTP 방식을 지정
3. enctype 속성 : 특히 파일 업로드 시
4. 기타 유용한 속성들

• name : 폼에 이름을 부여하여 JavaScript에서 참조가능
• target : 폼 제출 후 응답을 표시할 위치를 지정
• autocomplete : 브라우저의 자동 완성 기능 사용 여부를 지정
• novalidate : 브라우저의 내장 폼 유효성 검사를 비활성화(이메일이나 url 확인등의 기본검증을 없앰)