코딩묻은 디자이너

HTML에서 <input type="checkbox">를 다른 옵션 없이 사용하면

클릭

위와 같이 만들 수 있다

기능은 작동하지만 실제로 배포를 할 때 사용자들에게 편리한 UX는 아니다

저 조그만 체크박스를 사용하는건 불편...

더 편리한 UX를 제공하기 위해서는 옆의 글자를 클릭했을 때 체크박스가 함께 클릭되도록 하면 좋다

클릭

코드 작성 예시 (label 사용)

<input type="checkbox" id="cleck" name="cleck">

<label for="cleck">클릭</label>

id 를 지정하고, label의 for 부분을 id와 동일하게 설정하면

체크박스 옆의 글자를 클릭했을 때 체크박스의 on/off를 변경할 수 있다!

실제 적용된 코드

<ol>
    <li>
    	<input id="yomigana" type="checkbox" 
         onChange={yomiganaHandle}/>
         <label for="yomigana">요미가나 숨기기</label>
    </li>
    <li>
    	<input id="alpabet" type="checkbox" 
        onChange={alpabetHandle}/>
        <label for="alpabet">알파벳 가이드 숨기기(준비중)</label>
    </li>
 </ol>

개발중인 타자연습의 메뉴모달

사이트에 완성이라는게 없겠지만 점점 배포해서 보여줄 정도의 웹이 되고 있다!

시맨틱 태그란

Semantic elements = elements with a meaning
-W3schools

시맨틱 태그는 의미를 가지는 태그를 의미한다.

HTML5에서 처음 등장하는 개념이다.

다음과 같이 HTML에서 웹 페이지의 다른 부분들을 의미를 가지고 정의할 수 있다.

의미가 없는 <div> ,<span>, <p> 등으로 만들면 태그 이름만으로는 어떤 기능을 하는지 알 수 없지만 시멘틱 태그를 사용하면 내용을 알기 쉽게 정의할 수 있다.

종류

<article>

<aside>

<details>

<figure>

<figcaption>

<footer>

<header>

<main>

<mark>

<nav>

<section>

<summary>

<time>

가 있다

시멘틱 태그를 사용할 때의 장점

1. 검색엔진최적화(SEO)

검색 엔진은 시멘틱 태그를 중요한 키워드로 간주하여 검색시 더 상위에 노출될 수 있다.

2. 시각장애 사용자가 탐색시 용이

시각 장애가 있는 사용자를 위한 화면 판독기가 웹사이트의 콘텐츠를 더 잘 이해할 수 있어 사용자에게 더 나은 경험을 제공할 수 있다.

3. 의미 없는 태그(ex) <div>)를 담색하는 것 보다 쉽다

예를 들면

<div>
	<h1>제목</h1>
    <div>
    	내용1
    </div>
    <div>
    	내용2
    </div>
</div>

div > div 를 통한 접근보다는

section > article 을 통한 접근이 훨씬 쉬워진다.

4. 태그 안에 채워질 데이터 유형을 제안할 수 있다

5. 네이밍을 통일할 수 있다

여러 개발자들이 함께 작성을 하다보면 <div id="nav">로도, <div id="navigation">으로도 이름지어질 수도 있어 시멘틱 태그가 아닌 경우 네이밍에서 통일성을 해친다면 시멘틱 태그를 사용해 네이밍을 통일할 수 있다.

section 과 article

section 과 article이 가장 헷갈렸는데

article은 article 독립적으로 독립된 페이지에 보여질 수 있는 구조

section은 연관된 내용들을 묶어서 보여줄 때

section 안에 article이, article 안에 section이 들어갈 수 있는 구조라고 생각한다.

main

main 태그는 콘텐츠 영역을 나타내는 것으로 하나의 메인만이 존재할 수 있다.

footer

페이지 최하단의 저작권, 작성자, 관련 문서등의 내용이 담겨있는 요소

aside

