본문 바로가기

코딩/css

미디어쿼리관련 Media query관련 · 조건문이 될 수 있는 특징 ①width / height @media all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하이면 실행 @media all and (width:768px), (width:1024px) { … } // 뷰포트 너비가 768px 이거나 ‘또는’ 1024px 이면 실행 @media not all and (min-width:768px) and (max-width:1024px) { … } // 뷰포트 너비가 768px 이상 ‘그리고’ 1024px 이하가 ‘아니면’ 실행②device-width / device-height @media all and (d..
IE에서만 CSS적용 IE에서만 CSS적용되도록/* IE10+ */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Enter your style code */ } /* IE6,7,9,10 */ @media screen and (min-width: 640px), screen\9 { /* Enter your style code */ } /* IE6,7 */ @media screen\9 { /* Enter your style code */ } /* IE8 */ @media \0screen { /* Enter your style code */ } /* IE6,7,8 */ @media \0screen\,screen\9 { /* Enter yo..
clearfix방법 *clearfix시키는 방법 4가지 https://youtaekjung.github.io/2018/04/21/css/CSS-float-clearfix/ ▶가상 요소 ::after 사용(권장) float속성을 적용한 요소의 부모요소::after{ display:block; content:''; clear:both; } ▶overflow:hidden float속성을 가진 요소의 부모 요소에 overflow:hidden또는 overflow:auto; → 넘치는 부분이 잘리거나 가로 스크롤바가 생기기때문에 사용하지 않는것이 좋다. [ CSS3부터 적용 ] 가상 클래스(hover, link...) 는 싱글콜론(:) 가상 요소(after, before..) 는 더블콜론(::)
font 브라우저별 폰트포맷 EOT는 IE브라우저만 지원하고 WOFF는 모든 브라우저에서 지원합니다. 모든 브라우저에서 웹폰트를 사용하려면 src 속성에 코드를 추가해야 합니다. 글꼴파일유형.eot : IE8 이하버전(ie에서만 지원) .otf / .ttf : 크롬, 파이어폭스, 오페라, 사파리, 안드로이드, ios .woff : 크롬, 파이어폭스, ie9 이상, 사파리 등에서 인식되며 .otf/.ttf의 압축 버전으로 다른 글꼴 형식보다 빠르게 로드 .woff2 : woff보다 우수한 압축(평균 30%)이지만 사파리, ie, ios지원안됨 IE 6~8IE 6~8은 EOT 파일만 지원하므로 EOT파일을 내려받도록 해야합니다. @font-face{ font-family : NanumSquare; src:url(Na..
font 단위 emem은 상대적인 크기를 지니는 단위로써 요소에 지정하는 글자 크기 단위를 설정할 수 있다.일반적으로 웹 브라우저에서는 1em = 16px으로 환산되며, 1em은 웹 브라우저에서 글자 크기사이즈를 지정하지 않았을 때 표시되는 글꼴 크기의 기본값이다. em단위는 부모 요소에서 지정한 글자크기를 기준으로 배율을 조정하게 된다.따라서 1.5em을 지정하면 부모요소 글자 크기의 1.5배가 된다. html, body{font-size:16px;} //14px이 기준일 때 1em은 16px이므로 12px을 em으로 변환시키면 12/16 = 0.75em //%로 변화할 시, 12/16*100=75%가 된다. remroot em이라는 뜻으로, HTML문서의 root요소인 html요소를 가리키며, 이 요소에 지정된 크..
데이터 속성 사용(data-*) HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute라고 부른다. data-* 속성은 두 부분으로 구성된다.1. 속성 이름은 대문자를 포함해서는 안되며 "data-"접두어 다음에 적어도 하나 이상의 문자가 있어야 한다.2. 속성 값은 임의의 문자열이 될 수 있다.ex) data-id / data-name / data-age / data-job... 주의점웹을 이용하는 사용자가 아무런 제한없이 data-속성을 보고 그 정보들을 해석할 수 있기 때문에 보안관련된 정보들은 담지 않는것이 좋다. HTMLdata- 뒤에 속성의 이름을 입력text Jquerydata()함수를 이용하여 data속성의 값을 출력하거나, data속성의 값을 지정할..

티스토리툴바