220419 과제
1. Dropdown-selecbx 구현
2. CSS 실무테크닉 정리하기
3. 이미지 스프라이트 기법에 레티나 디스플레이 대응해보기
1. Dropdown-selecbx 구현
HTML
✍
<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>
CSS
✍
<style>
.txt-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cont-select {
width: 200px;
margin: 100px auto 0;
}
.btn-select {
width: 100%;
padding: 13px 20px 13px 14px;
font-size: 12px;
line-height: 14px;
text-align: left;
border: 1px solid #c4c4c4;
box-sizing: border-box;
border-radius: 10px;
cursor: pointer;
background: url(./icon-Triangle-down.png) no-repeat;
background-position: right 14px center;
}
.btn-select:focus {
border: 1px solid #9b51e0;
outline: 3px solid #f8e4ff;
}
.btn-select.on {
background-image: url(./icon-Triangle-down.png);
}
.btn-select.on + .list-member {
display: block;
}
.list-member {
display: none;
margin-top: 20px;
border: 1px solid #c4c4c4;
box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.list-member li {
padding: 5px 18px;
}
.list-member li button {
display: block;
width: 100%;
padding: 10px 0;
border: none;
border-radius: 8px;
cursor: pointer;
background-color: #fff;
}
.list-member li button:focus,
.list-member li button:hover {
background-color: #f8e4ff;
}
</style>💻
- 버튼태그안에 a태그 못쓴다.
- 높이주지말고 패딩으로 처리 !
- background이미지 쓸때 순서 상관 있음
- li에는 클래스를 주지않고 부모인 ul에 클래스를 주자
- 셀렉트박스 꾸밀때는
button
ul
li
li
li
li
/ul
/button2. CSS 실무테크닉 정리하기
-
커스텀 input ,select 박스
디자인적인 개성을 주기 위해 스타일링이 까다로운 input 요소를 화면에서 숨기고 label 요소를 연결하여 스타일링을 한다.
- input
.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:checked + .labl-hold::before {
background-image: url("images_login/icon_check.png");
}
- select
<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>
-
IR(Image Replacement) 태크닉
디자인적으로는 보이지 않지만 스크린리더나 브라우저를 위해 정보를 전달하는 텍스트를 html 곳곳에 숨겨두는 방법이다.
- PC용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때
.ir_pm{
display:block;
overflow:hidden;
Font-size:1px;
line-height:0;
text-indent:-9999px;
}- Mobile용 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때
.ir_pm{
display:block;
overflow:hidden;
font-size:1px;
line-height:0;
color:transparent;
/* transparent 키워드는 IE9부터 사용 가능하기 때문에 PC에서는 빠져있습니다.
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#transparent */
}- 스크린리더가 읽을 필요는 없지만 마크업 구조상 필요한 경우
.screen_out {
overflow: hidden;
position: absolute;
width: 0;
height: 0;
line-height: 0;
text-indent: -9999px;
}- 중요한 이미지 대체텍스트로 이미지 off 시 에도 대체 텍스트를 보여주고자 할때
.ir_wa{
display:block;
overflow:hidden;
position:relative;
z-index:-1;
width:100%;
height:100%
}- IE 구버전에서 인식을 못하는 경우가 있기 때문에 margin: -1px; 을 사용한다.
clip 속성을 통해 요소를 잘라내는것도 가능함.
.blind {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}3. 이미지 스프라이트 기법에 레티나 디스플레이 대응해보기
.icon-google::before {
background: url(./images_login/css_sprites.png) -10px -10px;
background-size: 103px;
}
.icon-naver::before {
background: url(./images_login/css_sprites.png) -47px -6px;
background-size: 100px;
}
.icon-kakao::before {
background: url(./images_login/css_sprites.png) -5px -42px;
background-size: 90px;
}
.icon-facebook::before {
background: url(./images_login/css_sprites.png) -66px -4px;
background-size: 85px;
}
- 이미지를 추가하거나 고칠때 곤란하고 스프라이트자체가 엄청 커진다.
뜨내기 FE 개발자