HTML CSS 학습 16일차

파랑·2021년 11월 22일
0
많이 늦었다. 요즘 멘탈이 흔들리는 일이 있어서 빡세게 집중을 못한 것 같다. 마음을 바로 잡아야지..
오늘은 CSS 실무 테크닉들에 대해서 공부하였다.

학습한 것

  • 커스텀 select 박스
  • IR(Image Replacement 테크닉)
  • CSS Sprite 기법
  • 이미지 최적화 크라켄
  • 레티나 display
  • Bootstrap

/커스텀 Select Box/

디자인적 개성을 위해서 실무에서는 인풋 요소나, 선택 박스를 브라우저 스타일과 다르게 표현하기도 한다고 함.
input 요소는 스타일링이 까다로워 input 요소를 숨기고 label 요소를 연결하여 스타일링을 함.
(새벽까지 조금 해볼 예정.)

/IR 테크닉/

IR?
의미가 포함된 image를 배경으로 표현하고, 그에 상응하는 내용을 텍스트로 전경에 기입하는 방법.
시각이 있는 사용자는 이미지로 처리된 화면을 볼 수 있지만 "화면 낭독기를 사용하는 시각 장애인, CSS제거 및 인쇄"시에는 문자에 접근하거나 문자를 볼 수 있는 형태로 설계 하는 기법을 말한다.
(출처 : https://dolly77.tistory.com/26)

카카오가 사용하는 방법
1. PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할 때

.ir_pm{
	display:block;
	overflow:hidden;
	Font-size:1px;
	line-height:0;
	text-indent:-9999px;
}

(text indent를 아주작은수로 두어 감춘 모습)

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

(글자색을 투명하게 함.)

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

(스크린 리더는 width, height 가 0이면 안읽는다.)

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

/CSS Sprite 기법/

여러가지 이미지를 하나의 이미지 파일 안에 배치해서 이미지 로드 부담을 줄이는 방법.
많은 사이트들이 사용하고 있음.

이미지 합쳐주는 사이트:
https://www.toptal.com/developers/css/sprite-generator/

/이미지 최적화 크라켄/

이미지 로드를 빨리하기 위해 이미지를 최적화주는 크라켄을 알게 됨.

사이트 링크 : https://kraken.io/

/레티나 디스플레이/

레티나?

  • 특정한 시야 거리에서 인간의 눈으로는 화소를 구분할 수 없는 화소 밀도(300 PPI가 넘을 경우)를 가진 애플 LCD 제품의 브랜드 이름.

원인?

  • 레티나(고해상도 화면)로 넘어오면서 논리픽셀(css에서 표현하는 화소의 기본 단위)과 물리픽셀(디바이스가 실제로 처리할 수 있는 화소의 기본 단위)의 차이가 발생.
    그러나 브라우저는 css에서 정의한 픽셀만큼 이미지를 렌더링 해야하기 때문에 원래는 물리픽셀에 맞게 렌더링된 이미지가 논리픽셀 만큼 커져버리게 됨.

대응방법

https://medium.com/@sujin.park.dev/%EB%AA%A8%EB%B0%94%EC%9D%BC-%EC%9B%B9%EC%97%90%EC%84%9C-%EB%A0%88%ED%8B%B0%EB%82%98-%EB%94%94%EC%8A%A4%ED%94%8C%EB%A0%88%EC%9D%B4-%EB%8C%80%EC%9D%91%ED%95%98%EA%B8%B0-597a97913a0c

레티나 디스플레이에 미디어 쿼리를 주거나
css의 img-set 속성을 이용하면 된다.
또는 img 태그에 srcSet 속성으로 레티나 디스플레이를 대응해주면 된다.

/bootstrap/

부트스트랩?
웹 프레임워크.
반응형 사이트를 구축하는데 최적화 되어있다고함.
https://getbootstrap.com/
스터디할 때 공부한 것으로는 트위터에서 시작된 오픈소스고 엄청 거대하긴 한데
커스텀이 힘들고 부트스트랩으로 만든 사이트는 비슷하다는 단점이 있다고 함.

많은 것을 실습했는데, 어려운 건 없고 필요한 기능은 그떄 그떄 검색해서 써도 될듯 하다.
진짜 이거 써서 사이트만들기 너무 쉬운것 같음..
그래서 포트폴리오에는 절대 사용하지 말라고 하심.

오늘의 일기

시간을 잘 쓰자.

0개의 댓글