1. HTML 기본 구조
HTML 기본 구조
- HTML: 웹 페이지 구조를 정의하는 마크업 언어
- Headings: 제목을 나타내는 태그, h1부터 h6까지 존재
- Paragraphs: 문단을 표현하는 태그, p 태그 사용
- Links: 다른 페이지로 이동할 수 있는 하이퍼링크를 생성하는 태그, a 태그 사용
- Images: 이미지를 삽입하는 태그, img 태그 사용
2. 제목(title) 설정
- 웹 브라우저 탭에 표시될 문서 제목을 설정하기 위해 <title> 태그를 사용합니다.
- <title> 태그는 <head> 태그 안에 작성해야 하며, 한 문서에 하나만 존재해야 합니다.
- <title> 태그의 내용은 검색 엔진 및 사용자에게 제목 정보를 제공하므로 중요한 역할을 합니다.
3. 단락(paragraph) 작성
3. 단락(paragraph) 작성
웹페이지에서 단락을 작성하는 방법을 배워보겠습니다.
다음은 단락을 작성하는 기본적인 구조입니다.
- 단락을 시작할 때는 <p> 태그를 사용합니다.
- 단락의 내용을 작성한 후 닫을 때는 </p> 태그를 사용합니다.
- 단락은 텍스트의 묶음으로, 한 줄을 넘어가더라도 브라우저에서는 한 줄로 표시됩니다.
- 단락은 가독성을 높이고 내용을 구분짓는 역할을 합니다.
4. 목록(list) 추가
- HTML - 웹 페이지의 구조를 정의하는 언어
- CSS - 웹 페이지의 디자인을 담당하는 스타일 시트
- JavaScript - 웹 페이지의 동적 기능을 구현하는 스크립트 언어
- 브라우저 - 웹 페이지를 열어주는 프로그램
5. 링크(link) 생성
- 웹페이지 내부 다른 부분으로 이동하려면 내부 링크를 생성해야 한다.
- 내부 링크 생성 시에는 앵커(anchor)를 설정해야 한다.
- 앵커는 이동하고자 하는 위치에 id 속성을 이용해 설정한다.
- Href 속성을 사용하여 앵커를 참조하는 링크를 생성할 수 있다.
6. 이미지(image) 삽입
- 이미지 삽입은 **img** 태그를 사용하여 수행한다.
- 이미지 파일의 경로는 **src** 속성에 지정한다.
- 대체 텍스트는 **alt** 속성으로 추가하여 이미지를 설명한다.
- 너비와 높이는 **width**와 **height** 속성으로 조절한다.
- 이미지를 링크로 만들고 싶다면 **img** 태그를 **a** 태그로 감싸면 된다.
7. 테이블(table) 생성
8. 양식(form) 작성
- 양식(form) 태그는 사용자로부터 정보를 입력받는 데 사용됩니다.
- 양식(form) 태그는 action 속성을 통해 정보를 제출할 페이지를 지정합니다.
- 양식(form) 태그는 method 속성을 통해 정보를 제출하는 방법(GET 또는 POST)을 지정합니다.
- 입력(input) 태그는 텍스트 상자, 체크상자, 라디오 버튼 등을 생성하는 데 사용됩니다.
- 레이블(label) 태그는 양식 요소에 대한 설명을 제공하며, 화면에 보이지만 정보를 제출하지 않습니다.
9. 주석(comment) 추가
```html
- 주석(comment)은 코드 해석이나 수정을 위한 메모를 작성할 때 사용돼.
- 주석은 코드 실행 시 무시돼서 화면에 출력되지 않아 페이지 디자인에 영향을 주지 않아.
- Ctrl + / 키를 누르면 주석을 간편하게 추가할 수 있어.
10. 페이지 스타일(css) 적용
```html
이제 우리의 홈페이지에 스타일(css)을 적용해보자.
1. 외부 CSS 파일 연결하기
첫 번째로, 외부 CSS 파일을 사용하여 스타일을 설정하는 방법이 있다. 홈페이지 HTML 파일 안에 <head> 태그 안에 <link> 태그를 이용해서 외부 CSS 파일을 연결하자.
2. 내부 CSS 스타일 시트 적용하기
두 번째로, HTML 파일 내에 직접 CSS 스타일 시트를 작성하여 스타일을 설정할 수 있다. 이를 위해서 <style> 태그를 <head> 태그 안에 삽입하고 스타일을 작성하자.
3. 인라인 스타일 적용하기
마지막으로, 특정 요소에 직접 스타일을 지정하기 위해 인라인 스타일을 사용할 수 있다. 이를 위해서 해당 요소의 style 속성을 이용하여 스타일을 작성하면 된다.
```
'정보모음' 카테고리의 다른 글
| "초상권에 관심 있는 사람을 위한 인물 사진 촬영 방법 안내" (0) | 2024.07.31 |
|---|---|
| 매력적인 여자 - 사랑에 빠지게 하는 요소들 (0) | 2024.07.31 |
| 특별한 순간을 빛나게 하는 꽃 선물 아이디어 (0) | 2024.07.28 |
| 2021년 어르신 선물 아이디어 (1) | 2024.07.28 |
| 특별한 결혼 기념일 선물 아이디어 모음 (0) | 2024.07.28 |