본문 바로가기

0x01 Programming/0x013 HTML5&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와 같은 높이 단계에 있는 헤드라인 요소들도 이제는 문서의 .. 더보기
#CSS3 배경지식 쌓기 만약 팀 내에 웹페이지를 디자인하여 PSD를 만드는 디자인 팀과 이 PSD를 웹페이지로 만들어 내는 UI개발팀이 따로 있다면 아래와 같은 갈등이 있기 마련입니다. 멋진 효과를 내기 위해 투명 PNG핵, 나아가 과도한 마크업과 불필요한 CSS 코드, 더 심각한 경우에는 온갖 스크립트와 CSS 핵까지 동원 해야하는 경우가 있습니다. CSS2.1에서 CSS3로의 변화 단편적인 예를 들기는 했지만 CSS3를 마음껏 사용할 수 있는 브라우저가 널리 이용된다면 이 문제는 해결될 것입니다. 현재는 익스플로러 9 이 CSS3를 본격적으로 지원할 예정이고, 웹킷 기반의 크롬이나 사파리에서는 CSS3 속성을 상당 부분 지원합니다. 그리고 오페라나 파이어폭스 역시 중요한 CSS3 속성을 많은 부분 지원하고 있는 상황입니다... 더보기
#HTML5 문서계층 구조 HTML문서 계층 구조는 구조를 중시하는 트리구조와 아웃라인과 컨텐츠 구성을 중시하는 두가지로 나누어 볼수 있습니다. 구조를 중시하는 트리구조 위의 코드와 같은 구조를 가진 문서가 있다고 가정합시다. 쉽게 설명하기 위해 다른 코드는 생략하였습니다. 박씨 집안의 시조가 박혁거세이듯이 부분을 제외하고 이 문서에 있는 모든 태그들의 시조는 입니다. 요소는 문서의 모든 요소들을 담고 있습니다. 말을 만들자면 시조태그인 셈입니다. 는 요소의 자식태그입니다. 반대로 에게 태그는 부모태그입니다. 한 계층 차이가 나기 때문입니다. 그러면 이 예시에서 와 의 관계는 어떻게 될까요? 에게 요소는 손자태그입니다. 반대로 에게 요소는 할아버지 뻘이 됩니다. 아웃라인과 콘텐츠 구성을 중시하는 구조 이미 HTML 페이지를 마크업.. 더보기

티스토리툴바