melius

Box Model은 Content > Padding > Border > Margin 으로 구성된다. Box Model의 크기는 Content, Padding 그리고 Border의 합이다. * Margin Collapsing (마진 상쇄) https://seungwoohong.tistory.com/26 https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing 1. Block-level Element 혼자 한 줄을 차지하는 요소이며, 줄바꿈이 일어난다. 블록레벨 요소들은 모두 박스 모델 요소이다. 스타일 속성(Style Attribute) 중에 width, height가 박스모델의 콘텐츠(Content) 크기..

CSS 참고사이트 http://www.csszengarden.com/ CSS 개발 학습 사이트 https://webplatform.github.io/ https://www.w3.org/Style/CSS/ W3C CSS 검사기 https://jigsaw.w3.org/css-validator/ Browser engine의 종류 ... Gecko, Webkit, Blink https://en.wikipedia.org/wiki/Browser_engine 접두어(Vendor Prefix) 생략기능 모듈 https://leaverou.github.io/prefixfree/ 웹폰트 제공/변환 사이트 https://fonts.google.com/ https://transfonter.org/ 폰트 사이즈 변환 사이트 h..

1. 선택자 #id-name ... id명이 id-name인 요소 .class-name ... class명이 class-name인 요소 div.class-name ... div 요소이면서, class명이 class-name인 요소 (붙혀쓰기) div .class-name ... div 요소의 자손이면서, class명이 class-name인 요소 (빈칸) div>.class-name ... div 요소의 자식이면서, class명이 class-name인 요소 (Greater-than sign) CSS Combinator .parent p ... 모든 자손 p요소 .parent>p ... 모든 자식 p요소 .sibling+p ... 첫번째 동생 p요소 .sibling~p ... 모든 동생 p요소 CSS Att..

HTML/CSS는 대/소문자 구분이 없으나, 소문자만 사용한다. HTML/CSS 설계시, 각 HTML 요소(Element)의 배치를 확인하기 위해서 테두리를 표시하는 것이 유용하다. 모든 요소 마진, 패딩 초기화도 함께 적용한다. * { border: 1px solid red; margin: 0; padding: 0; } HTML 요소는 크게 블록레벨(Block-level) 요소와 인라인(Inline) 요소로 구분된다. https://melius.tistory.com/12 1. Block-level Element hn, p, hr, blockquote, pre ... 블록레벨 요소를 자식으로 가질 수 없다. th, td ... margin이 없고, padding만 있다. tr ... border와 bac..

1. online code editor https://codepen.io/ https://jsfiddle.net/ 2. HTML Entity List https://dev.w3.org/html5/html-author/charref 3. 웹개발 학습 사이트 https://www.w3schools.com/ 4. HTML 검사기 http://validator.w3.org/ 5. 브라우저 HTML5 기능확인 사이트 https://html5test.com/ https://caniuse.com/