처음 로딩 시 svg 배경 이미지가 간혈적으로 제대로 나오지 않는 이슈 네트워크에서 이미지는 잘 가져옴 CSS에서 background-position 전에 background-size를 선언하는지 확인 background-size 속성 contain 에서 100% 로 변경 background-size: contain -> background-size: 100% 참고 CSS background-size: 100%; background-image: url(../images/logo.svg); background-repeat: no-repeat; background-position: 0 0; background-color: #fff;

IE에서는 이미지나 비디오 태그에 object-fit 속성을 사용할 수 없습니다. 박스 내의 여백을 모두 채우면서 동일한 비율로 크기를 꽉 채우기 위해서는 여러 가지 방법을 사용할 수 있는데, 이미지(img) 속성의 경우에는 object-fit: cover;로 쉽게 적용할 수 있습니다. 하지만, IE에서는 사용할 수 없고 IE11부터는 주석처리가 불가능하기 때문에 웹킷 브라우저 등에서 사용이 가능한 object-fit: cover;와 같은 효과를 아래와 같은 방식으로 구현할 수 있습니다. img { transform: translateX(-50%) translateY(-50%); top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; h..

grid는 그리드 기반의 레이아웃을 위한 강력한 css 모듈 중 하나입니다. flexbox와 마찬가지로 그리드 항목의 소스 순서는 중요하지 않습니다. 미디어쿼리를 사용하여 그리드를 쉽게 재정렬할 수 있습니다. 크게 그리드 컨테이너 속성과 자식 요소인 그리드 아이템 속성으로 구분할 수 있습니다. 그리드 컨테이너 속성 display 엘리먼트를 그리드 컨테이너로 지정하고, 새로운 그리드 형식 컨텍스트로 설정합니다. grid: 블록 레벨의 그리드를 생성합니다. inline-grid: 인라인 레벨의 그리드를 생성합니다. .container { display: grid | inline-grid; } grid-template-columns, grid-template-rows 공백으로 구분된 값 목록으로 그리드의 열과..

E:not(S) - S가 아닌 E 요소를 선택 E:first-of-type - E 요소 중 첫 번째 E를 선택 (E 요소의 순서만 계산에 포함됨) E:last-of-type - E 요소 중 마지막 E를 선택 (E 요소의 순서만 계산에 포함됨) 첫번째 자식 요소를 제외한 나머지 요소에 컬러값을 적용합니다. ul li:not(:first-of-type) { color: red; } 마지막 자식 요소를 제외한 나머지 요소에 아래에 여백을 적용합니다. ul li:not(:last-of-type) { margin-bottom: 20px; }

css 변수란? 사용자 지정 변수로 CSS의 속성을 미리 정의해놓고, 여러 곳에서 사용할 수 있는 변수를 의미합니다. 웹사이트에서는 보통 많은 양의 CSS를 가지고 있습니다. color나 size 등의 많은 값이 반복적으로 사용이 됩니다. 이때, CSS변수를 사용해주면 반복되는 코드를 줄일 수 있습니다. 기본 문법 변수는 두개의 붙임표, (--)와 함께 사용 변수는 대소문자 구분, --my-bg-color와 --My-bg-color는 서로 다른 속성으로 처리 지정 element 해당 element에만 css 변수값을 적용할 거라면, 위와 같은 방법으로 사용해주시면 됩니다. element { --main-bg-color: red; } html 문서 전체 HTML 문서 전체에서 사용하려면 :root의 가상선..

기본적으로 반응형웹을 적용하기 위해서 먼저 HTML head 부분에 meta viewport를 설정해주어야 합니다. width=device-width: 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 초기 화면 배율 4개의 반응형 분기점 낮은 해상도의 PC, 태블릿 가로 : ~1024px 테블릿 가로 : 768px ~ 1023px 모바일 가로, 태블릿 : 480px ~ 767px 모바일 : ~ 480px /* PC , 테블릿 가로 (해상도 768px ~ 1023px)*/ @media all and (min-width:768px) and (max-width:1023px) { ... } /* 테블릿 세로 (해상도 768px ~ 1023px)*/ @media all and (min-widt..

display: none 과 visibility: hidden 둘 다 콘텐츠를 숨길 수 있지만, 스크린 리더로도 읽을 수 없기 때문에 접근성에 문제가 있습니다. 화면에는 보이지 않으며, 스크린 리더가 읽는 데에는 문제가 없는 clip 속성을 사용해 보자. clip 속성을 사용한다고 무조건 스크린 리더가 읽을 수 있는 것은 아닙니다. 스크린 리더는 width, height 사이즈가 0인 엘리먼트의 콘텐츠를 읽을 수 없으니, 엘리먼트의 사이즈는 최소 1px 이상으로 적용해야 합니다. /* 접근성에 문제가 있음 */ .blind { display: none; /* 화면에 보이지 않고, 스크린 리더도 읽어주지 않음 */ } .blind { visibility: hidden; /* 화면에 보이지 않고, 스크린 리..

CSS 선택자(Selector) 중에 :nth-child와 :nth-last-child를 이용하면 자식 형제 요소의 갯수에 따라 스타일을 다르게 지정할 수 있습니다. 이 선택자는 IE9부터 지원 가능합니다. li:nth-child(1):nth-last-child(2), li:nth-child(1):nth-last-child(2) ~ li { width: 50%; } li:nth-child(1):nth-last-child(3), li:nth-child(1):nth-last-child(3) ~ li { width: 33.333%; } li:nth-child(1):nth-last-child(4), li:nth-child(1):nth-last-child(4) ~ li { width: 25%; } li:nth-c..

/* 3, 6, 9, 12 번째(3의배수) 배경변경 */ li:nth-child(3n){ background: red; } /* 10번째 부터 이후 모든 리스트 컬러변경 */ li:nth-child(n+10) { color: blue; } /* 1번째 부터 5번째 까지 배경변경 */ li:nth-child(-n+5) { background: green; } /* 15번째 부터 20번째 까지 배경변경 */ li:nth-child(n+15):nth-child(-n+20) { background: hotpink; } /* 끝에서 부터 3번째 */ li:nth-last-child(3) { background: gold; } /* 홀수 */ li:nth-child(odd) { color: red; } /* 짝수 ..

안드로이드 크롬에서 더보기 버튼으로 비동기로 데이터 추가 시 더보기 버튼을 누르면 스크롤 위치가 페이지 하단으로 이동되어 새로 추가된 아이템 목록 끝으로 보이는 스크롤 위치 이슈가 있었습니다. 또 다른 예로, sticky된 가로 스크롤 메뉴 -> 다른 메뉴 클릭 -> 아이템 리셋 후 비동기로 새로운 데이터 추가 시 이전에 보고 있던 스크롤 위치가 그대로 유지되어 처음 아이템 부터 보이지 않는 이슈 입니다. Chrome 56 부터 scroll anchoring 기능을 추가했으며, 이는 뷰포트에서 스크롤 위치를 고정시키고 뷰포트 외부의 콘텐츠가 계속 로드 되더라도 사용자가 동일한 위치를 볼 수 있도록 도와줍니다. 웹의 다양한 상황으로 인하여 scroll anchoring이 오작동 하는 경우가 발생할 수 있으..

position: sticky 값을 사용하면 스크롤 시 특정 지점에 도달하면 요소(element)를 고정 할 수 있습니다. sticky가 제대로 고정 되지 않을 경우 아래 2가지 값을 확인해야 합니다. 고정 요소에 top, left 값이 있는지 확인 (가로 스크롤의 경우 bottom, right) 고정 요소 위 부모 요소에 overflow 값이 hidden, scroll 또는 auto로 설정된 경우 부모 요소가 display: flex일 경우, 세로 정렬 align-items: flex-start 값이 필요합니다. 이유는 flex박스의 align-items은 기본 값으로 stretch로 되어 있어 고정 요소가 컨테이너의 전체 높이를 차지하기 때문에 고정 되지 않습니다. .container { displa..

웹접근성의 개념에 대해서 널리 알려지지 않았을 때 간혹 디자이너분의 요청으로 포커스 라인을 제거하기 위해 아래와 같이 :focus의 outline을 지워버리는 방식을 사용합니다. a, input, button { outline: 0; } :focus { outline: none; } 이제 포커스가 더이상 화면에 표시되지 않지만, 키보드만으로 브라우저를 조작해야 하는 사람의 경우 현재 초점을 알 수 없기 때문에 문제가 됩니다. 절대 아무런 대체재 없이 외곽선을 지워버리면 안됩니다. 시각장애나 신체장애를 가진 사용자는 키보드만 이용해 웹사이트를 이용 할 경우 키보드로 선택한 현재 요소에 하이라이트를 줄 필요가 있습니다. 크롬 86 버전에 추가된 :focuis-visible이란 가상 클래스(pseudo cla..

white-space 공백문자를 어떻게 다룰 것인지 지정하는 코드. (html 코드 상에서 띄어쓰기나 줄바꿈, 탭으로 인한 공백 부분 등등) white-space: normal;기본값. 연속 공백과 줄바꿈 등을 통합해서 표현 ( 보통 띄어쓰기를 500번 하든지 줄바꿈을 하든지 결과는 띄어쓰기 한칸 인것처럼 적용됨) white-space: pre;normal과 반대. 원문 그대로 출력 white-space: nowrap;스페이스바를 막 눌러서 들어가는 연속공백은 통합되지만 (normal의 효과)줄바꿈은 인정함 (pre의 효과) white-space: inherit;부모요소의 값을 상속 word-break텍스트가 들어가는 블록요소의 가로 사이즈에 맞춰 줄바꿈 해줄까, 말까 하는 코드. (강제줄바꿈 방지, 텍..

태그를 제외한 모든 인라인 엘리먼트는 margin과 padding이 좌우에만 적용된다. 만약, 억지로라도 상하 공간을 만들어내고 싶다면, line-height 프로퍼티를 사용할 수 있다. height 로 박스의 높이를 지정한 경우, 내용물의 높이가 박스에 지정한 높이보다 커지면 IE 에서는 내용의 높이에 따라 알아서 박스의 높이가 늘어나게 되고, 나머지 브라우져들은 박스 높이가 유지된 채 내용이 밖으로 빠져나가 버린다. 만약, 넘치는 내용물을 죽여버리고서라도 박스의 높이를 유지해야겠다 싶으면 overflow 프로퍼티를 사용하여 hidden 값을 준다. 많이 사용하진 않지만, font 프로퍼티의 variant 를 사용하여 소형대문자를 구현할 수 있다.It Is This letter-spacing 은 자주 ..

크롬, 사파리, 오페라 같은 브라우저에서 나타나는 input 이나 textarea에 노란 또는 주황색 테두리 없애는 방법 입니다. input { outline-style: none; }

CSS3 속성의 적용을 미리볼 수 있는 사이트를 소개합니다. 아직 CSS3 속성에 대한 이해가 부족하여 정확하게 사용하지 못하는 개발자에게는 유용한 사이트가 아닌가 싶습니다. 참고 사이트 http://www.css3maker.com/index.html http://css3pie.com/ http://css3please.com/ http://www.css3generator.com/ http://westciv.com/tools/transforms/index.html http://gradients.glrzad.com/ http://border-radius.com/ http://www.css3.info/preview/ http://net.tutsplus.com/tutorials/html-css-technique..

css 공통적용 : font-family:돋움 or 굴림, font-size:12px 텍스트 : · or · (entity)css : font-weight:normal 미리보기 : · or · 텍스트 : · or · (entity)css : font-weight:bold 미리보기 : · or · 텍스트 : ¯ or ¯ (entity)css : font-weight:normal 미리보기 : ¯ or ¯ 텍스트 : -css : font-weight:normal미리보기 : - 텍스트 : ㆍ(ㅌ의 특수문자) css : font-weight:bold미리보기 : ㆍ 텍스트 : • or • (entity)css : font-weight:normal미리보기: • or •

핵 잘정리된 사이트 http://browserhacks.com/ a:hover {border:1px;} //모든 브라우져 적용 *html a:hover {border:2px;} //IE6,7 만 적용 //여기서 html 은 원래 "." 또는 "," 가 와야 할 자리인데 html 이 오기 때문에 IE 4~6 mac IE 4~5 적용 **html {border:2px;} //IE7 에서만 적용 이건 안되는군요. 이렇게 하면 IE6 에서도 적용됩니다. 아래처럼 해야 합니다. 제가 잘 못 알고 있는건지도.. *+html {border:2px;} //IE7 에서만 적용되고, IE6에는 적용되지 않습니다. #top { position:fixed !important; position:static; } //IE6 에서..

익스 전용 핵 zoom:1; 익스6에서 display:inline-block; 을 인식하지 못해 zoom:1;을 사용했답니다. {display:inline-block;*display:inline; zoom:1;} http://blog.naver.com/skell83?Redirect=Log&logNo=150067290900

BrowseHappy.com 최신 브라우저로 업그레이드하기 캠페인 IE7 js : IE의 비표준 CSS/HTML/PNG를 표준으로 교정해주는 JS IE9.js를 사용하면 CSS3도 IE8이하 버전에서 사용가능하다. Respond.js : IE 8이하에서 Media Query 사용할 수 있게 해줌. HTML5Shiv : IE 과거 버전에서 HTML5 활성화 CSS3Pie : IE6~IE8에서 CSS3 사용. Modernizr : 모더나이저, 과거버전의 브라우저에 기능 유무에 따라 클래스를 붙여줌. Explorer Exposed! IE 버그 모음

http://firejune.com/1740 참조

What CSS Properties Are Supported When You Drop IE6 Support > - Immediate descendant (child) selector.[attr] - Attribute selector (starts with, ends with, contains).:first-child - First child selector.min-width - Minimum width layout.max-width - Maximum width layout.min-height - Minimum height layout.max-height - Maximum height layout.position:fixed - Fixed position layout..A.B - Multiple class ..

CSS나 HTML을 수정할 때 그냥 색이름을 영어로 써 넣어도 되지만 색상값을 보면 더 예쁘게 넣을 수가 있죠. 아래를 참고하시면 됩니다. 색상이름 색상값 red #FF0000 crimson #DC143C firebrick #B22222 maroon #800000 darkred #8B0000 brown #A52A2A sienna #A0522D saddlebrown #8B4513 indianred #CD5C5C rosybrown #BC8F8F lightcoral #F08080 salmon #FA8072 darksalmon #E9967A coral #FF7F50 tomato #FF6347 sandybrown #F4A460 lightsalmon #FFA07A peru #CD853F chocolate #D269..