멋쟁이 사자처럼 FE 2기 - 17

26346 단어 CSSCSS

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
 /button

2. CSS 실무테크닉 정리하기

  1. 커스텀 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>

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

  • 이미지를 추가하거나 고칠때 곤란하고 스프라이트자체가 엄청 커진다.
11_레이아웃 관련 스타일2
JSEXP

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage