HTML

HyperText Markup Language

Internet : 도시(운영체제) / Web : 건물(앱.exe)

Web site : 웹페이지들의 그룹

웹사이트를 만들 때는 순서가 중요하다.

Disqus

tawk.to

1. 웹-브라우저(Client)
2. 웹-서버(Server)

2017년 기준 150여개가 넘는 Tag가 존재한다.

태그별 인기도 확인 : html, head, body, title, meta, div, a, script, link, img, span, p, li, ul, style, br 등

HTML Study | Advanced Web Ranking

• 웹 프로그래밍의 핵심은 ‘접근성’이다. 소외되는 사람들이 없도록 html의 의미를 정확히 이해하고 코드를 작성하도록 노력하자.

문법

Tag

닫지 않는 태그는 볼드로 표시 : 주로 감싸야하는 컨텐츠가 없는 태그가 해당.

중첩해서 사용 가능

1. : HyperText Reference, 링크
   1. <a href="https://www.w3.org/TR/html5/" target="_blank" title="html5 specification">
      1. target=”_blank” : 링크 페이지를 새창에서 열게 해주는 속성
      2. title=”~” : 이 링크가 어떤 내용을 담고 있는지를 툴팁으로 보여주는 기능
2. : 볼드체
3. : underline
4. <h1~6> : 대제목 2, 3, 4, … 부제2, 부제3, 부제4, …
5. <br> : 줄바꿈

6. : paragraph, 단락을 설정한다. 단락과 단락의 간격이 고정이어서 간격이 자유로운 br태그를 선호한다. 1. HTML은 정보를 표현하지만, CSS는 정보를 꾸미는 역할, CSS로 p태그의 간격 한계 극복 가능 2. CSS : `<**p** style="margin-top:45px;">` - p태그의 위쪽에 45픽셀(px)만큼의 여백(margin) 생성 3. 따라서 ‘단락의 경계’가 목적인 경우 p태그가 바람직하며, CSS로 간격 조절까지 가능해졌다.

7. : 이미지 삽입 태그. Tag만으로는 부족한 정보를 보충하기 위해 Attribute라는 문법을 사용한다. 그 중에서 src를 사용한 예시를 본다.
   1. <img src=”이미지 링크.파일 형식” width=”~%”> 와 같이 표현한다.
      1. width : 이미지의 크기를 다루는 속성, src : 이미지의 위치 속성
      2. 만약 로컬 데이터베이스에 존재하는 이미지를 불러오고자 한다면, src=”디렉토리까지의 경로/이미지파일 이름.해당 파일 형식” 으로 지정한다.
   2. <input ~> : 각각 상황에 맞춰 검색해보자.
9. : 입력된 데이터를 한 번에 서버로 전송한다.
   1. get : url에 정보가 드러난다. 북마크 방식에 특화
      1. 따라서 받는 쪽에서 $_GET을 사용한다.
   2. post : url에 정보가 드러나지 않아 보안에 장점이 있다.
      1. 따라서 받는 쪽에서 $_POST를 사용한다.

11. ---