21. CSS 실무 테크닉

1. 커스텀 input, select 박스

1.1 개념

1.2 input checkbox 커스텀

<!-- txt-hide 클래스로 요소를 숨겨줍니다. -->
<input type="checkbox" id="inpHold" class="inp-hold txt-hide">
<label for="inpHold" class="labl-hold">로그인 상태 유지</label>

.form-login .labl-hold{
    display: block;
    height:22px;
    margin:17px 0 21px;
    text-align: left;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color:#767676;
    cursor: pointer;
}
.form-login .labl-hold::before{
    display: inline-block;
    content:"";
    width:22px;
    height:22px;
    margin-right:8px;
    vertical-align: -5px;
    background-image:url("images_login/icon_check_empty.png") ;
}

.form-login .inp-hold:focus+.labl-hold::before{
    outline:2px solid #000;
    outline-offset: 5px; 
}

.form-login .inp-hold:checked+.labl-hold::before{
    background-image:url("images_login/icon_check.png") ;
}

1.3 select 커스텀

<h2>셀렉트 박스 만들기</h2>
<button class="btn-select">당신의 에스파 최애 맴버는??</button>
<ul class="list-member">
    <li><button type="button">카리나</button></li>
    <li><button type="button">지젤</button></li>
    <li><button type="button">닝닝</button></li>
    <li><button type="button">윈터</button></li>
</ul>

<script>
    const btn = document.querySelector('.btn-select');
    const list = document.querySelector('.list-member');
    btn.addEventListener('click', () => {
        list.classList.toggle('on');
    });
    list.addEventListener('click', (event) => {
        if (event.target.nodeName === "BUTTON") {
            btn.innerText = event.target.innerText;
            list.classList.remove('on');
        }
    });
</script>

/* 직접 셀렉트 박스 만들기 */
h2 {
    margin: 30px;
}

.btn-select {
    width: 200px;
    height: 30px;
    background: purple;
    color: #fff;
}

.list-member {
    display: none;
    width: 200px;
    height: 30px;
}

.list-member.on {
    display: block;
}

.btn-select:active+.list-member {
    display: block;
}

.list-member li {
    height: 30px;
    width: 200px;
}

.list-member li button {
    display: block;
    height: 100%;
    width: 100%;
    background-color: #fff;
    border: 1px solid black;
    border-top: none;
}

.list-member li button:hover {
    background-color: bisque;
}

2. IR(Image Replacement) 테크닉

2.1 개념

2.2 방법

2.2.1 카카오가 사용하는 방법들

1. PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때

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

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;
}

1. 중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때

.ir_wa{
	display:block;
	overflow:hidden;
	position:relative;
	z-index:-1;
	width:100%;
	height:100%
}

2.2.2 네이버가 사용하는 방법

.blind {
	position: absolute;
	clip: rect(0 0 0 0);
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
}

2.2.3 마이너스 마진에 대한 논란

3. CSS Sprite 기법

4. 레티나 디스플레이 대응법

4.1 레티나란?

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

4.2 원인은 무엇일까?

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



 
 

4.3 해결 방법

5. 반응형 컨텐츠 만들기

5.1 반응형 이미지

5.1.1 이미지 포맷

5.1.2 반응형 이미지 만들기

1. width: 100%

2. max-width: 100%

5.2 반응형 백그라운드 이미지

5.2.1 백그라운드 사이즈 속성들

5.2.2 반응형 백그라운드 이미지 만들기

background: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8Y2l0eXxlbnwwfHwwfHw%3D&w=1000&q=80") center /cover no-repeat;

5.3 반응형 동영상

5.3.1 동영상 상식

5.3.2 동영상 만들기

1. video 태그로 만들기

<video autoplay controls loop src="next_level.mp4"></video>

1. youtube 동영상으로 만들기

<iframe class="video-next-level"
            src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>

5.3.3 반응형 동영상 만들기

<article class="cont-video">
	<iframe class="video-next-level"
            src="https://www.youtube.com/embed/4TWR90KJl84?autoplay=1&mute=1&loop=1&playlist=4TWR90KJl84&controls=1"
            title="YouTube video player" frameborder="0" allowfullscreen></iframe>
</article>

.cont-video {
    position: relative;
    padding-top: 56.25%;
		/* padding-top, padding-bottom 속성의 % 값은 부모 요소의 넓이에 비례합니다. */
		/* 예를 들어 부모의 넚이가 1200px 이라면 padding-top=50% 의 값은 600px 과 같습니다. */
} 


.video-next-level {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

}