[HTML] 김준태 강사 강의 복습

웹사이트에 들어간다고 하지만,

사실은 웹사이트에 우리가 주소로 접근(request, 요청)하는 순간에

해당 주소에 존재하는 HTML, CSS, JS 파일이 우리 컴퓨터에 순간적으로 다운로드(Response, 응답)되는 것일 뿐이다 !

개발자 도구에서 네트워크를 통하여 주고받는 파일을 볼 수 있다.

 

결국 웹이라는 건,

어떤 주소에 접근하면, 어떤 파일을 건네줄 건지가 정의된 것이라고 생각하면 된다.

 

HTML에서 Markup Language란 프로그래밍 랭귀지와 같이 특정한 논리를 가지고 작동하는 프로그램을 작성하기 위한 것이 아니라, 특정한 데이터를 표시하는 방법을 기술하는 언어를 말하는 것으로, 보여줄 데이터를 작성하는 방식을 정의한 언어일 뿐이다.

 

CSS는 Cascading Style Sheet의 약자로, HTML 요소를 어떻게 보여줄지 더욱 자세하게 정의한 스타일 시트 언어이다.

 

 

1. div 태그

요소들을 구분하기 위한 태그

처음 한번에 모든 걸 작성할 수 없기 때문에, 각 요소들의 배치를 처음에 생각해놓기 위한 태그이다.

 

2. p 태그

문단(paragraph)을 표현하기 위한 태그로, 웹 사이트 내에서 글자를 표현할 때 가장 기본적으로 사용하는 태그

기본적으로 여백(margin)이 위아래 주어져 있다.

cf. 태그마다 기본적으로 주어진 css 속성들이 있다.

 

3. h 태그

제목(head)을 표현하기 위한 태그

글자 크기가 커지면서 볼드체가 되는 효과도 있지만, 해당 글자가 제목이라는 것을 표현하기 위한 의도도 있다.

h1 ~ h6 에서 h1이 가장 크고 h6이 가장 작은 크기이다.

 

4. strong 태그, b 태그

글자를 강조하기 위한 태그

둘 다 시각적으로는 동일하게 표시되지만, strong은 매우 중요하다는 의미까지 내포하고 있다.

 

5. em 태그, i 태그

글자를 기울이기 위한 태그

둘 다 시각적으로는 동일하게 표시되지만, i는 주변의 글자와 구분해서 기울임 표시를 하고 싶을 때 사용하고,

em은 해당 내용을 강조하고 싶을 때 사용한다.

 

cf. 사실 strong, b, em, i 태그는 정말 강조하고 싶은 경우가 아니라면 잘 활용되지 않고,

     보통은  css를 활용해서 작성하는 경우가 대부분이다 !

 

6. hr 태그

간단한 가로줄을 표시하기 위한 태그

주제가 분리되거나 전환된다는 의미까지 포함하고 있다.

특이점은 내용 작성의 필요가 없기 때문에 닫는 태그가 없다.

cf. 박영웅 현직자의 추천으로는 < /hr> 이렇게 표기

     김준태 강사님은 hr 대신에 디브를 아주 낮게 높이를 줘서 대체해서 쓰신다고 하심.

 

7. br 태그

줄바꿈을 위한 태그

닫는 태그가 없다.

cf. 박영웅 현직자의 추천으로는 < /br> 이렇게 표기

 

8. a 태그

클릭시 다른 페이지로 연결시켜주는 요소

cf. 개발하는 웹 사이트의 각각의 페이지로 이동시켜줄 때에도 사용하는데,      https://를 붙여주지 않으면 지금의 경로 내에서 언급해준 곳으로 이동을 하게 된다.

 

9. img 태그

이미지를 표시하기 위한 태그

src에 이미지 파일명이나 주소를 명시해준다.

cf. alt 명시는 선택적이기는 하나, 실제 서비스에서는 alt까지 명시해주는 경우가 대부분이다.

닫는 태그가 없다.

 

10. input 태그

사용자로부터 글자 등을 입력받기 위해 사용하는 태그

작성할 내용이 없기 때문에, 이 역시 닫는 태그가 없다.

type이라는 속성에 어떤 타입으로 입력받을지 명시할 수 있다.

ex. text, button, checkbox, date, file, radio, submit, password

      radio에서는 같은 name을 가진 선택지 중에 택일하는 것이라고 브라우저가 인식한다.

 

11. lable 태그

input에 대한 설명 등을 명시하는 태그

 

12. form 태그

input 태그를 한 곳에 모아서 하나의 입력 양식을 만들기 위해 사용하는 태그

 

 

13. button 태그

버튼을 만드는 태그

 

14. table 태그

HTML 문서 내에서 표를 만들 때 사용하는 태그

thead, tr, th, tbody, td 태그와 함께 사용된다.

 

 

표를 나타내는 태그이지만 !

css로 보더라인의 스타일을 주지 않으면, 우선 HTML 작성만 했을 때는 위와 같이 텍스트만 출력된다.

tr 태그는 표에서 하나의 행을 만들때 사용하고, td 태그는 하나의 행 안에서 각각의 내용의 표시하는 데에 사용된다.

 

15. li 태그

ol 태그 (순서가 있는 목록), ul 태그 (순서가 없는 목록)의 내부에 각 항목을 작성할 때 사용되는 태그

ol 태그 내부에서는 순서와 함께 내용이 표시되고,

ul 태그 내부에서는 순서가 없는 동그라미 등의 표시와 함께 내용이 표시된다.

 

 

 

시맨틱 태그 : 태그 자체로 의미가 있는 태그로, 태그만 보아도 그 안의 요소(내용)의 의미를 가늠할 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

간단하게 강사님 소개. 

https://www.yna.co.kr/view/AKR20200306037200017

'코로나 알리미' 이어 '마스크 알리미' 나왔다 | 연합뉴스

코로나 알리미, 마스크 알리미 사이트를 개발한 분으로 청와대에 초청받았는데 마침 BTS와 함께 초대되어 같이 식사를 했다고.

Wow~ 브럽