'Programming/HTML CSS'에 해당되는 글 64건

Programming/HTML CSS
HTML5에 들어서 몇가지 시멘틱(Semantic) 태그(tag)가 등장했는데 이들 태그는 해당 영역이 웹페이지에서 어떠한 역활을 수행하는지를 알려주는 역활을 합니다.
<header>
 <h1>제목</h1>
</header>
<section>
 <article>
  <p>내용~~~~</p>
 </article>
 <article>
  <h1>다른 내용~~~</h1>
  <p>~~~~~~~</p>
 </article>
</section>
▶ 몇가지 시멘틱 태그를 사용한 예제

실제 위 내용을 웹브라우저(Web Browser)에서 살펴보면 시멘틱 태그를 사용하든 안하든 보여지는건 같다는것을 알 수 있습니다.

시멘틱 태그는 사용자에게 보여주기 위해서라기 보다는 태그가 사용된 각 영역이 정확히 어떠한 역활을 하고 있는지를 알려주기위한 용도입니다.

이렇게 하면 검색엔진등에서 웹페이지의 데이터를 수집할때 좀도 효휼적으로 동작하는것이 가능해 지겠죠. 뿐만 아니라 문서의 각영역을 구분하기 위한 다른 용도로도 사용될 수 있을 것입니다.

아래는 대략적인 html5의 시멘틱 태그입니다.

 aside  문서의 사이드 부분
 article  실제적인 내용
 header  문서의 헤더
 nav  문서의 탐색 부분
 footer  문서의 하단 부분
 section  특정 내용의 article 그룹

0 0
Programming/HTML CSS
1. source 사용
<audio controls="controls">
 <source src="sample.mp3" type="audio/mp3" />
 <source src="sampe.ogg" type="audio/ogg" />
</audio>

<video controls="controls">
 <source src="sampe.mp4" type="video/mp4" />
 <source src="sampe.webm" type="video/webm" />
</video>
▶ 오디오나 비디오 파일의 경우 브라우저 마다 재생할 수 있는 파일형식이 다르므로 이에 대응하기 위해 audio태그나 video태그에 source태그를 사용하여 재생할 수 있는 여러 파일 형태를 제공하도록 합니다.

위 예제에서 audio태그는 처음에 mp3 파일을 재생할 수 없는 경우 대신 ogg를 재생할 수 있도록 합니다. 대부분의 경우 mp3와 ogg를 제공하면 거의 모든 브라우저에서 음악을 재생할 수 있습니다.

2. source 속성

(1) type

이 속성이 값으로는 파일타입을 지정합니다. 예를 들어 mp3의 경우 audio/mp3 와 같이 지정하면 됩니다. 이 속성을 지정해 놓으면 브라우저에서는 파일을 실제 로드하지 않고도 지정된 형식을 통해 자신이 재생할 수 있는 파일인지를 판단할 수 있게 됩니다.

성능상 이로운 점이 있으므로 되도록 type을 지정하길 권장합니다.
0 0
Programming/HTML CSS
CSS3의 변형속성을 사용하면 웹(web)에서 간단한 애니메이션(animation)을 구현할 수 있습니다. CSS3에서 사용할 수 있는 변형속성에는 다음과 같은 것들이 있습니다.

(1) transition-duration

지정한 시간(초)동안 속성에 대한 변형이 일어나도록 합니다. 확인을 위해 다음과 같이 div를 하나 생성하고
<div id="test_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.
</div>
여기에 배경속성과 크기를 지정 후 :hover 를 사용해 마우스(mouse)를 올릴때의 이벤트(Event)를 걸어 배경색이 바뀌도록 하였습니다.
<style>
  #test_div {
   width: 500px;

   background-color: blue;
  }

  #test_div:hover {
   background-color: red;
  }
</style>
여기에 transition-duration 속성을 추가하여 2초동안 애니메이션(animation)이 적용되도록 하면 다음과 같이 처리할 수 있습니다.
#test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
 }
(2) transition-delay

이 속성은 일정시간 지연 후 속성에 대한 변형이 일어나도록 합니다.
 <style>
  #test_div {
   width: 500px;
   
   background-color: blue;
   transition-delay: 2s;
  }
  
  #test_div:hover {
   background-color: red;
  }
 </style>
위와 같이 속성을 지정하면 마우스(mouse)를 해당 div에 올리거나 내릴때마다 2초후에 배경색이 바뀔것입니다.

(3) transition-property

transition- 속성을 사용하여 애니메이션(animation)을 적용하면 지정된 모든 속성이 영향을 받게 됩니다. 예를 들어
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
위와 같은 경우 background-color과 widht가 transition 속성에 영향을 받을 것입니다. 이때 transition-property 속성을 사용하면 여러 속성 전체가 아닌 특정속성에만 transition 속성의 영향을 받을 수 있도록 지정할 수 있습니다.
 <style>
  #test_div {
   width: 500px;

   background-color: blue;
   transition-duration: 2s;
   transition-property: background-color;
  }

  #test_div:hover {
   width: 1000px;
   
   background-color: red;
  }
 </style>
전체중 background-color 속성만 transition의 적용대상이 되도록 하였습니다. 다만 이 경우에도 만일 2가지 이상의 속성을 지정해야 하는 경우가 생기는데 이럴때는 transition-property: background-color, width; 처럼 ,를 사용해 구분하여 지정하면 됩니다.

(4) transition-timing-function

속성이 변경될때의 시간차에 대한 함수를 지정하는 속성입니다. 예를 들어 단순히 transition-duration: 2s 라고 했을때 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음 형태의 시간차가 적용될 것입니다.


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   
   background-color: blue;
   transition-duration: 5s;
   transition-timing-function: linear;
}
특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용하면 됩니다.
transition-duration: 5s;
transition-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

(5) transition

transition-property 나 transition-delay 와 같은 속성을 일일이 따로 지정하지 않고 한꺼번에 모두 지정하고자 할때 transition 속성을 사용할 수 있습니다. transition의 구문 형식은 다음과 같습니다.

transition: <proerty> <duration> <function> <delay>;

