Knowledge Map

이미지가 제각각 일때 일정하게 이미지를 만드는 방법으로 width, height를 조정하는 게 있을 것이다.하지만 그렇게 하면 이미지가 늘어나 버려서 보기에 좋지 않다.아래와 같이 백그라운드로 하고 cover를 하게 되면 적절히 잘 잡아주는거 같다. 123456.some-class{ background-image: url('........'); background-repeat: no-repeat; background-size: cover; background-position: center;}Colored by Color Scriptercs

12345678910111213ol { width: 400px; /*width: 800px;*/ display: table; table-layout: fixed; /* the magic dust that ensure equal width */ background: #ccc}ol > li { display: table-cell; border: 1px dashed red; text-align: center}Colored by Color Scriptercs 이렇게 하면 갯수에 따라 자동으로 사이즈 맞춰준다.

가벼운 마음으로 짰다가 시간이 의외로 많이 걸려서 놀람.코드는 다시 리팩토링 할 예정.

position absolute일때에는 흔히 margin auto가 안먹힌다고 한다. 실제로도 안 먹히지만, 그것을 조금 다르게 적용하면 먹힌다.left, right를 0으로 주기만 하면된다.

출처 : 웹표준 핵심 가이드 북선택자들의 우선 순위 선택자 사용 예시 개별성 Type 선택자 p , div , table 등등 1 Class 선택자 .wrap 10 Id 선택자 #gnb 100 Inline 선택자 style="color:red;" 1000 가상 요소 :first-child, :before, :after 1 가상 class :link, :visited, :hover, :focus 10 CSS 단위절대 단위 상대 단위 pt, cm, mm, pc, in px, ex, em, % 기타 ㅇ IE에서 호환 모드 Quirks Mode 에서 렌더링이 될 경우 padding 속성에 지정된 값을 width에 포함시켜 계산하기 때문에 의도한 것보다 박스가 작게 출력될 수가 있다. ㅇ 마진 겹침 현상 marg..

출처 : https://www.cmsfactory.net/node/11427 속성 선택자(Attribute Selector)는 특정 속성(attribute)을 가진 요소(element) 또는 특정 속성이 특정 값을 가진 요소를 선택하는 선택자입니다.속성선택자는 다음과 같이 7가지 형태가 있습니다.[attribute][attribute="value"][attribute~="value"][attribute|="value"][attribute^="value"][attribute$="value"][attribute*="value"][attributename]attributename 속성을 가진 요소를 선택합니다. 예를 들어h1[title]은 title 속성을 가진 h1 요소를 선택합니다.[attributenam..

출처http://blog.hwm.or.kr/archives/50 http://webdir.tistory.com/38 최근 IE8, IE9에서 이상하게 CSS가 계속적으로 깨졌었다.그래서 이상하다 싶어서 몇가지 확인을 해보다가 간단히 기록해 본다. 일단 개발자 도구를 확인해 보면 브라우저 모드 와 문서 모드가 있다. '브라우저 모드' 란 현재 브라우저의 기본 셋팅을 정의하는 것을 말하며'문서 모드' 란 컨텐츠를 랜더링 하는 방식을 정의하는 것을 말한다. 확인해 보니 문서모드가 IE7으로 되어 있었다.이럴때에는 태그 안에 태그를 넣으면 된다. IE=5 : 관용모드(quirks mode)로 지정된 DOCTYPE에 상관없이 IE5 렌더링 방식이 사용됩니다.IE=7 : IE7 표준모드로 지정된 DOCTYPE에 상..

탭키 이동에 대해서 물어봐서 간단히 알아봤다. 탭키 이동은 기본적으로는 , 그리고 form태그의 컨트롤러에 대해서 기본적으로 이동이 된다고 한다. 탭키 이동을 인의적으로 먹이고 싶을때 에는 tabindex를 이용해야 한다. 이거 말고 또다른 방법이 있기는 한데 그것은 contenteditable 를 주는 것이다. 하지만 이것을 적용할 경우 textreader 기에서 읽어들이지는 않기 때문에 웹접근성이 좋게 하지는 않는다. tabindex는 읽는 듯 하다. 결국 나에게 물어본 분은 tabindex가 보기 싫어서 a태그를 먹이는 것으로 선택했다.

출처 : https://github.com/joshbuchea/HEAD HEADA collection of HTML head elements.Recommended MinimumBelow are the essential tags for basic, minimalist websites: Page TitleElementsPage Title body { color: red; } Meta Elements ICBM on WikipediaGeotagging on WikipediaMeta Elements Not Recommended (사용 비추천 항목)Below are the meta attributes which are not recommended for use: Link Elements Link Elements N..

핵쩌는 IE는조건문 if 주석이 9까지만 적용되고 CSS 핵은 제각각 이다. 정리는 이따가.http://allone2016.tistory.com/33 http://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11 http://webdir.tistory.com/451 참고로 placeholder은 ie9이하에서는 적용이 안되어서 placeholder.js를 사용했다. javascript로 구현되기도 하지만 일정이 급함..http://jamesallardice.github.io/Placeholders.js/ http://e-rooms.tistory.com/entry/IE9%EC%9D%B4%ED%95%98-custom-placehol..