[WebCafe] member-service 부분 구성(Negative Margin)

<member-service 완성모습>

❓ 메인메뉴 h2 태그 안보이게 하기

nav 영역 내부의 하늘색 영역이 main menu영역 이라는것을 명시하기 위해(스크린 리더를 사용하는 사용자들의 경우) sr-only class를 주고, h2 tag로 '메인 메뉴' 라는 글씨를 써 둔 상황이다.

❗❗ 이때 요소 상으로는 존재해야 하지만, 화면상으로는 '메인 메뉴'라는 글씨가 안 보여야 한다!

1. display: none;

.sr-only {
   background-color: slateblue;
   display: none; 
}.

이렇게 하면 아예 요소를 없애는 것이기에, 스크린리더 또한 접근이 불가능하다. 접근은 가능하게 해야 함!

2. position과 음수 값 이용

.sr-only {
    background-color: slateblue;
    top: -9999em;
}

• 음수 좌표를 주어 요소가 화면 밖으로 나가버리게 한다. 하지만 스크린리더가 읽을 때, 화면이 맨 위로 이동되기 때문에 사용하지 않는것이 좋다.

3. position과 overflow: hidden

.sr-only {
    background-color: red;
    position: absolute;
    overflow: hidden;
    width: 1px;
    height: 1px;
}

• position을 absolute로 하여 부모 요소의 바로 아래에 위치시키고, overflow를 hidden으로 하여 크기를 1, 1로 하여 안 보이게 하자, 그러나 색이 보여서 빨간 점은 화면에 남아있음. -> ????근데 그럼 색 없애면 되는 거 아닌가?
  

4. position과 overflow: hidden +clip

.sr-only {
    background-color: red;
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0,0,0,0);
    clip-path: polygon(0 0, 0 0, 0 0);
    clip-path: inset(50%); -> 좀 더 짧은 버전
    overflow: hidden;
}

• 빨간 점도 없애줌. masking 기법

✅ clip

• 요소의 특정 부분만 나오도록 할 수 있다.
• 직사각형 형태로만 적용 가능.
  rect( <top>, <right>, <bottom>, <left> )
  <top> : 위를 기준으로 시작하는 위치
  <right> : 왼쪽을 기준으로 끝나는 위치
  <bottom> : 위를 기준으로 끝나는 위치
  <left> : 왼쪽을 기준으로 시작하는 위치

clip: auto | shape | initial | inherit
auto : 요소의 모든 부분이 나옵니다.
shape : 특정 부분이 나오도록 합니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.

✅ clip-path

• clip-path는 새롭게 추가된 속성으로 여러 형태의 도형 적용 가능

clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z');

❓ a태그 색 변경하기

• a tag는 따로 color를 설정해주지 않아도 요소 자체가 가지고 있는 color값이 존재한다.
• 그래서 a tag 요소를 선택을 하기 전에는 검은색이고, 한번 방문을 한 링크인 경우 보라색으로 변하게 된다.

a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
    text-decoration: underline;
}

• 따라서 a tag요소에 색을 주고 싶다면 a tag 자체에 줘야 한다.
• 또는 inherit 값을 사용해서 부모의 값 그대로 상속받아 사용할 수 있다.

a {
    color: inherit;
    text-decoration: none;
}

❓ menu-button 요소들 오른쪽 끝으로 배치하기

1. flex 사용

.member-service {
    display: flex;
    flex-flow: row nowrap;
    justify-content: right;
}

• ul class인 main-service에 display: flex속성을 주고, justify-content: right로 li들을 오른쪽 정렬한다.

2. float 사용

• 맨 처음에는 li tag에 float right를 주면 원하는 ui가 나올 것이라고 생각했는데, 오른쪽 정렬은 되었지만, li들의 순서가 바뀌었다.

.member-service li {
    float: right;
}

• 부모를 right로 float시키고, 자식 요소들을 left로 float시켜서 왼쪽으로 정렬되도록 하기!

