-
[Day 17] 드롭박스 구현 코드리뷰 & CSS 실무 테크닉TIL/멋쟁이사자처럼 FE스쿨 2기 2022. 4. 20. 00:48SMALL
1. dropbox 구현 코드리뷰 후 알게된 점
원래는 셀렉트박스로 마크업을 해야하지만,
드롭박스 디자인을 바꿀 수 없기 때문에,
바꾸기 위해서 ul>li>button으로 마크업을 대체한다.
그러면 아래와 같이 전체 코드가 완성된다.
<body> <article class="cont-select"> <h2 class="txt-hide">최애 프로그래밍언어를 선택해 주세요</h2> <button type="button" class="btn-select txt-ellipsis on">최애 프로그래밍 언어</button> <ul class="list-member"> <li><button type="button" class="txt-ellipsis">Python</button></li> <li><button type="button" class="txt-ellipsis">Java</button></li> <li><button type="button" class="txt-ellipsis"> JavaScript</button></li> <li><button type="button" class="txt-ellipsis">C#</button></li> <li><button type="button" class="txt-ellipsis">C/C++</button></li> </ul> </article> </body> </html>여기서 버튼에 글자 수가 많아져도 ...처리를 할 수 있는 말줄임을 위해서
txt-ellipsis 클래스를 넣어서 다음과 같이 css 처리를 할 수 있다.
말줄임 처리에 대한 자세한내용 참고
https://deeplify.dev/front-end/markup/text-ellipsis
[HTML/CSS] 말줄임 표시 하는 방법: 1줄, 2줄 예제
html과 CSS를 이용하여 문장에 말줄임 표시하는 방법을 예제를 통해서 대해서 소개합니다.
deeplify.dev
white-space: nowrap /*공백만났을 떼 어떻게 처리해줄 건지⇒더 이상 감싸지 않음*/ overflow:hidden /*으로 숨겨줌*/ text-overflow: ellipsis*그외 팁들
1)
pisition:absoulute clip: rect(0 0 0 0) /*클립은 사용 시 앱솔루트랑 같이 쓰여야 함!*/2) background-position은 right, left 일때만 값 조정 가능하다 (center 불가)
2. IR(Image Replacement) 테크닉
화면 상으론 보이지 않지만, 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 숨겨두는 방법을 뜻한다.
IR 기법이 쓰이는 경우는 다음과 같다.
1) 페이지에 사용된 이미지의 의미있는 텍스트의 대체 텍스트를 제공할 때 (다음 홈페이지 예시)
이미지 내 폰트가 보이지 않는다는 점이 아래 곧 설명할 3번과 다르다. 숨기되, 스크린리더가 읽을 수 있도록 한다. 다음홈페이지에서 정확히 어떤 식으로 쓰였는지 알고 싶어서 열심히 이 클래스에 대해 찾아봤으나
주석처리된 내용밖에 보이지 않았다는게 다소 아숩당..
2) 스크린리더가 읽을 필욘 없지만 마크업 구조 상 필요한 경우
다음 홈페이지 메뉴바: .screen_out 클래스로 숨겨졌다. 3) 중요한 이미지의 대체 텍스트로, 이미지가 off 될 경우에도 보여줄 수 있어야 할 때
다음 홈페이지의 메뉴 같은 경우 거의 대부분 아래와 같이 이미지로 이루어져 있는데,
요러한 이미지들이 불러와지지 않은 경우를 대비해서 대체 텍스트가 이미지 뒤에 깔려있다!
.ir_wa 클래스를 해제해본 결과 => 뒤에 있던 텍스트들이 모습을 드러내었다. +) 네이버 홈페이지의 IR 사용
까꿍 +) 쿠팡 홈페이지의 IR 사용
다음과 같이 속성을 해제해보면,
검색 글씨와 더불어 검색버튼의 백그라운드컬러가 살아남을 알 수 있다!
이것을 백그라운드컬러 포지션과 텍스트 인덴트를 마이너스값을 줌으로써 숨기고 있다.
3. 레티나 디스플레이 대응법
레티나란, 애플의 LCD 고해상도 화면을 의미하는데,
레티나의 실제 픽셀과 css에서 표현하는 논리픽셀이 차이가 발생하는 문제점이 생긴다.
따라서 이 문제점을 해결하기 위해 화면에 우리가 나타내고자 하는 사이즈의 2배 이미지를 준비해야 한다.
저번에 구현한 로그인 화면의 소셜로그인 버튼의 로고를 레티나 대응 이미지로 실습하는 시간을 가졌다. 레티나 적용하는데 정말 오랜 시간이 걸렸는데...^^
다시 한 번 정리해보자면,
https://spritegen.website-performance.org/
CSS Sprite Generator, Editor, and Code
--> --> --> CSS sprites are a way to reduce the number of HTTP requests made for image resources referenced by your site. Images are combined into one larger image at defined X and Y coorindates. Having assigned this generated image to relevant page elemen
spritegen.website-performance.org
1. 1배수짜리 이미지 스프라이트 한 판과 2배수짜리 이미지 스프라이트 한 판을 준비한다.
준비할 때 패딩값을 2배수에 2배로 적용해야 한다.
2. 그리고 가상요소에다 코드를 다음과 같이 적어준다.
-width와 height는 1배수 로고 하나 크기 사이즈
-background에다는 2배수한 이미지 url을 적은 후 위치는 1배수 스프라이트판 export 했을 때 나온 위치를 적어준다.
-background-size를 1배수 스프라이트판 가로 세로 크기를 적어준다.
그럼 완성!
(여기까지 하는데 정말 고생했다...저를 도와주신 분들 정말 감사합니다..)
반응형'TIL > 멋쟁이사자처럼 FE스쿨 2기' 카테고리의 다른 글
[Day 19] 반응형웹 & SVG (0) 2022.04.21 [Day 18] 반응형 사이즈 조절 & 밴딩머신 코드리뷰 (0) 2022.04.20 [Day 16] 로그인창 구현 코드 리뷰 (0) 2022.04.18 [Day 14]CSS Flex 2 (-basis, -grow, -shrink) (0) 2022.04.15 [Day 14] CSS Grid (0) 2022.04.15