HTML, CSS 기본기 다지기(2)

 

21.12.28 crossorigin 내용 수정

 

 

HTML Element

🤔비슷한 태그들을 구별해서 쓰는 게 왜 중요할까?

사실 사소해 보여 잘 와닿지 않았다. 시각적으로 태그들의 차이가 거의 없었기 때문이다. 그래서 별생각 없이 태그들을 썼을 때가 많았다. 하지만 개발자와 브라우저 관점에서 살펴보자. 개발자들이 필요한 정보를 찾을 때, 정확한 태그들을 사용해줘야 필요한 정보들을 빠르게 찾을 수 있을 것이다. 또한 스크린 리더 같은 프로그램을 사용할 때, 웹에서 <b>와 달리 <strong>에 악센트를 준다고 한다. 이런 예시를 듣고 나니 가독성이나 웹 접근성 측면에서 정보들을 올바른 태그를 사용해 구분을 잘해주는 것이 중요하다고 생각이 들었다.

 

1. HTML 텍스트 요소

1.1. <h1>~<h6> : 제목

 제목을 나타내는 태그로만 알고 있었다. 하지만 상세한 내용들을 MDN에서 확인할 수 있었다. 이전에는 이런 내용들을 자세하게 인지하지 못하고 사용했다. 그 결과 글씨 크기를 조절하기 위해 h2를 h3로 바꿔 쓴다던지 내 마음대로 쓰고 있는 경우가 있었는데, 이는 웹 접근성을 위해 아래 조건들을 지켜야 한다.

• 글씨 크기를 위해 제목 태그를 사용하지 마세요. CSS의 font-size속성을 사용해라.
• 제목 단계를 건너뛰는 것을 피하세요. 언제나 <h1>로 시작해서, <h2>, 순차적으로 기입하세요.
• 페이지 당 하나의 <h1>만 사용하세요. 여러 개를 써도 오류는 나지 않겠지만, 단일 <h1>이 모범 사례로 꼽힙니다. 논리적으로 생각했을 때도, <h1>은 가장 중요한 제목이므로 전체 페이지의 목적을 설명해야 할 것입니다. 두 개의 제목을 가진 책이나, 여러 개의 이름을 가진 영화는 볼 수 없죠! 또한 스크린 리더 사용자와 SEO에도 더 적합합니다.

 

1.2. <p> : 문단

• 브라우저 기본 스타일은 문단끼리 한 줄의 간격으로 분리합니다. 첫 줄 들여 쓰기 등 다른 구분 방법은 CSS를 통해 사용할 수 있습니다.
• 접근성 고려사항

1.3. <br> : 줄 바꿈

• 시각적으로 문장과 문장을 여백을 주기 위해서 <br>을 여러 번 쓰는 것은 안된다! <p>로 감싼 후, CSS를 활용해야 한다.

1.4. <blockquote> : 인용 블록 요소, <q> : 인용문 요소

• 내용이 긴 인용문 구일 경우 blockquote를 사용한다.
• 내용이 짧은 인용 문구일 경우 q태그를 사용한다.
• <p>태그 안에 <blockquote>를 사용할 수 없다. (<q>는 사용 가능)
• cite 속성을 이용해 브라우저에 url을 알려줄 수 있음.

1.5. <pre> : 서식 지정 텍스트

• 미리 서식을 지정한 텍스트로, HTML에 작성한 내용 그대로 표현한다. 텍스트는 보통 고정폭 글꼴을 사용해 렌더링 한다.(글자 폭이 상관없이 똑같이 유지해서 출력해준다.) 공백 문자도 그대로 유지한다.
• 어떻게 보면 텍스트가 이미지와 같이 저장된다.

1.6. <figure> : 설명

• 독립적인 콘텐츠를 표현한다. figcaption 요소를 사용해 설명을 붙일 수 있다. 피규어, 설명, 콘텐츠는 하나의 단위로 참조됩니다.

1.7. <abbr>

• 준말 또는 머리글자를 나타낸다. 선택 속성인 title을 사용하면 준말의 전체 뜻이나 설명을 제공할 수 있다. title 속성은 전체 설명만을 가져야 하며 다른 건 포함할 수 없다.
• title은 전역 속성이라 <p>에도 쓸 수 있다.

1.8. <bdo>

• 현재 텍스트의 쓰기 방향을 덮어쓰고 다른 방향으로 렌더링 할 때 사용.

1.9. <cite>

• 인용의 출처를 감싸준다. 그러면 많은 정보들 안에서 어떤 부분이 인용의 출처인지 빠르게 확인할 수 있다.

 

2. HTML 텍스트 포매팅

2.1. <b> , <strong>

