1. HTML 기본 구조
```
- 모든 HTML 문서는 DOCTYPE 선언부터 시작해야 한다.
- html 요소는 모든 HTML 문서의 루트 요소다.
- head 요소는 문서의 메타데이터를 포함한다.
- title 요소는 문서의 제목을 정의한다.
- body 요소는 문서의 콘텐츠를 포함한다.
2. 제목과 단락
```html
제목과 단락
제목은 홈페이지의 핵심을 간결하게 나타내야 합니다. 단락은 본문 내용을 구성하는 기본 단위이며, 구체적인 내용을 담고 있어야 합니다.
제목 태그는 <h1>부터 <h6>까지 존재하며, 중요도에 따라 적절히 선택해야 합니다. 단락 태그는 <p> 태그를 사용하여 각각의 문단을 구분합니다.
- <h1>: 가장 중요한 제목에 사용
- <h2>: 섹션 제목 등에 활용
- <p>: 텍스트 단락을 표현
제목과 단락의 조화로 가독성을 높이고 사용자에게 정보를 명확하게 전달할 수 있습니다.
```
3. 목록과 링크
- 웹사이트 회사 정보
- 제품 및 서비스 소개
- 고객 후기 및 이용 방법
4. 이미지 삽입
- 이미지 추가: 태그를 사용하여 텍스트나 이미지에 다양한 이미지를 삽입할 수 있어.
- 이미지 속성: src 속성을 통해 이미지 파일의 URL을 지정하고, alt 속성으로 이미지에 대한 설명을 제공할 수 있어.
- 가로, 세로 크기 조절: width와 height 속성을 사용하여 이미지의 크기를 조절할 수 있어. 단위는 픽셀(px)로 표기해야 해.
5. 표 만들기
- 표 만들기: 표를 만들 때에는 table 태그를 사용한다.
- 표 구조: 표는 행과 열로 이루어진다. 행은 tr 태그로, 열은 th (표 헤더) 또는 td (표 데이터) 태그로 정의된다.
- 표 헤더: 표의 맨 윗줄에는 보통 표의 제목이나 구분을 나타내는 정보를 표시하며, th 태그로 정의한다.
- 표 데이터: 표의 내용을 표시하는 부분으로, td 태그를 사용하여 정의한다.
- 표 스타일: CSS를 사용하여 표의 디자인을 꾸밀 수 있다. 배경색, 테두리, 폰트 등을 조절하여 표를 더 깔끔하게 표현할 수 있다.
6. 양식과 입력란
- 양식을 만들 때는 <form> 태그를 사용해야 한다.
- <form> 태그 안에 입력 요소를 넣어야 하는데, 이름(name) 속성을 포함시켜야 한다.
- 이름(name) 속성은 데이터를 서버로 보낼 때 해당 데이터를 식별하는 데 사용된다.
- 입력란은 <input> 태그를 사용하여 만든다.
- 가장 흔히 사용되는 입력 요소는 텍스트 상자(text box)와 버튼(button)이다.
7. 음악과 비디오 삽입
- 음악을 삽입하기 위해서는 <audio> 태그를 사용합니다.
- <audio> 태그에는 src 속성을 사용하여 음악 파일의 경로를 지정합니다.
- 자동 재생을 원한다면 autoplay 속성을 추가하고, 반복 재생은 loop 속성을 사용합니다.
- 음악 플레이어의 디자인을 변경하려면 controls 속성을 사용합니다.
- 비디오를 삽입하기 위해서는 <video> 태그를 사용합니다.
- <video> 태그에는 src 속성을 사용하여 비디오 파일의 경로를 지정합니다.
- 자동 재생, 반복 재생, 컨트롤러 디자인 변경은 음악과 동일한 방법으로 설정할 수 있습니다.
8. 하이퍼링크 설정
```html
하이퍼링크 설정은 웹페이지에서 다른 페이지로 연결할 때 사용되며, 앵커 태그를 통해 구현할 수 있습니다.
- <a> 태그: 하이퍼링크를 생성하는 태그로, href 속성을 이용하여 연결할 페이지의 URL을 지정합니다.
- 절대 경로: 서버의 루트부터 전체 경로를 나타내는 방식으로, http://나 https://로 시작합니다.
- 상대 경로: 현재 페이지를 기준으로 링크 대상 파일의 상대적인 위치를 나타내는 방식으로, ./나 ../로 시작합니다.
9. 텍스트 서식 지정
- 텍스트를 굵게 강조하려면 태그를 사용해야 합니다.
- 이탤릭체로 표현하고 싶다면 태그를 사용해야 합니다.
- 텍스트에 밑줄을 넣으려면 태그를 사용하면 됩니다.
- 입히고자 하는 글자 색상을 지정하려면 태그를 사용해야 합니다.
10. 페이지 배치 설정
- 헤더: 웹사이트 상단에 위치하며 로고, 제목, 메뉴 등을 담당한다.
- 내비게이션: 주요 링크를 포함한 메뉴 아이템을 담당하여 사용자의 이동을 용이하게 한다.
- 콘텐츠: 웹사이트의 실질적인 내용을 담고 있으며 텍스트, 이미지, 비디오 등이 포함된다.
- 사이드바: 주로 왼쪽 또는 오른쪽에 위치하여 부가적인 정보나 링크를 제공한다.
- 푸터: 웹사이트 하단에 위치하며 저작권 정보, 연락처, 소셜 미디어 링크 등을 포함한다.
'일상정보들' 카테고리의 다른 글
홈페이지 형 블로그 만들기 - 완벽한 가이드 (4) | 2024.07.31 |
---|---|
한글 싸인 만들기 - 온라인 사이트 추천 및 활용법 (0) | 2024.07.31 |
매혹적인 차의 맛과 풍미 - 최상의 차 종류 소개 (1) | 2024.07.30 |
니체 사랑 - 철학적 시각으로 살펴보기 (0) | 2024.07.30 |
다음 영화 - 평점, 줄거리, 출연진 등 각종 정보 제공 (0) | 2024.07.30 |