멋사 프론트엔드스쿨 2일차 (2021.11.2)

오늘 가장 크게 느낀점: html 구조 짤 때, semantic 하게 짜기. div만 짜면 정말 안좋은 코드!!

 

배운점

-스니펫을 설정하는 법을 배웠다. (내가 원하는 방식대로 단축키 설정가능)

-emmet에 대해서 깊게 배웠다

1) h1{hello word} => 중괄호안에 내용을 쓸수있다.

2) h1.one / h1#one => id나 클래스를 미리 설정할 수 있다.

3) a[href="www.naver.com"] => 대괄호를 이용해 속성을 설정한다

-lorem이란 무엇인지 배웠다 (의미없는 말 채울때 이용)

- 마크업 언어와 마크다운 언어를 알게되었다.

-h1 ~ h6은 단순히 글씨 굵기가 굵은게 아니라, 제목을 의미한다. 연속으로 쓰는것을 추천하지 않는다

-<b> <strong> => 굵은 글꼴 이용

-<i>, <em> =>글꼴 기울기

-<mark> => 형광 칠할때 이용

-<abbr> => 축약어 사용시 이용

-<sup> , <sub> => 화학기호나, 수학공식 등 첨자 기호 사용시 이용

-<pre> -> 있는 그대로 보여줌

-<ol type="A"> =>숫자뿐 아니라 영어, 로마자 사용 가능

-<dl> .<dt>. <dd> 

-<figure> <figcaption>

-<iframe> -> 한페이지에서 다른 페이지 보여줄때 이용

-<img width: 100px height:100px/> 이런식으로 설정 가능

-------

html semantic tag

1. header -검색창 /메뉴 등

2.nav -링크의 묶음

3.aside -링크/ 광고/ 사이드바 / 최근상품목록

4.section - 한내용에 대한 컨텐츠들을 그룹화 하기 위해 사용. 독립적으로 존재 x . header 와 footer 와 비교하여 구분 짓는 용도

5.article - 독립적으로 존재 가능 블로그 포스트. 뉴스 기사 등