• <b> : 독자의 주의를 요소의 콘텐츠로 끌기 위한 용도로 사용합니다. 그 외의 다른 특별한 중요도는 주어지지 않습니다. 원래는 "굵은 글씨 요소"로 불렸으며, 대부분의 브라우저도 여전히 텍스트를 굵은 글씨체로 강조합니다. 그러나 <b>를 사용해 텍스트를 꾸미면 안 됩니다. 대신 CSS font-weight를 사용해 굵은 글씨체를 적용하거나, strong 요소를 사용해 특별히 중요한 텍스트를 나타내세요.
• <strong> : <b>보다 훨씬 중요한 내용을 감쌀 때
• ex) b test
• ex) strong test

2.2. <i>, <em>

• <i> : 구분해야 하는 부분. 기술 용어, 외국어 구절, 등장인물의 생각. 갑자기 달라진 분위기.
• <em> : 텍스트의 강세를 나타냄. (스크린 리더에서도 강조가 되어서 읽힌다.)
• ex) test
• ex) test2

2.3. <mark>

• 현재 맥락에 관련이 깊거나 중요한 표시 또는 하이라이트 해주는 태그. 인용구에서 하이라이팅을 하기도 한다.
• 대부분의 스크린 리더는 기본값에서 <mark> 요소의 존재를 표현하지 않습니다. 그러나 CSS content 속성과 ::before, ::after 의사 요소를 사용하면 소리 내어 읽도록 할 수 있습니다.
• ex) test

2.4. <small>

• HTML <small> 요소는 덧붙이는 글이나, 저작권과 법률 표기 등의 작은 텍스트를 나타냅니다. 기본 상태에서 <small>은 자신의 콘텐츠를 한 사이즈 작은 글꼴(small에서 x-small 등)로 표시하지만, 스타일을 적용한 후에도 글씨 크기가 작을 필요는 없습니다.
• ex) test

2.5. <sup>, <sub>

• <sup> : 위 첨자 요소, 지수 표시할 때. 2³
• <sub> : 아래 첨자 요소, C₆H₆

2.6. <del>, <ins>

• HTML <ins> 요소는 문서에 추가된 텍스트의 범위를 나타냅니다. del 요소를 사용하면 삭제된 텍스트의 범위를 나타낼 수 있다.

2.7. <a>

• 하이퍼링크 태그. reference

 

2.8. Entity

만약 문장 안에 <, > 를 표기해야 될 때가 있다. 하지만 HTML에서는 예약어로 사용되기 때문에 문자 그대로 표현하기 위해선 Entity를 사용해야 한다. 아래와 같이 사용하면 문자 그대로 이해를 한다.

• <: <
• >: >
• " : "
• ' : '
• & : &
• 스페이스 :   (non breaking space)

3. HTML 구조를 나타내는 요소

3.1. <div>: 콘텐츠 분할 컨테이너 (블록으로 작용)

• <div> 요소는 "순수" 컨테이너로서 아무것도 표현하지 않는다. 대신 다른 요소 여럿을 묶어 class나 id 속성으로 꾸미기 쉽도록 돕거나, 문서의 특정 구역이 다른 언어임을 표시(lang 속성 사용)하는 등의 용도로 사용할 수 있습니다.

3.2. <span>: 구문 콘텐츠를 위한 컨테이너(인라인으로 작용)

3.3. <header>

• 소개 및 탐색에 도움을 주는 콘텐츠를 나타낸다. (제목, 로고, 검색, 작성자 이름)

3.4. <nav>

• 문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여주는 구획을 나타낸다.

3.5. <aside>

• 문서의 주요 내용과 간접적으로만 연관된 부분을 나타낸다.

3.6. <main>

• 하나만 사용 가능하다. 주요 콘텐츠의 내용이 들어간다. 2개 이상을 사용할 때 다른 main들은 hidden 속성을 사용해 감춰줘야 한다.

3.7. <article>

• 독립적으로 구분이 가능해서 배포하거나 재사용이 가능한 콘텐츠. 예를 들어 뉴스 사이트 기사 같은 경우에는 뉴스 사이트 속에 기사가 있지만, 다른 곳에 퍼가도 내용을 이해하는데 무리가 없다. 독립적이다.
• 각각의 <article>을 식별할 수단이 필요하다. 따라서 주로 제목 요소(h1 ~ h6)를 <article>의 자식으로 포함하는 방법을 사용합니다.
• <article> 요소가 중첩되어 있을 때, 안쪽에 있는 요소는 바깥쪽에 있는 요소와 관련된 글을 나타냅니다. 예를 들어 블로그 글의 댓글은, 글을 나타내는 <article> 요소 안에 중첩한 <article>로 나타낼 수 있습니다.
• <article> 요소의 작성자 정보를 address 요소를 이용하여 제공할 수 있습니다. 그러나 중첩 <article>에는 적용되지 않습니다.
• <article> 요소의 작성일자와 시간은 time 요소의 datetime 속성을 이용하여 설명할 수 있다.

