[HTML-CSS] 태그(Tag), Emmet, mnd, 스타일 요소의 분리

얄코님의

'제대로 파는 HTML & CSS 강좌-웹 개발 퍼블리싱 끝장내기' 강의를 들으며 정리해보고 있습니다.

지난 강의에선 각 언어들의 용도와 차이점에 대해서 알아보았습니다.

 

VS Code -> 파일 -> 폴더 열기

TIL폴더 안에 HTML CSS를 공부하는 폴더를 만들고 열어주었습니다.

새파일을 만들어줍니다.

여기서 index.html 명은 특정 폴더의 디폴트 페이지 이름이라고 생각하시면 됩니다.

이제 이렇게 느낌표를 치게 되면

자동으로 아래와 같은 코드가 입력이 됩니다.

Emmet 명령어라고 하네요.

웹페이지에 보여지는 부분은 이 body 태그 안에 입력된다고 합니다.

그리고 lang 속성을 ko로 변경해주어야 하는데요.

문서의 언어를 명시해주는 것이라고 합니다. 접근성, 검색최적화, 폰트를 설정하기 위해 처음에 잘 설정해주어야할 듯합니다.

그 후 body 안에 안녕하세요를 입력하고 Open with Live Server를 클릭해줍니다.

그럼 브라우저에 똑같이 안녕하세요. 가 입력된 것을 볼 수 있습니다.

 

 

다음은 바디 안에 더 많은 문장을 입력해봅니다. 

예상하신대로 줄바꿈과 탭 등 전혀 적용되어있지 않습니다.

얄코님이 예시로 올려주신 페이지의 코드를 다음과 같은 방법으로 볼 수 있습니다.

<br> 이런식으로 되어있는 것들을 태그라고 부른다고 해요.

태그를 해석하는 것을 얄코님이 쉽게 설명해주셨습니다.

 

h1~ h6은 가장 큰 제목부터 작은 제목까지를 의미합니다.

태그를 사용할 때 h1을 입력하고 자동완성이 보일 때 Tab을 눌러주시면 자동으로 여는 태그와 닫는 태그가 입력됩니다.

 

추가로 알고 싶은 태그를 검색창에 입력하고 뒤에 mdn을 입력하면 해당 태그의 신뢰성있는 정보를 알 수 있다고 해요. 

HTML, CSS, JavaScript에 대해 검색할 때 유용할 것 같습니다.

 

지금은 H1의 태그안의 제목이 많이 커보이는데 얄코님은 당장 HTML로 작성된 글자의 크기는 신경쓰지 말라고 하셨습니다.

크기보다 해당 글자의 종류(제목)을 신경쓰는 것이 좋다고 합니다. 크기는 CSS에서 처리하는 부분이기 때문이죠.

 

강조하기 위한 태그

B 태그 vs Strong 태그

B : 굵게

Strong : 정말 중요하면서 굵게

이것또한 굵게 보이는 정도는 나중에 CSS로 조절해줄 수 있기에 굵게보이는 것에 집중하기 보단 중요한 요소인지 여부에 집중. 나머지 부분도 마찬가지임.

오늘날 스타일 정보는 완전히 HTML에서 CSS로 분리된 상태.

 

 

i 태그 vs em 태그

i : 기울이기

em : 정말 중요하면서 기울이기

 

 

sup 태그 vs sub 태그

sup : 아래 첨자

sub : 위 첨자