본문 바로가기

html5 강좌38

11.2 class, id, style 속성 11.2 class, id, style 속성 메모장을 열어 다음과 같이 글의 단락(절)을 나타내는 p 요소 3개를 이용하여 코드를 작성합니다. class 속성을 이용한 문장 id 속성을 이용한 문장 style 속성을 이용한 문장 위와 같이 작성하고 저장한 후 IE9를 이용하여 열어보면 다음과 같이 나타납니다. 이제 각각 class, id, style 속성을 이용하여 3개의 p 요소에 색상 및 정렬 위치를 설정하기 위해서 먼저 … 블록 안을 다음과 같이 수정합니다. class 속성을 이용한 문장 id 속성을 이용한 문장 style 속성을 이용한 문장 위에서 class 속성을 적용한 첫 번째 p 요소와 id 속성을 설정한 두 번째 p 요소는 현재까지는 아무런 변화도 발생하지 않습니다만 3번째 style 속성.. 2013. 7. 31.
10.4 menu 요소 10.4 menu 요소 menu 요소는 command의 목록이나 메뉴를 만들 때 사용하는 요소로 “list”, “context”, “toolbar”와 같이 메뉴의 타입(type)을 설정하는 type 속성과 메뉴에 대한 시각적인 라벨을 설정하는 label 속성이 사용가능하며 다음과 같은 형식으로 menu 요소를 사용할 수 있습니다. command, button … 방금 전 사용한 “commandEx.html”을 메모장으로 열어서 시작, 마침 태그 안에 코드를 다음과 같이 수정합니다. 새파일 파일 열기 파일 저장 위와 같이 작성한 후 “menuEx.html”로 저장하고 IE로 보면 다음과 같이 나타나며 각 메뉴를 클릭하면 설정된 대로 알림창이 나타나 메시지를 표시합니다. 실제로 새파일, 파일 열기, 파일 저.. 2013. 7. 31.
10.3 command 요소 10.3 command 요소 command 요소는 사용자에 의해 작동되는 명령을 나타내는데 사용되는 요소로 정의된 속성을 이용하여 checkbox 형태나 radio 등과 같은 형태로 나타낼 수 있습니다. 보통 command 요소는 menu 요소를 이용하여 도구바 형태나 마우스 오른쪽 버튼을 클릭하면 나타나는 메뉴, 일명 context menu의 선택항목으로 사용되거나 웹 페이지의 어느 위치에서나 사용이 가능합니다. 이러한 command 요소의 고유한 속성은 다음과 같습니다. 속성 기능 type 명령의 타입을 설정하는 것으로 디폴트값은 “command” 이며 “radio”, “checkbox”로 설정할 수 있음 label command에 대한 시각적인 라벨을 설정 icon command에 나타낼 icon을.. 2013. 7. 31.
10.2 summary 요소 10.2 summary 요소 summary 요소는 details 요소의 헤더 즉 제목이나 타이틀을 설정할 때 사용하는 요소로 다음과 같은 형식으로 사용됩니다. details 요소에 사용될 제목(타이틀) 방금 전 사용한 “detailsEx.html”을 메모장으로 열어서 시작, 마침 태그 안에 코드를 다음과 같이 수정합니다. 교육 지식과 기술 등을 가르치며 인격을 기르는 것 위와 같이 수정한 후 다른 이름으로 저장을 눌러서 “summaryEx.html”로 저장한 후 Chrome으로 열어보면 다음과 같이 details 예제에서와는 다르게 summary 요소에서 설정한 “교육”이 나타나는 것을 알 수 있습니다. - 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470.. 2013. 7. 31.