본문 바로가기

전체 글

# 박스모델 박스모델 박스모델 개념 잡기 HTML문서는 여러 개의 태그로 이루어져 있습니다. HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다. 도 박스고, 도 박스입니다. 도 박스고 도 박스입니다. 각 요소들이 저마다 하나의 박스인 셈입니다. 박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다. 실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고 색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다. CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다. 패딩과 마진을 조정하면서 페이지의.. 더보기
# CSS의 특수 선택자 특수선택자 CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다. 전역선택자 전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다. * {margin : 0; padding : 0;} * 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화 이 CSS의 코드는.. 더보기
# HTML문서에 CSS를 적용하는 세가지 방법 CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다. HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 태그에 직접 스타일을 주는 방법 쏭군 블로그 이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 위의 코드에서는 해당되는 태그 하나에만 굵고 빨간 효과가 적용됩니다. 다른 태그들에게는 아무런 영향도 미치지 않습니다. 이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면, 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다. 요소를 활용하여 HTML 내에서 사용하는 방.. 더보기

티스토리툴바