오늘은 부스트코스외에 인프런을 이용해보라는 조언도 받아서, 인프런의 아래 강의를 수강하며 html 복습을 진행했다. 제주코딩베이스캠프에서 제공하는 html,css,js,python 요약강좌!
강의들이 30분 내외로 긴편도 아니고, 무료인지라 한번 들어보자는 마음에 스타트.
근데, html코드를 작성하면서 처음으로 emmet기능을 써보았다. 컨테이너는 구름IDE에서 생성하여 진행하는데 기본 옵션으로 emmet기능을 체크하시더라. (이거 다들 하고계신거 맞나요...?)
근데 이게 좀 공부하면서도 생소해서 오늘 복습한 html 태그나 기능외에 추가로 정리를 해야할 것 같아서 끄적여본다.😎
※html emmet 소개
참조: https://emmet.io/, https://youtu.be/m7wsrVQsVjI
. HTML 양식 작성: ! + tab (이것부터 너무 신기했음...이걸 하면 아래 기본 양식이 자동으로 생성된다)
! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
. tag 작성: tab 이름 + tab
header
<header></header>
. tag + class 작성: .class + tab / #id + tab
a.img
<a href="" class="img"></a>
. parent + child node 작성: tag 이름 > tag 이름 + tab
div>ul>ol <div> <ul> <ol></ol> </ul> </div>
. sibling node 작성: tag 이름 > tag 이름 + tag 이름 + tab
div>ol+ul <div> <ol></ol> <ul></ul> </div>
. tag 반복 작성: tag 이름 > tag 이름5 + tab (나는 개인적으로 이게 제일 편리했다. (*)을 하는 것만으로도 리스트가 쫘라락....)
ol>li*5 <ol> <li></li> <li></li> <li></li> <li></li> <li></li> </ol>
. 상위에 node를 작성: tag 이름1 > tag 이름2 > tag 이름3^tag 이름4 + tab, tag4가 tag2와 같은 level로 인식
div>ul>li*3^ol <div> <ul> <li></li> <li></li> <li></li> </ul> <ol></ol> </div>
. tag를 그룹화해서 작성: tag 이름 > (tag 이름)+(tag 이름) + tab
div>(header)+(footer) <div> <header></header> <footer></footer> </div>
. tag 안에 text 작성: tag 이름{text} + tab
p>{hello world} <p>hello world</p>
. 자동으로 숫자 할당하여 작성: tag 이름.class${text $}*5 + tab(이것도 가장 신기하고 재밌었던 기능중 하나, 아마 활용도가 제일 높지 않을까...?싶다)
p.box${item $}*5 <p class="box1">item 1</p> <p class="box2">item 2</p> <p class="box3">item 3</p> <p class="box4">item 4</p> <p class="box5">item 5</p>
. dummy용 text 작성: tag 이름 > lorem + tab, tag 이름> lorem숫자(단어 수 제한)
p>lorem <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, iure. Quos cupiditate esse placeat ipsa reprehenderit dolorem, laboriosam nulla repudiandae exercitationem molestias tempore nihil quis asperiores distinctio ut iste perferendis?</p> p>lorem5 <p>Lorem ipsum dolor sit amet.</p>
dummy 텍스트 만드는 것도 신기했다. 파이썬에서 마치 내장된 데이터셋 불러오는것과 같은 느낌이라...html에는 이런거 없을거라 생각했는데 내가 미안해 ....😥
내가 오늘 강의에서 사용한건 이정도지만 분명 파고들면 더 많은 편리한 기능들이 있을거라 생각한다. 그것들은 이제 필요할때가 오면 열심히 구글링하면서 찾아봐야지 😎
