웹밤바

기본으로 모든 li를 step이 지나간 스타일로 적용하고(#fff) on이 된 요소를 뒤따르면서 같은 부모를 공유하는 모든 li ( li.on ~ li) 즉 on이된 요소부터 맨 뒷 li 까지 색상을 선택되지 않은 색상으로 변경한다(#999) 주의해야할 점은 on이 되지 않은 상태는 모든 요소가 선택이 된것처럼 보여짐으로 항상 on체크가 있어야 한다

scroll-margin-top

ios에서 input disabled 일때 value 글씨가 다른데보다 안보이는 현상 placeholde는 정상적으로 보여지지만 value는 좀 흐리게 보인다. input:disabled { -webkit-text-fill-color: #888; -webkit-opacity: 1; }

주민번호 뒷자리 배경처리 입력된 자리수만큼 표시가 되어야 할 경우 input password 와 같은 레벨에 배경 이미지를만들고 input password가 동그란 모양으로 나오기 때문에 입력된 문자열 만큼 배경이미지 위에 가려지는 효과로 작업 .personalNo-2:before {bg:img} .personalNo-2 input {font-size:60px; color:green} See the Pen input password 배경 by soohyeon (@sooh) on CodePen. 2. 주민번호 뒷 1자리 표시 뒷 1자리 한정 input을 배경이미지 크기만큼 width를 적용하고 label로 focus 영역을 확장한다 input에 value가 있을때 == placeholder가 없을때 ( i..

col width에 padding이 있을경우 표준브라우저와 비표준 브라우저의 렌더링 방식이 다름 width 220, padding-left 15 일경우 ie 는 content-box, 표준브라우저는 box-sizing으로 출력 td의 넓이는 ie : width 220, pl 15 = 235px 크롬 : width 105, pl 15 = 200px table의 width값이 정해져 있는데 td가 맘대로 width값을 늘려버렸으니 그 모자란 width값은 죄없는 옆 친구 td값을 차감한다 구 IE5버전의 모습을 크롬이 그대로 보여줘야 하기때문에 col값을 크롬 계산법대로 수치 수정을 해준다.

variable.scss : 각 대응할 분기점 설정 // media $mobileSize : 320px; $tabletSize : 768px; $pcSize : 1100px; mixin.scss // mediaquery @mixin respond-to($media) { @if $media == mobile { // mobile @media only screen and (max-width: $tabletSize - 1) { @content; } } @else if $media == tablet { // tablet @media only screen and (min-width: $tabletSize) and (max-width: $pcSize - 1) { @content; } } @else if $media..

의미론적으로 input radio로 별점 5개중 1개를 선택하는 마크업으로 구현 별 1개 .. 반복 ~~ 별5개 위 마크업을 기본으로 jquery 없이 css로만 구현 startRadio 의 after 가상태그에 기본 별의 테두리만 색이 채워지고 안쪽은 투명한 이미지 준비한다 이미지는 이것 하나만 사용된다 startRadio 는 안쪽 컨텐츠 개수만큼 커질수 있게 display:inline-block으로 설정 after에 별 높이값만큼 높이 설정후 width값은 지정해 주지 않는다 이렇게 별의 배경 세팅이 되었다. label에 별 width, height 값을 세팅 float:left로 일렬 나열, position:relative : 선택된 별 보다 낮은 개수는 채워질수 있는 기준점 설정 *핵심* star..

반응형으로 작업하기위해 vw로 이용했었는데 pc에서 브라우저 사이즈와 video 사이즈가 일치하지 않아 오류 => em으로 작업 html에 font-size를 px로 주고 미디어쿼리로 일정사이즈 이하에서 vw로 변환 비디오사이즈보다 작게 브라우저창을 줄이지 않을거라는 가정하에 나는 pc video width 740으로 주었다 @media only screen and (max-width:740px) { html { font-size: 3.3956vw; } } 단 pc에서 740보다 작게 브라우저를 줄이면 UI는 vw로 변환되어 비디오사이즈는 고정, UI는 유동적으로 변환된다. .play-progress:before { font-size: 1.042em; position: absolute; right: -0..

text-underline 색상이나 위치가 기본 underline보다 아래에 위치해 있는 디자인이 나올때가 있다 기본 underline span { text-decoration: underline; } text-underline-position: under; 를 이용하면 기본 언더라인 위치보다 조금 아래에 위치할수 있다 span { text-decoration: underline; text-underline-position: under; } 결과 : 위 방법은 세세한 위치조정은 어렵다 더 정밀한 위치조정과 색상변경을 위해선 아래 2가지 방법이 있다 1. ::after position 으로 띄워서 위치변경 height로 두께변경 background로 색상 변경 span { position: relative..

홀수 리스트 디자인 스타일 맞추기 마지막 2개 라인은 없는 디자인 그렇지만 마지막 1개만 있어도 라인은 있어야 한다 조건 1. 컨텐츠 하단 라인 2. 마지막 열은 하단 라인 없음 3. 마지막 열 컨텐츠 1개일 경우 빈 칸 윗쪽 컨텐츠는 하단라인 삭제 일단 flex로 정렬 &__list { margin-bottom: -1px; overflow: hidden; display: flex; flex-wrap: wrap; } &__item { position: relative; // float: left; margin:0 12px 0 0; padding:20px 10px 20px 130px; width:516px; height: 143px; font-size: 0; border-bottom:1px solid #e..