멋사스쿨_HTML

jellyjoji·2023년 5월 29일

멋쟁이사자처럼 프론트엔드 스쿨

목록 보기

1/2

논리적인 구조

UX 사용성을 고려한것이 논리적인 순서이다. 접근성을 생각해야한다.
접근성 고료를 제대로 하는것이 어렵고 하는사람은 적지만 제대로 하는 사람이 성장하고 살아남는다.
그래서 논리적인 구조로 만들어야한다.
웹 접근성 고려
우리는 웹 접근성과 친해져야 합니다.

시멘틱 마크업

html만 남아있더라도 알아들을수 있도록 하는것이다.
웹사이트에는 하나의 헤딩(주제)가 있어야한다.

div

하나의 부품을 묶어놓은 것. 하나의 부품, 즉 컴포넌트 구조로 만들어야한다.
div는 단지 그룹핑해주는 요소이므로 내용을 알수있는 태그를 써주는것이 좋다.

form Tag

Form Tage
form 은 필수로 배워야한다. 폼태그에서 label 과 input 의 연결은 중요하다.

form action=“”

엑션에 data 처리 받아서 처리할 서버의 주소 입력하기

<form action=“data 처리 받아서 처리할 서버의 주소”>

form method=“get or post”

get / post 중 선택

required 필수속성

<input required id="userId">

fieldset

fieldset 요소는 관련 있는 폼 필드 세트(form FIELD SET)를 표시한다. 폼 필드 세트는 폼 내에서 관련 컨트롤을 하나의 그룹으로 묶은 것을 말한다.
폼을 효과적으로 계층화시킬 수 있다.
legend 요소를 함께 사용해야 한다.

<form>
  <fieldset>
...
  </fieldset>
</form>

legend

fieldset 요소의 제목(LEGEND)을 표시한다. fieldset 요소를 이용하여 여러 개의 컨트롤들을 묶었으면 이 묶음이 어떤 성격 또는 용도인지 알려줄 필요가 있으며, 이때 legend 요소를 사용한다.
이 요소를 사용하면 fieldset 요소로 묶인 영역 주변에 테두리 선이 나타난다.

<form>
  <fieldset>
    <legend>개인정보:</legend>
    <label>이름: <input type="text"></label><br>
    <label>주소: <input type="text"></label><br>
    <input type="submit">   
  </fieldset>
</form>

제목과 단락

콘텐츠의 title 을 반드시 h1 에 써주도록 한다.

<h1>매장 찾기</h1>
<p>카페 W를 가까이에서 경험해보세요.</p>
<p>고객님과 가장 가까이 있는 매장을 찾아보세요!</p>

이미지와 피규어

figure 와 figcaption 태그

figure 는 사진,도표,비디오, 코드 등을 담는 컨테이너 역할이고, figcaption 는 이에 대한 설명 문구를 담는 태그. 의미없는 div 사용하지않기.

<figure>
  <img src="images/rwd.jpg" alt="" />
  <figcaption>
    <p>
      <strong>Responsive Web<br />Design Strategies</strong>
      <span>반응형 웹디자인 전략</span>
    </p>
    <a href="/">강의정보</a>
  </figcaption>
</figure>

목록 태그

ul 비순차 목록(Unordered List) 요소
ol 순차 목록(Ordered List) 요소
li 목록 항목(List Item) 요소

<h1>카페 W</h1>

<h2>카페 W 카드</h2>
<p>소중한 사람에게 마음을 전하는 가장 좋은 방법</p>
<ul>
  <li>카페 W만의 특별함을 경험할 수 있는 최상의 선택 음료</li>
  <li>카페 W 커피와 완벽한 어울림을 자랑하는 푸드</li>
  <li>사용한 시도와 디자인으로 가치를 더하는 상품</li> 
</ul>

<h2>카페 W 인기 강좌</h2>
<ol>
  <li>UI 구조 & 디자인</li>
  <li>모바일 웹 UI 제작 실습</li>
  <li>UI 인터랙션 주니어</li>
  <li>React 프로그래밍</li>
</ol>

dl 설명 목록 요소
dt 용어 제목 요소
dd 용어 설명 요소

