멋사 D+7 HTML + CSS

main으로 브랜치 변경

 

저번주 실습 리마인드

멤버태그 마크업

이것이 멤버 태그~

• padding 속성으로 클릭할 수 있는 여백 늘림 (사용자 접근성)

 

.member Layout

오른쪽처럼 가로로 정렬하기 위해서 display 속성을 이용했음

• 공백문자 없애는 방법으로는 font size를 0으로 줘서 속성을 상속시켜 없애는 방법이 있다.
• inline 속성일 때, 4px의 여백에 대하여  <- 읽어보기!!

 

---

english옆에 여백 맞추는 방법 3가지 (padding때문에 여백 안맞아서)

 

1. padding  제거 (비추)

/* 마지막 li요소에 포함된 a 요소를 선택하여 오른쪽 padding값을 0으로 재정의 하는 방법 */
.member li:last-child a {
  padding-right: 0;
}

 

결과

but padding을 제거하는 방법은 오른쪽에 클릭하는 공간이 줄어들어서 (사용자 접근성이 떨어짐) 추천하지 않음

 

2. position: relative;

/* 텍스트 링크 모음 */
.member {
  background-color: aqua;
  text-align: right;
  padding: 4px 0;
  /* position 속성을 활용하여 .member 영역을 오른쪽으로 10px 만큼 이동하기 */
  position: relative;
  right: -10px;
}

결과

 

3. transform 속성

/* 텍스트 링크 모음 */
.member {
  background-color: aqua;
  text-align: right;
  padding: 4px 0;
  /* position 속성을 활용하여 .member 영역을 오른쪽으로 10px 만큼 이동하기 */
  /* position: relative;
  right: -10px; */
  /* tranform 속성을 활용하여 .member 영역을 오른쪽으로 10px 만큼 이동하기 */
  transform: translateX(10px);
}

결과

 

멤버태그 글씨가 큰것 같으니 조정해주자!

육안으로 구분하기 힘들기때문에 개발자도구로 확인하자.

html{
  font-size: 10px;
}

/* 본문 스타일 */
body {
  /* em, rem 단위를 사용해보기 */
  font-size: 1.4rem;
  ...
  }

 

 

CSS 상대 단위 - em 과 rem

상대 단위 (em, rem, %, vw, vh)

상대(relative) 단위란 고정되지 않고 어떤 기준에 따라 유동적으로 바뀔 수 있는 길이를 나타내는 단위

 

절대 단위 (px, pt, cm, in)

절대(absolute) 단위란 어떤 상황에서든 항상 고정된 길이를 나타내는 단위

 

em 과 rem 의 차이점

단위의 기준은 font-size 속성 값이며, 이는 정확히 어디에 있는 font-size 속성 값인지에 따라 차이가 발생함

em 은 해당 단위가 사용되고 있는 요소의 font-size 속성 값이 기준이 되는 값

rem 은 r(root), 즉 최상위 요소의 font-size 속성 값이 기준이 되는 값

 

 

• em 부모로 부터 상속받은
• rem 루트를 기준으로

 

 

메인 구조 설계

Navigation Layout 및 Hidden Contents

 

 

웹접근성 관련 클래스명

• a11y = accessibility

인터넷 접근성과 기술 기반 시설의 접근성 개선 운동을 나타내는 말

• sr-only = screenreader-only
• offscreen
• readable-hidden
• i18n = internationalization

SW 국제화, 즉 SW(Software) 국제화는 SW가 특정 지역이나 언어에 종속되지 않고 다양한 지역, 언어에서 정상 동작하도록 국제적으로 통용되는 SW를 설계하고 개발하는 과정

i18n

a11y

처음 들어본 개념이라 찾아봄..! 읽어보자

 

 

콘텐츠 숨기기

다양한 CSS 콘텐츠 기법 소개

 

80 Best Funny CSS Puns By Saijo George - TechClient

스크린리더 관련 추천 영상 (WAI-ARIA)

 

화면을 보는 스크린리더 사용자 - WCAG 2.1 항공사 WAI-ARIA 적용사례

숨김 텍스트 관련 추천 블로그 글

 

접근 가능한 숨김 텍스트

 

실습

사진에 보이는 빨간점같은 저것(메인메뉴)을 숨겨보자

 

1. display: none;

/* 숨김 콘텐츠 */
.a11y-hidden {
  background-color: yellow;
  display: none;
}

 background-color: yellow;

 display: none; or hidden

이 방법은 보조기기가 읽어주지 못해서 적절하지 못하다! (사용자 접근성)

 

2. top 값 설정을 통한 숨김 방식

초창기에 유행하던 숨김 방식이다. (안드로메다로 보내버림)

화면에 나타나지 않지만 요소 검사시 컨텐츠가 있는 것을 알 수 있다.

/* 숨김 콘텐츠 */
.a11y-hidden {
  background-color: yellow;
  position: absolute;
  top: -9999em;
}

 

 

3. clip-path 폴리곤함수를 이용한 숨김 방식

/* 숨김 콘텐츠 */
.a11y-hidden {
  background-color: red;
  position: absolute;
  /* 접근 가능하게 숨기기 위해 .a11y-hidden에 w1 h1을 주면 안에 담긴 text가 오버플로우된다.
  그래서 ov:h, m:-1을 주면 오버플로우 된 것들이 히든 되고, 상자는 늘어나게 된다.
  거기에 clip-path를 0 0, 0 0, 0 0으로 주면 화면에는 보이지 않고 접근이 가능해진다. */
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0);
  /* 구형 브라우저에서는 rect사용 */
  clip: rect(0 0 0 0);
}

clip-path

요소의 클리핑 범위를 지정, 클리핑 범위 안의 부분은 보여지고, 바깥은 숨김

 

 

clip-path: polygon(50% 0%, 0% 100%, 100% 100%);

 

 

 

숨김 방식 이렇게 하면 안된다..!

width, height 을 0을 주면 안되나요?

⇒ 크기가 없는 개체는 스크린리더가 포커싱을 할 수 없다. 즉, 읽을 수가 없다.

opacity: 0 , color: transparent 로 투명하게 만들면 안될까요?

⇒ 투명하면 스타일적으로 접근할 수가 없다.

 

 

메뉴바 마크업

보통 현업에서 메뉴를 설계 할 때 아래의 방식을 사용한다고 한다.

아래의 경우 (논리적이지 않은 마크업 구조)

검색엔진이 인식을 못하거나 스크린리더가 읽지 못하는 단점이 발생할 수도 있다.

 

하지만 우리는 보다 논리적이고 접근성이 좋은 구조의 방식으로!! 

WAI-ARIA: Web Accessibility initiative - Accessible Rich Internet Application의 약자로 웹 페이지, 특히 동적 콘텐츠, 그리고 Ajax, HTML, JS 및 관련 기술로 개발된 사용자 인터페이스 구성요소의 접근성을 증가시키는 방법에 대해 규정한 W3C가 출판한 기술사양이다.

 

아시아나 홈페이지 메뉴바와 대한항공 홈페이지 메뉴바 비교

마우스가 아닌 tab키로 접근했을 때, 아시아나는 각 메뉴에서 메뉴에 포함된 하위메뉴로 넘어가고, 대한항공은 메뉴에서 메뉴로 넘어간다.

위의 예시처럼 메뉴안의 하위메뉴가 많은 경우에는 대한항공처럼 설계하는 것이 접근성 면에서 좋은 것 같다.

ex) tab키를 사용하여 아시아나 클럽 안에 마일리지 사용몰로 들어가려면 100번이 넘게 tab키를 클릭해야 함

 

 

DOM 제어

jQuery를 사용할 수도 있고, Vanilla JS를 사용할 수도 있다. 어떤 사람들은 jQuery를 무시하고 배제하기도 하지만 그러지 말 것! 개발할 때 나는 어떠한 도구를 사용할 것인지 잘 선택하는 것도 중요하다.

 

Active

menu list

is-active 가 있을 때 어떻게 작동할지 결정

is-active 가 없을 때 display:none

있을 경우에는 display:block 을

적용한다

 

 

 

CSS방법론 (BEM, SMACSS, OOCSS)

• BEM

BEM(Block Element Modifier)은 블록(block), 요소(element), 상태(modifier)로 구분하여 클래스 이름을 작성하는 방식의 방법론

BEM은 블록(block), 요소(element), 상태(modifier) 3가지로 구성하고, 각 부분을 __와 --로 구분하여 짓게 된다.

어떻게 보일지에 초점을 두기보단 '어떠한 목적인가' 에 초점을 두어 이름을 짓는다.

엄격한 네이밍 규칙을 따르며 클래스명이 용도와 형태를 잘 표현해주어 직관적으로 알 수 있는것이 장점이나, 클래스명이 길고 복잡해 질 수 있다는 단점이 존재한다.

 

• 블록(block)
  : 재사용성이 가능하고 기능적으로 독립이 가능한 컴포넌트이다. 일반적으로 하나의 단어를 사용하되 길어질 경우엔 -를 사용한다.

.header {..}
.block {..}

• 요소(element)
  : 블록을 구성하는 단위이다. __를 사용한다.

.header {..}
.header__tap {..}
.header__content {..}
.header__logo__button {..}