문서의 주요 내용과 간접적으로 연관된 부분으로 사이드바, 콜아웃 박스로 표현한다.

header

소개 및 탐색에 도움을 주는 콘텐츠로 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함될 수 있다.

참고 사이트

https://www.w3schools.com/html/html5_semantic_elements.asp

https://www.freecodecamp.org/news/semantic-html5-elements/

https://developer.mozilla.org/ko/docs/Glossary/Semantics

다음과 같이 div 안에 이미지를 넣고 그 위에 투명한 div가 올라오도록 하는 이미지를 만들어보았다

컴퓨터에 마땅한 이미지가 없어 예전에 그려두었던 호시노겐 그림을 넣었다

그냥 이미지 HTML

    <div class="item-box">
      <div class="image">
        <img src="../assets/image.png" alt="">
      </div>
    </div>

CSS

  .item-box{
    width: 100px;
    height: 100px;
    padding: 5px;
    margin: 5px;
    box-shadow: inset 1px 2px 4px rgba(0, 0, 0, 0.25);
    background: #fff;
    border-radius: 10px;
    display: table;
  }
  .image{
    display: table-cell;
    vertical-align: middle;

  }
  img{
    width: 100%;
    border-radius: 10px;
  }

이미지를 가운데 정렬 시키기 위해서 부모 div의 display 를 table 로 만들고 자식 div에 display : table-cell을 준 후

vertical-align : middle을 주었다!

div 겹친 HTML

<div class="item-box">
  <div class="image">
    <img src="../assets/image.png" alt="">
  </div>
  <div class="sold-out">
    <p>sold out</p>
  </div>
 </div>

다음과 같이 내가 원하는 div의 직속자식으로 sold-out 클래스를 가진 div를 만들어주었다

CSS

  .item-box{
    position: relative;
  }
  
  .sold-out{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: table;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    border-radius: 10px;
  }

  .sold-out > p{
    display: table-cell;
    vertical-align: middle;
  }

item-box 클래스에는 position : relative 값을 추가해주고

sold-out 클래스는 position : absolute 값을 주었다

처음 다른 블로그를 참고하여 부모에 relative 자식에 absolute 값만 줬을 때는 이런식으로 자식 상자가 옆으로 가벼렸는데

left : 0px; right : 0px을 줘서 위치값을 초기화 시켜주면 원하는 위치에 이동한다!

1. 규칙의 충돌

css요소를 추가하다보면 css요소들이 겹쳐져 충돌하는 일이 일어난다. css는 우선순위에 따라 스타일을 적용시킨다

2. style 우선순위

5순위 순서의 경우

    .red{
      color: red;
    }
    .blue{
      color: blue;
    }

  <div class="red blue">red</div>
  <div class="blue red">blue</div>

다음과 같이 div class의 순서와 상관 없이 style sheet에서 나중에 적힌 스타일이 적용된다

3. 상속

CSS는 상속을 통해 부모 요소의 모든 속성을 자식에게 상속하지는 않는다

상속 되는 것 

> Text관련요소 visibility, opacity, font, color, line-heignt, text-align, white-space

상속 되지 않는 것

> box model 관련 요소 position 관련 요소 width/height, amrgin, padding, border, box-sizing, display, background,vertical-align, text-decoration, positon, top/right/bottom/left, z-index, overflow

	.red{
      color: red;
    }

    .border{
      border: 1px solid blue;
    }

<div class="red border">
      상위 태그입니다
    <div>
      하위 태그입니다
    </div>
  </div>

css의 border가 하위 태그에는 적용이 되지 않은 것을 확인할 수 있다

기본적으로 div 박스 크기를 만질때 width를 설정 할 경우 content를 기준으로 width가 결정된다

div 상자를 만들고 width를 주는 경우 border은 콘텐츠의 크기 + 패딩값의 크기 값이 되는 것이다

CSS 코드