<!-- content block 이 있을땐 제목이 있어야 한다.  -->
<p>입문자를 위한 Git과 HTML&amp;CSS</p>

  <!-- 평점이라는 텍스트는 숨김 처리 -->
  <dl>
    <div>
      <dt>평점</dt>
      <dd>
        <span aria-hidden="true">★★★★☆</span>
        <span>4점</span>
      </dd>
    </div>
    <dt>학습시간</dt>
    <dd>09:00 ~ 17:00 ( 28시간 )</dd>
    <dt>난이도</dt>
    <dd>초급</dd>
    <dt>교육비 지원</dt>
    <dd>고용보험 비환급</dd>
    <dt>평가항목</dt>
    <dd>출석률 100%</dd>
    <dt>수료기준</dt>
    <dd>총점 80점 이상시 수료</dd>
    <dt>정원</dt>
    <dd>24명</dd>
    <dt>교재정보</dt>
    <dd>
      <p>입문자를 위한 Git과 HTML&CSS(PDF)</p>
      <p>HTML & CSS 웹사이트 개발과 디자인 기초 (35,000원)</p>
    </dd>
  </dl>

ul li 와 dt dd 의 차이 ?
ul li 는 몇개의 리스트가 있는지 알려준다. 여러개일때.
dt dd 는 가급적 1:1 대응으로 해주는게 좋다. 1:1일때 이름과 값을 쓸때 사용한다.

하이퍼링크

페이지 내 링크 이동 또는 다른 페이지로 이동하는 기능은 a 태그 요소를 사용.
버튼은 button 마크업, link는 a 태그로 마크업하여 기능을 알아보기 쉽게 해주는게 시멘틱 태그.

<div>
  <a href="/">더보기</a>
</div>

<div>
  <a href="/" title="다운로드">
    <img src="images/brochure.png" alt="카페 W 강좌 브로슈어" />
  </a>
</div>

<div>
  <a href="/" aria-label="카페 W 강좌 브로슈어 다운로드">
    <img src="images/brochure.png" alt="" />
  </a>
</div>

a href=“”

해당 링크로 이동

a title=“”

a 태그에 title 속성을 주면 툴팁이 보이는 결과가 나타난다.

a 태그는 우선순위 규칙 cascating 때문에 순서 고려

a{
  color: inherit;
  text-decoration: none;
}
a:link{
  color: green;
}
a:visited{
  color: red;
}
a:hover, a:focus{
  color: yellow;
}
a:active{
}

alt 와 title 속성의 차이는?
alt 는 필수속성이기 때문에 빠트리면 문법 에러가 뜬다. 따라서 title 가 alt 를 대체할수없다.
title 은 SEO 에서 적절하지 않다. fallback 를 위해 적어주는것이다.
fallback
어떤 기능이 약해지거나 제대로 동작하지 않을 때, 이에 대처하는 기능 또는 동작을 말한다. fallback은 api 호출시 발생하는 예외처리를 위한 클래스를 정의한다. 실패에 대해서 후처리를 위해 설정해 두는 method이다.
fallback 이란

전역속성이란?
모든 아무 태그에 다 줄수있다. 모든 태그가 가질수있는 속성.

hidden 속성