예를 들어
transition: background-color 5s ease;
로 지정하는 경우 background-color 에 대해 5초동안의 ease시간차에 대한 애니메이션(animation)을 적용한다는 의미이며 delay로 인한 시간지연은 없음을 의미합니다.

transition 속성을 이용해서도 2가지 이상의 처리를 지정할 수 있는데 이 경우 ,(comma)를 사용해 각 설정을 구분하여 지정합니다.
transition: background-color 5s ease, width 5s ease 1s;
0 0
Programming/HTML CSS
클래스 선택자

태그에 특정 클래스가 적용되어 있는 경우 해당 클래스를 가진 태그를 .(점)문자를 사용하여 선택합니다.
<span class="color_span">CLIEL</span>
▶span 태그에 color_span 클래스 적용
.color_span {
 color:red;
}
▶color_span 클래스 사용 태그 선택

같은 클래스를 사용하는 서로 다른 태그에서 특정 태그만을 선택해야 한다면 <태그>.<클래스> 형식으로 지정해야 합니다.
<span class="color_span">CLIEL</span>
<p class="color_span">CLIEL</p>
▶다른 태그에 같은 color_span 스타일 적용
span.color_span {
 color:red;
}
▶span의 color_span만을 선택

또한 하나의 태그에 여러 클래스가 적용된 경우
<span class="color_span bold_span">CLIEL</span>
해당 클래스 모두 선택이 가능하며 각각의 스타일 적용이 가능합니다.
.color_span {
 color:red;
}

.bold_span {
 font-weight:bold;
}
0 0
Programming/HTML CSS
키프레임(keyframe)은 정해진 시간분할에 따라 %단위로 애니메이션(animation)을 구현하기 위한 것이며 이를 위해 animation- 속성 사용 후 키프레임(keyframe)과 연결하여 애니메이션을 구현하게 됩니다.

그럼 이제 keyframe과 animation 속성을 어떻게 사용하는지 예제를 통해 알아보도록 하겠습니다. 우선 아래와 같이 div하나를 생성한 후
<div id="test_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.
</div>
생성한 div에 관련 CSS3속성과 애니메이션(animation)을 적용을 위한 키프레임(keyframe)을 작성합니다.
#test_div {
   width: 100px;
   background-color: blue;
  }

@keyframes ani {
   from {
    width:100px;
   }

   to {
    width:500px;
   }
}
키프레임(keyframe)은 위와 같이 @keyframe으로 작성하며 뒤에 keyframe의 이름을 지정합니다. 예제에서는 이름을 ani라고 지정하였으며 실제 이름은 임의로 작성합니다.

키프레임(keyframe)안에 from과 to가 있는데 여기서 from은 0%시간대를, to는 100%시간대를 의미합니다.

keyframe 작성이 끝나면 animation-name속성을 사용하여 미리 작성한 keyframe과 연결합니다. 이렇게 하면 해당 keyframe에 정해진 대로 애니메이션(animation)이 구현될 것입니다.
#test_div {
   width: 100px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
}
test_div의 CSS속성에 추가된 animation-duration 속성을 통해 5초간 애니메이션(animation)이 구현되도록 하였습니다.

위와 같이 예제를 작성한 후 브라우저(browser)를 통해 보면 5초동안 keyframe에서 지정한 from(0% -> 0초)에서 to(100% -> 5초)까지 설정된 만큼 크기가 변하는 것을 볼 수 있습니다.

만일 keyframe을 통해 50%(2.5초)정도의 시간차에서 특정한 동작을 구현하려면 다음과 같이 지정하고자 하는 %대를 선언하고 from이나 to와 같이 특정 동작을 지정하면 됩니다.
@keyframes ani {
   from {
    width:100px;
   }

   50% {
    width:400px;
   }

   to {
    width:500px;
   }
}
▶ keyframe을 통해 50%(2.5초대) 상황에서 div크기를 400px가 되도록 지정하였습니다.

CSS3에서 애니메이션(animation) 구현을 위해 사용할 수 있는 animation 속성은 다음과 같은 것들이 있습니다.

1. animation-name

키프레임(keyframe)은 이름만 달리하면 여러개 생성할 수도 있습니다. 이때 animation-name 속성은 여러개의 키프레임(keyframe)중 어떤것을 연결할지 지정하는 속성입니다.

2. animation-play-state

애니메이션(animation)이 재생될때 재생상태를 지정하는 속성입니다. 예를 들어 예제의 div를 통해 애니메이션(animation)이 재생되는 경우 해당 div에 마우스를 올릴때 애니메이션(animation) 재생을 중단하고자 한다면 다음과 같이 animation-play-state 속성을 지정하면 됩니다.
#test_div:hover {
   animation-play-state: paused;
}
3. animation-duration

애니메이션(animation)이 얼마동안 구현될지에 대한 시간을 지정합니다.

4. animation-delay

애니메이션(animation)을 즉시 재생하지 않고 지정한 시간동안 지연 후 재생하도록 합니다.

5. animation-iteration-count

애니메이션(animation)반복 횟수를 지정합니다. 원하는 횟수만큼의 숫자를 지정하거나 무한대일 경우 infinite를 지정합니다.

6. animation-timing-function

애니메이션(aniamtion)이 재생될때의 시간차에 대한 함수를 지정합니다. 예를 들어 단순히 animation-duration: 2s 라고 했을때는 기본값인 ease가 적용되 처음에는 느리게 가다가 점점 빠르게 진행되고 마지막 순간 다시 느려지는 다음과 같은 형태의 시간차가 적용됩니다.(ease 참고)


만일 처음부터 끝까지 일정한 시간차로의 변형이 요구되는 경우라면 linear 형태가 알맞을 것이며 해당 속성을 다음과 같이 지정하면 됩니다.
#test_div {
   width: 500px;
   background-color: blue;

   animation-name: ani;
   animation-duration: 5s;
   animation-timing-function: linear;
}
마찬가지로 특정 곡선이 아닌 임의의 시간차를 그릴 필요가 있다면 cubic-bezier 함수를 사용합니다.
animation-duration: 5s;
animation-timing-function: cubic-bezier(1,.01,.64,1);
참고로 cubic-bezier 함수에 담겨질 값은 http://cubic-bezier.com/ 사이트(site)를 이용하면 편리하게 생성할 수 있습니다.