.member-service {
    background-color: pink;
    overflow: hidden;
    float: right;
}
.member-service li {
    float: left;
}

3. display: inline

• li tag들을 display: inline 으로 inline요소로 변경시킨 후, 부모 요소인 main-service class에 text-align: right로 내부 li요소들을 오른쪽 정렬시키면, 요소들이 오른쪽 정렬이 된다.

.member-service {
    text-align: right;
}
.member-service li {
    display: inline;
}

• 이때 inline이 아니라 inline-block으로 바꿔주면, 사용자들이 선택할 수 있는 버튼의 영역이 더 넓어지므로 사용자 접근성이 더 좋아지게 된다.

❓ html의 줄바꿈으로 인해 생긴 공백 제거하기

• 위의 예시처럼 요소를 inline으로 변경해주면, html의 줄바꿈 부분이 빈 블록으로 인식되어 공백이 생기게 된다.
  
  

1. font-size값 바꾸기

• font size를 0으로 주어 요소 사이 공간을 없애준다.

.member-service {
    font-size: 0;
    text-align: right;
}
.member-service li {
    display: inline-block;
    font-size: 1rem;
}

2.negative margin

• margin을 음수 값으로 지정하여 요소들의 시작점을 변경해줘서 서로 붙게 하자.

.member-service {
    background-color: pink;
}
.member-service li {
    display: inline;
    margin-right: -4px;
}

negative margin 참고 글

english 대문자로 바꾸기
english 대문자로 바꾸는거 -> font-variant, normal : 소문자를 작은 대문자로 바꾸지 않습니다.
small-caps : 소문자를 작은 대문자로 바꿉니다.
initial : 기본값으로 설정합니다.
inherit : 부모 요소의 속성값을 상속받습니다.
or uppercase
홈, 로그인, 회원가입 앞에 : 을 붙여보자

.member-service li::before {
    content: ":";
}

first-item::before {
    content: "";
}

-> 위에 처럼 하면 홈 앞에 :가 사라지지 않는다. 구체성 점수가 위가 더 높기 때문에!

.member-service li::before {
    content: ":";
}

li.first-item::before {
    content: "";
}

-> 이제 둘다 점수가 똑같으니 아래 있는 게 덮어씌어져서 홈 앞의 : 사라짐!

-> 또는 !important를 사용해도 가능.

.first-item::before {
    content: "" !important;
}

-> nth child 사용(두번째 요소부터 다)

.member-service li:nth-child(n+2)::before {
    content: ":";
}

하지만 스크린리더가 불필요한 :을 읽기때문에 이렇게 하지 말고 aria hidden 쓰기

웹폰트는 다운받을때 시간이 좀 걸리니까 맨 위에!

a tag에 대해 padding을 통해 영역을 넓히는 것이 UX적으로 좋다. 왜냐하면 사용자가 touch할 수 있는 영역을 최대한 넓게 제공해주는게 좋기 떄문(모바일 환경 같은 경우 범위가 너무 적으면 사용자가 선택하기에 굉장히 불편할 수 있음.)

menu part

로고를 menu 내부에 넣어야 하는데, logo와 menu li들이 겹치지 않게 하려면? -> padding을 주고 시작하자.

IE에서 float:left를 주고 margin-left: 50을 주면 double-margin-float-bug가 발생한다.

글씨가 하양색이면 배경이미지 없앴을때 안보일수도 있으니까 맨 앞에 색을 지정해두자.
background: #F2422B linear-gradient(to bottom, rgba(252,142,45,1) 0%,rgba(242,66,43,1) 26%,rgba(242,66,43,1) 26%,rgba(242,66,43,1) 26%,rgba(242,66,43,1) 74%,rgba(252,117,0,1) 100%,rgba(242,66,43,1) 100%,rgba(242,66,43,1));

폴백(무언가에 대한 대안)을 많이 생각해봐야 함.