동적으로 처리할때 hidden 주로 사용하나 사용 비추한다. ** hidden 남발하면 안되는 이유 ** ![hidden 남발하면 안되는 이유](https://velog.velcdn.com/images/jellyjoji/post/afe0a322-fd43-4ced-9648-fe6a66711ecc/image.png)

tabindex = “0”

탭 누르면 포커스 시켜줌.
tabindex
tabindex="1"
tabindex="1"
문서 안에서 가장 먼저 초점을 받을 수 있습니다. 그러나 자연스러운 마크업 순서를 거스르기 때문에 주의해서 사용해야 합니다. 검색엔진 사이트에서 검색창에 사용하면 적합하지만(이 대신 autofocus 속성이 더 적절할 듯 해요) 그 외 적합한 경우는 잘 떠오르지 않는군요.

tabindex="0"
키보드 초점을 받을 수 없는 div, span과 같은 요소도 초점을 받을 수 있도록 만들어 줍니다. 초점을 받되 초점을 받는 순서는 자연스러운 마크업 순서를 따릅니다.

tabindex="-1"
키보드 초점을 받을 수 있는 요소도 초점을 받을 수 없도록 만들어 줍니다. 초점을 받을 수 없기 때문에 "-1" 이외의 다른 음의 정수 값은 사실상 의미가 없습니다.

인용문과 줄바꿈

q 인라인 인용 요소. 하나의 인용구, 작은 텍스트를 묶을때.
cite 창작물 참조 요소, 출처 표기, 저작권관리 이슈 관련.
blockquote 블록단위의 인용 요소, 여러개의 인용구,
br 줄바꿈 요소

<blockquote>
  <p>
    우리가 할 수 있는 노력은 과정이 전부야.
    <br />
    결과는 우리 손 안에 있는 게 아니야.
  </p>
  <cite>드라마 &lt;미생&gt; 중에서</cite>
</blockquote>

어휘 요소들

문장 내 특정 부분의 중요성을 강조하거나, 다른 글자와 구분하기 위한 목적으로 어휘 요소를 사용할 수 있습니다.

<h1>카페 W 강의 후기</h1>
<div>
  <p><em>무엇이 중요한지 알게된 시간!</em></p>
  <p>제가 들었던 해외 튜토리얼에 비해 <strong>시맨틱한 마크업</strong>과 
     <strong>접근성</strong> 비중이 크게 다뤄져 좋았습니다. 
     많은 튜토리얼들이 디자인을 어떻게 구현하는지에만 초점이 맞춰져 있잖아요. 
     무엇이 중요한지 알게되어 많은 도음이 되었습니다.</p>
  <p><span>★★★★★</span> <b>5점</b> <i>우정민</i></p>
</div>

<strong> 중요성 강조 요소, 좀더 레밸이 높은 강조

<em>강조 요소, 일반적인 강조 

<b> 중요성, 관련성 없이 다른 글자와 구분을 목적으로 사용되는 요소

<i> 기술적 용어, 관용구, 생각 등에 사용되는 요소.
기술용어, 등장인물 생각, 인용구를 구분해야하는 부분. 하지만 이것보다 주로 icon i 를 사용하는게 현실.

섹션 관련 요소 / 메인 요소

<header> 헤더 요소

<main> 메인 요소

<footer> 푸터 요소

<nav> 내비게이션 섹션 요소

<section> 일반 섹션 요소

<article> 독립 섹션 요소

<aside> 보조 섹션 요소

<body>
  <header>본문 헤더</header>
  <nav>내비게이션</nav>
  <main>
    <section>
      <header>섹션 헤더</header>
      <footer>섹션 푸터</footer>
    </section>
    <article>
      <header>섹션 헤더</header>
      <footer>섹션 푸터</footer>
    </article>
  </main>
  <aside>부가 콘텐츠</aside>
  <footer>본문 푸터</footer>
</body>

컨테이너 요소

<div> 블록 컨테이너 요소

<span> 인라인 컨테이너 요소

<div>
  <span>E</span> <span>U</span> <span>I</span> <span>D</span>
</div>

텍스트 레벨 요소

텍스트 레벨 요소 표준 명세들

<sub> 아래첨자 요소

<mark> 관련 참조 목적의 하이라이트된 글자 요소

<time> 날짜 및 시간 요소

<abbr> 축약 요소

<s> 취소선 태그. 더 이상 관련이 없거나 더 이상 정확하지 않은 요소

<del> delete 삭제된 태그

<ins> insert 삽입된 태그

<small> 저작권, 법적 텍스트, 주석 및 작은 글씨 요소

<sub>2</sub>SO<sub>4</sub>
<sup>[1]</sup>
<mark>삼각함수</mark>

// datetime은 1일전, 3일전 표시할때 연산하고 출력하도록 해준다
<time datetime="2023-05-19">May 19. 2023</time>

//title 툴팁을 추가하여 약자의 풀 네임을 적어줌.
<abbr title="맥도날드">맥날</abbr>
<s>11,900원</s>

// &copy;  카피라이트 특수기호와 같이 쓰임
<small> COPYRIGHT RESERVED. 2023 &copy; EUID</small>

address 요소(그룹핑 요소)

사용자 및 조직, 주소나 연락처 정보.
본문 footer 안에 넣어줌.

<footer>
  <address>
    <span>(주)멋쟁이사자처럼</span>
    <span>대표이사 이두희</span>
    <span>서울특별시 종로구 종로3길 17 D타워, 16-17층</span>
    <span>사업자 등록번호 : 264-88-01106</span>
    <span>통신판매업 신고 : 2019 - 서울강남 - 00774</span>
    <span>연락처 : <a href="tel:+821012345678">010-1234-5679</a></span>
    <span>문의 <a href="mailto:contact@likelion.net">contact@likelion.net</a></span>
  </address>
<footer>

임베디드(Embedded) 요소

HTML 문서에 포함(embedded) 할 수 있는 콘텐츠 요소.

<picture> HiDPI 반응형 이미지 대응 요소
<source> 다중 미디어 리소스 지정 요소
<video> 동영상 콘텐츠 요소
<audio> 오디오 콘텐츠 요소
<track> 트랙 요소]
<iframe> 인라인 프레임 요소
<map> 이미지 맵(클릭 가능한 링크 영역) 요소
<area> 이미지의 핫스팟(hotspot) 영역 지정 요소