7. animation-direction

animation-iteration-count 속성이 애니메이션(animation)이 반복되도록 반복횟수를 지정하는 경우라면 animation-direction은 어떤 형식으로 반복할지에 대한 반복형식을 지정하는 속성입니다.

이 속성의 값을 normal(기본값)으로 하는 경우 from에서 to로의 반복을 수행하지만 alternate로 지정하는 경우 from에서 to로 갔다가 다시 to에서 from으로 가도록 합니다.

참고로 animation-direction 속성이 제대로 동작하려면 animation-iteration-count 속성에 반복횟수가 지정되어 있어야 합니다.

8. animation

위 1~6번까지의 모든 속성을 한꺼번에 지정하려면 animation 속성을 사용합니다. animation 속성 사용형식은 다음과 같습니다.

animation: <animation-name> <animation-duration> <animation-timing-function> <animation-delay> <animation-iteration-count> <animation-direction>;
animation: ani 5s linear none 1 normal;
▶animation 속성 작성 예
0 0
Programming/HTML CSS
1. transform

CSS3 의 transform 속성은 특정 html 객체에 2차원 변환을 구현하는데 사용합니다. 예를 들어 아래의 div에 대해 60도 정도 기울여 지는 2차원 효과를 구현 하려면
<div id="test_div">
</div>
다음과 같이 transform 속성에 rotate 함수를 지정하면 됩니다.
#test_div {
   width: 100px;
   height: 100px;

   transform: rotate(60deg);

   background-color: blue;
}
transform 속성은 인자로 전달된 변환함수에 따라 해당 html 객체를 변환시키는 동작을 수행하는데 필요에 따라 다음과 같은 함수를 사용할 수 있습니다. 참고로 필요한 경우 다음과 같이 2가지 이상의 변환함수를 연속해서 지정할 수 있는데 이때 적용 순서는 가장 왼쪽 함수부터 오른쪽입니다.
transform: scale(10px, 10px) rotate(60deg);
1. rotate

rotate(숫자deg) 형식으로 사용하며 지정한 값만큼 객체를 회전시킵니다.

2. translate

translate(숫자px, 숫자px) 와 같이 값과 단위를 합친 형식으로 사용하며 지정한 값만큼 객체를 이동시킵니다. 첫번째 값은 X, 두번째 값은 Y 좌표에 해당합니다.

만약 X축으로만 이동하는 경우라면 translateX 함수를 사용하여 X축으로 이동할 값을 지정하며 Y축으로만 이동하는 경우 translateY 함수를 사용할 수 있습니다.

3. scale

scale(숫자, 숫자)와 같은 형식으로 사용하며 객체를 확대하거나 축소합니다. 확대나 축소하는 비율은 지정한 숫자에 달려 있습니다. 예를 들어 1.5 로 하는 경우 1.5배가 되며 0.5로 지정하는 경우 절반정도로 축소되는 동작이 수행될 것입니다.

X축으로만 확대, 축소가 필요하다면 scaleX 함수를, Y축으로만 확대, 축소가 필요하다면 scaleY 함수를 사용합니다.

4. skew

skew(숫자deg, 숫자deg) 형식으로 사용하며 객체를 지정한 값만큼 기울이도록 합니다. 이때 첫번째 값은 X, 두번째 값은 Y축을 나타냅니다.

X축으로만 기울임이 필요하면 slewX 함수를 사용하고 Y축으로만 기울임이 필요하다면 slewY 함수를 사용하면 됩니다.

2. transform-origin

만약 rotate 함수를 사용하여 객체를 회전시켰다면 회전의 동작은 자연스럽게 객체를 정 가운데를 중심으로 회전동작을 수행하게 됩니다. 만약 객체가 변환될때 원하는 지점을 객체의 변환중심으로 설정되도록 하려면 transform-origin 속성을 사용합니다.
transform: rotate(60deg);
transform-origin: 100% 0%;
객체를 60도로 회전시키되 그 기준을 X 축 100%, Y축 0%로 하였습니다. transform-origin 속성에서 값을 지정하는 경우 첫번째 값은 X축을 두번째 값은 Y축을 의미합니다. 따라서 오른쪽 위가 변환중심이 되어 객체를 변환시키게 됩니다.

숫자를 통한 지정이외에 다음과 같이 bottom, center, left, right, top 키워드를 사용할 수도 있습니다.
transform: rotate(60deg);
transform-origin: right top;
0 0
Programming/HTML CSS
스프라이트(sprite) 이미지(image)란 아래의 경우처럼 여러 이미지(image)를 한곳에 모아놓은 형태를 말합니다.

▶ 마리오(mario) 관련 스프라이트(sprite)

웹(web)에서 불러와야 하는 이미지(image)가 여러개인 경우 그 만큼의 요청을 해야 하지만 스프라이트(sprite) 이미지(image)를 사용하면 한번 요청으로 여러 이미지(image)를 한번에 받아오는 이점을 갖게 됩니다.

포토샵(photoshop) 등의 툴(tool)등을 사용하여 직접 스프라이트(sprite)를 만들 수도 있으나 아래와 같은 사이트(site)를 이용하면 간단하게 스프라이트(sprite)를 생성할 수 있습니다.

http://csssprites.com/

예제에서는 세개의 이미지(image)를 사용하여 아래와 같은 스프라이트(sprite)를 생성하였습니다.


스프라이트(sprite)가 생성되면 다음과 같이 생성된 스프라이트(sprite) 이미지(image)를 어떻게 사용할 수 있는지에 대한 css 코드(code)도 함께 보여집니다.


해당 css를 참고하여 html을 구성하면 다음과 같이 할 수 있을 것입니다.

#main_div {
   width: 206px;
   height: 50px;
   background: url('result.png');
}
▶CSS
<div id="main_div">
</div>
▶HTML

