본문 바로가기

CSS3

# 가상 클래스 가상클래스 맏이만 선택해 주는 :first-child 가상클래스 가상클래스는 특정한 '사건'이 발생하면 사용할 수 있습니다. 그리고 특정한 '조건' 에도 사용할 수 있습니다. :first-child 가상 클래스는 동일한 요소 중 가장 앞에 위치한 요소를 선택하도록 도와줍니다. HTML 마크업 은혜갚은 까치신데렐라 흥부놀부전 백설공주 CSS li:first-child {font-weight:bold;color:red;font-size:25px;} 위의 예제는 4개의 동화 이름을 을 이용해서 목록으로 만든 것입니다. CSS를 보면 :first-child 가상 클래스를 이용해서 맨 앞에 있는 만 텍스트의 크기와 색상을 바꾸도록 해두었습니다. :first-child는 이처럼 지정한 태그 중 가장 선두에 위치하는.. 더보기
# 박스모델 박스모델 박스모델 개념 잡기 HTML문서는 여러 개의 태그로 이루어져 있습니다. HTML문서에서 사용되는 모든 요소는 각각 하나의 박스라고 생각하면 이해하기 쉽습니다. 도 박스고, 도 박스입니다. 도 박스고 도 박스입니다. 각 요소들이 저마다 하나의 박스인 셈입니다. 박스모델을 가장 쉽게 이해하는 방법은 콘텐츠 부분과 보더 부분, 즉 요소의 경계선 부분을 보는 것입니다. 실제로 패딩과 마진은 여백이 생기는 것 외에는 눈에 띄지 않지만 콘텐츠와 보더는 눈에 보이는 부분이고 색을 주거나 꾸밀 수도 있습니다. 콘텐츠와 보더 사이에 여백을 주고 싶다면 패딩을 주면 됩니다. CSS로 웹페이지의 디자인을 만들어 가는 작업의 대부분은 이 박스모델을 어떻게 다루느냐에 따라 달렸습니다. 패딩과 마진을 조정하면서 페이지의.. 더보기
# CSS의 특수 선택자 특수선택자 CSS에서는 태그 이름과 클래스 이름, 아이디 이름을 이용한 선택자 외에도 특수한 선택자들을 제공합니다. 이 특수한 선택자들의 문제는 일부 브라우저에서만 작동되는 경우가 많다는 것입니다. 반면 CSS의 특수한 선택자들을 자유자재로 이용한다면 jQuery와 같은 프레임워크를 활용하는 데 매우 큰 도움이 될 것입니다. 또한 앞으로 브라우저들이 특수한 선택자들을 더 많이 지원할 전망이기 때문에 희망적이라고 할 수 있습니다. 전역선택자 전역선택자는 별 선택자라고도 부릅니다. CSS2에서 추가된 선택자입니다. 흔히들 다음과 같이 사용하고 있을 것입니다. * {margin : 0; padding : 0;} * 선택자를 이용해서 페이지 내에 있는 모든 요소의 마진과 패딩을 0으로 초기화 이 CSS의 코드는.. 더보기
# HTML문서에 CSS를 적용하는 세가지 방법 CSS는 HTML문서를 스타일링해 줄 디자인 정보를 가지고 있습니다. HTML 문서에 CSS를 이용해서 디자인을 적용하는 방법에는 크게 3가지가 있습니다. 태그에 직접 스타일을 주는 방법 쏭군 블로그 이 방법은 딱 하나의 태그를 위해 사용하는 방법입니다. 위의 코드에서는 해당되는 태그 하나에만 굵고 빨간 효과가 적용됩니다. 다른 태그들에게는 아무런 영향도 미치지 않습니다. 이 방법은 아주 부득이한 사정이 없는 이상 사용을 피하는 것이 좋습니다. 사이트의 규모가 크고, 페이지의 수량이 많은데 일일이 이런 방식으로 스타일이 붙어 있다면, 사이트를 수정하거나 유지보수하는 데 많은 애로 사항이 있을 것입니다. 그러나 어쩔 수 없이 써야 한다면 그 경우에는 예외입니다. 요소를 활용하여 HTML 내에서 사용하는 방.. 더보기
#콘텐츠의 흐름, 블록레벨 요소와 인라인 요소 HTML5도 엄연히 하나의 문서입니다. 당연히 이 문서 안에는 글도 들어갈 수 있고 그림도 들어갈 수 있습니다. 글과 그림은 일반 워드프로세서의 문서처럼 나열되면서 흐르게 됩니다. 그러나 일반 워드프로세서와 다른 점이 있습니다. 그것은 바로 HTML문서에는 블록레벨(block level)요소와 인라인(inline)요소라고 하는 두 개의 큰 흐름의 줄기가 있다는 겁니다. 블록레벨 요소 나 ,과 같은 요소들은 블록레벨 요소입니다. 블록레벨 요소의 특징은 줄 바꿈 태그인 과 같은 요소를 쓰지 않아도 스스로 줄 바꿈이 된다는데 있습니다. 이 요소들은 기본적으로 문서 내에서 가로로 흐르지 않고 세로로 흐릅니다. 그리고 주변에 일정량의 공간을 만듭니다. 또한 너비를 지정해 주지 않으면 풀사이가 되어 가로로 가득 찹.. 더보기
#HTML5의 새로운 요소(hgroup,article,section) 헤드라인을 여러 개로 묶을 필요성이 있을 때 사용하는 hgroup 요소 만일 페이지에 산발적으로 여러 개의 헤드라인을 묶어 줘야 할 필요가 있을 경우 HTML5에서는 다음과 같이 hgroup 요소를 이용할 수 있습니다. 쏭군 블로그열심히 살아가는 88만원 세대의 이야기 최근 올라온 글최근에 올라온 글을 시간 순으로 표현합니다. 봉사활동나도 그들도 짠했던 이야기 자전거 구입싼 녀석을 구하기 위한 사투 스토리위젯 사이드바개인적으로 좋아하는 위젯들 모임 태그의 사용 예 앞서 과거에 사용되던 방식을 사용하는 것도 괜찮습니다. 그러나 HTML5에 추가된 요소 덕분에 이 예제 코드와 같은 방식으로도 헤드라인 태그를 사용할 수 있게 되었습니다. H1이나 H2와 같은 높이 단계에 있는 헤드라인 요소들도 이제는 문서의 .. 더보기