HTML5

[HTML5&CSS3] CSS선택자 -1

1. 전체 선택 문서의 전체 태그를 선택하려면 * 문자를 사용합니다. 참고로 전체 선택자는 html부터 시작해 /html까지의 모든 태그를 대상으로 합니다. 2. 태그 선택 특정 태그를 선택하려면 태그명을 그대로 사용합니다. 참고로 여러 개 태그를 선택해야 하는 경우에는 span, div처럼 쉼표를 통해 구분해서 필요한 태그를 넣어주면 됩니다. 3. 아이디 선택 특정 태그의 아이디를 통해 원하는 요소를 선택하려면 # 문자를 사용합니다. 4. 클래스 선택 . 문자를 사용하면 태그에 있는 클리스명으로 요소를 선택할 수 있습니다. 만약 특정 태그에 있는 클래스만을 대상으로 하고 싶다면 [태그]. [클래스] 형식으로 지정하면 됩니다. 5. 속성 선택 태그 안에 특정 속성을 기준으로 요소를 선택하려면 [속성=값]..

[HTML5&CSS3] 시멘틱 구조 태그

HTML5에서는 웹페이지의 구조를 이루기 위한 다음 태그가 추가되었습니다. header 헤더 nav 네비게이션 메뉴 aside 사이드 공간 section 특정 분류 공간 article 본문 footer 하단푸터 위 태그는 예를 들어 다음과 같이 작성될 수 있습니다. 제목 메뉴1 메뉴2 메뉴3 안녕하세요. 반갑습니다. 예제 그런데 해당 태그를 구현하고 막상 실행해 보면 화면상으로는 별다른 변화가 없음을 알 수 있습니다. 시멘틱 구조 태그의 목적은 사람이 아닌 검색엔진과 같은 기계적인 대상으로부터 웹페이지의 구조를 알려주는 데 있습니다. 예를 들어 위화면은 다음의 메인 페이지인데 사람이 눈으로 보기에는 어디가 header고 어디가 footer이며 어디가 aside에 해당하는지를 대략적으로 알 수 있습니다. ..

[HTML5&CSS3] 그룹및 공간관련 태그

1. fieldset fieldset 태그를 사용하면 특정 요소끼리 그룹 지어 표현할 수 있습니다. 아이디: 비밀번호: 또한 fieldset 내부에 legend 태그를 사용하면 그룹에 제목을 지정할 수도 있습니다. 로그인 아이디: 비밀번호: 2. div HTML내부에서 block형태로 공간을 생성합니다. 아이디: 비밀번호: div는 시각적 요소보다는 전체 HTML의 레이아웃을 잡는데 많이 사용합니다. 이전에는 table태그를 사용했지만 table로 웹페이지의 레이아웃을 잡는 건 되도록 지향하는 것이 좋습니다. 3. span span은 HTML내부에서 inline형태의 공간을 사용하는 태그입니다. 아이디: 비밀번호: div의 block과 span의 inline형식이 무엇이 다른지는 해당 태그 앞뒤에 특정 ..

[HTML5&CSS3] 입력관련 태그

1. form 실제 입력을 수행하는 태그와는 성격이 다르지만 입력 처리를 위한 거의 대부분의 경우에 form이 사용됩니다. form은 사용자가 입력한 내용을 서버로 전송하는 역할을 담당하며 태그 자체는 아무런 UI 표시를 하지 않습니다. form에서 action속성은 사용자가 입력한 데이터를 서버의 어느 페이지로 전송할지를 지정하는 것이며 method는 데이터가 전송되는 방식을 지정하는 것입니다. method는 post와 get값을 가질 수 있는데 post는 값을 외부에 노출하지 않고 전송하는 방식이며 get은 'http://cliel.com/memberjoin.php?name=kim&nick=ji'처럼 URL뒤에 값의 이름과 값을 붙이는 형식으로 전송하는 것을 의미합니다. 2. input 가장 많이 사..

[HTML5&CSS3] 비디오 태그

비디오 태그는 웹상에서 동영상을 재생할 수 있도록 하는 태그입니다. video태그에서 src는 동영상의 위치를 지정하는 속성으로 http://cliel.com/sample.mp4처럼 웹상의 경로나 /video/sample.mp4 와 같이 서버상의 경로를 지정할 수 있습니다. 또한 controls는 동영상 재생 시 컨트롤이 가능한 UI를 노출하도록 하는 속성입니다. 동영상 파일은 mp4(H.264 + ACC) 형식인 경우 모든 브라우저에서 지원이 가능하지만 현재 글을 작성하는 시간 기준으로 WebM(VP8+Vorbis)과 OGV(Theora+Vorbis)는 크롬과 파이어폭스, 오페라만 지원합니다. 따라서 브라우저별로 다른 형식을 재생해야 한다면 다음과 같이 source태그를 사용해야 합니다. 이때 sour..

[HTML5&CSS3] 오디오태그

웹상에서 오디오를 재생하기 위해서는 audio 태그를 사용합니다. HTML5 전용 태그이므로 익스플로러 8 이하에서는 사용할 수 없습니다. audio 태그에서 src는 음악파일의 경로를 지정하는 속성입니다. http://sample.mp3 처럼 웹상의 경로를 지정할 수 있고, /sample.mp3와 같이 서버상의 경로를 지정할 수도 있습니다. src속성에 사용하는 파일은 예제에서 mp3를 사용했으나 ogg나 wav같은 파일도 사용이 가능합니다. 다만 현재 이 글을 쓰는 시간 기준으로 크롬, 파이어폭스, 오페라만 이 세 가지 파일을 모두 지원하며 익스플로러는 mp3만, 사파리는 mp3와 ogg만 지원이 가능한 점 참고하시기 바랍니다. 만약 각 브라우저마다 각각의 파일형식에 대응해야 한다면 audio태그를 ..

[HTML5&CSS3] 이미지관련 태그

HTML에서 이미지를 사용하려면 기본적으로 img태그를 사용합니다. img 태그에서 src 속성은 이미지의 경로를 나타냅니다. 여기에 http://cliel.com/sample.jpg 처럼 URL을 통해 이미지를 지정할 수 있고 /images/sample.jpg 처럼 자신의 경로를 지정할 수도 있습니다. 참고로 당장 이미지가 필요하지 않다면 http://placehold.it/350x200 처럼 임시 이미지를 지정할 수도 있습니다. alt 속성을 사용하면 이미지가 존재하지 않거나 기타 이유로 이미지가 표시되지 않을 때 특정 문구를 표시하게 할 수 있습니다. 더불어 width나 height 속성을 사용하면 표시할 이미지의 크기를 지정하는것이 가능합니다.

[HTML5&CSS3] 글자 관련 태그

1. 제목 h1 부터 h6 까지 사용할 수 있으며 뒤의 숫자가 작을 수록 큰 글씨를 보여줍니다. AAA BBB CCC DDD EEE FFF 2. 본문관련 태그 특정 내용을 본문으로 표현하고자 할때는 기본적으로 p(paragraph)태그를 사용합니다. Hello, World! Nullam id dolor id nibh ultricies vehicula ut id elit. Nulla vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula porta felis euismod semper. Donec sed odio dui. 더불어 줄넘김을 하고자 하는 경우 태..