1. HTML 기본 구조
```html
HTML 기본 구조
- DOCTYPE: HTML 문서의 버전을 정의합니다.
- html: HTML 문서의 루트 요소를 정의합니다.
- head: HTML 문서에 대한 메타데이터를 포함합니다.
- title: 문서의 제목을 정의합니다.
- body: 문서의 본문을 정의합니다.
2. 제목(Title) 추가하기
```html
- 웹페이지 탭에 표시될 제목을 작성한다. (Title 태그 사용)
- Title 태그 안에 제목 텍스트를 입력한다.
- 브라우저 탭에 웹페이지 제목으로 나타나며, 검색 엔진에서도 화면에 표시된다.
3. 단락(Paragraph) 추가하기
이제 페이지에 단락을 추가해보자. 다음은 해당 단락을 만드는 단계이다:
- <p> 태그를 사용하여 단락을 시작한다.
- 단락 안에 텍스트를 입력한다.
- </p> 태그로 단락을 닫는다.
4. 줄 바꿈(Line Break) 추가하기
- 줄 바꿈(Line Break)은 한 줄을 바꾸어 보여줄 때 사용하는 태그이다. 일반 텍스트에서 한 줄을 띄우고자 할 때 <br> 태그를 사용한다.
- 예를 들어, 문단의 두 문장을 서로 다른 줄에 출력하고 싶을 때 <br> 태그를 이용하여 간단하게 줄을 바꿀 수 있다.
- 단순히 텍스트를 나열하는 것이 아닌, 각각의 문장이 다른 행에 위치하도록 만들어준다.
5. 링크(Link) 추가하기
```html
지금부터는 링크(Link)를 추가하는 방법에 대해 알려드릴게요!
- 우선 <a> 태그를 사용해서 링크를 만들 수 있어요.
- 링크를 클릭했을 때 이동할 주소는 href 속성에 입력하세요.
- 간단하게 문서 내부로 이동하려면 #을 사용할 수 있어요.
- 링크 텍스트를 <a> 태그 사이에 적어주면 사용자가 클릭할 수 있어요.
- 새로운 탭에서 링크를 열고 싶다면 target="_blank" 속성을 추가하세요.
링크 추가하기는 이정도면 충분해요! 계속해서 네가 배운 것을 실전에서 활용해보며 익혀보도록 해봐!
```
6. 이미지(Image) 추가하기
- 이미지 태그를 사용하여 이미지를 추가합니다.
- 이미지 태그는 src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
- alt 속성은 이미지의 대체 텍스트를 지정하는 데 사용됩니다.
- width와 height 속성을 사용하여 이미지의 너비와 높이를 조절할 수 있습니다.
7. 목록(List) 추가하기
- HTML - 웹 페이지의 기본 구조를 정의하는 언어
- CSS - 웹 페이지의 디자인과 스타일을 꾸미는 언어
- JavaScript - 동적인 기능을 추가하고 상호작용을 구현하는 언어
- 웹 호스팅 - 웹 페이지를 인터넷에 올리는 서비스
8. 테이블(Table) 추가하기
| 태그로 정의하면 돼. 표의 제목을 정의할 때는 \ | 태그를 사용하면 되지. 표의 행과 열을 나타내는 속성들은 다양한 옵션을 제공해서 표를 더욱 다채롭게 꾸밀 수 있어.
표를 만들 때 유의해야 할 점은 표 내용이 복잡해지면 읽기 어려워질 수 있으니 가급적 간결하게 구성하는 게 좋아. 그리고 표에 내용을 추가할 때는 행을 추가하거나 열을 추가하는 방법을 잘 숙지해둬야 해. 표는 정보 전달에 있어서 효과적인 도구이니까 활용하는 방법을 꼭 기억해두기를 바래.
9. 폼(Form) 추가하기
'정보모음' 카테고리의 다른 글
|
|---|