img srcset=“”

새롭게 추가된 속성. 이미지 배율을 주입하겠다는 정보 표시. src 에 소스를 반드시 넣어놔야함 함.
src가 나오지 않을때 svg 를 주겠다. fallback img : src png 화질이 좋지않을때 이것을 보여주겠다

 <picture>
    <source srcset="images/netflix.svg" type="image/svg" />
    <img src="images/netflix.png" 
         srcset="images/netflix@1x.webp 1x, images/netflix@2x.webp 2x" alt="넷플릭스" />
 </picture>

source media=“크기”

최소크기가 이럴때 이 이미지를 보여주세요

<picture>
  <source media="(min-width: 650px)"
    srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-large.png">
  <source media="(min-width: 465px)"
    srcset="https://googlechrome.github.io/samples/picture-element/images/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="https://googlechrome.github.io/samples/picture-element/images/kitten-small.png" alt="a cute kitten">
</picture>

video tag

브라우저 안으로 비디오가 들어오게 하는 혁명적인 태그.
video 가 하나일때 video 태그에 src 와 type 속성을 바로 넣어도 된다. 하지만 여러개의 소스일땐 source 에 넣는다.

  <figure>
    <!-- auto 플레이는 접근성 이슈(스크린 리더와 겹힘)로 크롬에서 막힘 / 그래도 자동재생을 하고싶다 그러면 muted 음소거 옵션을 주면됨 -->
    <video class="fullsize" poster="video/poster.jpg" controls autoplay muted>
      <source src="video/google-developer-stories.mp4" type="video/mov" />
      <!-- 맞는 영상이 재생될시 다음꺼는 작동되지 않는다 -->
      <source src="video/google-developer-stories.mov" type="video/mov" />
      <source src="video/google-developer-stories.ogg" type="video/mov" />
      <source src="video/google-developer-stories.webm" type="video/mov" />
      <!-- track src=“” 자막 -->
      <track src="video/google-developer-stories-subtitles-en.vtt" kind="captions" srclang="en"
        label="English Caption" />
    </video>
    <figcaption>google develo story</figcaption>
  </figure>

iframe

inline frame 프레임을 삽입

<figure>
  <div class="iframe-container iframe16">
    <iframe class="fullsize" width="560" height="315" title="웹접근성과 웹표준 개념" 
            frameborder="0" allowfullscreen 
            src="https://www.youtube.com/embed/fUcIe7-2zxw"></iframe>
  </div>
</figure>

img

usemap 을 써줘야 img 와 map 이 연결된다.
coords 는 좌표.

<img src="images/sns.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="페이스북" title="페이스북" href="https://www.facebook.com/" coords="15,15,14" shape="circle">
    <area target="_blank" alt="인스타그램" title="인스타그램" href="https://www.instagram.com/" coords="65,15,14" shape="circle">
    <area target="_blank" alt="유튜브" title="유튜브" href="https://www.youtube.com/" coords="115,15,14" shape="circle">
</map>

테이블 관련 요소

행과 열로 이루어진 표 형식의 콘텐츠를 마크업할 때 table 요소를 사용할 수 있으며 table 영역에는 표 제목인 caption 요소, 행을 나타내는 tr 요소, 제목 셀을 나타내는 th 요소, 내용 셀을 의미하는 td 요소로 구성됩니다.
tables
id와 headers 의 관계 ?
복잡한 방식을 사용할때 테이블을 연결시켜줌

<table> 테이블 요소
  
<caption> 테이블 제목 요소

<col> 테이블 열 요소

<colgroup> 테이블 열 그룹 요소

<tr> 테이블 행 요소

<thead> 테이블 헤더 행 블록 요소

<tbody> 테이블 바디 블록 요소

<tfoot> 테이블 푸터 행 블록 요소

<th> 테이블 제목 셀 요소

<td> 테이블 내용(데이터) 셀 요소

