멋쟁이사자처럼에서 주관하는 프론트엔드 스쿨 2기에 지원하여 합격하였고, 어제부터 캠프를 진행하게 되었다. 다양한 경험을 하고 오신 분들이 굉장히 많았고, 이전까지 했던 것들을 과감하게 포기하고 새롭게 도전하시는 분들도 굉장히 많아서 놀랐다....!
멋쟁이사자처럼 프론트엔드 스쿨을 수강하기로 결심한 가장 큰 이유 중 하나는, 여태까지 공부했지만 여기저기 흩어져있는 지식들을 잘 쌓기위함이다. 그러기 위해서는 기록이 필요하다고 생각하였다. 정신없이 많은 내용들을 공부하였지만, 내가 공부했던 지식들이 잘 축적되는 것이 아닌 여기저기 흩어져있다고 생각이 들었고, 가장 큰 원인은 기록의 부재라고 생각한다. 따라서, 캠프 수강 중 새로 얻게 된 지식과 혼자 공부하면서 얻은 지식을 블로그에 잘 정리할 예정이다.
TIL = Today I Learned (오늘 내가 공부한 것)
🔥그래서 당장 시작한다🔥
우리가 사이트에 접속할 때, 흔하게 볼 수 있는 사이트 이름, 주소로 치면 회사명, 아파트명을 비유할 수 있겠다.
ex) www.naver.com
컴퓨터 네트워크 상에서 각 장치들의 고유 번호, IP주소를 쉽게 바꾼 네트워크 호스트 이름이 도메인 주소이다. 주소로 치면 고유 주소(도로명 등..)을 비유할 수 있겠다.
ex) 105.209.222.141
네트워크 서비스나 특정 프로세스를 식별하는 논리 단위, 쉽게 말하자면 특정 건물의 특정 상가에 들어가는 문으로 비유할 수 있겠다.
ex) 22, 23, 80, 443....
여태까지 하나하나 하드코딩했던 나에게 emmet은 혁신이다....! 시간을 줄이는데 엄청나게 기여를 할 것 같고, 손에 익을 때까지 무한히 연습해야할 것 같다.😯
태그명 + tab키
(태그명 + 태그명) + tab키
태그명 > 태그명 + tab키
태그명{텍스트...}
id: 태그명#id명 + tab키
class: 태그명.class명 + tab키
태그명[속성명="~~"]
다음은 대표적인 웹 레이아웃이다. (사진이 왤케 크지...)
원래 알고있던 내용이나, 새롭게 알게된 내용을 기록하려고 한다.
<h1>
태그를 여러번 사용하지 않는다.<div>
는 최후의 수단이다. 시멘틱 태그를 반드시 사용할 것.그룹핑 태그 역시 생소했던 태그 위주로 정리하려고 한다.
<dl>, <dt>, <dd>
목록을 정의할 때 사용하는 태그,
<ol>, <ul>, <li>
태그들과 다른 점은 사전처럼 정의할 때 쓰이는 목록 태그이다.
<figure>, <figcaption>
<figure> <img src="~~~"> <figcaption>아기 사진</figcaption> </figure>
<figcaption>
태그에 이미지에 대한 자막 및 설명이 달린다.
<pre>
HTML에 작성한 내용을 그래도 화면에 표현할 때 사용, 주로 코드 표현 시 사용
웹 레이아웃 맛있게 잘 먹고갑니다
^