.box{
      width: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px;
      background-color: brown;
    }

box1의 경우에는 콘텐츠 영역 100px + padding 20+20 그리고 border 1+1px을 더해 보더의 값은 총 142가 된다

    .box{
      width: 100px;
      margin: 20px;
      padding: 20px;
      border: 1px;
      background-color: brown;
    }
    .box-sizing{
      box-sizing: border-box;
    }

box-sizing : border-box 코드를 추가한 박스의 box2의 경우 border가 기준이 되고 있기 때문에 border값이 100px이 된다.

section과 option으로 드롭다운 메뉴 만들기

1. 기본

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select id="option">
      <option>옵션1</option>
      <option>옵션2</option>
      <option>옵션3</option>
      <option>옵션4</option>
      <option>옵션5</option>
    </select>
  </div>

2. name과 value

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select name="option_selction" id="option">
      <option value="옵션1">옵션1</option>
      <option value="옵션2">옵션2</option>
      <option value="옵션3">옵션3</option>
      <option value="옵션4">옵션4</option>
      <option value="옵션5">옵션5</option>
    </select>
  </div>

value : 서버에 넘어갈 데이터

3. required와 disabled

  <div>
    <label for="option">옵션을 선택해주세요</label>
    <select name="option_selction" id="option" required>
      <option value="옵션1">옵션1</option>
      <option value="옵션2">옵션2</option>
      <option value="옵션3">옵션3</option>
      <option value="옵션4">옵션4</option>
      <option value="옵션5" disabled>옵션5</option>
    </select>
    <input type="submit">
  </div>

required : 설문조사시 옵셥을 필수로 선택해야 다음 페이지로 넘어갈 수 있다

disabled : 옵션 5를 선택할 수 없다

사용자의 편의성을 조금 더 높이기 위해 label 과 autopocus를 사용할 수 있다

1. label

  <div>
    <label for="name">이름을 입력해주세요</label>
    <input type="text" id="name">
  </div>

>> label을 사용하면 input으로 정보를 받을 사각형 영역외에 label로 감싸진 영역을 클릭하며 정보 입력을 할 수 있다

input 에 id 값과 label 에 for 값을 입력하고 해당 값이 같으면 사용할 수 있다

2. autopocus

  <div>

    <label for="name_2">이름을 입력해주세요</label><br>

    <input type="text" id="name_2" autofocus>

  </div>

>> autofocus를 이용하면 해당 정보를 받는 페이지에 들어오자 마자 커서가 깜박거리며 클릭이 되어있는 것을 확인할 수 있다

모바일에서 더욱 유용!

새로고침을 하면 해당 상자에 커서가 깜박거리는걸 확인할 수 있다!

아래 코드에서 작성된 코드들은 모두 <form> 내부에 작성되었습니다

1. 텍스트 입력받기

  <div>
    <input type="text">
  </div>

2. 텍스트 가이드 넣어주기

  <div>
    <input type="text" placeholder="텍스트를 입력해주세요（*´▽`*)">
  </div>

text를 입력 받을 때 사용자에게 힌트를 제공하기 위해서는 placeholder를 사용한다

3. 데이터 전송 버튼 만들기

  <div>
    <input type="text">
    <input type="submit">
  </div>

type submit을 통해 제출 버튼을 만들 수 있다

4. '제출'버튼 텍스트 바꾸기

  <div>
    <input type="submit" value="（*´▽`*)">
  </div>

input type = 'submit'을 입력하면 기본 값이 '제출'로 들어가 있는데 value = "입력하고 싶은 값"을 입력하면 변경이 가능하다

5. 아이디 페스워드 입력받기

  <div>
    <input type="id">
    <input type="password">
    <input type="submit" value="다음">
  </div>

type="id"의 경우 ---@---.-- 로 이루어진 아이디 형태의 값만 받을 수 있다

type="password"에 값을 입력하는 경우 *****형태로  보인다