웹 표준 퍼블리싱 바이블(37)
-
4-1. CSS의 적용 방법과 기본문법 - 1
1. CSS는 적용할 대상인 선택자(selector)를 지정해야 하고, 중괄호({, })로 감싼 영역에 속성(Attribute)과 값(value)을 작성합니다. 속성은 얼마든지 작성할 수 있으며 '세미콜론(;)'으로 구분합니다. 선택자(selector)에는 적용하고자 하는 요소의 태그명, 클래스 명, 아이디명 등을 지정할 수 있습니다. selector{Attribute: value;} 1-1. 각 요소에 직접 적용하는 CSS 각 HTML 시작 요소에 직접 CSS를 적용할 수 있습니다. 이방법은 웹 표준의 관점에서 본다면 아주 나쁜 방법인데요, 각 요소마다 스타일을 적용한다는 것을 구조를 작성하는 HTML과 표현을 담당하는 CSS를 분리해야 한다는 웹 표준 규정을 무시하는 것이기 때문입니다. 그럼에도 불구..
2018.01.08 -
3-12. 아이프레임(<iframe>)의 다양한 속성 알아보기
1. 문서 내에 다른 문서를 불러들이는 방법으로 요소를 사용할 수 있습니다. HTML5에서는 요소를 폐지하였스나 은 그 쓰임새가 다양해 그대로 유지하고 있습니다. 그러나 은 그 쓰임새가 다양해 그대로 유지하고 있습니다. 그러나 은 보안에서 많은 문제를 가지고 있는데, HTML5에서는 "sandbox"속성으로 으로 연결된 문서 내의 스크립트가 실행되지 않도록 할 수 있습니다. 2. 아이프레임의 기초요소는 "width"속성과 "height"속성으로 크기를 지정해야 하고, 웹 접근성을 위해 "title"속성으로 연결된 문서를 설명해 줘야 합니다. 3. HTML5에서 추가된 srcdoc와 sandbox 속성3-1. 문서를 "src"로 연결하는 대신 "srcdoc"으로 그 내용을 직접 입력할 수도 있습니다. 이 ..
2017.12.26 -
3-11. 이미지와 관련된 요소들
1. 요소로 이미지를 삽입하는 경우 "src"속성으로 이미지 파일의 경로를 "alt"속성으로 대체 텍슽트를 작성합니다. "alt"속성으로 대체 텍스트를 작성할 때에는 일반적으로 이미지에 표현된 텍스트를 그대로 입력하지만, 약도 등의 이미지에서는 보다 구체적인 설명을 입력할 수 있습니다. 또한 경우에 따라 이미지를 단순한 텍스츠로 설명하기 어려운 경우(사이트 맵, 조직도, 다이어그램 등)에는 "longdesc"속성으로 참조할 파일의 경로를 작성하기도 합니다. 2. 이미지 삽입하기 3. 이미지로 만든 약도의 표현많은 웹 사이트는 이미지를 이용해서 약도를 표현합니다. 약도를 표현할 때는 "alt"의 값으로 구체적인 설명이 있어야 합니다. 구체적으로 작성할 시 "alt"를 사용하여 작성할 수 있습니다. 4. ,..
2017.12.26 -
3-10. 앵커(Anchor)의 표현
1. 현재 문서에서 다른 문서로 이동하기 위해서는 요소가 필요합니다. 요소는 "href" 속성으로 이동할 경로를 지정하고 "title" 속성으로 설명을 추가할 수 있습니다. XHTML에서는 온라인 요소만 포함할 수 있었으나 HTML5에서는 인라인 요소 이외에 , 와 같은 블록 요소도 포함할 수 있습니다. 2. href 속성으로 연결하기2-1. 웹 페이지 절대 경로로 연결하기"http://도메인주소/폴더명/파일명"의 형식으로 문서를 연결합니다. 앙큼한유채`s 일상 스토리 2-2. 웹 페이지 상대 경로로 연결하기"폴더명/파일명"의 형식으로 문서를 연결합니다. 현재 문서의 위피를 기준으로 연결할 문서를 찾습니다. 앙큼한유채`s 일상 스토리 2-3. E-mail 계정 연결하기메일 계정을 연결할 때에는 "mail..
2017.12.25 -
3-9. 표를 만드는 테이블 요소
1. 표를 작성할 때에는 블록 레벨 요소인 요소를 사용합니다. 표의 기본 구조는 먼저 요소로 행(table row)을 정의하고, 그 안에 제목 셀(table header cell)인 요소와 데이터 셀(table data cell)인 요소를 넣은 후에 전체를 요소로 둘러싸게 됩니다. 요소에 "summary"속성을 사용하여 요약문을 작성하고, 표에 대한 설명은 요소를 사용하며 표의 행을 그룹화하기 위해 요소, 요소, 요소를 사용하기도 합니다. 에는 이 제목이 지시하는 방향과 범위를 알려주는 "score"속성을 지정할 수 있고, "id"와 "headers"속성을 이용해서 그 관계를 좀 더 명확히 할 수도 있습니다. 2. table 요소의 기본 구조요소에는 "cellpadding(cell의 안쪽 공간)", "c..
2017.12.15 -
3-8. 각종 목록을 표현하는 요소
1. 일반적으로 목록작성에는 요소(비순차적 목록 unordered list)또는 요소(순차적 목록 ordered list)를 사용하며, 각 항목은 요소(list item)로 정의합니다. , 요소 모두 블록 레벨 요소이며, 이외의 요소를 포함할 수 없습니다. 요소 또한 블록 레벨 요소로서 인하인 요소와 텍스트를 포함할 수 있고, 또 다른 블록 레벨 요소를 포함할 수 있습니다. 또, 정의형 목록을 표현하는 요소(definition list)가 있는데, 이는 , 요소를 포함합니다. 요소는 특정 요소를, 요소는 그레 대한 정의를 지정하는 것이 일반적입니다. 2. 비순차적 목록 ul요소 2-1. 요소를 활용한 메뉴제작 소스코드 Main menu About Services Portpolio Contact US -실..
2017.10.12