<table class="lecture__table">
    <caption>
      입문자를 위한 Git과 HTML&CSS 과정
      <span>학습시간, 난이도, 교육비 지원, 평가항목, 수료기준, 정원, 교재 정보 등을 나타낸 표</span>
    </caption>
    <tr>
<!-- scope 는 범위   -->
      <th scope="row">학습시간</th>
      <td>09:00 ~ 17:00 ( 28시간 )</td>
      <th>난이도</th>
      <td>초급</td>
    </tr>
    <tr>
      <th scope="row">교육비 지원</th>
      <td>고용보험 비환급</td>
      <th>평가항목</th>
      <td>출석률 100%</td>
    </tr>
    <tr>
      <th scope="row">수료기준</th>
      <td>총점 80점 이상시 수료</td>
      <th>정원</th>
      <td>24 명</td>
    </tr>
    <tr>
      <th scope="row">교재정보</th>
      <td colspan="3">
        입문자를 위한 Git과 HTML&CSS<br />
        HTML & CSS 웹사이트 개발과 디자인 기초 (35,000원)
      </td>
    </tr>
  </table>

form

폼 관련 요소

Web Forms 2.0 demo
가장 변화가 많은 태그.

<form> 폼 요소
  
<input> 인풋 요소
  
<label> 레이블 요소
  
<button> 버튼 요소

<select> 셀렉트 요소

<option> 옵션 요소

<optgroup> 옵션 그룹 요소

<textarea> 텍스트 에어리어 요소

<fieldset> 필드셋 요소

<legend> 레전드 요소

<datalist> 데이터 리스트 요소

<progress> 프로그래스 요소

<output> 아웃풋 요소

<meter> 미터 요소

<!-- 검색어 입력 서식 예시 -->
<!-- action 서버 주소 명시 속성 필수  -->
<form action="https://formspree.io/seulbinim@gmail.com" method="POST" class="search-form">
  <!-- fieldset 연관된 서식을 묶어줌 -->
  <fieldset>
    <legend>검색</legend>
    <!-- 이렇게 한세트 div 로 묶기  -->
    <div class="searchform-wrapper">
      <div class="form-input-wrapper">
<!-- 명시적인 레이블링 search : 명시적으로 사용해야 스크린리더의 호환성이 좋아진다.  -->
<!-- 폼에는 반드시 1:1로 대응하는 레이블이 있어야 한다. label 과 id는 연결되어있어야한다.  -->
        <label for="search" class="a11yHidden form-input-label">검색어</label>
        <input type="search" id="search" required placeholder="검색어를 입력하세요." name="search" class="form-input" />
      </div>
      
      <!-- id 로 form 태그와 연결됨  -->
      <button type="submit" class="searchform-button">검색</button>
    </div>
  </fieldset>
</form>

XHTML1.0은 form안에 fieldset이랑 legend요소가 필수 요소였으나, html5 에서는 폼 안에 fiedset 태그를 사용 안해도 된다.

인터렉티브 요소

dialog open

열고닫을수있는 부품.
open 으로 처음부터 열어놓고 시작하지않으면 작동안함.

details

대화상자 창으로 띄으고 닫기로 접음. 보다 자세한 표현을 하는 독립적인 위젯에 쓰임. 열림상태일때만 내부정보를 보여줌. 그래서 하나단위의 부품이라 재활용 가능.

summary

접고 펴기 버튼은 details 와 summary 같이써서 만들수있다. details 안에 summary가 들어있다.
과거에는 접었다 폈다를 자바스크립트로 직접 만들었지만 이제는 순수 html 태그로만 만들수있다.

<dialog> 다이얼로그(대화상자) 요소

<details> 보다 자세한 추가 정보를 제공하는 위젯 요소

<summary> details 요소 내부에 추가되는 레이블(제목) 요소

<!-- 다이얼로그 예시 -->
<h1>제목</h1>
<!-- h1 제목은 컨텐츠 타이틀 vs 그냥 파트별로 이름표를 달고싶을때 사용하는것 aria-label -->
<dialog open aria-label="가입안내">
  <p>차별화된 회원가입 혜택</p>
  <a href="/">지금 바로 만나보세요!</a>
  <form method="dialog">
    <button type="button">오늘 하루 안 보기</button>
    <button type="button">닫기</button>
  </form>
</dialog>

