모바일웹에서 손가락으로 축소/확대가 가능하게 해달라는 요청을 받았습니다.그때는 HTML head에 있는 메타태그를 수정하면 됩니다 :)  위와 같은 메타태그가 있을 때, 아래 부분을 yes로 수정하고, user-scalable=yes, 아래 부분을 1보다 큰 숫자로 수정 하면 maximum-scale=3, 확대/축소가 가능합니다 :) user-scalable 속성이 확대/축소의 여부를 결정하고, maximum-scale 속성이 확대되는 최대값을 결정합니다! 만약 user-scalable 속성을yes로 바꿔주어도,maximum-scale 속성이 1이라면 당연히 확대가 되지 않습니다!ㅎㅎ  저는 관련해서 아래글을 많이 참고하였습니다! :)https://velog.io/@ckstn0777/모바일-웹-환경에서-..

html 에서 [ video ] 태그 사용할 때 썸네일 넣는 쉬운 방법이 있습니다! 아래와 같이 poster="" 속성을 사용하면 됩니다.  after나 before 등으로 동영상 위를 이미지로 가릴 필요 없이, poster를 사용하면 동영상 위에 해당 이미지가 썸네일로 보여지게 됩니다!

처음엔 js에서 calc를 사용할 수 있는 방법이 없다고 생각했었습니다.그래서 아래와 같은 방법으로 calc와 비슷하게 계산될 수 있도록 했었습니다 :) 아래처럼 전체 높이 값을 구해준 후, 빼줘야할 값을 빼주는 방법입니다.(너무 간단한데 신입 시절엔 왜 그렇게 헤맸을까요?)$('.exam').css('height', $('body').height() - 200); 아래처럼 숫자를 넣어주기보다 변수를 만들고 그것의 높이값을 불러오게끔 작업해주면 반응형 등의 상황에서도 틀어지지 않습니다.$('.sub_banner .wrapper').css({'top': $header.innerHeight(), 'height': $('.sub_banner').height() - $header.innerHeight()}); ..

저희 [class^="tit"] 이런 선택자 많이 사용하시죠? 그런데~ 이런 어트리뷰트 선택자도 종류가 굉장히 다양합니다! 아래 어트리뷰트 선택자 종류를 확인해주세요! 1. [속성이름~="속성값"]2. [속성이름|="속성값"]3. [속성이름^="속성값"]4. [속성이름$="속성값"]5. [속성이름*="속성값"] 정말 다양하죠? 하나하나 설명 드리겠습니다!  1. [속성이름~="속성값"]- 특정 속성의 속성값에 특정 문자열로 이루어진 하나의 단어를 포함하는 요소를 모두 선택합니다. 예를 들어 [class~="tit"] 이렇게 입력 시 tit 이라는 class를 가진 속성을 모두 선택합니다! 하지만 ' main_tit ' 이런 클래스는 선택하지 않습니다! 그 이유는? ~ 은 단어를 기준으로 선택하기 때문에 ..

웹 호환성의 문제로 인해서 텍스트에 그라디언트가 들어가는 경우 이미지로 저장하여 작업을 했었는데요.이제 IE 브라우저가 종료되면서 텍스트 그라디언트 속성을 사용할 수 있게 되었습니다!아래 방법을 참고하여 그라디언트 텍스트를 만들어보세요 :)  텍스트에 그라디언트를 입히기 위해선 [ -webkit-background-clip:text; ] 이 속성을 활용하여 간단하게 스타일을 넣을 수 있습니다. 해당 속성은 background를 clip, 즉 자르는 것인데요. -webkit-background-clip:text; 이렇게 입력하면 background를 text 모양을 제외하고 자르겠다는 뜻이 됩니다. 이 속성을 활용하여 color는 transparent로 투명하게 바꿔준 후, background에 그라디언트..

css에서 밑줄 오류가 생기는 경우는 거의 보지 못한 것 같습니다.하지만 이번에 작업을 하면서 처음으로 오류가 생겼는데요!이럴 경우 어떻게 작성해야 제대로 보여지는지 알아보아요😎    우선 텍스트에 밑줄을 넣기 위해서는 보통 아래와 같은 방법을 사용합니다. 1. 가상 선택자 사용 (before, after)2. text-decoration 속성 사용3. border-bottom 속성 사용  1. 가상선택자 사용먼저 1번의 경우 아래 코드와 같이 입력하여 밑줄 스타일을 삽입하게 되는데,.deco_underline {display:inline-block; position:relative; color:#111; font-weight:600;}.deco_underline::before { content:..