텍스트 선택 (블록) 을 차단하고 싶다면 user-select 속성을 사용한다.div { -webkit-user-select: none; /* Chrome, Opera, Safari */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; /* Standard syntax */ } auto: Default. Text can be selected if the browser allows itnone: Prevent text selectiontext: The text can be selected by the userall: Text selection is made with one click ..

2345text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;width:100px;overflow:hidden;

background-size : cover비율은 유지한 채, 최대한 부모 엘리먼트에 꽉 채운다. 예를들어 가로 세로가 200px 300px 인 이미지가 가로 세로 300px의 엘리먼트 안에 있을 때, 'cover' 는 가로를 300px까지 늘리고 세로의 일부를 자른다.background-size : contian비율은 유지한 채, 부모 엘리먼트 안에서 가능한 모든 것을 보여준다. 가로 세로가 200px 300px인 이미지가 가로 세로 300px 엘리먼트 안에 있을 때 더 긴 세로 300px 기준으로 이미지를 맞추고 가로는 동일 비율로 200px을 유지한다.

margin, padding을 0으로 줬음에도 inline-block으로 수평정렬을 했을때 간격이 생기는 경우가 있다. 이때에는 inline-block이 적용된 요소의 부모에 아래와 같이 초기화를 시키고 다시 자식요소에서 속성을 살려야한다. .container { font-size: 0px; letter-spacing: 0px; word-spacing: 0px; } .container > div { display: inline-block; margin: 0px; padding: 0px; font-size: 15px; letter-spacing: 1em; word-spacing: 2em; }

익스플로러(IE)의 input 태그중 text 속성을 가지는 입력폼에 값이 들어가 있을 경우 우측에 텍스트를 모두 삭제하는 버튼이 생성됩니다. X 모양의 이 버튼을 클릭하면 입력된 텍스트가 삭제되는데 이를 컨트롤 하기 위해서는 의사선택자(pseudo selector)를 사용해야 합니다. 참고로 아래처럼 콜론 두개를 사용한 것보다 하나를 사용하는 것이 호환성 측면에서 우수하다고 합니다.input[type=text]:-ms-clear { }

a태그 안에 img, button태그 안에 img.. img 태그를 넣을 때 대부분 수직정렬을 고민하게 된다. 왜 이렇게 정렬이 복잡할까 싶지만 어쨌든 정리의 필요가 있다. 1. line-height 사용 행간 길이를 조정하는 line-height를 정렬을 목적으로 많이 사용한다. 단 2줄 이상의 텍스틀르 정렬하는 경우 line-height만큼 간격이 생기니 주의해야 한다. 이 방법은 바깥 영역의 height가 고정일 경우 주로 사용한다. .img-wrapper{ /*기본세팅*/ width : 200px; height: 200px; text-align:center; background-color: gold; /*여기부터*/ line-height:200px; } 2. table-cell 사용 display..