🦁_21.11.19 TIL

Bori·2021년 11월 20일

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

목록 보기

19/60

21년 11월 19일

📝 CSS

📎 함께 코드 작성 - Vending Machine with Media Query

21.11.18-TIL에 이어지는 내용입니다.

Vending Machine with `Media Query` + `Grid`

소스코드 보기 - index_grid.html, style_grid.css 파일로 확인하기
- 모바일 기기에서 확인한 페이지

📎 함께 코드 작성 - Weniv 로그인 화면

21.11.16-TIL과 이어지는 내용입니다.

요소의 높이 설정

되도록 높이는 설정하지 않는다.
=> 요소 내의 콘텐츠가 변동될 가능성이 있으므로 높이 값을 지정해 놓으면 콘텐츠의 변동에 따라 UI가 깨질 수 있다.

인라인 레벨 요소에 position / float을 지정하면 블록 레벨로 바뀐다.

<a href="#none"> 의 의미

페이지 내에 id 값이 none인 곳으로 이동을 의미

<a href="#"> 일 경우, 페이지가 새로고침 되므로 이 현상을 막기 위해 <a href="#none">를 이용하기도 한다.
=> <a href="#none">에는 의미가 있는 것이므로 대신, <a href="javascript:void(0)"> 를 이용하는 것도 좋다.

javascript:void(0)의 의미 : undefined를 반환하는 함수

마크업 작성 순서

의도에 따라 마크업 작성 순서가 다를 수 있다.

이 실습의 경우, article.modal-login의 button.btn-close 를 로그인 버튼 뒤에 작성해서 article.modal-login 창이 열린 후 포커스의 이동이
input[id="inpId"] > input[id="inpPw"] > input[type="checkbox"] > button[class="btn-login"] > button[class="btn-close"] 의 순서로 움직이게 작성

팝업

페이지의 콘텐츠 위에 나타나는 창 또는 대화상자

팝업의 종휴

사용자가 팝업의 나머지 부분과 상호작용 할 수 있는지 여부에 따라
Modal : 팝업을 닫기 전까지 페이지의 콘텐츠 비활성화
Nonmodal : 팝업이 계속 표시되어 있어도 페이지 콘텐츠 활성화

배경의 흐림 처리(dimmed) 여부
ligntbox : 배경이 흐림 처리가 되어있는 경우
배경이 흐림 처리가 되어있지 않은 경우, 특별한 이름이 없다.

[출처: Popups: 10 Problematic Trends and Alternatives]

참고 링크
Popups: 10 Problematic Trends and Alternatives

button의 box-sizing 기본 값은 border-box

user-select CSS 속성

사용자가 텍스트를 선택할 수 있는지 여부를 제어
/* Keyword values */
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;
/* Global values */
user-select: inherit;
user-select: initial;
user-select: revert;
user-select: unset;
속성값 설명
none 해당 요소와 하위 요소의 텍스트를 선택할 수 없음
text 텍스트 선택 가능

참고 링크
MDN - user-select

속성값	설명
`none`	해당 요소와 하위 요소의 텍스트를 선택할 수 없음
`text`	텍스트 선택 가능

📎 CSS 실무 테크닉

커스텀 `input`, `select` 박스

디자인적인 개성을 주기 위해 실무에서는 input 요소나 select 박스에 브라우저 스타일과 다르게 표현하곤 한다.
input[type="checkbox"] 커스텀
=> 위의 <Weniv 로그인 화면> 참고
=> 내가 시도했던 코드와 비교
select 박스 커스텀

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="reset.css" />
    <style>
      h2 {
        margin: 30px;
      }

      .btn-select {
        width: 200px;
        height: 30px;
        background: purple;
        color: #fff;
      }

      .list-member {
        display: none;
        width: 200px;
        height: 30px;
      }

      .list-member.on {
        display: block;
      }

      .btn-select:active + .list-member {
        display: block;
      }

      .list-member li {
        height: 30px;
        width: 200px;
      }

      .list-member li button {
        display: block;
        height: 100%;
        width: 100%;
        background-color: #fff;
        border: 1px solid black;
        border-top: none;
      }

      .list-member li button:hover {
        background-color: bisque;
      }
    </style>
  </head>
  <body>
    <h2>셀렉트 박스 만들기</h2>
    <button class="btn-select">당신의 에스파 최애 맴버는??</button>
    <ul class="list-member">
      <li><button type="button">카리나</button></li>
      <li><button type="button">지젤</button></li>
      <li><button type="button">닝닝</button></li>
      <li><button type="button">윈터</button></li>
    </ul>
    <script>
      const btn = document.querySelector(".btn-select");
      const list = document.querySelector(".list-member");
      btn.addEventListener("click", () => {
        list.classList.toggle("on");
      });
      list.addEventListener("click", (event) => {
        if (event.target.nodeName === "BUTTON") {
          btn.innerText = event.target.innerText;
          list.classList.remove("on");
        }
      });
    </script>
  </body>