각각의 버튼모양을 따로 표시하려면 background-position 속성을 사용합니다.
#main_div_1 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: 0px, 0px;
}

#main_div_2 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -74px, 0px;
}

#main_div_3 {
   width: 64px;
   height: 64px;
   background: url('result.png');
   background-position: -132px, 0px;
}
▶CSS
<div id="main_div_1">
</div>
<br />
<div id="main_div_2">
</div>
<br />
<div id="main_div_3">
</div>
▶HTML
0 0
Programming/HTML CSS
html 페이지(page)가 화면크기를 벗어나 스크롤(scroll)되는 경우에도 자주 사용하는 메뉴(menu)등을 담고 있는 특정영역은 스크롤(scroll)되지 않도록 화면에 고정시킬 수 있습니다.
<div id="bar">
  Bar Menu
</div>
<div id="body">
  Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background.
</div>
고정바(bar)를 생성하려면 먼저 위에서 처럼 본문 영역(body 이름의 div)이외에 메뉴(menu)나 특정 내용을 담고 있는 div영역(bar)하나를 생성하도록 합니다. 이 div를 고정바(bar)로 활용할 것이므로 다음과 같이 고정시킬 영역에 대한 위치를 지정합니다.
#bar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   height: 50px;
   background: yellow;
}
position을 fixed로 하여 화면에 고정되도록 하며 top 속성을 0으로 하여 화면 상단에 위치하도록 하였습니다. 만약 고정바(bar)가 왼쪽에 위치해야 하는 경우 left 속성을, 오른쪽인 경우 right를, 화면 아래의 경우 bottom 속성값만을 0으로 처리하면 됩니다.

이때 고정바(bar)를 제외한 본문영역은 고정바(bar)에 의해 가려질 수 있으므로 고정바(bar)가 위치한 영역과 크기에 따라 그 만큼의 margin이나 padding속성을 부여 하여 문제를 해결합니다. 예제에서는 고정바(bar)에 해당하는 'bar'이름의 div가 상단(top)에 위치하고 50px크기를 갖고 있으므로
#body {
   margin-top: 50px;
}
50px 만큼 margin-top 속성을 부여하면 됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 2차원/3차원 구현(transform)  (0) 2013.11.24
[CSS3] 스프라이트 이미지(sprite image) 활용  (0) 2013.08.29
[CSS3] 고정바(bar) 생성  (1) 2013.08.27
[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
1 0
Programming/HTML CSS
다음 CSS 코드(code)는 표시할 내용이 현재 화면보다 큰 경우 '동해물과 백두산...' 처럼 ...으로 글자를 생략하도록 합니다. white-space, overflow, text-overflow 이 세개의 속성에 주목하십시오.
#main_div {
   width: 150px;
   
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}
▶CSS
<div id="main_div">
  Military Grid Reference System (MGRS) coordinates may be displayed at the bottom of the A-G Mode page on a black background.
</div>
▶HTML

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 스프라이트 이미지(sprite image) 활용  (0) 2013.08.29
[CSS3] 고정바(bar) 생성  (1) 2013.08.27
[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
0 0
Programming/HTML CSS
viewport meta 태그는 모바일 웹페이지 작성시 화면에 대한 특정 정보를 전달하기 위해 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maxium-scale=1.0, minimum-scale=1.0, user-scalable=no" />
다음은 content 내부에 작성되는 주요속성입니다.

 width  화면의 넓이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-width로 하면 모바일 장치의 화면 넓이를 따라가게 됩니다.
 height  화면의 높이를 의미하며 150, 200과 같은 값을 지정할 수 있습니다. 다만 값을 device-height로 하면 모바일 장치의 화면 높이를 따라가게 됩니다.
 initial-scale  화면의 초기 확대비율을 지정합니다.
 user-scaleble  사용자가 화면을 확대할 수 있는지 여부를 지정합니다.
 minimum-scale  화면을 축소할때 최소축소치입니다.
 maximum-scale  화면을 확대할때 최대확대치입니다.

● 안드로이드 뷰포트 정보

http://developer.android.com/guide/webapps/targeting.html

● 사파리 뷰포트 정보

http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safarihtmlref/Articles/MetaTags.html

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 고정바(bar) 생성  (1) 2013.08.27
[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
0 0
Programming/HTML CSS
보통 웹 브라우저에 특정 폰트로 글자를 표시하려면 해당 폰트가 사용자의 컴퓨터에 설치되어 있어야 합니다.  하지만 세상에 존재하는 모든 폰트가 사용자의 컴퓨터에 다 담겨져 있다는 보장은 할 수 없기에 그 대안으로 웹폰트를 사용합니다.

웹폰트는 사용자가 웹에 접속하게 되면 필요한 웹폰트를 자동으로 내려받아 설치하고 설정된 폰트대로 웹문서를 볼 수 있도록 합니다.

웹폰트는 문서의 헤더에 다음과 같은 구문을 추가함으로서 설치할 수 있습니다.
<head>
 <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
</head>
참고로 예제에 설정된 웹폰트는 구글에서 제공하는 것으로 아래 사이트를 방문하면 더 많은 폰트를 보실 수 있습니다.

http://www.google.com/fonts

위에서 처럼 폰트를 설치하고 나면 해당 폰트가 적용될 부분을 CSS로 지정하기만 하면 됩니다.
<style>
 #ff {
  font-family: 'Fruktur', cursive;
 }
</style>
이렇게 하면 아래와 같은 내용이 본문에 포함되는 경우 ff  아이디의 div 내용이 위에서 설치한 폰트로 보여지도록 처리가 이루어 질 수 있습니다.
<div id="ff">KOREA</div>

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
0 0
Programming/HTML CSS

모든 브라우저에서 동일한 표시를 가능하게 하는 초기화 코드를 사용합니다.

http://html5doctor.com/html-5-reset-stylesheet/

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
0 0
Programming/HTML CSS
1. track 사용
<video width="200px" class="video-js vjs-default-skin" data-setup="{}" controls="controls">
 <source src="sample.mp4" type="video/mp4" />

 <track kind="subtitles" src="track.srt" srclang="ko" label="korean" />
 <track kind="subtitles" src="track.srt" srclang="en" label="english" />
</video>
▶ track tag는 video tag를 통해 영상을 재생할때 자막을 보여줄 수 있도록 하는 tag입니다. track tag를 통해 자막을 보여주려면 아래와 같은 format으로 이루어진 자막 file을 제공해야 합니다.

1
00:00:000,000 --> 00:00:05,000
<p>안녕하세요.</p>

2
00:00:07,000 --> 00:00:10,000
<h2>반갑습니다.</h2>

첫번째 행의 숫자는 자막번호를 의미하며 두번째 시간은 자막을 표시할 시간입니다. 세번째 행에 실제 보여줄 자막을 넣고 마지막 4번째 행에 빈줄을 하나 추가하는 형식으로 자막을 만들면 됩니다.

여러 언어로된 자막을 제공하는 경우 해당 언어별로 track tag를 다중적으로 사용할 수 있습니다. 자막 file의 확장자는 srt 이며 srt 는 HTML5의 자막 file 확장자를 의미합니다.

track tag를 지원하는 browser가 많지 않습니다만 video.js plug-in을 사용하면 어느정도 문제를 해결할 수 있습니다.

2. track 속성

(1) kind

이 속성은 subtitles가 기본값이며 일반적인 자막을 영상에 보여준다는 의미합니다.

captions 값으로 설정하는 경우는 영상이 음소거상태이거나 영상을 보는 대상이 청각장애등인 경우 등등.. 소리를 들을 수 없는 경우에 자막과는 별도로 영상을 이해하기 위한 여러 음향효과를 보여준다는 것을 의미하게 됩니다.

descriptions은 영상에 대한 설명을 별도의 음성 file로 제공하는 경우에 사용됩니다. 영상을 보는 대상이 시각장애등의 이유로 영상을 제대로 볼 수 없는 경우를 대비합니다.

(2) src

자막파일의 url 경로를 지정합니다. 자막 파일의 확장자는 srt입니다.

(3) srclang

자막파일을 언어별로 제공하는 경우 해당 자막파일의 언어를 지정하도록 합니다.

(4) label

자막파일을 언어별로 제공하는 경우 사용자가 플레이어에서 해당 언어를 선택할때 표시할 내용을 입력합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
0 0
Programming/HTML CSS
상태 선택은 사용자로 부터 어떤 값를 입력받는 요소에 많이 쓰이는 선택자 입니다.
<input type="radio" id="man" name="sex" />남<br />
<input type="radio" id="woman" name="sex"  disabled="disabled" />여

<span id="o_man">남자를 선택함.</span>
<span id="o_false">사용 불가</span>
(1) checked

input 요소를 check 상태로 만들었을때를 의미합니다.
#man:checked ~ #o_man {
 color:red;
}
▶ man id 의 input 요소를 check 상태로 만들면 그 앞에 있는 모든 요소중 id가 o_man인 tag에 style을 적용

