멋사 프론트엔드 스쿨 2기 TIL (03.29)

    반응형

    멋사로고

    🕶 URL, IP, PORT 란?


    www.naver.com 도메인, URL 이름
    223.130.200.104 IP 주소
    22, 23, 80, 443 PORT
    • 도메인과 IP 둘이 같아도 PORT가 다르면 다른 화면이 나온다 (ex. 로그인했을 때 OO님 안녕하세요!!)
    • https의 PORT는 443, http의 PORT는 80!

    URL 뽀개보기

     

    📝 HTML Living Standard 란?


     

    📕 HTML(Hyper Text Markup Language) : 뼈대

    📘 CSS(Cascading Style Sheet) : 피부

    📒 JavaScript : 근육

     

    HTML 표준

     

    🚀 Sections


    시맨틱 태그 사용법

    <body>

    • 실제 사용자에게 보이는 문서의 콘텐츠를 나타내는 요소

    <article>

    • 독립적으로 구분하거나 재사용할 수 있는 구획을 나타낸다.
    • 어떤 페이지에 붙여도 독립적으로 사용 가능하다면? article

    <section>

    • 일반적으로 연관성 있는 문서의 구획을 나누고자 할 때 사용
    ⭐️  section vs article

    1. article 요소는 독립적 콘텐츠 (다른 서비스에 가져다 놔도 이상하지 않음)
    2. section 요소는 사이트 내 연관 콘텐츠 (다른 서비스에 가져다 놓으면 이상함)
    3. article과 section 요소는 heading 요소와 함께 사용하는 것을 권장(높이 없이 비워두기도 함)

    <header>

    • 특정한 콘텐츠의 시작 부분을 나타내는 요소, 일반적으로 구역의 제목을 포함.

    <h1> ... <h6>

    • <h1> 요소는 페이지당 한 번만 사용할 것을 권장!!

    <nav>

    • <nav> 요소는 보통 메뉴에 사용

    <aside>

    • 보통 사이드바 혹은 광고 영역으로 활용

    <footer>

    • footer 요소가 속한 가장 가까운 구획의 작성자 정보, 저작권, 관련된 링크 등의 내용을 담는 요소

    <address>

    • 가장 가까운 부모 article이나 body 요소의 연락처 정보를 나타냅니다. 만약 가장 가까운 부모 요소가 body 라면 문서 전체의 연락처 정보를 의미합니다. 연락처 정보에는 전화번호, 메일 주소, 우편 주소 등이 있습니다.

     

    Semantic 태그를 사용하지 않고, div를 남발한다면 웹 접근성을 해치기 때문에, div는 최후의 보루로 남겨둬야 한다.. div class 남발했었던 나 반성해 ㅜㅜ

     

    🚀 Grouping Content


     

    <ol>, <ul>, <li>

    • <ol> 은 ordered list의 약자로 순서가 있는 목록을 뜻

    ol(type:A) 예시

    • <ul> 은 unordered list의 약자로 순서가 없는 목록을 뜻

    ul 예시

    • <li> 는 오직 <ol> 혹은 <ul> 안에서만 사용되어야 한다.

    <dl>, <dt>, <dd>

    • <dl>, <dt>, <dd> 목록을 정의할 때 쓰고, 사전처럼 어떠한 것을 정의할 때 쓰이는 목록이다.
    • 각각 definition list, definition term, definition description으로 쓰인다.

    dl 예시

    <div>

    • <div> 는 레이아웃을 나눌 때 사용하는 태그, 일종의 box 역할 div 남발은 좋지 않으니 semantic 태그를 사용하자!!

    <figure>, <figcaption>

    • 이미지와 캡션이 연결되도록 <figure> 요소를 도입할 수 있다.
    • <figcaption> 요소는 이미지에 캡션을 추가하기 위해 도입

    <p>

    • <p> 태그는 단락을 표시, 하나의 완결된 문단을 의미하기 때문에 <p> 태그 안에 자식으로 <p>를 또 사용하지 않으며, 줄 바꿈의 용도로 사용해서도 안된다.

    <pre>

    • HTML에 작성한 내용 그대로 화면에 표현한다. 주로 컴퓨터 코드를 표현할 때 사용한다.

    <blockquote>

    • 인용 블록이다.
    • q는 인용구다. 주로 문장 안에서 사용!!
    • blockquote, q, cite

    https://developer.mozilla.org/ko/docs/Web/HTML/Element/cite

    <main>

    • HTML <main> 요소는 문서의 주요 콘텐츠를 나타낸다.
    • <main> 요소 안에는 다른 페이지나 섹션에서 반복적으로 표시될 수 있는 정보는 들어가지 않는다 (ex. 사이트 로고, 검색 폼, 저작권 정보)
    • IE에서는 지원하지 않는 요소!!

    <hr>

    • 본래는 가로줄을 표현하기 위해 사용했지만 HTML5에 오면서 단락을 구분할 때 사용한다.

     

    🍓 하루의 회상


    • ㅋㅋㅋㅋ나 진짜 div, span 맨날 남발하고 semantic tag도 내 멋대로 사용했는데 수업 안 들었으면 면접 때 후두려 맞거나 면접 기회조차 없었을 듯.. 후 좋은 코딩 습관 파이팅 ㅜㅜ
    • 진짜 하루하루가 금방 순삭 된다. 너무 재밌다 멋사 듣길 잘한 거 같다. 기본기가 너무 없었단 생각이 드는군.. 후
    반응형

    댓글