1. HTML 기본 구조
- HTML 문서는 <!DOCTYPE html>로 시작해야 한다.
- <html> 태그는 문서의 시작과 끝을 감싸는데 사용된다.
- <head> 태그 안에는 문서의 제목과 기타 정보들이 위치한다.
- <title> 태그는 문서의 제목을 정의한다.
- <body> 태그 안에는 문서의 내용이 위치한다.
2. 제목 태그와 문단 태그
제목 태그 (Title Tag)
웹 페이지의 제목을 정의할 때 사용하는 태그로, 브라우저 탭 상단에 표시된다. <title> 태그 사이에 위치하며, 페이지의 주제나 내용을 간결하게 요약하여 작성한다.
문단 태그 (Paragraph Tag)
단락을 구분할 때 사용하는 태그로, 단락의 시작과 끝을 표시한다. <p> 태그를 사용하여 텍스트를 단락으로 묶을 수 있으며, 여백과 줄바꿈을 자동으로 설정한다.
3. 목록과 링크
- 목록 만들기: 웹사이트에서 정보를 구성하는 방법
- 링크 추가하기: 다른 페이지로 이동할 수 있는 방법
- 링크 스타일링: 링크를 더욱 눈에 띄도록 꾸며주는 방법
4. 이미지 삽입하기
- 이미지 삽입하기
1. 이미지 경로 지정하기: 이미지 파일이 저장된 경로를 설정합니다. 주로 상대 경로나 외부 링크를 사용합니다.
2. 태그 활용: 이미지를 표시하기 위해
태그를 사용합니다. src 속성에 이미지 경로를 지정합니다.
3. 대체 텍스트 추가: 시각 장애인이나 이미지가 로드되지 않은 경우를 대비해 alt 속성을 활용하여 대체 텍스트를 제공합니다.
4. 이미지 크기 조절: width와 height 속성을 활용하여 이미지의 크기를 조절할 수 있습니다.
이제 이미지를 삽입하는 방법에 대해 자세히 알아보았습니다.
5. 테이블 만들기
- 테이블 태그: 표를 만들 때 사용
- 테이블 구조: table, tr, td 태그로 이루어짐
- 테이블 제목: caption 태그로 추가 가능
6. 폼 입력 요소 추가하기
- 텍스트 입력: <input type="text">
- 비밀번호 입력: <input type="password">
- 이메일 입력: <input type="email">
- 체크박스: <input type="checkbox">
- 라디오 버튼: <input type="radio">
- 드롭다운 메뉴: <select> <option>
- 제출 버튼: <input type="submit">
7. CSS 스타일 시트 연결하기
```
- 이제 CSS 스타일 시트를 사용하여 홈페이지에 디자인을 입혀볼 차례야.
- 우선, CSS 파일을 생성하고 저장해야 해. 이름은 적절히 표시해주는 게 좋아.
- 그런 다음, <link> 태그를 사용해서 CSS 파일을 HTML 문서와 연결할 수 있어.
- 이때, rel 속성에는 "stylesheet" 값을, href 속성에는 CSS 파일 경로를 설정해야 해.
- 이렇게 하면 CSS 파일에 작성된 스타일이 HTML 요소에 적용돼 화면에 디자인이 적용돼!
8. 반응형 디자인 고려하기
- 미디어 쿼리를 활용하여 디바이스에 따라 자동으로 레이아웃을 변경할 수 있도록 설정한다.
- 플랜이 추가됩니다. 페이지가 축소될 때, 메뉴가 모바일 친화적으로 재배치되도록 한다.
- 유연한 이미지 처리를 위해 이미지가 유동적으로 조정되도록 한다.
- 타이포그래피를 조정하여 작은 화면에서도 텍스트가 읽기 쉽게 보이도록 한다.
9. 추가 팁과 꿀팁읽기
- 웹사이트 디자인 시, 컬러 조합은 매우 중요한 요소이다.
- SEO(Search Engine Optimization)를 위해 페이지 제목과 내용에 키워드를 적절히 활용하자.
- 사용자 경험을 고려하여 반응형 웹 디자인을 채택하는 것이 좋다.
- 각 페이지마다 메타 태그를 제대로 작성하면 검색 엔진에서 더 잘 노출된다.
'모르면손해보는정보' 카테고리의 다른 글
| 한국 문화 예술 위원회 - 역사, 활동, 지원 프로그램 소개 (0) | 2024.07.31 |
|---|---|
| 초보자를 위한 만화 만들기 가이드 - 단계별 팁과 노하우 (0) | 2024.07.30 |
| 건강을 위한 최고의 곡물 차 종류 소개 (0) | 2024.07.29 |
| 99.99%의 연인 - 완벽한 사랑을 찾아서 (0) | 2024.07.29 |
| 서울 맛집 "24 시카 페"의 매력과 추천 메뉴 소개 (0) | 2024.07.29 |