오늘은 html을 포스팅하기로 했다.
프론트엔드 디렉토리를 만들어놓고 너무 손을 대지 않았기 때문이다.
html은 웹페이지에서 보여주는 시각적인 효과... 그러니까 아파트에서 건물을 지어주는 시공사 같은 느낌이랄까?
나는 백엔드 개발자를 희망하는 사람이고, html은 백엔드 개발자의 직접적인 영역은 아니라고들 하지만
그래도 백엔드 프론트엔드 협업하려면 html은 필수라는 말을 들어서 4월부터 html강의를 수강하게 되었다.
근데 사실 html도 처음 수강했을때는 타이핑하느라 바빠서 진짜 아무것도 모르고 지나갔다.
맨 처음 배운 내용이 h태그 p태그 ul태그 div태그 이런것들이었는데 여태까지 구분할 줄 몰랐고, 학교 시험공부하면서 구분이 가능하게 되었다.
오늘은 html의 기본 태그 속성에 대해 복습 겸 포스팅해보기로 한다.
먼저 VSCODE에서 HTML파일을 하나 생성한 사진이다.
맨 처음 생성한 파일은 위처럼 아무것도 없는 사진이다.
하지만 커서에 대고 "!"를 친다면 !와 !!! 두가지 선택자가 나오는데 !를 선택하면
이렇게 DOCTYPE html 이라는 글자와 함께 html의 기본 선언문(?) 이 등장한다!
강사님 말씀이 이것은 VSCODE의 고유 기능이라고 한다.
진짜 내가 옛날 사람은 아니지만 느낌표 하나로 저렇게 10줄가량을 날먹할 수 있는 것을 보면 진짜 세상 좋아졌다....
맨 처음 나오는 <!DOCTYPE html>과 맨 밑의 </html>은 문서 타입이 HTML이라는 뜻이다.
두번째 html lang = "ko"라는 부분은 html의 기본 언어를 한국어(korean)으로 설정한다는 선언문이며, 안에 내용을 영어로 사용한다 하더라도 별 차이는 없다.
세 번째 <head>가 있고 맨 밑에서 4번째 줄에 </head> 라는 부분이 있는데 이 두가지는 웹페이지에 직접적으로 표시되는 부분은 아니다.
그리고 네 번쨰 meta라는 태그를 사용하는 부분은 나도 잘 모르겠다.
메타데이터라고 하는데 메타데이터를 검색해보니까
데이터를 설명하는 데이터란다 이게무슨소리람... 한마디로 선언문의 집합체 같은 느낌이 난다.
다섯번 째 <body></body> 라는 부분은 웹페이지에 나오는 부분이다. 우리의 뇌구조는 남에게 보여지는것이 아니고 운동을 하고 몸이 좋아지면 남에게 보여지듯이 body 태그에 내용을 작성하면 웹페이지에 보여지는것이다.
대충 기본구조는 이만큼이면 된것같고 이제 각종 태그에 대해 알아본다
지금 당장 기억나는것은 h태그, p태그, a태그, ul태그, li태그,ol태그, nav태그, footer태그, br태그, div태그 등이 있다.
여기서 br태그만 별종인게, 위에 설명했듯이 body, head, doctype 태그는 여는태그와 닫는태그가 따로있는 반면, <br>태그여닫기 구분이 없다.
이유는 밑에서 설명한다.
각종태그의 기능을 설명하자면,,,
h태그:제목을 선언할때 쓴다. 크기에따라 h1~h6까지 있다.
p태그:문단을 선언할때 쓴다.
a태그:하이퍼링크를 걸 때 쓴다.
ul태그, ol태그, li태그:목록을 만들때 쓴다.
div태그:레이아웃을 나눌때 쓴다.
nav태그는...잘 모르겠다 ㅎㅎ
먼저 말했던 br태그는 한줄 공백을 넣는 기능을한다
<br><br><br><br><br>이렇게 다섯개를 쓰면, 다섯줄을 공백으로 띄우는 것이다.
각종 태그에 대해서 설명했으니 그 태그안에 내용을 넣어서 기능이 제대로 작동하는지 확인하고, 포스팅을 종료한다.
맨 위가 h1태그이다. 앞서 말했듯이 h1~h6으로 갈수록 크기가 작아지는 것을 확인 할 수 있다.
p태그의 부산광역시 동래구 밑에 div태그로 충렬대로를 사용하여서 틀을 잡았고, 그 밑에 여러 주소를 ul태그로 지정하고, 그 안에 우리집, 엄마집, 친구집 등을 li태그로 지정했다.
밑에 줄에는 241번가길 안의 여러 학교를 li태그로 항목을 주었다.
물론 학교들은 생각나는대로 작성했다
결과물은 이렇게 나온다.
마지막으로 아까전에 설명하지 않았던 선언문의 <title></title> 태그에 대해서 설명한다
타이틀 태그 안의 document라는 단어는 우리가 흔히 크롬이나 엣지를 켜면 탭을 추가하면 새탭이라고 기록된다
그 부분이 타이틀태그 안에 있는것이다.
기본적으로 Document라고 출력이 된다.
이것을 강주현으로 수정하면?
페이지에 내 이름이 박혔다!!!
다음 포스팅은
style시트에 대해서 작성하도록 한다.
'코딩입문 > 프론트엔드' 카테고리의 다른 글
| html-2 (0) | 2022.07.12 |
|---|---|
| 코딩 입문기, HTML-1 (0) | 2022.04.18 |