본문 바로가기
css3 box-sizing property. css3 box-sizing property. 참조 : http://ko.learnlayout.com/box-sizing.html CSS 의 Box model 에서 말하는 width 값은 content box에 해당한다. 해당 view ( box ) 가 차지하는 총 width 의 값은 padding, border 값을 포함하게 되어 직관적이지 않게 되어,기존에는 원하는 width 를 맞추기 위해 padding 을 줄이거나 border 값을 줄이는 방법 등으로 width 를 조절해 나갔다. CSS3 의 box-sizing: border-box 로 지정해주면,안드로이드의 view 체계와 비슷하게 margin 값을 뺀 border-box 를 해당 view 의 width 로 잡게 되어 훨씬 직관적이고 좋다. b.. 2014. 4. 9.
[jQuery/Tutorial] Selector 를 통해 Element 선택하기. Selector 를 통해 Element 선택하기. [이전강좌] DOM의 Attributes 사용하기. jQuery 는 CSS3 가 제공하는 selector 대부분을 지원하고, 이외의 특별한 selector 들도 제공한다. ID 로 선택하기 $("#myID"); Class 이름으로 선택하기 $(".myClass"); Attribute 값으로 선택하기 $("a[href='newHtml.html']"); CSS 복합 selector 로 선택하기 $("#myID ul.myClass li"); Pseudo-selector $("a.external:first"); // external 이라는 class 를 가진 첫번쨰녀석$("tr:odd"); // tr 의 홀수번째 녀석들. $("#myForm:input") // .. 2013. 7. 17.
[CSS] overflow property 에 대해 알아보자. CSS, overflow property 에 대해 알아보자. CSS 의 overflow 는 div 와 같이 block component 에 잘 사용되는 style option 이다.이 옵션은 태그 안에 들어가는 내용물이, 이를 담고 있는 container 의 영역을 벗어날 경우내용물(contents) 를 어떻게 처리할가를 정의하는 것이다. 예를 들어 { overflow:hidden; } 와 같이 overflow 내용을 hidden 으로 표시하면 container 를 벗어나는 내용물은 표시하지 않는다. overflow value 값 설명 visible 기본값으로 overflow 되는 값들을 container 밖에라도 그냥 다 보여준다. hidden overflow 되는 값들을 숨긴다. scroll over.. 2013. 6. 27.
[HTML] <div></div> 와 <div /> 의 차이점 와 의 차이점 필자가 html, css 관련하여, 특히 position 에 관련한 여러가지 실습 도중 이상한 현상을 발견했다. 감자 분명 세번째 div 는 position:static 인데, 두번째 div 값의 위치에 영향을 받고 있었다. 게다가 a 태그 안에 있는 녀석의 값은 absolute 이고, 그 부모는 static 이기 때문에 windows 기준으로 "감자" anchor 가 위치되어야 하는데, 이 녀석도 세번째 div 의 값에 relative 한 값으로 위치배정이 되어 있었다. CSS position 값에 대해 자세히 알고 싶으세요? 여기를 클릭 제대로 된 원인을 찾지 못하고 새로운 example 을 만들다 발견한 사실은..바로 div 태그의 close 방법에 대한 내용. 감자 단지 div 태그.. 2013. 6. 26.
[CSS] display:block 과 display:inline 의 차이점에 대해 알아보자. CSS, display:block 과 display:inline의 차이점. 자동 줄바꿈! block으로 설정된 컴퍼넌트는 자동줄바꿈 O.inline으로 설정된 컴퍼넌트는 자동줄바꿈 X. width, height, margin, padding 속성들! block으로 설정된 녀석은 width, height, margin, padding 속성 사용이 가능한 반면 inline으로 설정된 녀석은 해당 속성들을 사용하지 못한다. 대표 component 는? display:block 이 설정되는 대표적 component 는 div.display:inline 이 설정되는 대표적 component 는 span. Block, component, css, CSS3, display, display:block, display:.. 2013. 6. 20.
[CSS] position 속성에 대해 알아보자. CSS, position 속성에 대해 알아보자. CSS property 중에 position 값에 relative 라는 녀석을 만나게 되었다.이 녀석은 뭐하는 녀석일까? 궁금해하다 position 속성 자체에 대해 공부하게 되었다. position 값에 들어갈 수 있는 값은 static, absolute, relative, fixed, inherit 이다. position:static static 값은 기본값이기 때문에 position 값을 써주지 않으면, 자동으로 static position이 된다.이 static position은, 화면의 왼쪽상단부터 element 들을 배치한다.최초 element는 최좌상단에, 그리고 그 다음 element 는 그 오른쪽에 붙는데 만약 공간이 부족하다거나, bloc.. 2013. 6. 15.
[CSS] 주석 쓸 때 주의사항 ( CSS Syntax Checker ) CSS, 주석 사용할 때 주의사항( CSS Syntax Checker ) 오늘 CSS 관련 실습을 하던 중에.. 엄청나게 많은 시간을 쓸 데 없는 데 사용하고 말았다.CSS 에서도 주석이 된다는 것을 알고 있어서 필자는 // 가 single line 주석으로 사용될 수 있는 줄 알았다.하지만, CSS 에서 제공하는 주석은 오직 /* */ 형태라는 것. 그래서 // 를 쓰기 되면 간혹가다 다음 라인에 있는 CSS 정의가 제대로 반영이 안 되는 경우가 생긴다. 이 single line comment 에 대한 오해때문에 약 30분이나 낑낑댔다는...CSS 도 빨리 eclipse 처럼 syntax checker 가 있으면 좋겠다는 생각을 했는데..이런게 없을 리 없다. 그래서 검색해보았다. W3C 에서 제공하는.. 2013. 6. 9.
반응형

티스토리툴바