• 상태(modifier)
  : 블록이나 요소의 속성으로 -를 사용한다.

.header--hide {..}
.header__tap--big {..}
.header__content--disabled {..}

BEM - Block Element Modifier

[CSS 방법론] BEM 방식

 

• SMACSS

Scalable and Modular Architecture for CSS

CSS 에 대한 확장형 모듈식 구조

CSS 의 프레임워크가 아닌 하나의 스타일 가이드

Class 명을 통한 예측이 가능하며, 재사용 및 쉬운 유지보수가 가능한 특징을 지니며 확장 가능한 구조이다.

 

• OOCSS

Object Oriented CSS

Nicole Sullivan에 의해 개발된 프레임워크

CSS 모듈 방식으로 코딩하여 중복을 최소화하는 기법

 

 

CSS Property

CSS Property 관련 질문

1. button의 type 생략하지마라 !!!!! (역할 부여임)
2. <button type="button" class="menu-button">HTML에 대해</button>
3. a태그 href 없으면 마우스 포커싱이 안됨 !!
4. <a href="/">HTML5 소개</a>

 

Inline JS (권장 X)

태그 내에 직접 JS 명령어를 작성하는 방법

이벤트 핸들러 속성을 지정해서 JS를 실행하도록 하는 고전적인 방식으로 onclick 이 인라인인 JS 방식

HTML 문서와 분리하는 것을 권장하기에 onclick 을 사용하는 Inline JS 방식은 자주 사용하지 않음

<h1 onclick="alert('ok!')">인라인 방식 자바스크립트</h1>

 

 

숏핸드 표기법 (단축 속성)

단축 속성은 서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있는 CSS 속성

/* background */
background-color → 배경색
background-image → 배경 이미지
background-repeat → 배경 이미지의 반복여부
background-position → 배경 이미지의 위치
background-attachment → 배경 이미지 고정 여부
background-size → 배경 이미지 크기 조정

단축 !

background → 위에 싹다 됨, 값과 값 사이를 공백으로 구분

/* border */
border-top-width -> 위쪽 경계 너비
border-top-style -> 위쪽 경계 스타일
border-top-color -> 위쪽 경계 색

단축 !

border -> 위에 싹다 됨, 값과 값 사이를 공백으로 구분

 

 

linear-gradient();

두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성하는 함수

함수의 결과로 생성되는 이미지는 이미지 요소의 한 종류이므로 이미지가 적용되는 곳에 대해서만 사용가능

즉, background-color, color 와 같은 속성에는 사용할 수 없다.

 

Ultimate CSS Gradient Generator

 

...
/* 본문 스타일 */
body {
background: #ccc
    linear-gradient(to bottom, #ccc, 0%, #eee, 35%, #efefef, 70%, #fff 100%);
    }
 ...   
.menu {
  background: #e85e2c
    linear-gradient(
      to bottom,
      #ef9126 0%,
      #e85e2c 35%,
      #e85e2c 70%,
      #ef9126 100%
    );
}
...   
.footer {
  background: #ccc
  linear-gradient(to bottom, #ccc, 0%, #eee, 35%, #efefef, 70%, #fff 100%);
}
...

 

메뉴 그라디언트

바디, 푸터 그라디언트

 

 

.nav Layout

참고하면 좋을 Neflix Layout <Figma>

Figma

디자인 참고 추천 동영상

 

1px 보다 얇은 디자인 — 라인 편

 

 

 

menu위에 실선 넣어주기

border-top, ::before, box-shadow, border-image를 사용할 수 있지만 실습에서는 border-top을 이용하였다.

.menu {
 /* currentColor: 부모 요소에서 상속받은 색상을 사용 */
  border-top: 2px solid currentColor;
...
}

결과

 

 

border-radius을 이용하여 아래쪽 둥근 모서리로 만들어주었다.

.menu {
...
  border-radius: 0 0 5px 5px;
}

결과

 

 

.menu Layout

슬비쌤이 구현한 .menu Layout

float 을 사용하여 세로 모습에서 가로 모습으로 구현

슬비쌤이 구현한 .menu Layout2

.sub-menu 에 position: absolute 를 사용

 

 

double margin float bug의 위험이 있다!
.menu-item:first-child {
  margin-left: 230px;
}

Double Margin Float Bug (IE6, IE7)

IE6, IE7 에서 나타나는 버그, Float 방향과 동일한 방향의 Margin 값이 2 배가 되는 버그

 

line-height, font-size의 관계

.menu-button {
  border: 0;
  border-left: 2px solid #fff;
  background-color: transparent;
  padding: 0;
  line-height: 45px;
}