3/29 TIL

유준상·2022년 3월 29일
1

프론트엔드스쿨

목록 보기
1/1

🤨 서론

 멋쟁이사자처럼에서 주관하는 프론트엔드 스쿨 2기에 지원하여 합격하였고, 어제부터 캠프를 진행하게 되었다. 다양한 경험을 하고 오신 분들이 굉장히 많았고, 이전까지 했던 것들을 과감하게 포기하고 새롭게 도전하시는 분들도 굉장히 많아서 놀랐다....!

🤔 TIL이 뭔데??!!

 멋쟁이사자처럼 프론트엔드 스쿨을 수강하기로 결심한 가장 큰 이유 중 하나는, 여태까지 공부했지만 여기저기 흩어져있는 지식들을 잘 쌓기위함이다. 그러기 위해서는 기록이 필요하다고 생각하였다. 정신없이 많은 내용들을 공부하였지만, 내가 공부했던 지식들이 잘 축적되는 것이 아닌 여기저기 흩어져있다고 생각이 들었고, 가장 큰 원인은 기록의 부재라고 생각한다. 따라서, 캠프 수강 중 새로 얻게 된 지식과 혼자 공부하면서 얻은 지식을 블로그에 잘 정리할 예정이다.

TIL = Today I Learned (오늘 내가 공부한 것)

🔥그래서 당장 시작한다🔥

1. 도메인, URL, IP, PORT

  • 도메인, URL

    우리가 사이트에 접속할 때, 흔하게 볼 수 있는 사이트 이름, 주소로 치면 회사명, 아파트명을 비유할 수 있겠다.
    ex) www.naver.com

  • IP

    컴퓨터 네트워크 상에서 각 장치들의 고유 번호, IP주소를 쉽게 바꾼 네트워크 호스트 이름이 도메인 주소이다. 주소로 치면 고유 주소(도로명 등..)을 비유할 수 있겠다.
    ex) 105.209.222.141

  • PORT

    네트워크 서비스나 특정 프로세스를 식별하는 논리 단위, 쉽게 말하자면 특정 건물의 특정 상가에 들어가는 문으로 비유할 수 있겠다.
    ex) 22, 23, 80, 443....

2. emmet 사용법

 여태까지 하나하나 하드코딩했던 나에게 emmet은 혁신이다....! 시간을 줄이는데 엄청나게 기여를 할 것 같고, 손에 익을 때까지 무한히 연습해야할 것 같다.😯

  • 태그 생성

    태그명 + tab키

  • 여러 태그 생성

    (태그명 + 태그명) + tab키

  • 태그 내의 태그 생성

    태그명 > 태그명 + tab키

  • 콘텐츠가 있는 태그 생성

    태그명{텍스트...}

  • id, class명이 부여된 태그 생성

    id: 태그명#id명 + tab키
    class: 태그명.class명 + tab키

  • 속성이 부여된 태그 생성

    태그명[속성명="~~"]

3. 웹 레이아웃


다음은 대표적인 웹 레이아웃이다. (사진이 왤케 크지...)
원래 알고있던 내용이나, 새롭게 알게된 내용을 기록하려고 한다.

  • 새로 알게된 점
  1. 한 페이지에서 <h1> 태그를 여러번 사용하지 않는다.
  2. <div>는 최후의 수단이다. 시멘틱 태그를 반드시 사용할 것.

4. 그룹핑 태그

 그룹핑 태그 역시 생소했던 태그 위주로 정리하려고 한다.

  • <dl>, <dt>, <dd>

     목록을 정의할 때 사용하는 태그, <ol>, <ul>, <li> 태그들과 다른 점은 사전처럼 정의할 때 쓰이는 목록 태그이다.

  • <figure>, <figcaption>
    <figure>
      <img src="~~~">
      <figcaption>아기 사진</figcaption>
    </figure>

    <figcaption> 태그에 이미지에 대한 자막 및 설명이 달린다.

  • <pre>

    HTML에 작성한 내용을 그래도 화면에 표현할 때 사용, 주로 코드 표현 시 사용

profile
웹사이트 개발과 신발을 좋아하는 학생입니다.

1개의 댓글

comment-user-thumbnail
2023년 12월 18일

웹 레이아웃 맛있게 잘 먹고갑니다 ^

답글 달기