J, J Blog

.footer li:before { content: ''; width: 1px; height: 12px; background: #ccc; position: absolute; left: 0; top: 0; } .footer li:first-child:before { width: 0; height: 0; } 가상으로 세로줄의 입력이 필요한 경우 위와 같이 입력 처리할 수 있다. 그 결과 화면은 다음과 같다.

/* margin, padding */ .mt10 {margin: 10px; !important;} .mt15 {margin: 10px; !important;} .mt20 {margin: 10px; !important;} .mt25 {margin: 25px; !important;} .mt30 {margin: 30px; !important;} .mt35 {margin: 35px; !important;} .mt40 {margin: 40px; !important;} .mt45 {margin: 45px; !important;} .mt50 {margin: 50px; !important;} 위처럼 설정 후 클래스로 가져다 쓰기만 하면 된다.

다음과 같이 속성을 주면 한줄 입력으로 나타난다. li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* IR 효과 */ /* 의미있는 이미지의 대체 텍스트를 제공하는 경우 ex) 이전 icon, 다음 icon */ .ir_pm { display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; } /* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할 때(WA IR) */ .ir_wa { display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%; } /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 ex) 전체메뉴 바로가기 */ .ir_su { overflow: h..

1. 깨지는 영역에 똑같이 float: left를 사용한다. -> 비추천, 모든 박스에 float: left를 사용하게 되므로 좋은 방법이 아니다. 2. float의 성질을 차단하는 clear: both; 를 사용한다. -> 비추, 어떤 영역이 깨졌는지 찾기가 힘들다. 3. float을 사용한 상위 박스에 overflow: hidden을 사용한다. -> 추천, 현재 가장 많이 사용하는 방법 4. clearfix를 사용한다. -> 추천