생활코딩 HTML 정리

HTML 정리

1. 사람이 하는 일(원인)과 기계가 하는 일(결과)

① 사람이 하는 일을 부르는 여러 표현: 코드, 소스, 컴퓨터 언어

② 기계가 하는 일을 부르는 여러 표현: 앱, 응용 프로그램, 프로그램 웹에서는 결과를 웹페이지, 웹페이지가 모여있으면 웹사이트라고 한다.

③ 원인인 코드를 통해서 결과를 만든다. HTML은 웹페이지를 만드는 코드.

2. 태그

① strong: 강조

② u: 밑줄

③ h1 ~ h6: 제목, 숫자가 커질수록 글씨는 작아진다. h1이 가장 중요한 제목, 숫자가 커질수록 중요도는 낮아진다.

④ br: 줄 바꿈, 무엇인가를 설명하지 않는 태그이므로 닫는 태그가 없다.

⑤ p: 단락, br과 다르게 닫는 태그가 있다.

/*p태그는 단락과 단락의 간격이 고정되어 있다는 단점이 있다.

br태그는 원하는 만큼 간격을 줄 수 있다.

p태그가 좋은 태그, 정보를 더 가치 있게 해 준다.

p태그의 한계는 CSS를 통해 극복한다.*/ ​

3. 의미에 맞는 태그를 사용하는 것이 검색엔진의 검색 결과에서 노출될 지를 결정한다.

4. 속성(태그의 심화)

① 태그만으로는 정보가 부족할 때 사용한다

② img 태그는 태그 만으로 할 수 있는 게 없어서 src="경로" 를 추가해줘야 한다. 여기서 src가 속성이다.

③ width: 크기 조정

5. 부모 자식과 목록

①부모와 자식 관계는 직장의 상하 관계처럼 필요에 따라서 달라질 수 있다. 그러나 고정된 태그들도 존재한다.

②ul(unordered list)과 li 태그: li는 목록을 나타내는 태그. 목록과 다른 목록을 구분하기 위해 ul을 사용한다.

③ol(ordered list): 번호를 매겨줌

6. 문서의 구조

① 정보가 많아질수록 정리정돈을 위해 구조가 필요하다.

② title 태그: 웹페이지의 제목 지정, 검색엔진이 웹페이지 분석할 때 가장 중요하게 생각하는 태그.

③ meta charset="utf-8": 웹브라우저에게 웹페이즈를 utf-8로 열라고 지정해 줌.

④ 위의 코드들은 본문이 아니라 본문을 설명함. 본문은 body 태그, 본문을 설명하는 태그는 head 태그로 구분한다. html 태그는 body 태그와 head 태그를 감싸는 하나의 태그다.
웹페이지가 HTML로 만들여졌다는 것을 표현하기 위해 문서의 시작에 !doctype html 추가한다.

7. 태그의 제왕

① a(anchor): 링크, href와 함께 사용한다.

② target="_blank": 링크를 클릭하면 새창에서 페이지가 열리게 한다.

③ title: 이 링크가 어떤 내용을 담고 있는지 툴팁으로 보여주는 기능

8. 서버와 클라이언트

① 클라이언트: 웹브라우저가 설치된 컴퓨터. 인터넷을 통해 서버 컴퓨터에게 신호를 보내 원하는 자료를 요청한다. 자료를 서버로부터 받으면 해당 웹페이지를 화면에 출력한다.

② 서버: 웹 서버가 설치된 컴퓨터. 신호를 받으면 디렉토리에서 해당 파일을 찾고 클라이언트에게 신호를 보낸다.

* http: 웹페이지를 주고받기 위한 통신규약 ​