(2) disabled / enabled
#woman:disabled ~ #o_false {
 color:blue;
}
▶ woman id의 input 요소가 disabled 로 사용이 불가능하면 그 앞에 있는 모든 요소중 id가 o_false인 tag에 style을 적용, 반면 enabled 로 하면 사용가능임.

(3) focus
input:focus {
 color:red;
}
▶ input 요소중 focus 상태인 것이 있으면 해당 input에 style을 적용

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
0 0
Programming/HTML CSS
1. base 사용
<head>
<title>html sample</title>
<base href="http://(절대경로주소)">
</head>

<body>
<a href="문서이름">연결</a>
</body>
▶ base에 절대경로를 지정해 두면 해당 문서안에 다른 페이지로의 링크가 걸리는 경우 base로 지정된 경로가 자동으로 지정됩니다.

2. base 속성

(1) href

문서가 연결될 절대 URL 주소를 지정합니다.

(2) target

링크된 화면을 어디에 표시할지를 지정하는 속성입니다. _blank(새창), _self(현재창), _parent(부모frame), _top(frame전체) 값을 설정할 수 있습니다.

_parent는 현재 화면이 frame으로 구성되어 있을 경우 부모frame에 화면을 표시하며 _top은 frame으로 구성된 화면에서 이 frame을 무시하고 화면 전체로 링크된 화면을 표시하도록 합니다.

화면이 frame으로 구성되어 있다면 target 속성에 frame의 이름을 값으로 지정하여 해당 frame에 링크화면을 표시할 수도 있습니다. 예를 들어 특정 frame의 name속성이 view1 이라는 이름으로 지정되어 있다면 target 속성을 view1로 하여 view1이라는 이름을 가진 frame영역에 링크된 화면을 표시하도록 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
0 0
Programming/HTML CSS
선형 gradient 를 만듭니다. 예를 들어
<div class="div_grd"></div>
위와 같이 생성한 DIV에 gradient 를 적용하려면 다음과 같이 CSS를 작성합니다.
.div_grd {
   background: linear-gradient(15deg, red 0%, blue 100%);
   height: 200px;
  }
linear-gradient 속성을 배경에 지정하여 gradient를 적용하도록 하였으며 15도 각도로 처음에는 red로 시작하였다가 blue로 변화하도록 합니다.

