오늘 가장 크게 느낀점: 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 - 독립적으로 존재 가능 블로그 포스트. 뉴스 기사 등
'📓 개발 일지' 카테고리의 다른 글
프론트엔드스쿨 5일차 (1) | 2021.11.04 |
---|---|
프론트엔드스쿨 4일차 (0) | 2021.11.04 |
멋쟁이사자처럼 프론트엔드 스쿨 1일차 후기(2021.10.29) (0) | 2021.10.31 |
내일부터 프로젝트 시작!! (0) | 2021.08.05 |
이제 거의 막바지가 다가온다!! (0) | 2021.08.05 |