3.8. <section>

• article이 아니라면 section을 사용한다. <article> 안에서 흐름이 바뀔 때 사용 가능하다.
• <section> 요소를 일반 컨테이너로 사용하면 안 된다. 특히 단순한 스타일링이 목적이라면 div 요소를 사용해야 한다. 대개, 문서 요약에 해당 구획이 논리적으로 나타나야 하면 <section>이 좋은 선택이다.

 

3.9. 🤔 Semantic Web이란?

요소의 의미를 고려하여, 구조를 설계하고 코드를 작성한다. 다음과 같은 이점이 있기 때문이다.

• 검색 엔진은 의미론적 마크업을 분석하여 페이지의 검색 랭킹에 영향을 줄 수 있는 중요한 키워드로 간주한다.
• 시각 장애가 있는 사용자가 스크린리더로 페이지를 탐색할 때 의미론적 마크업을 푯말로 사용할 수 있다.
• 의미가 없는 끊임없는 div를 탐색하는 것보다, 의미 있는 코드 블록을 찾는 것이 훨씬 쉽다.
• 개발자에게 태그 안에 채워질 데이터 유형을 제안한다.
• 의미 있는 이름 짓기는 적절한 사용자 정의 요소 / 구성 요소의 이름 짓기를 반영한다.

즉, 개발자에게는 가독성을 좋게 만들고 브라우저에게는 의미 있는 태그를 알려줘 웹 접근성을 높일 수 있다.

4. HTML 목록과 표

4.1. <ul>

• 정렬되지 않은 목록

4.2. <ol>

• 정렬된 목록

속성

• reversed start type
  • 'a'는 소문자 알파벳,
  • 'A'는 대문자 알파벳,
  • 'i'는 소문자 로마 숫자,
  • 'I'는 대문자 로마 숫자,
  • '1' 는 숫자(기본값)를 나타냅니다.
  value="3"로도 값을 바꿔줄 수 있다.
• 항목을 셀 때 사용할 카운터 유형.
• 항목을 셀 때 시작할 수. type이 로마 숫자나 영어 문자인 경우에도 아라비아 숫자로 나타낸 정수(1, 2, 3...)만 가능합니다. 그러므로 영어 문자 "d"나 로마 숫자 "iv"부터 세려고 한다면 start="4"를 사용하세요.
• 목록의 순서 역전 여부. 즉, 내부에 지정한 항목이 역순으로 배열된 것인지 나타냅니다.

 

4.3. <dl>, <dt>, <dd>

• 설명 목록을 나타낸다.
• dt : 용어를 의미.
• dd : 용어를 설명.
• dt, dd의 형제로 div를 넣으면 안 된다.

4.4. <table>

• MDN
• 표를 나타낼 수 있는 테이블.
• <caption>은 무조건 첫 번째 요소로 넣어야 한다.

 

5. HTML 임베디드 요소

외부의 소스를 불러와서 웹 페이지에 삽입하는 것.

5.1. <img>

• src 특성은 필수이며, 포함하고자 하는 이미지로의 경로를 지정합니다.
• alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용합니다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여줍니다.

속성

• alt : 이미지의 대체 텍스트 설명.
  • 참고: 브라우저가 항상 이미지를 표시하는 건 아닙니다. 예를 들어,
    • 비 시각적 브라우저 (시각 장애인이 사용하는 일부 브라우저 등)
    • 사용자가 이미지 불러오기 거부 (대역폭 절약, 개인정보 보호 등)
    • 유효하지 않은 이미지 거나, 지원하지 않는 형식
    위와 같은 경우 브라우저가 이미지를 alt 특성의 텍스트로 대체할 수 있습니다. 그러므로 가능한 경우 alt 특성에 항상 유용한 값을 제공해야 한다.
• srcset : 반응형 이미지. 뷰포트에 따라 다른 이미지들을 제공한다.
• sizes : 600x600의 이미지가 브라우저 화면을 늘려도 계속 늘어나는 현상을 아래와 같이 sizes로 조절한다.

<img src="clock-demo-200px.png" 
	alt="Clock" 
    srcset="clock-demo-200px.png 200w, 
    clock-demo-400px.png 400w" 
    sizes="(min-width: 600px) 600px, 600px, 
    (min-width: 600px) 450px, 450px, 300px">