만일 중간에 더 많은 색상을 지정하려면 원하는 색과 적용될 %를 추가적으로 넣어주면 됩니다.
linear-gradient(15deg, #ffffff 0%, yellow 50%, #000000 100%);

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
0 0
Programming/HTML CSS
자손 선택자 

자손은 문서 구조상 특정 태그의 아래 모든 요소를 자손이라고 합니다.
<table>
 <tr>
  <td>이름</td>
  <td>입력 : <input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td>입력 : <input type="text" id="phone" /></td>
 </tr>
</table>
위 태그에서 tr의 자손은 td입니다.
tr > td {
 color:red;
}
▶ tr 아래 모든 td에 스타일을 적용합니다.

자손을 지정할때 특정 태그로 한정한다면 해당 태그의 자손만 유효합니다. 예를 들어
<table>
 <tr>
  <td>이름</td>
  <td><input type="text" id="name" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td><input type="text" id="phone" /></td>
 </tr>
 <tr id="sub">
  <td>기타</td>
  <td>
   <table>
    <tr>
     <td>주소</td>
     <td><input type="text" id="address" /></td>
    </tr>
   </table>
  </td>
 </tr>
</table>
위와 같은 구조의 경우 다음과 같이 지정했을때
#sub > td {
 color:red;
}
스타일이 적용되는 것은 id가 sub인 tr에서의 아래 요소뿐이므로 화면상으로는 '기타'표시만 바뀌게 됩니다. 하위 table 아래에 td는 상위 sub 아이디의 tr 아래에 포함되지 않습니다.