</html>

과제 - select box custom

소스코드 보기

IR(Image Replacement)

디자인적으로 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 숨기는 방법
=> 다양한 방식의 해결책이 있다.

카카오에서 사용하는 방법

/* pc용 - 사용된 이미지 내 의미있는 텍스트의 대체 텍스트를 제공할 때 */
.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

/* mobile용 - 사용된 이미지 내 의미있는 텍스트의 대체 텍스트를 제공할 때 */
.ir_pm{
	display:block;
	overflow:hidden;
	font-size:1px;
	line-height:0;
	color:transparent;
}

/* 스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우 */
.screen_out {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

/* 중요한 이미지 대체 텍스트로 이미지가 보이지 않아도 대체 텍스트를 보여주고자 할 때 */
.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

네이버에서 사용하는 방법

 .blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

네거티브 마진에 대한 논란

https://stackoverflow.com/questions/61896327/why-is-negative-margin-set-to-visually-hidden-text-for-screen-readers

https://github.com/h5bp/main.css/issues/12

.blind 라는 클래스 명은 권장하지 않는다.

bilnd의 의미
1.눈이 먼, 맹인인
2.맹인들
3.눈이 멀게 만들다, 시력을 앗아 가다 등

.sr-only (screen reader only) / .vh (visually hedden) 사용하기

읽어보기

IR(Image Replacement)기법

웹 접근성을 고려하여 텍스트 숨기기

마무리

수업 시간에 내가 몰랐던 내용들이 나오면 따로 메모해놓고 TIL 작성하면서 조금 더 자세히 찾아보곤 한다.
=> 간단하다고 생각했던 내용이 실은 꽤 깊은 내용이어서 당황스럽기도 하지만 찾아보길 잘했다. 뿌듯!
3주차 금요일! 주말에 해야할 목록을 작성해놓았는데 다 할 수 있겠지?
=> 최대한 할 수 있도록 해야지

Bori

이전 포스트

🦁_21.11.18 TIL

다음 포스트

🦁_21.11.19 TIL

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

21년 11월 19일

📝 CSS

📎 함께 코드 작성 - Vending Machine with Media Query

Vending Machine with `Media Query` + `Grid`

📎 함께 코드 작성 - Weniv 로그인 화면

요소의 높이 설정

인라인 레벨 요소에 `position` / `float`을 지정하면 블록 레벨로 바뀐다.

`<a href="#none">` 의 의미

마크업 작성 순서

팝업

`button`의 `box-sizing` 기본 값은 `border-box`

`user-select` CSS 속성

📎 CSS 실무 테크닉

커스텀 `input`, `select` 박스

과제 - select box custom

IR(Image Replacement)

네거티브 마진에 대한 논란

`.blind` 라는 클래스 명은 권장하지 않는다.

마무리

🦁_21.11.18 TIL

🦁_21.11.20 / 21.11.21

0개의 댓글

🦁_21.11.19 TIL

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

21년 11월 19일

📝 CSS

📎 함께 코드 작성 - Vending Machine with Media Query

Vending Machine with Media Query + Grid

📎 함께 코드 작성 - Weniv 로그인 화면

요소의 높이 설정

인라인 레벨 요소에 position / float을 지정하면 블록 레벨로 바뀐다.

<a href="#none"> 의 의미

마크업 작성 순서

팝업

button의 box-sizing 기본 값은 border-box

user-select CSS 속성

📎 CSS 실무 테크닉

커스텀 input, select 박스

과제 - select box custom

IR(Image Replacement)

네거티브 마진에 대한 논란

.blind 라는 클래스 명은 권장하지 않는다.

마무리

🦁_21.11.18 TIL

🦁_21.11.20 / 21.11.21

0개의 댓글

Vending Machine with `Media Query` + `Grid`

인라인 레벨 요소에 `position` / `float`을 지정하면 블록 레벨로 바뀐다.

`<a href="#none">` 의 의미

`button`의 `box-sizing` 기본 값은 `border-box`

`user-select` CSS 속성

커스텀 `input`, `select` 박스

`.blind` 라는 클래스 명은 권장하지 않는다.