본문 바로가기

Programming/HTML CSS

[HTML5] 시멘틱(Semantic) 구조의 이해 HTML5에 들어서 몇가지 시멘틱(Semantic) 태그(tag)가 등장했는데 이들 태그는 해당 영역이 웹페이지에서 어떠한 역활을 수행하는지를 알려주는 역활을 합니다. 제목 내용~~~~ 다른 내용~~~ ~~~~~~~ ▶ 몇가지 시멘틱 태그를 사용한 예제 실제 위 내용을 웹브라우저(Web Browser)에서 살펴보면 시멘틱 태그를 사용하든 안하든 보여지는건 같다는것을 알 수 있습니다. 시멘틱 태그는 사용자에게 보여주기 위해서라기 보다는 태그가 사용된 각 영역이 정확히 어떠한 역활을 하고 있는지를 알려주기위한 용도입니다. 이렇게 하면 검색엔진등에서 웹페이지의 데이터를 수집할때 좀도 효휼적으로 동작하는것이 가능해 지겠죠. 뿐만 아니라 문서의 각영역을 구분하기 위한 다른 용도로도 사용될 수 있을 것입니다. 아래.. 더보기
[HTML5] source 1. source 사용 ▶ 오디오나 비디오 파일의 경우 브라우저 마다 재생할 수 있는 파일형식이 다르므로 이에 대응하기 위해 audio태그나 video태그에 source태그를 사용하여 재생할 수 있는 여러 파일 형태를 제공하도록 합니다. 위 예제에서 audio태그는 처음에 mp3 파일을 재생할 수 없는 경우 대신 ogg를 재생할 수 있도록 합니다. 대부분의 경우 mp3와 ogg를 제공하면 거의 모든 브라우저에서 음악을 재생할 수 있습니다. 2. source 속성 (1) type 이 속성이 값으로는 파일타입을 지정합니다. 예를 들어 mp3의 경우 audio/mp3 와 같이 지정하면 됩니다. 이 속성을 지정해 놓으면 브라우저에서는 파일을 실제 로드하지 않고도 지정된 형식을 통해 자신이 재생할 수 있는 파일인.. 더보기
[CSS3] 변형 속성 CSS3의 변형속성을 사용하면 웹(web)에서 간단한 애니메이션(animation)을 구현할 수 있습니다. CSS3에서 사용할 수 있는 변형속성에는 다음과 같은 것들이 있습니다. (1) transition-duration 지정한 시간(초)동안 속성에 대한 변형이 일어나도록 합니다. 확인을 위해 다음과 같이 div를 하나 생성하고 The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions, and system warnings. 여기.. 더보기
[CSS3] 선택자 - 클래스 선택 클래스 선택자 태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.CLIEL▶span 태그에 color_span 클래스 적용.color_span { color:red; }▶color_span 클래스 사용 태그 선택 같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 . 형식으로 지정해야 합니다.CLIEL CLIEL▶다른 태그에 같은 color_span 스타일 적용span.color_span { color:red; }▶span의 color_span만을 선택 또한 하나의 태그에 여러 클래스가 적용된 경우CLIEL해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다..color_span { color:red; } .bold_s.. 더보기
[CSS3] 키프레임(keyframe)과 애니메이션(animation) 키프레임(keyframe)은 정해진 시간분할에 따라 %단위로 애니메이션(animation)을 구현하기 위한 것이며 이를 위해 animation- 속성 사용 후 키프레임(keyframe)과 연결하여 애니메이션을 구현하게 됩니다. 그럼 이제 keyframe과 animation 속성을 어떻게 사용하는지 예제를 통해 알아보도록 하겠습니다. 우선 아래와 같이 div하나를 생성한 후 The cockpit of the A-10C contains three primary instrument panels that include gauges and indicators that display flight parameters, aircraft system states, engine state, control positions.. 더보기
[CSS3] 2차원/3차원 구현(transform) 1. transform CSS3 의 transform 속성은 특정 html 객체에 2차원 변환을 구현하는데 사용합니다. 예를 들어 아래의 div에 대해 60도 정도 기울여 지는 2차원 효과를 구현 하려면 다음과 같이 transform 속성에 rotate 함수를 지정하면 됩니다.#test_div { width: 100px; height: 100px; transform: rotate(60deg); background-color: blue; }transform 속성은 인자로 전달된 변환함수에 따라 해당 html 객체를 변환시키는 동작을 수행하는데 필요에 따라 다음과 같은 함수를 사용할 수 있습니다. 참고로 필요한 경우 다음과 같이 2가지 이상의 변환함수를 연속해서 지정할 수 있는데 이때 적용 순서는 가장 왼쪽.. 더보기
[CSS3] 스프라이트 이미지(sprite image) 활용 스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다. ▶ 마리오(mario) 관련 스프라이트(sprite) 웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다. 포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다. http://csssprites.com/ 예제에서는 세개의 이미지(image)를 사용하여 아래와 .. 더보기
[CSS3] 고정바(bar) 생성 html 페이지(page)가 화면크기를 벗어나 스크롤(scroll)되는 경우에도 자주 사용하는 메뉴(menu)등을 담고 있는 특정영역은 스크롤(scroll)되지 않도록 화면에 고정시킬 수 있습니다. Bar Menu Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background. 고정바(bar)를 생성하려면 먼저 위에서 처럼 본문 영역(body 이름의 div)이외에 메뉴(menu)나 특정 내용을 담고 있는 div영역(bar)하나를 생성하도록 합니다. 이 div를 고정바(bar)로 활용할 것이므로 다음과 같이 고정시킬 영역에 대한 위치를 지정합니다.#.. 더보기