<!-- 상세 및 요약 정보 제공 예시 -->
<div>
  <details open>
    <!-- open 처음부터 열어놓고 시작  -->
    <summary>국민 내일배움카드</summary>
    <figure>
      <img src="images/learn-card.png" alt="" />
    </figure>
    <p>급격한 기술 발전 및 노동시장 변화에 대응하는 사회안전망 차원에서 국민 스스로 직업능력개발훈련을 실시할 수 있도록 훈련비 등을 지원받을 수 있는 카드를 의미한다.</p>
  </details>
</div>

async

해석과 스크립트 다운로드를 동시에 실행. 제대로 작동 안할 가능성이 있을 이때 defer 를 추가하면 html 파싱을 중단하지 않음.

defer

script 링크 태그를 헤드에 놓고 defer 선언을 하면 작동 잘함.
주로 헤드에 링크태그를 모아놓고 선언하기때문에 그렇지 사실 어디에 넣어도 상관없음.

<head>  
  <link rel="stylesheet" href="./style/card.css" />
  <!-- 스크립트를 헤드에 놓고 defer 선언을 하면 작동 잘함    -->
</head>

유저 인터렉션 속성

사용자와 상호작용(Interaction) 할 수 있도록 만들어 주는 속성.

tabindex=“숫자”

포커스 안되는 것에 포커스 되도록 해주는 요소.
숫자는 접근 순서. tabindex=“0”을 줘야만 순서대로 작동함.
tabindex=“-1” 접근하고 싶지 않을때 ex) 탭 ui를 만들때 쓰임. 탭 비활성화용.

accesskey

accesskey
단축키 설정.
마우스를 이용할수없는 장애인들을 위해 access 단축키나 탭 키를 편리하게 해주면 접근성 측면에서 좋다.

contenteditable

contenteditable
사용자가 편집할수있는 인터엑티브 형식으로 만들고 싶을때 contenteditable="true" 먹혀주기.

hidden 속성
tabindex 속성
accesskey 속성
contenteditable 속성
draggable 속성

<div class="voting-result-wrapper">
	<!-- accesskey로 실행할 때 MacOs는 Ctrl+Opt+<Key>, Windows는 Alt+<Key> (크롬 기준) -->
	<!-- 크롬 이외 웹브라우저는 MDN accesskey 안내 참고 -->
  <button type="button" class="voting-result-button" accesskey="P">피크타임 Top6 결과 보기</button>
  <div class="voting-result" hidden>
    <ol>
      <li>팀 11시 - VANNER</li>
      <li>팀 7시 - MASC</li>
      <li>팀 8시 - 다크비</li>
      <li>팀 24시 - B.A.P, 탑독, 비아이지, ARGON</li>
      <li>팀 13시 - BAE173</li>
      <li>팀 20시 - 몬트</li>
    </ol>
  </div>
  <div tabindex="0" class="voting-result" hidden>
    <ul class="voting-result-vedio">
      <li><a href="https://vod.jtbc.co.kr/player/embed/VO10679813">피크타임 1,2위 영상</a></li>
      <li><a href="https://vod.jtbc.co.kr/player/embed/VO10679810" tabindex="-1">피크타임 3,4위 영상</a></li>
      <li><a href="https://vod.jtbc.co.kr/player/embed/VO10679807">피크타임 5,6위 영상</a></li>
    </ul>
  </div>
</div>
<figure>
  <img src="./images/peaktime.jpeg" alt="피크타임 매주 수요일 밤 10시 30분 방송" />
  <figcaption class="user-caption" contenteditable>PEAK TIME</figcaption>
</figure>

보안

target="_blank" rel="noopener noreferrer"

noopener, noreferrer
target=”_blank”는 보안상의 취약점이 발생하기 때문에 rel 속성에 noopener 와 noreferer 를 지정하여 문제를 해결한다.

<a
   href="https://velog.io/@neori"
   target="_blank"
   rel="noreferrer noopener">
  Made by jelly
</a>

target=”_blank”

링크된 문서를 새로운 윈도우나 탭에서 열기

noopener

링크를 클릭하면 브라우저 컨텍스트 액세스 권한 없이 새 탭에서 링크가 열린다. 이는 새 창에서 Window.opener 속성이 null 값을 반환하는 것과 같다. 신뢰할 수 없는 링크를 열 때 특히나 유용하다.

norefferer

하이퍼링크로 이동할 때 referer 헤더를 생략하고 참조자 정보를 누출하지 않게 막는다.

div span article section 차이

div span article section 차이
대표적인 블락요소 비교

article

