기본 문법
- <strong> </string> : 볼드 표시 (<b>도 같은 효과를 내지만 단순 시각 효과. 화면 낭독기에서 strong은 강조의 의미로 읽힌다.)
- <u> </u> : 밑줄 underline 표시
- <h n> </h n> : heading을 뜻하는 제목 태그로 1~6까지 있으며 뒤로 갈수록 중요도가 떨어진다.
줄바꿈 문법
- <br> : 줄바꿈 태그 - 열고 닫을 필요 없이 단독 사용이 가능하며 단순히 시각적으로 줄을 바꿔준다.
- <p> </p> : 문단을 뜻하는 p 태그로 <br>과 동일한 효과지만, 문단이라는 정보를 알려준다.
이미지 태그
- <img src="주소"> : src는 소스를 뜻하며 이미지 소스의 주소를 적어준다.
- <img scr="주소" width="숫자"> : 이미지 크기를 조절할 수 있다. 이런 부분을 속성(Attribution)이라고 한다.
목록 태그
- 부모/자식 태그는 한 태그 안에 다른 태그가 포함된 경우로, 자식 태그를 들여쓰기 해주어야 한다.
- 목록 태그는 기본적으로 <li> </li> 라는 부모 태그가 있고, <ol> <ul> 두 종류가 있다.
- <ol> </ol> : ordered list로 순서가 있는 태그다. 속성을 추가하여 기본 숫자가 아니라 로마자, 알파벳 등으로 바꿀 수 있다.
- <ul> </ul> : unordered list로 순서가 없는 태그다. 마찬가지로 속성을 추가해 기본 원형이 아닌 다른 모양으로 바꿀 수 있다.
- 속성으로는 type을 써주면 되고, ol 안에 ul, ul 안에 ol 을 넣을 수도 있으며 시작 숫자를 지정할 수도 있다.
- https://developer.mozilla.org/ko/docs/Web/HTML/Element/ol
<ol> - HTML: Hypertext Markup Language | MDN
HTML <ol> 요소는 정렬된 목록을 나타냅니다. 보통 숫자 목록으로 표현합니다.
developer.mozilla.org
문서의 구조
- <title> </title> : 웹 문서의 제목을 달아준다. 검색 엔진은 이것을 표지 삼아 찾기 때문에 매우 중요한 지표가 된다.
- <meta charset="utf-8"> : 한글 및 utf-8이 지원하는 언어가 제대로 출력되게 하는 코드다. charset = character + set
- 먼저 <! doctype html>로 묶어주는 게 관행이며 이 아래로 <html> </html> <head> </head> <body> </body>가 들어간다
- 대부분 head에는 meta charset와 같이 언어, 크기, 제목, 아이콘, css 파일 등이 들어간다.
- body에는 필요한 디자인들 (본문의 형태) 이 들어가고, 마지막에는 script를 넣는다.
주소 태그
- <a> </a> : anchor(닻)을 뜻하는 a 태그는 링크를 나타낸다.
- <a href=""> </a> 형태로 사용하며 h=http, ref=reference를 뜻한다.
- 주소를 클릭했을 때 새 탭에서 열고 싶다면 <a href="" target="_blank">를 추가해주면 된다.
- 주소를 클릭해 열기 전에 마우스를 가져다 대 어떤 주소인지 설명해주고 싶다면 title = ""을 추가해주면 된다.
웹사이트와 웹페이지
동일한 이야기 같지만 웹페이지가 여러 가지 묶여 있는 형태를 웹사이트라고 한다.
서버와 클라이언트
인터넷을 열기 위해서는 서버가 필요하다.
직접 서버를 만들거나 vs 웹 호스팅을 이용하는 방법이 있다.
아니면 깃허브를 이용할 수도 있다.
그외 기능
- 동영상 삽입을 하고 싶다면 유튜브에서 소스 코드(iframe)를 복사해 넣을 수 있다.
- 댓글 기능을 추가하고 싶다면... 뒷단에서 데이터베이스로 구현해야 하지만 Disqus를 사용하면 할 수 있다.
https://disqus.com/ 새로운 웹사이트 추가 > install disqus에서 스크립트를 복붙하면 된다.
Disqus – The #1 way to build your audience
Disqus offers the best add-on tools for websites to increase engagement. We help publishers power online discussions with comments and earn revenue with native advertising.
disqus.com
- 채팅 기능을 추가하고 싶다면... 이것도 뒷단이 필요하지만 tawk에서 설정 > 대시보드 > 스크립트 복붙으로 구현할 수 있다.
100% FREE Live Chat Software, Ticketing & Knowledge Base! - www.tawk.to
tawk.to is 100% free live chat software to monitor and chat with visitors on your website or from a free customizable page.
www.tawk.to
- 웹사이트 방문자를 분석하고 싶다면 구글 애널리틱스를 이용해 분석할 수 있다.
웹 스트림에서 웹 사이트 url을 설정해 스트림을 만들고 생성된 소스 코드를 HTML 파일 head 부분에 붙여 넣는다.
'🦴 HTML' 카테고리의 다른 글
| [HTML] 입력 양식 form을 알아보자 (0) | 2023.06.07 |
|---|
