Frontend Developer를 향해 !

부트스트랩에서 사용하는 class명을 정리해 보았습니다. 부트스트랩을 안쓰더라도 개인적으로 프로젝트 할때 class명 네이밍시 너무 괴로워서 참고를 하기 위해서 정리하는것도 있습니다. 최대한 간단하게 정리하기 위해 젠코딩 방식으로 작성한 점 참고해주세요. 부트스트랩 네이밍은 시맨틱해서 네이밍만 봐도 이해는 가나 생소한것도 있어서 설명을 간단하게 적어놨습니다. 레이아웃 .container (고정된 너비) .container-fluid (너비가 100%인 컨테이너) 그리드 부모요소 : .row 자식요소 : .col-*-* ㄴ 첫번째 * : .xs, .sm, .md, .lg ㄴ 두번째 * : 컬럼 숫자(최대 12까지임) 타이포그래피 / 텍스트 h1 ~ h6 small mark abbr blockquote dl..

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* style 작성 */ } 해당 구문을 작성해서 해결 가능합니다. IE10+ 부터 적용 됩니다.

[소스] DOCTYPE html> JS Bin * {margin:0;padding:0;box-sizing: border-box;} body, html, .wrapper { width: 100%; height: 100%; } .container { position: relative; padding-top: 50px; width: 100%; height: 100%; background: gray; } .topBox { position: absolute; left: 0; top: 0; width: 100%; height: 50px; background: skyblue; } .bottomBox { position: relative; width: 100%; height: 100%; background: orang..

[소스] DOCTYPE html> /* 자바스크립트 click이벤트 없이 CSS만으로 toggle 구현하기 */ input { /* 체크박스를 버튼으로 사용하기 위해 숨긴다. */ position:fixed; left:-9999px; } #box { width: 20px; height: 20px; background: skyblue; } :checked ~ #box { /* 일반 형제 선택 */ height:100px !important; } .transition { /* 크기 애니메이션 적용 */ transition: height 0.1s ease-in-out; } toggleBtn [view]http://jsbin.com/fasakoyiyu/edit?html,output

[소스] DOCTYPE html> JS Bin .fixed-table-container { width: 100%; height: 200px; border: 1px solid #000; position: relative; padding-top: 30px; /* header-bg height값 */ } .header-bg { background: skyblue; height: 30px; /* header-bg height값 */ position: absolute; top: 0; right: 0; left: 0; border-bottom: 1px solid #000; } .table-wrapper { overflow-x: hidden; overflow-y: auto; height: 100%; } table {..

줄바꿈 위치에 [ ] 을 넣어주면 끝!

- 프로젝트 처음 시작시 네이밍을 잘 지어야 나중에 수정하거나 오랜만에 볼때 쉽게 알아볼수가 있다.- 매번 프로젝트 하면서 네이밍 짓는게 너무 애매해서 참고용으로 링크 걸어둠.http://ui.daum.net/convention/name

매번 사용할때마 타이핑 귀찮다.. ㅠ width값, display:block 또는 inline-block 선언 필수! IE8이상 지원 width:820px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;

http://webdir.tistory.com/337 참고

display:inline-block 을 사용하다보면 기본적으로 좌우 여백이 4px이 있는데 이걸 해결하는 4가지 방법이 있다.아래 사이트 참고. https://css-tricks.com/fighting-the-space-between-inline-block-elements/