HTML(HyperText Markup Language) 공부 자료 정리
<>로 닫혀있는 것은 TAG라고 한다
- 열리는 태그는 <>, 닫히는 태그는 </> 이다.
- 진하게는 <strong></strong>, 밑줄은 <u></u>이다. (자주 사용하지는 않음)
- <h1> ~ <h6>까지는 heading(제목)이고, 1이 가장 크고 6이 가장 작으며 일반적인 글씨보다는 굵고 줄바꿈이 된다.
HTML을 이해하는 것이 중요한 이유
HTML 코드를 알게되면 웹문서의 작성과 배포 과정에 대해 이해할 수 있을 뿐만 아니라, 어떻게 문서를 작성해야하는지에 대해서도 알 수 있게 된다.
예를 들어, 웹문서를 작성할 때 폰트 크기를 키워서 진하게 하는 버튼을 이용하는 것과 제목1, 제목2 등의 기능을 이용하는 것은 코드 측면에서 아예 다르다. 검색 엔진은 제목1, 제목2 (= <h1>, <h2> ) 등의 도구를 이용하여 제목을 표시해야만 해당 tag에 있는 words를 keyword로 하여 searching을 진행하기 때문에 상단에 노출되기가 쉽다.
또한 최근에는 이미지에 글을 포함시켜 정보를 전달하는 경우가 있는데, 그런 경우에는 더더욱 노출되기가 어렵다.
TAG에 대해 이어서 살펴보자
- <br>은 줄바꿈이다. 한번 하면 엔터 한번 친 것, 두 번하면 단락 띄우기.
- 단락을 나눌 때 사용하는 tag는 <p></p>이다
- <br> 은 단순 줄바꿈이지만 <p></p>는 paragraph를 명확히 나눠주므로 정보로써의 가치가 더 높다.
- 그러나 <p></p>는 단락 사이 줄간격이 정해져 있어 시각적으로 좋지 않다.
- 해결책 → css문법 사용, <p>에 <p style=”margin-top:45px”>와 같이 조절 가능 (추후에 배울 것!)
- 이미지를 넣을 때 사용하는 태그는 <img>이며, <img src(source):”주소”>와 같이 불러올 수 있다.
- 크기 조정은 <img> 안에 width=”크기”로 조절 가능하며, 화면 크기에 맞게 하려면 100%를 입력하면 된다.
- 태그 안에 들어가는 src, width 등등은 속성(attribute)라고 한다.
# 부모 태그와 자식 태그: 태그의 포함 관계를 나타낸다.
# 부모 태그 안에 자식 태그가 들어간다.
<parent>
<child></child>
</parent>- 리스트를 만들기 위한 태그는 <li>이다.
- <li>의 부모 태그는 <ul>과 <ol>이다 : <ul>은 unordered list이고, <ol>은 ordered list이다.
- <ul>은 순서가 상관 없는 list에 대해 사용하면 좋다.
- <ol>은 자동으로 numbering을 해주므로 순서가 있는 list에 대해 사용하면 좋다.
- <ul>은 순서가 상관 없는 list에 대해 사용하면 좋다.
- <title>은 웹 탭 이름을 설정할 수 있는 태그이다.
- 한글을 사용할 때에는 <meta charset=”utf-8”>을 사용한다. 이때 charset은 character set이라는 뜻이다.
- <title>, <meta> 등은 본문에 대한 설명을 진행하는 것이므로 <head></head> 안에 묶여있다.
- 본문은 <body></body>안에 묶여있다.
- <head>와 <body>는 <html></html> 안에 묶여있다.
- 형식적으로 <!DOCTYPE html> 이라고 맨 윗줄에 써준다.
- 링크를 걸 때에는 <a></a>를 사용하는데, attribute로 href(hypertext reference)="주소"를 사용한다.
- 새 탭으로 열리게 하고 싶다면 attribute로 target=_blank를 사용한다.
- 링크가 클릭하기 전에 어떤 것인지 툴팁을 띄우고 싶으면 title=”툴팁내용”을 사용한다.
HTML 사람들에게 보여주기
- Internet과 Web의 관계: Web은 FTP, email와 같이 Internet의 한 요소이다. 즉, Internet은 Web, FTP, email 등의 요소를 포함한다.
- HTML을 사람들에게 보여주려면?
- 서버가 필요하다. 서버(server)란 정보를 전달(serve)하는 컴퓨터로, 정보를 요구하는 클라이언트(client)가 특정 자료가 필요하다고 신호를 보냈을 때 서버 컴퓨터 내의 자료를 찾아 제공해준다.
- 서버 - 직접 구축
- 직접 구축하는 방법으로 aparch를 소개한다. aparch는 bitnami wamp라는 프로그램을 통해 쉽게 설치 가능하다. 서버가 정상적으로 작동하게 되면, 설치할 때 설정했던 경로 내에 'htdocs'라는 이름의 폴더에 저장되어있는 문서를 읽을 수 있게 된다(default 값이며 경로는 변경 가능하다). 여기에 우리가 만든 HTML 파일을 넣고 웹브라우저에서 파일을 실행할 수 있다.
- 참고로, 위와 같이 단순하게 설정하는 경우에 모든 컴퓨터에서 우리 사이트에 접속할 수 있게 하는 것은 제한된다. 대신 같은 네트워크(같은 와이파이를 사용하는 등) 안에 있는 경우에는 스마트폰이라던가 다른 PC에서 접속이 가능하다. 이 때는 자신의 컴퓨터의 IPv4 주소를 입력하여 접속이 가능하다.
- 서버 - 호스팅 서비스 이용
- 업체에서 제공하는 서버를 이용하는 방법이 있다. 여러가지 호스팅 업체들이 있지만 우리는 프로그래밍들을 위한 호스팅 서비스를 제공하는 Github을 이용할 것이다.
- 가입 → new repository 생성 → file upload → setting → pages → Branch를 Main으로 설정 → Save 하게 되면 DNS를 제공한다.
- 나의 경우 https://relaxingbear.github.io/web1/ 라는 주소를 받게 되었다.
- 서버 - 직접 구축
- 서버가 필요하다. 서버(server)란 정보를 전달(serve)하는 컴퓨터로, 정보를 요구하는 클라이언트(client)가 특정 자료가 필요하다고 신호를 보냈을 때 서버 컴퓨터 내의 자료를 찾아 제공해준다.
WEB0 - World Wide Web
HTML CSS JavaScript YouTube Web이란 무엇인가? World Wide Web은 1989년 12월 16일에 개발되고 1990년 12월 20일에 발표 및 보급된 월드 와이드 웹(World Wide Web, WWW, W3)은 인터넷에 연결된 컴퓨터를 이용해 사람들
relaxingbear.github.io
외부 코드 가져다 쓰기
- 각종 서비스에서 제공하는 코드를 단순히 복사, 붙여넣기만 하게 되면 우리의 HTML에서도 이용 가능하다 !
- 댓글 입력 기능 - ‘disqus’라는 서비스를 이용할 수 있다.
- 채팅 기능 - ‘tawk’라는 서비스를 이용하여 추가할 수 있다.
- 방문자 분석 - Google analytics를 이용하여 태그를 HTML에 직접 삽입하면 사용자가 어느 지역에서 접속했는지, 어떤 컨텐츠에 관심이 있는지 등에 대해 분석할 수 있다.