본문 바로가기

제가 쓴 책/HTML5, CSS3 and JavaScript171

4.6 div요소(Element) 4.6 div요소(Element) 기존 HTML5 이전에 div 요소는 웹 문서의 부분(섹션)을 정의하는데 사용되는 요소로 CSS를 이용하여 해당 부분에 대한 스타일을 적용하거나 해당 부분을 그룹화할 수 있었습니다. HTML5에서는 div 요소 대신에 article, aside, header, footer 등과 같은 새로운 요소가 등장하여 div 요소가 하던 일들이 세분화된 형태로 진행되고 있습니다. 따라서 HTML5에서는 div 요소 대신에 등장한 새로운 요소들로 구현할 수 없는 것들만 div 요소로 처리하는 것이 적당할 것입니다. 사용 형식은 다음과 같습니다. 텍스트, 사진, … div 요소를 이용하여 해당 영역에 간단하게 스타일을 적용하는 예제를 하나 해봅니다. 메모장을 열어서 HTML5 문서의 기.. 2013. 7. 31.
4.5 figure, figcaption요소(Element) 4.5 figure, figcaption요소(Element) HTM5에서 새롭게 등장한 figure 요소는 기존의 이미지를 다루는 img 요소를 대체하는 것이 아니고 img 요소들이나 바로 이어지는 figcaption 요소를 포함하는 컨테이너 역할을 하는 요소입니다. 그래서 다음과 같은 형식을 사용됩니다. 삽화, 사진, … figcaption 요소는 figure 요소를 이용할 때 캡션을 나타내는데 사용하는 요소로 figure 요소의 첫 번째 혹은 맨마지막 자식 요소로 사용되며 다음과 같은 형식을 사용합니다. 사진이나 삽화등에 대한 설명 물론 다음과 같이 figure 요소와 함께 사용되어 다수 개의 img 요소의 캡션으로도 사용될 수 있습니다. 다양한 꽃들 이제 간단한 예제를 해볼까요? 메모장을 열어서 기.. 2013. 7. 31.
4.4 dl, dt, dd 요소(Element) 4.4 dl, dt, dd 요소(Element) dl 요소는 정의 리스트를 나타낼 때 사용하는 요소로 하나 이상의 정의를 나타내는 dt 요소나 정의에 대한 설명을 나타내는 dd 요소를 자식요소로 가져서 다음과 같은 형식으로 사용됩니다. 정의 [ 정의에 대한 설명 ] … dt는 정의 리스트 안에 하나의 정의를 나타낼 때 사용하는 요소로 dl 요소의 자식으로 단독으로 사용하거나 정의 리스트 내의 하나의 정의에 대한 설명을 나타낼 때 사용하는 요소인 dd 요소를 자식 요소의 형태로 가진 형태로 사용합니다. 이제 이해를 돕기 위해서 메모장을 열어서 기본적인 코드를 작성하고 …을 다음과 같이 작성을 합니다. 참외 사과 복숭아 참외 박과의 덩굴성 한해살이 재배 식물 사과 사과나무의 열매 복숭아 복사나무의 열매. 품.. 2013. 7. 31.
4.3 li, ol, ul 요소(Element) 4.3 li, ol, ul 요소(Element) li 요소는 list item의 약자로 정렬된 리스트, 정렬되지 않은 리스트, 메뉴, 디렉토리 등에 포함되는 아이템(항목)을 나타내는데 사용되는 요소로 “아이템이름”의 형태로 사용합니다. 만약 li 요소가 ol 요소의 자식 요소로 사용될 경우 li는 value 속성을 가질 수 있으며 아이템이름”처럼 정수형값으로 설정하여 사용할 수 있으며 뒤에 이어지는 아이템은 여기서 1씩 증가되어 표시됩니다. ol 요소는 ol(ordered list)의 약자로 정렬된 리스트를 나열할 때 사용하며 다음과 같은 3가지 형태의 속성을 가지고 있습니다. 속성 기능 reversed 순서가 내림차순으로 나열될 것인지를 설정하는 속성으로 생략되면 오름차순으로 적용됨 start 첫 번째.. 2013. 7. 31.

티스토리툴바