[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; }
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));
폴백(무언가에 대한 대안)을 많이 생각해봐야 함.
Author And Source
이 문제에 관하여([WebCafe] member-service 부분 구성(Negative Margin)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@songjy377/1027저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)