• crossorigin
  • 웹 개발을 하면서 CORS 오류를 자주 겪었다. 생각보다 어려운 개념이고, 아직 정확하게 이해를 하지 못해서 CORS에 대해서 따로 정리할 계획이다. 한 가지 예시로 font-awesome 같은 사이트에서 아이콘을 사용하기 위해선 아래와 같이 스크립트를 넣어야 한다. 하지만 다른 도메인의 소스를 가져다 쓰기 위해선 CORS 처리를 해야한다. anonymous로 설정을 해서 자격 증명 없이 교차 출처 요청을 전송한다. CORS 포스팅

 crossOrigin 속성은 element가 CORS 요청을 처리하는 방식을 명시하여 element가 fetch한 데이터를 
CORS
 가능하게 합니다.
MDN

 

<script src="https://kit.fontawesome.com/(YOUR_private_key).js" crossorigin="anonymous"></script>

 

 

5.2. <video> , <audio>

• muted 속성을 추가해줬을 때, autoplay가 가능하다. 오디오 및 오디오를 가진 비디오를 자동으로 재생할 경우 사용자 경험에 악영향을 끼칠 수 있기 때문이다.
• <figure>로 감싸줘서 사용할 수 있다.

 

5.3. 웹에서 사용하는 이미지 유형

웹 페이지에 띄우는 사진들은 높은 화질을 필요로 하지 않는다. 따라서 이미지의 용량(압축률)이 굉장히 중요하다. 손실 압축, 무손실 압축이란?

5.3.1. 래스터 이미지

풍경사진이나 일반적인 사진에 주로 사용됨

• JPEG : 정지 이미지의 손실 압축에 적합하다.(가장 많이 쓰인다)
• PNG : 원본 이미지를 보다 정확하게 보여주거나 투명도가 필요한 경우. JPEG보다 화질이 조금 더 좋다.
• GIF : 여러 장의 이미지로 이루어진 애니메이션 표현 가능, 지원되는 컬러가 적기 때문에 대신 화질이 떨어진다.
• WEBP : 구글에서 만든 이미지 포맷. 품질, 압축률 등이 훨씬 우수하나 지원 브라우저가 제한적이다.

5.3.2. 벡터 이미지

아이콘이나 UI 요소들을 만들 때 사용됨

• SVG : 다양한 크기로 정확하게 그려야 하는 아이콘

 

6. 폼 관련 요소

6.1. <form>

• 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획.

속성

• action
• 양식 데이터를 처리할 프로그램의 URI
• method
  • post: POST 메서드. 양식 데이터를 요청 본문으로 전송합니다.
  • get: GET 메서드. 양식 데이터를 action URL과 ? 구분자 뒤에 이어 붙여서 전송합니다. 만약 민감한 정보를 포함하고 있는 경우에는 get을 쓰면 안 된다.
  • get 사용 시 input에 "안녕하세요"를 입력했을때, ?name=안녕하세요가 주소 뒤에 붙게 된다.

  <form action="" method="">
      <input type="text" name="test">
      <button type="submit">
          제출
      </button>
  </form>

• 양식을 제출할 때 사용할 HTTP 메서드.

6.2. <label>, <input>

• input의 name은 form 전송 시 붙여지는 속성
• label의 for에 id를 입력해 어떤 input을 나타내는지 연결시켜준다.
• label의 자식으로 넣어주면 for, id를 안 넣어줘도 된다.

<div>
    <label for="foodname">음식 이름 :</label>
    <input type="text" name="food" id="foodname">    
</div>

<div>
    <label>색깔 :
        <input type="text" name="food">    
    </label>
</div>

 

input 속성

• disabled가 됐을 때, 값 자체가 url에 입력이 되지 않는다. UI/UX에는 보였으면 좋겠지만 정보가 전송이 되는 것을 원치 않을 때.
• readonly를 사용했을 때는 name은 입력만 안되고 데이터 전송은 된다.
• button은 자식을 가질 수 있다. 스타일링을 하기에도 button이 훨씬 편하다.

6.3. <fieldset>

• HTML <fieldset> 요소는 웹 양식의 여러 컨트롤과 레이블(<label>)을 묶을 때 사용합니다.
• https://developer.mozilla.org/ko/docs/Web/HTML/Element/fieldset
• 를 첫 번째 자식으로 넣어 제목을 붙여준다.

6.4. <select>, <option>, <optgroup> : 선택 박스

6.5. <datalist> : 목록 추천 (select와 달리 선택 박스에서 수정이 가능)

6.6. <textarea> : 멀티라인 일반 텍스트 편집 컨트롤

• rows , cols
• 크기는 CSS를 이용해 나타낸다.

 

 

📕 Reference :

https://developer.mozilla.org/ko/docs/Web/HTML/Attributes/crossorigin