큰 단위 콘텐츠 구획.
문서 혹은 요소가 독립적으로 존재할 수 있을 때 사용한다.

section

작은 단위 콘텐츠 구획.
논리적으로 관계 있는 문서 혹은 요소를 분리할 때 사용한다.

div

브라우저의 한 줄을 모두 차지 (블록 컨테이너).
논리적 관계와는 무관하게 요소를 나누는데 사용된다.
다만 시맨틱 태그에는 div 태그로 사용하던 다양한 역할의 태그, 즉 aside, header, footer, nav 등 대부분을 정의하고 있기 때문에 특별한 경우가 아니라면 사용 자제하는 것이 가독성을 높이는데 유리하다.

span

컨테이너의 크기만큼만 차지 (인라인 컨테이너).

output

태그 <output>는 계산 결과를 나타내는 데 사용됩니다(예: 스크립트에서 수행한 결과).

`<input>` 태그의 value 속성

<input> 태그의 value 속성은 <input> 요소의 초깃값(value)을 명시합니다.
value 속성은 요소의 type 속성값에 따라 다른 용도로 사용됩니다.

“button”, “reset”, “submit” : 버튼 내의 텍스트를 정의함.
“hidden”, “password”, “text” : 입력 필드의 초깃값을 정의함.
“checkbox”, “image”, “radio” : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의함.

`<input>` 태그의 defaultValue 속성

defaultValue: input tag에서 처음 보여줄 값
value: input tag에서 계속 보여줄 값

defaultValue를 지정하고 input 박스에 값을 입력하면 값이 수정이 된다.
반면, value를 지정하고 input 박스에 값을 입력하면 값이 입력되지 않고 지정해준 value만 계속해서 보여준다.

`<input>` 태그의 readonly 속성

태그의 readonly 속성은 요소의 입력 필드가 읽기 전용임을 명시합니다.
읽기 전용으로 설정된 입력 필드는 사용자가 수정할 수는 없지만, 해당 내용을 하이라이트하거나 복사할 수는 있습니다.

따라서 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 입력 필드의 내용을 수정할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 readonly 속성값을 삭제하여 사용자가 입력 필드를 수정할 수 있도록 조절할 수 있습니다.

HTML role 속성

웹 접근성을 위해 명확한 구조의 의미를 부여하는 역할.
특정 요소에 역할 정의, 사용자에게 정보제공, 부여한 역할 동적 변경 불가

<div role="application">

HTML role 속성 – 장애를 가진 사용자들을 위한 향상된 웹 콘텐츠의 접근성 제공

jellyjoji

이전 포스트

Git과 CLI

다음 포스트

멋사스쿨_ 참고사이트_끄적끄적

2개의 댓글

jellyjoji

2023년 7월 5일

logo image 에는 주로 h1 타이틀을 넣어주고 a 링크 연결을 해준다

답글 달기

jellyjoji

2024년 2월 20일

https://bcp0109.tistory.com/348

답글 달기

멋사스쿨_HTML

멋쟁이사자처럼 프론트엔드 스쿨

논리적인 구조

시멘틱 마크업

div

form Tag

form action=“”

form method=“get or post”

required 필수속성

fieldset

legend

제목과 단락

이미지와 피규어

figure 와 figcaption 태그

목록 태그

하이퍼링크

a href=“”

a title=“”

a 태그는 우선순위 규칙 cascating 때문에 순서 고려

hidden 속성

tabindex = “0”

인용문과 줄바꿈

어휘 요소들

섹션 관련 요소 / 메인 요소

컨테이너 요소

텍스트 레벨 요소

address 요소(그룹핑 요소)

임베디드(Embedded) 요소

img srcset=“”

source media=“크기”

video tag

iframe

img

테이블 관련 요소

form

폼 관련 요소

인터렉티브 요소

dialog open

details

summary

async

defer

유저 인터렉션 속성

tabindex=“숫자”

accesskey

contenteditable

보안

target="_blank" rel="noopener noreferrer"

target=”_blank”

noopener

norefferer

div span article section 차이

article

section

div

span

output

<input> 태그의 value 속성

<input> 태그의 defaultValue 속성

<input> 태그의 readonly 속성

HTML role 속성

Git과 CLI

멋사스쿨_ 참고사이트_끄적끄적

2개의 댓글

`<input>` 태그의 value 속성

`<input>` 태그의 defaultValue 속성

`<input>` 태그의 readonly 속성