위 예제로 table 태그를 사용하였는데 대부분의 웹브라우저에서는 table 태그사용시 자동으로 tbody를 추가하는 경우가 있습니다. 이 때문에 자손 선택자 사용시 원하지 않는 결과가 생길 수 있으므로 주의가 필요합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] base  (0) 2013.06.20
[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
0 0
Programming/HTML CSS
1. label 사용
<form>
 <label for="user_name">이름을 입력하세요.</label>
 <input type="text" id="user_name" name="user_name" />
 <input type="submit" value="전송" />
</form>
▶ input 태그로 데이터를 입력받을 때 해당 input 태그에 대한 설명을 label태그를 통해 붙여줍니다.

2. label 속성

(1) for

어떤 input 요소를 대상으로 하는지를 알려주기 위해 해당 input의 id를 지정합니다. 이렇게 하면 사용자가 label을 클릭하는등의 선택동작만으로 해당 input에 포커스를 자동으로 맞춰줄 수 있습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] linear-gradient  (0) 2013.06.19
[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
0 0
Programming/HTML CSS
HTML5 에서 헤더구조에 사용되는 태그는 다음과 같습니다.

1. header

헤더의 전체적인 구조를 나타냅니다. 헤더는 header로 시작해 header로 끝납니다.

2. hgroup

헤더에서 사이트의 제목이나 슬로건이 담겨지는 부분입니다.

3. nav

사이트의 메뉴를 이루는 부분입니다. 메뉴는 사이트의 전체메뉴이거나 특정한 상황에서만 보여지는 메뉴일 수 있으며 필요하다면 header안에서 2개 이상의 nav요소가 사용될 수 있습니다.

4. section

이 태그안에는 화면에 보여일 웹페이지의 주요 컨텐츠를 담아둡니다. 일종의 본문에 해당합니다.

5. article

section 안에서 주제별로 구분되는 본문을 배치합니다.

6. aside

화면의 좌, 우측에 보여지는 컨텐츠를 포함하는 영역입니다.
 
7. footer

사이트의 하단부분을 구성하는 영역입니다.
<body>
 <header>
  <hgroup>
   <h1>CLIEL</h1>
  </hgroup>
  <nav>
   <ul>
    <li>HOME</li>
    <li>MENU1</li>
    <li>MENU2</li>
   </ul>
  </nav>
 </header>
 <div>
  <section>
   <article>A couple of days ago I returned from my trip to the U.S.</article>
   <article>We had traveled on business to Phoenix, AZ.</article>
   <article>Although there were no arrangements to do any flying, I had decided to bring a flight suit with me. I figured, you never know… </article>
  </section>
  <aside>
   How I Flew a Huey in Arizona
  </aside>
 </div>
 <footer>
  HTML5
 </footer>
</body>
위에서 말씀드린 태그는 사이트의 구조에서 각각의 부분이 어떤 역활을 하고 있는지 명확하게 구분하기 위한 목적이 강합니다. 소스상에서 구분(정확히는 검색엔진등에서)되는 용도이므로 태그가 실제 웹 브라우저에서 표시될때 어떤 특별한 처리가 이루어 지지는 않습니다.

그냥 각 태그에 의미를 부여 해놓은 형태인데 이것은 '시멘틱 웹'이라 표현합니다.

실제로 header나 hgroup, nav 태그를 제거해도 브라우저에 표시되는 모양새는 태그를 사용한 경우와 별반 다르지 않습니다. 따라서 필요하다면 개발자나 디자이너가 직접 CSS를 정의하여 목적에 맞게 디자인을 입혀야 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 자손 선택  (0) 2013.06.17
[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
0 0
Programming/HTML CSS
특정 요소를 화면에 어떻게 보일것인지를 지정하는 속성입니다.
<div id="view_div">
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
</div>
display 속성의 특성을 살펴보기 위해 div 하나를 만들고 그 안에 여러 요소를 배치하였습니다.
#view_div {
 display: none;
}
display 속성을 위와 같이 지정하면 div 전체가 화면에 표시되지 않을 것입니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] label  (0) 2013.06.13
[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
0 0
Programming/HTML CSS
태그 선택자

특정 태그를 사용하여 해당 문서내에 지정된 태그만을 선택합니다.
span {
 color:red;
}
만약 여러태그에 동일한 스타일을 적용하려면 해당 태그를 ,(콤마)로 구분해 지정합니다.
span, p {
 color:red;
}

'Programming > HTML CSS' 카테고리의 다른 글

[HTML5] header, nav, aside, section, article, footer (구조태그)  (0) 2013.06.12
[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
0 0
Programming/HTML CSS
1. frameset, frame 사용
<frameset cols="30%, 70%">
 <frame src="http://www.daum.net/" name="site1">
 
 <frameset rows="50%, 50%">
  <frame src="http://lab.cliel.com/">
  <frame src="http://cloud.cliel.com/">
 </frameset>
</frameset>
▶ frame은 하나의 화면에서 여러 웹페이지를 보여줄 수 있도록 화면을 분할합니다. frameset안에 frame이 들어가 화면을 구성하며 frameset안에 또다른 frameset이 들어가 분할된 화면을 다시 나눌 수 있습니다.

2. frameset, frame 속성

(1) cols

frameset 속성이며 화면을 좌우로 나눕니다. 30%, 70%와 같이 ,(콤마)로 나누어 값을 지정하며 값의 단위는 px나 %를 사용합니다. 값대신 *을 지정하면 나머지를 의미하는데 예를 들어 30%, * 처럼 지정하면 왼쪽 화면은 30%비율로, 오른쪽 화면은 그 나머지 전체를 의미하게 됩니다.

(2) rows

frameset 속성이며 화면을 상하로 나누는 속성입니다. 값의 지정과 단위는 cols와 같습니다.

(3) frameborder

frameset 속성이며 frame의 테두리를 표시할지 지정합니다. 0은 표시하지 않으며 1은 표시하도록 합니다.

(4) src

frame 속성이며 해당 frame에 표시할 웹페이지 이름이나 url주소를 지정합니다.

(5) name

frame 속성이며 frame의 이름을 지정합니다.

(6) bordercolor

frameset 속성이며 frameset의 테두리 색상을 지정합니다.

(7) scrolling

frame 속성이며 frame안에 스크롤바를 표시할지 지정합니다. yes면 표시, no면 표시하지 않습니다. auto로 설정하면 표시할 영역이 화면보다 넘칠경우 스크롤바를 표시하고 그렇지 않으면 표시하지 않습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] display  (0) 2013.06.11
[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
2 0
Programming/HTML CSS
속성 선택자

문서내에 요소중 특정 속성과 그 값을 가진 태그만을 선택하도록 합니다.
이름 : <input type="text" id="input_name" /><br />
<input type="button" value="확인" />
▶요소 정의
input[type=text] {
 border-color:red;
}
▶정의된 요소중 type 속성이 text 인것만 해당 스타일 적용

하나의 속성이 아닌 여러 속성을 지정해야 한다면 []로 '[속성=값][속성=값]'처럼 연결하면 됩니다.

만약 값이 아닌 속성만을 대상으로 해야 한다면 값을 제외하고 다음과 같이 지정합니다.
input[type] {
 border-color:red;
}
▶type 속성을 가진 요소만을 선택

속성과 값 사이에 특정 연산자를 사용하면 값의 구분을 제어할 수 있습니다. 위 예제에서는 = 기호만을 사용해 정확히 값에 일치하는 요소만을 선택하였으나 다음 표의 기호를 사용하면 값의 대한 선택방법을 좀더 유동적으로 바꿀 수 있습니다.

 ~=  속성이 '값'을 단어로 포함하고 있는 요소를 선택
 ^=  속성이 '값'으로 시작하는 요소를 선택
 $=  속성이 '값'으로 끝나는 요소를 선택
 *=  속성이 '값'을 포함하는 요소를 선택

예를 들어 아래에 attr_type 이라는 특정 속성이 적용된 경우
이름 : <input type="text" attr_type="aaa bbb" id="input_name" /><br />
<input type="button" attr_type="aaabbb" value="확인" />
선택자를 다음과 같이 지정했을때
input[attr_type~=bbb] {
 border-color:red;
}
input이 text 인 첫번째 태그가 선택됩니다. ~= 기호는 단어로서 포함되는 내용을 지정하기 때문에 aaa bbb 처럼 aaa와 bbb가 구분되어 bbb값을 따로 볼 수 있는 형태의 태그만 선택되는 것입니다. 두번째 input의 attr_type속성 값은 aaabbb 이므로 bbb를 별도의 단어로 인식하기에는 어려워 보입니다.

반면 아래 정의는
input[attr_type*=bbb] {
 border-color:red;
}
두개의 input 요소 모두를 선택하도록 합니다. *= 기호는 해당 속성에 지정된 값을 포함하고 있는 것이면 되므로 aaa bbb든 aaabbb든 모두 해당합니다.
input[attr_type^=aaa] {
 border-color:red;
}
위 선택자는 attr_type 속성의 값이 aaa로 시작하는 요소를 의미하므로 이것 역시 aaa bbb든 aaabbb든 모두 해당합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 태그 선택  (0) 2013.06.10
[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
0 0
Programming/HTML CSS
후손 선택자

후손이라 함은 특정 태그 아래에 속한 태그를 의미하며 태그를 단계별로 지정하여 원하는 요소를 선택하는 방법입니다.
<table>
 <tr>
  <td>이름</td>
  <td name="name"><input type="text" /></td>
 </tr>
 <tr>
  <td>전화번호</td>
  <td name="phone"><input type="text" /></td>
 </tr>
</table>
위와 같은 구조의 태그가 있는 경우 input 요소를 선택하려면 다음과 같이 할 수 있습니다.
td input {
 border-color:red;
}
td 아래에 input 이 있는 형태이므로 input은 td의 후손이라 할 수 있습니다.(사실 위 방법은 별 의미가 없습니다. 그냥 input 이라고만 해줘도 선택되는 것은 마찬가지인데 후손의 개념을 설명하기 위한 것이므로 이해 바랍니다.)

필요한 경우 다음과 같이 길게 늘어놓을 수도 있죠.
table tr td input {
 border-color:red;
}
▶table 밑에 있는 tr 밑에 있는 td 밑에 있는 input을 선택

이러한 방법말고 대신 전화번호에 해당하는 input 요소만을 선택하고자 한다면
td[name=phone] input {
 border-color:red;
}
위와 같이 할 수도 있습니다. 태그요소 대신 특정속성이나 아이디와 같은 다른 방법으로도 후손의 개념을 적용하는 것입니다.

'Programming > HTML CSS' 카테고리의 다른 글

[HTML] frameset, frame  (2) 2013.06.07
[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
0 0
Programming/HTML CSS
특정 요소를 화면에 보이거나 보이지 않게 합니다.
<div id="view_div">
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
</div>
위 tag에서 div를 보이지 않게 하려면 다음과 같이 visibility 속성을 지정합니다.
#view_div {
 visibility: hidden;
}
hidden 대신에 visible로 하면 화면에 다시 보이도록 할 수 있습니다. display라는 속성으로도 비슷한 기능을 수행할 수 있는데 display는 요소를 숨기면서 요소가 차지하던 해당 공간도 제거하지만 visibility는 공간은 그대로 두고 요소만 보이지 않도록 합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 속성 선택  (0) 2013.06.04
[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
0 0
Programming/HTML CSS
 1. span 사용
안녕하세요.
<span>우리나라</span>
<span>대한민국</span>
반갑습니다.
▶ inline 형태로 위치하도록 합니다. 이는 화면 특정 너비 전체가 아닌 해당 영역만큼의 공간만 차지함을 의미합니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 후손 선택  (0) 2013.06.03
[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
0 0
Programming/HTML CSS
말 그대로 선택자로 지정한 것이 아닌 것을 선택하는 선택자이며 not 을 사용합니다.
이름 : <input type="text" /><br />
주소 : <input type="text" /><br /><br />
<input type="button" value="확인" />
위 구조에서
input:not([type=text]) {
 color: red;
}
위와 같이 부정선택자를 사용하면 type이 text가 아닌것(예제에서 type이 button)만 선택하여 style을 적용하게 됩니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] visibility  (0) 2013.05.29
[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
0 0
Programming/HTML CSS
먼저 구조선택은 구조상 같은 위치의 태그를 선택하기 위해 다음 4가지 keyword를 사용할 수 있습니다.

 first-child  첫번째 태그
 last-child  마지막 태그
 nth-child  n번째 태그
 nth-last-child  마지막에서 n번째 태그

예를 들면
<table>
 <tr>
  <td>이름</td>
  <td>주소</td>
  <td>나이</td>
  <td>전화</td>
 </tr>
</table>
위 구조에서 첫번째 td와 세번째 td를 구조태그로 선택하려면 다음과 같이 선택자를 작성할 수 있습니다.
td:first-child, td:nth-child(3) {
 color:red;
}
특히 nth- 선택자를 사용하면 뒤에 가변적인 수열을 작성해서 원하는 태그를 반복적으로 선택할 수 있습니다.
td:nth-child(2n+1) {
 color:red;
}
위 구현은 첫번째 선택자 구현과 결과가 일치합니다. 뒤에 지정한 숫자는 2n + 1이므로 1부터 시작해 2씩 더해져 첫번째와 세번째 td를 선택하게 합니다. 이 상태에서 만약 td태그가 1개 더 추가된다면 자연히 추가된 td도 선택자 영향을 받게 됩니다.

구조 선택은 조금 다른 방식으로 다음 선택자도 사용할 수 있습니다.

 first-of-type  자손중 첫번째
 last-of-type  자손중 마지막
 nth-of-type  자손중 n번째
 nth-last-of-type  자손중 마지막 n번째

이 선택자를 사용해 이미 언급한 태그에서 첫번째 td만을 선택하게 하려면 아래와 같이 선택자를 작성합니다.
tr > td:first-of-type {
 color:red;
}
▶ tr 자손중 첫번째 td를 선택

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5] span  (0) 2013.05.28
[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
0 0
Programming/HTML CSS
1. video 사용
<video src="sample.mp4" controls="controls"></video>
▶지정된 mp4 file을 재생합니다.

표준 tag만 사용하면 browser마다 player의 모양새가 틀릴 수 있으며 HTML5를 지원하지 않는 browser 에서는 동작하지 않을 수도 있습니다. 대신 video.js plug-in(http://videojs.com)을 사용하면 이 문제를 일부 해결할 수 있습니다.

사용방법은 우선 head사이에 아래 두줄의 tag를 추가하고
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
video tag에서 다음과 같이 class와 data-setup을 지정해 두기만 하면 됩니다.
<video width="200px" src="sample.mp4" class="video-js vjs-default-skin" data-setup="{}" controls="controls"></video>
다만 HTML5를 지원하지 않는 경우에는 flash로 대체됩니다. 따라서 flash를 사용할 수 없는 일부 smart phone이나 tablet 등의 mobile기기에서는 작동되지 않을 수 있습니다.(대신 HTML5가 되겠지...^^)

동영상 포멧은 브라우저 마다 지원하는 형태가 달라질 수 있으나 mp4와 ogv 형식을 같이 지원하면 대부분의 브라우저에서 문제없이 재생될 수 있습니다.

2. video 속성

(1) src

재생할 file이 존재하는 url경로를 지정합니다.

(2) poster

video 재생전 보여줄 image의 url을 지정합니다.

(3) preload

video를 모두 load한뒤에 재생하도록 합니다. preload만 입력해도 되고 preload="preload" 처럼 속성을 지정해도 됩니다. 참고로 후자는 XHTML5 표기방법에 해당합니다.

(4) autoplay

자동으로 재생할지를 지정합니다. 속성지정은 preload와 같습니다.

(5) loop

반복재생할지 지정합니다. 속성지정은 preload와 같습니다.

(6) controls

재생, 정지등의 interface를 표시하도록 합니다. 속성지정은 preload와 같습니다.

(7) width

player의 가로 크기를 지정합니다. 값은 pixel단위 정수로 지정합니다.

(8) height

player의 세로 크기를 지정합니다. 속성 지정은 width와 같습니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 부정 선택  (0) 2013.05.23
[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
0 0
Programming/HTML CSS
요소의 투명도를 지정합니다.
<div id="view_div">
asP.neT Web server Control
</div>
위 tag에서 div에 투명도를 설정하려면 다음과 같이 지정합니다.
#view_div {
 opacity: 0.3;
}
opacity 의 값은 0.0 ~ 1.0 까지이며 값이 높을 수록 불투명도가 높아집니다.

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 선택자 - 구조 선택  (0) 2013.05.22
[HTML5] video (비디오)  (0) 2013.05.20
[CSS3] opacity  (0) 2013.05.15
[CSS3] 선택자 - 링크 선택  (0) 2013.05.14
[HTML / HTML5] div  (0) 2013.05.13
[CSS3] 선택자 - 문자 선택  (0) 2013.05.09
0 0
1 2 3
블로그 이미지

클리엘