HTML 공부

일을 하느라 바빠 잠깐 잠깐씩 [생활코딩] 인강을 들으며 공부 중이다.

현재 공부하고 있는 것은 html이다. 목표는 인강을 보며 사이트를 만들어보고, 그 후에 Tom Holland라는 배우를 소개하는 사이트를 만들려 한다.

지금까지 배운 것들을 복습 차원에서 적어보고자 한다.

1. heading

- 글의 제목을 지정해줄 수 있다.
- 1부터 6까지의 숫자로 h1 ~ h6으로 표현 가능하며, 1이 가장 큰 글자, 6이 가장 작은 글자로 조절 가능하다.
- 누군가 코드를 보았을 때 의미적으로 묶는 것이 가능하다.

2. 줄바꿈

- br을 사용하면 enter키를 눌러 줄바꿈 한 것처럼 결과값을 도출할 수 있다.그러나, br로 줄바꿈을 하여 단락을 나눌 경우, 코드를 보았을 때 한눈에 단락을 알아볼 수 없는 일이 생긴다.
- 이를 방지하기 위해 p라는 tag를 사용한다. p는 paragragh의 앞글자로 단락 맨 처음과 끝에 입력하여 단락임을 표시한다.
- 만약, 단락간의 간격을 더 벌리고 싶다면, p style="margin-top:크기;" 으로 조절.

3. image 삽입

e) img src="파일 이름.확장자명" width="크기 설정 값"

4. 부모, 자식 태그

- 만약 무엇인가에 대한 list를 도출해내야 한다고 가정해보자. 그렇다면 list를 만들 수 있는 li라는 tag를 사용하면 된다. 하지만 이로 끝나는 것이 아닌 이 li라는 tag는 자식 태그이므로 반드시 부모태그로 감싸주어야 한다. 내가 만들고 싶은 것은 순서대로 정렬된 리스트였기에 ol 이란 부모태그를 사용하였다.
- 정리하자면, li로 작성된 코드는 부모태그인 ol이 ul로 바뀌는 순간 하위에 있는 내용은 지대한 영향을 받는다. 그러므로 html에서는 부모, 자식 태그의 관계 혹은 트리 관계를 생각하며 코드를 작성하는 것이 중요한 것 같다.

5. link 만드는 방법

- 링크를 걸고 싶은 텍스트를 a~/a로 감싸준다. a는 anchor, 즉 닻이라는 뜻이다. 어딘가로 닻을 내려주는 방향을 잡아주는 것이라고 이해했다.
- a href="주소"라고 입력하면 해당 주소로 가는 주소가 생성된다.
- 클릭 시, 새로운 페이지가 나오게 하고 싶다면, target="_blank"를 추가하면 되고, 미리 사이트의 정의를 알고 싶다면 title="제목"을 입력하면 된다.

6. 사이트의 제목

- title 제목 /title

7. 작성한 코드와 진수 맞추기

- meta charset="진수"

8. 코드의 범위 규정하기

- body~/body: 본문을 정의
- head~/head: 사이트의 전체적인 개념을 정의
- html: 언어
- !doctype html이라고 명시해주면, 코드 보는 이들이 첫번째 줄을 보고 유추가능