반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

WEB_APP/HTML5

HTML5로 비디오 보여주기 Video Tag

2011. 12. 17. 02:45 | Posted by 솔웅


반응형
그동안 주로 CSS3 (Webkit 중심으로) 를 다뤘구요. 지난 글에서 자바스크립트를 잠깐 다뤘었습니다.
지금까지 주요한 부분은 바로 Webkit입니다. 지금 진행중인 글 어느정도 마무리 되면 Webkit은 따로 다룰 필요가 있는 주제 같습니다.
그리고 오늘부터 다룰 부분은 본격적인 HTML5 입니다.

오늘은 브라우저에서 HTML5로 비디오를 어떻게 실행하는지 또 비디오 플레이어는 어떻게 구성하는지에 대해 시작하겠습니다.

먼저 사용할 동영상 파일은 각자 준비해 주세요. 파일 형식은 mp4 입니다.
저는 유튜브에서 뮤직비디오 하나 다운 받아서 사용할 겁니다.

아래와 같이 html 파일을 만드세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
</head>
<body style="background-color:#8EE5EE;">
    <div id="big_wrapper">
        <video src="song.mp4"> </video>
    </div>
</body>
</html>

제 동영상 파일은 이름이 song.mp4 입니다.

크롬 브라우저에서 실행하면 위와 같이 나옵니다.
동영상이 play되지도 않고 어디 play버튼이나 stop 버튼 뭐 이런게 하나도 없습니다.
video 태그를 아래와 같이 고쳐 보세요.
<video src="song.mp4" controls > </video>


그냥 video 태그에 controls만 넣었는데 플레이버튼, 정지버튼,진행상황 bar 그리고 볼륨조절까지 다 나오네요.

video tag 안에 width와 height도 넣을 수 있습니다. 그러면 동영상 사이즈가 변할 겁니다.
이 video tag 안에 넣을 수 있는 속성들은 아래와 같은 것들이 있습니다.

다 보시면 아실 겁니다.
아래와 같이 video 태그를 바꿔보세요.
<video src="song.mp4" controls width="640" height="360" loop poster="video05.png"> </video>
너비, 높이를 지정했고 루프를 선언했고 poster에 한 이미지를 지정했습니다.
(저는 HTML5 로고를 사용했습니다.)

그러면 처음 실행될 때 poster에서 지정된 이미지가 나타나고 재생 버튼을 누르면 동영상이 시작됩니다.
여기에 autoplay를 추가하면 자동으로 동영상이 시작되겠죠?
여러분들이 필요한 속성을 사용하시면 됩니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Canvas 이용하기 - 02 - 다각형,글자,그림자  (0) 2011.12.22
HTML5 Canvas 이용하기 - 01 -  (0) 2011.12.21
HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript  (2) 2011.12.19
HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript  (2) 2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
WEB_APP/HTML5

JavaScript 맛보기

2011. 12. 16. 10:57 | Posted by 솔웅


반응형
자바 스크립트를 좀 알아보겠습니다.
HTML  파일은 아래와 같이 준비해 주세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <script src="dougy.js"></script>
    <title> Dougy's HTML5 </title>
</head>
<body>
    <div id="big_wrapper">
        <p id="tuna"> first </p>
        <p id="bacon"> second </p>
        <p id="tuna"> third </p>
    </div>
</body>
</html>

처음 doctype은 HTML5를 사용하겠다는 의미입니다.
브라우저는 이 코드가 있을 경우 HTML5를 사용 가능하도록 만듭니다.
물론 HTML5가 지원되는 브라우저라야 되겠죠.
그리고 오늘은 자바스크립트를 할 거니까 별로 관계는 없습니다.
그래도 지금 HTML5를 배우고 있으니까 이 코드를 넣는게 낫겠죠.

그리고 script 태그를 보시면 dougy.js 를 사용할 거라고 선언했습니다.

그럼 dougy.js를 볼까요?
function getStuff() {
    document.querySelector('#tuna').onclick=talk;
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;
이 코드를 복사해 넣으세요.
getStuff() 내용은 #tuna 라는 id를 가진 태그를 클릭하면 talk 함수를 실행하라는 의미입니다.
talk 함수는 alert box를 띄우는 함수구요.
맨 마작은 웹페이지가 처음 열릴 때 getStuff 함수를 사용하라는 의미입니다.

이러면 tuna라는 id를 가진 first 를 클릭하면 이렇게 alert 창이 뜹니다.

그런데 이렇게 하면 third도 id가 tuna 인데 alert창이 뜨지 않습니다.
제일 첫번째 id에만 적용 됩니다.
이렇게 여러 id에도 적용이 되야 할 경우에는 Array(배열)을 이용해야 됩니다.
그리고 querySelectorAll 을 사용하구요.
dougy.js를 아래와 같이 고칩니다.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    list[0].onclick=talk;
    list[1].onclick=talk1;
}
function talk() {
    alert('Alert box!');
}
function talk1() {
    alert('Hi Alert box2!');
}
window.onload=getStuff;

참고로 아래 코드도 보세요.
function getStuff() {
    var list = document.querySelectorAll('#tuna');
    for(var i=0; i<list.length;i++) {
        list[i].onclick = talk;
    }
}
function talk() {
    alert('Alert box!');
}
window.onload=getStuff;

보시면 for 문을 이용해서 id가 tuna인 모든 태그를 클릭했을 때 talk 함수를 실행하는 방법입니다.
팁으로 알려드립니다.

다음 글에서는 HTML5의 video Tag에 대해 공부하겠습니다.










반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5 Canvas 이용하기 - 01 -  (0) 2011.12.21
HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript  (2) 2011.12.19
HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript  (2) 2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
WEB_APP/HTML5

HTML5 CSS Animation 효과

2011. 12. 15. 22:21 | Posted by 솔웅


반응형
제가 이 글을 회사에서도 올리고 집에서도 올리고 해서 파일 이름이 헛갈리네요.

오늘도 예전처럼 간단한 html 을 준비해 두시구요. (이름은 여러분들이 정하세요.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main06.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

main06.css를 아래와 같이 준비하세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:yellow;
    outline:7px solid red;
    -webkit-transform:scale(-1,1)
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}

이제 css를 이용한 animation 효과를 다뤄보겠습니다.
css 파일에 아래 내용을 추가해 보세요.
#box:hover{
    -webkit-transform:rotate(45deg);
}

이렇게 하면 보여드릴 수는 없지만 저 박스에 마우스를 갖다 대면 45도로 박스가 기웁니다.
제 경우에 이 기능은 크롬 브라우저에서만 작동합니다. 아마 다른 브라우저들도 최신버전에서는 작동될지 모르겠습니다.
코드를 보면 box에 마우스를 올리면 45도 돌리라고 돼 있죠? 이렇게 만 하면 마우스가 box에서 벗어나면 다시 제자리로 자동으로 돌아오네요.

이것만해도 약간의 애니메이션 기능이 됐는데요. 좀 더 그럴듯한 효과가 있습니다.
#box 안에 (#box:hover가 아니라) 아래 코드를 넣으세요.
    -webkit-transition:-webkit-transform 2s;

이렇게 하면 45도로 기울이는 동작을 2초에 걸쳐서 하게 됩니다. 그러니까 아주 부드럽게 움직이게 되죠.
한번 직접 해 보세요. 아주 그럴듯 할 겁니다.

하기 전에 css파일을 아래와 같이 만들어 주세요.
body{
    text-align:center;
}
#box{
    display:block;

}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}
#box:hover{
   
}

그리고 #box 안에 아래 코드를 추가하세요.
    margin:150px auto;
    color:#ffffff;
    -webkit-border-radius:10px;
    opacity:0.6;
    background:red;
    width:120px;
    height:75px;

이러면 브라우저에 위와 같은 박스가 뜰 거예요.
여기서 부터 그럴 싸한 애니메이션을 시작할 께요.

그럼 #box 안에 이어서 아래 코드를 넣어 보세요.
    -webkit-transition:-webkit-transform 2s, opacity 2s, background 2s, width 2s, height 2s;

아까 다뤘던거도 있고 그렇지 않은 것도 있죠?
이 의미는 transform이 일어날 때 2초동안 일을 처리하고 투명도,배경,너비,높이 변화도 모두 2초동안 일을 진행하라는 의미입니다.

이제 hover에 위 조건들을 변화시키라는 명령만 하면 됩니다.

이제 #box:hover 안에 아래와 같이 코드를 넣으세요.
    -webkit-transform:rotate(360deg);
    opacity:1;
    background:#1ec7e6;
    width:450px;
    height:110px;

그리고 실행을 해 보세요.
애니메이션 기능이라 캡쳐화면을 넣기 어려운데요.
직접 한번 돌려보세요. 애니메이션 기능에 아주 만족하실 거예요.
2초동안 투명도, 배경색, 너비, 높이가 부드럽게 회전하면서 변할겁니다. (마우스를 올리면요.)
플래시로 한 것 같은 효과 아니예요? 자바스크립트로 한 것도 아니고 그냥 CSS로만으로도 이런 기능이 가능하다고 하니 대단하네요.

10th.html

main06.css

전체소스코드는 위에 있습니다.
다음엔 자바스크립트 쪽을 공부해 볼께요.

HTML5로 모바일 게임을 만드는 그날까지 쭉~~~~~



반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 나만의 비디오 플레이어 스킨 만들기 -3- JavaScript  (2) 2011.12.19
HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript  (2) 2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
WEB_APP/HTML5

HTML5 CSS Text shadow, translate 효과 등등

2011. 12. 14. 23:38 | Posted by 솔웅


반응형

지난 시간 사용했던 소스를 그대로 사용하겠습니다.
일단 7th.html 파일을 만들어서 아래 코드를 넣으세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main04.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main04.css 파일을 아래와 같이 만드세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
    -webkit-border-radius:25px;
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}


어제하고 조금 다를거예요. 아래 부분이 추가 됐거든요.
text-shadow:rgb(110,110,110) 3px 3px 5px;

어제는 box에 그림자 효과를 준 것인데 오늘은 텍스트에 그림자 효과를 줬습니다.

이제부터 할 일은 박스에 그라디언트를 줄 겁니다.
    background:orange; 이 부분을 아래처럼 바꿔보세요.
background:-webkit-radial-gradient(center,circle,red 0%,orange 50%);

이 코드는 가운데서부터 원 모양으로 빨강->오렌지까지 그라디언트 효과를 주라는 의미입니다.
red 0%는 빨강색이 시작하자마자 그라디언트가 시작된다는 거구요 오렌지 50%는 50%는 그리디언트가 아니라 완전히 오렌지색이 표시 되도록 하라는 의미입니다.
background:-webkit-linear-gradient(top,black,white)
위 코드도 한번 시도해 보세요. (직접 확인해 보세요. 설명은 생략할께요.)

박스나 텍스트 색을 만들 때 rgb를 사용했습니다. 여기에 투명도까지 조절하고 싶으시면 rgba 를 사용하시면 됩니다.
    -webkit-box-shadow:rgba(110,110,110,.6) 10px 10px 10px;
이 코드를 사용하면 박스의 그림자가 60% 투명해 져서 좀 더 연하게 나올 겁니다.

이제 조금 다른 효과를 볼께요.
우선 html과 css 파일을 새로운걸로 바꾸겠습니다.
html은 8th.html로 해 주시고 7th.html에서 css를 main05.css로 바꿔주세요.
body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:7px solid blue;
    background:yellow;
    outline:7px solid red;
}
#text{
    font:bold 30px Century Gothic;
    text-shadow:rgb(110,110,110) 3px 3px 5px;
}


새로운 코드는 outline 입니다. 보시면 border랑 똑 같은데 제목이 outline 으로 합니다.

그러면 border 바깥쪽으로 outline이 그려집니다.


다음은 transform 에 대해 알아 보겠는데요.

-webkit-transform:scale(1.5)

-webkit-transform:scale(1,3)

-webkit-transform:scale(-1.1)

이 3개를 하나하나씩 한번 대입해 보세요.

첫번재는 전체 box 크기가 커질것이고 두번째는 아래위 로만 3배 커질 겁니다. 그리고 3번째는 박스가 오른쪽 왼쪽이 바뀌어질 겁니다. 거울에 비치듯이요. 그러면 글자도 그렇게 나오겠죠?

직접 한번 확인해 보세요.

그리고 아래 코드를 한번 넣어 보세요.

-webkit-transform:skew(30deg);

박스가 옆으로 눕네요. 우리의 bucky (thenewboston.com)는 이 기능은 하등의 쓸모가 없다고 쓰지 말라고 하네요.


다음은 translate에 대해서 알아보겠습니다.

-webkit-transform:translate(150px, 300px); 의 의미는 x방향으로 150픽셀 y방향으로 300 픽셀 움직이라는 의미입니다.

그러면 아래처럼 한번 해 보세요.

-webkit-transform:translate(100px,100px)rotate(30deg) scale(.8);

이 의미는 뭘까요?

x방향으로 100픽셀, y 방향으로 100픽셀 움직이고 30도 회전시키고 크기는 80%로 줄이라는 의미입니다.



위 조건이 모두 적용된 화면입니다.

CSS에서 이런 기능까지 적용이 된다면 간단한 애니매이션 기능도 구현할 수 있지 않겠어요?

웬만한 플래쉬 효과는 줄 수 있을 것 같습니다.


다음 글에서는 애니메이션 효과를 한번 공부해 보도록 할께요.

아주 훌륭한 기능이 여러분들을 기다리고 있습니다. ^^

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 나만의 비디오 플레이어 스킨 만들기 -2- JavaScript  (2) 2011.12.18
HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
WEB_APP/HTML5

CSS3 Rounded Corner, 그림자 효과 사용하기

2011. 12. 12. 23:37 | Posted by 솔웅


반응형
요즘 계속 공부 하고 있는 부분이 CSS3 입니다.
정확히 HTML5는 아니지만 HTML은 CSS와 자바스크립트와 더불어서 더 잘 사용 될 수 있기 때문에 CSS와 자바스크립트도 반드시 알아야 할 기술입니다.
CSS3 는 2005년 이후 부터 지금까지 계속 개발 되고 있다고 합니다. 아직 완료되거나 공식적으로 표준으로 인정되거나 뭐 그런건 아니라서 모든 브라우저에서 다 지원하는 것은 아닙니다.
대개 크롬에서 많은 기능을 지원하고 있습니다.

지난 시간에 이어서 계속 CSS3를 공부 하겠습니다.
우선 아래와 같이 HTML파일을 만드세요.
(제 파일 이름은 6th.html 하고 main03.css 입니다.)
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main03.css">
</head>
<body>
    <div id="box">
        <p id="text"> Text Test. </p>
    </div>
</body>
</html>

그리고 main03.css를 아래와 같이 만듭니다.

body{
    text-align:center;
}
#box{
    display:block;
    width:500px;
    margin:50px auto;
    padding:15px;
    text-align:center;
    border:1px solid blue;
    background:orange;
}
#text{
    font:bold 30px Century Gothic;
}


그럼 이와 같은 모습이 나옵니다.
이제 이 네모 박스를 좀 꾸며 보겠습니다.

#box 안에 아래 코드를 추가해 보세요.
-webkit-border-radius:25px;
그리고 재실행 하시면 사각형 모서리가 곡선으로 처리됩니다.
한가지만 더 해 볼까요?
-webkit-box-shadow:rgb(110,110,110) 8px 8px;
이것은 그림자 효과인데요 그림자 색은 rgb로 표현됩니다. 그 다음은 오런쪽으로 8픽셀 아래로 8픽셀 더 가서 그리라는 의미 입니다.


아주 보기 좋은 박스가 그려졌습니다.
그림자 효과를 아래처럼 줘 보세요.
    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px;

shadow 효과의 3번째 인수는 blur 효과를 주는 기능입니다.

맨 마지막에 inset을 추가해 보세요.

    -webkit-box-shadow:rgb(110,110,110) 10px 10px 10px inset;



그러면 그림자 효과가 박스 안쪽으로 나타나게 됩니다.

오늘은 간단히 여기까지 하구요.
다음 글에선 박스 안에 그라데이션 효과를 주는 법을 공부 하겠습니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 나만의 비디오 플레이어 스킨 만들기 -1- CSS  (0) 2011.12.17
HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
WEB_APP/HTML5

webkit-box 좀 더 알아보기 (Flexible Box Model)

2011. 12. 10. 05:55 | Posted by 솔웅


반응형
어제 만들었던 소스코드도 그렇고...
웬만한 브라우저에서는 제대로 실행이 안 될 수 있습니다.
HTML5, CSS3 모두 새로운 기술들이고 아직 공식적으로 표준으로 인정되지 않은 것도 있고 해서 모든 브라우저가 다 지원하지는 않습니다.

제 컴에서도 크롬 (Chrome) 에서만 제대로 실행이 되더라구요.
이쪽 IT쪽이 워낙에 기술이 많이 나오고 또 빠르게 진행 되서 여러 새 기술 중에 살아남아서 더 대중화 될 만한 기술을 잘 선택해서 스펙을 만드는 것도 중요한 일입니다.

저도 웹에서 모바일로 옮겨온 게 2~3년 전인데 그 사이에 Android Native, Object C, Corona SDK를 거쳐 지금은 HTML5, CSS3, webkit-box,sencha touch 등등 많은 기술들을 익히고 있습니다.

하여간 모바일쪽이 대세일거라고 생각해서 그쪽 기술 습득에 매진하고 있습니다.
정보 수집력도 중요하고 결단력 실행력 모두 중요해요 이 바닥에서 계속 앞서 나가려면...
일단 배우기로 했으면 진도부터 쭉쭉 나가야 합니다.

그래서 오늘도 진도 나갑니다. 쭉 쭉~~~~

오늘의 HTML 소스코드는 아래와 같이 작성해 주세요.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main02.css">
</head>
<body>
    <section id="mommy">
        <div id="kid1"> kid 1 </div>
        <div id="kid1"> kid 2 </div>
        <div id="kid1"> kid 3 </div>
        <div id="kid1"> kid 4 </div>
    </section>
</body>
</html>

그리고 공부할 부분인 css를 작성하겠습니다. main02.css입니다.
#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
}


첫번째 mommy에서는 webkit을 적용했고 진행 방향은 horizontal로 했습니다.
그래서 위 박스들이 좌측에서 우측으로 표시된 겁니다.
나머지는 각 id별로 박스를 만들어서 그 안에 색을 채웠습니다.

mommy에 아래 내용을 추가해 보세요.
-webkit-box-direction:reverse;


그러면 보시는 것처럼 박스가 역순으로 표시 됩니다.
이제 mommy에 추가했던 -webkit-box-direction:reverse; 를 없애시구요.
kid1,2,3,4에 아래 코드들을 하나씩 추가하세요.
kid1 -> -webkit-box-ordinal-group: 3;
kid2 -> -webkit-box-ordinal-group: 1;
kid3 -> -webkit-box-ordinal-group: 4;
kid4 -> -webkit-box-ordinal-group: 2;

이러면 지정한 순서대로 박스가 나열 되죠?


이제 좀 다른 기능을 알아보죠. main02.css를 아래와 같이 고치세요.

#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
}

달라진 점은 모두 width를 지정했다는 겁니다. 그리고 kid2에게는 -webkit-box-flex:1; 을 적용했구요.

지난 글에서도 언급했듯이 1은 flexible하도록 하는 것이고 0은 고정돼 있는 겁니다.

kid2를 flexible하도록 설정했더니 남은 공간만큼 박스가 늘어났습니다.

여기서 kid1,2,3,4 모두 width를 없애고 -webkit-box-flex:1; 를 집어 넣으면 모두 일정한 크기로 공간을 채웁니다.

그리고 특정 박스의 크기를 유지하고 싶으면 1이 아니라 0을 대입하면 되구요.

그리고 전부 숫자를 1로 하시고 kid2 만 숫자를 2로 해 보세요.

그러면 kid2는 다른 박스보다 두배 크기로 됩니다.

숫자가 1,2,1,1 이 되면 이 숫자의 합이 5이니까 전체 공간을 5로 나눠서 두번째 박스는 2의 공간을 나머지는 1의공간을 할당하게됩니다.


#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
    height:300px;
    -webkit-box-align:center;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
    height:100px;
    -webkit-box-flex:1;
}



이건 mommy에 있는     -webkit-box-align:center; 을 테스트해 본 겁니다.

아래 위 로 가운데 정렬이 돼 있죠?

#mommy{
    border:2px solid blue;
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    width:700px;
    height:300px;
    -webkit-box-align:stretch;
}
#kid1{
    border: 2px solid red;
    background : green;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid2{
    border: 2px solid red;
    background : red;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid3{
    border: 2px solid red;
    background : blue;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}
#kid4{
    border: 2px solid red;
    background : yellow;
    padding:20px;
    margin:10px;
    width:60px;
    -webkit-box-flex:1;
}

이번것은 -webkit-box-align:stretch; 를 알아보기 위한 예제입니다.

모든 박스들이 아래위로 꽉 차게 stretch 됐습니다.


반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
HTML5 시작하기  (0) 2011.12.07
WEB_APP/HTML5

HTML5 화면 Layout 잡기 -2 (Flexible Box Model)

2011. 12. 9. 02:42 | Posted by 솔웅


반응형
기본적으로 어제 사용했던 third.html 내용을 그대로 씁니다.
필요하신 분들은 지난 강좌에서 다운 받으 시면 됩니다.
고치실 부분은 css를 다른 것을 이용해 보죠.
    <link rel="stylesheet" href="main01.css">
이렇게 main01.css 파일을 이용합니다.

그리고 section과 aside 태그를 포함하는 div를 하나 더 만듭니다.
    <div id ="new_div">
    <section id="main_section">
        <article> ......
......
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    </div>
이렇게 new_div라는 아이디를 갖는 div가 새로 만들어 졌습니다.


다시 이런 심심한 화면에서 새로 시작합니다.
이제 main01.css를 작성해 볼까요?
*{
    margin:0px;
    padding:0px;
}
h1{
    font:bold 20px Tahoma;
}
h2{
    font:bold 14px Tahoma;
}
header,section,footer,aside,nav,article,hggroup{
    display:block;
}
여기까지는 이전 css와 같습니다.
이어서 body를 작성하겠습니다.

오늘 배울 내용은 Flexible box 입니다.
박스 안에 있는 텍스트들이 브라우저 크기를 조절하는 거에 따라서 잘리지 않고 자동으로 조절되는 기능입니다.
컴퓨터 브라우저 하고 모바일 브라우저의 크기가 다르죠?
이렇게 하면 컴퓨터 브라우저하고 모바일 브라우저에서 모두 자연스럽게 볼 수 있는 레이아웃을 디자인 할 수 있습니다.

이 기능을 구현하기 위해 WebKit 을 사용 할 겁니다.
body{
    width:100%;
    display:-webkit-box;
    -webkit-box-pack:center;
}
너비는 100%로 잡고 display는 웹킷 박스를 사용할 거라고 알려 줍니다.
그리고 box pack은 center로 잡구요.

자 여기까지 하면 위와 같은 화면이 나옵니다.
브라우저 크기를 최소 최대로 늘렸다 줄였다 해 보세요. 그러면 어떤 효과가 있는 지 알 수 있을 겁니다.
이 웹킷 webkit 을 지원하는 브라우저가 있어야 하는데요. 제 컴의 브라우저에서는 아주 훌륭하게 지원하네요. 아마 최신 브라우저에서는 웬만하면 다 지원이 될 겁니다.

다음은 가장 큰 div 태그에 효과를 넣겠습니다.
#big_wrapper{
    max-width:1000px;
    margin: 20px 0px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-box-flex: 1;
}
최대 너비와 마진을 정하고 여기에도 webkit-box를 사용한다고 알려 줍니다.
그리고 orient는 수평이 아니라 수직을 기본으로 잡고 flex는 1로 합니다. 1은 flex를 주라는 의미고 0은 주지 말라는 의미입니다.
우리는 flexible한 효과를 주기로 했으니까 1로 정합니다.

다음은 헤더 부분입니다.
#top_header{
    background: yellow;
    border:3px solid black;
    padding: 20px;
}
탑메뉴 부분은 아래처럼 해 주세요.
#top_menu{
    border:red;
    background:blue;
    color:white;
}
#top_menu li{
    display:inline-block;
    list-style:none;
    padding:5px;
    font:bold 14px Tahoma;
}
여기까지 하면 아래와 같이 나옵니다.

보시다시피 브라우저 크기를 늘리고 줄여도 box나 글자들이 짤림이 없이 display됩니다.

이번엔 selection과 aside를 포함하고 있는 new_div div 태그에 효과를 주겠습니다.
#new_div{
    display:-webkit-box;
    -webkit-box-orient:horizontal;
}
자 이렇게 하면 new_div 안에 있는 내용들은 위에서 아래로가 아니라 왼쪽에서 오른쪽으로 그 내용이 display 됩니다.
그리니까 section 태그 안에 있는 내용이 모두 표시되고 다음에 aside 태그 안에 있는 내용이 그 오른쪽에 표시 될 겁니다.
지난 시간에 잘 안됐던 기능이 이 테크닉을 이용하면 쉽게 구현 되네요.
나머지 부분도 아래와 같이 해 보세요.

#main_section{
    border:1px solid blue;
    -webkit-box-flex: 1;
    margin: 20px;
    padding: 20px;
}
#side_news{
    border: 1px solid red;
    width:220px;
    margin:20px 0px;
    padding: 30px;
    background:#66CCCC;
}
#the_footer{
    text-align:center;
    padding: 20px;
    border-top: 2px solid green;
}


아주 그럴듯한 웹 페이지죠?
브라우저를 한번 줄여 보세요.


오른쪽 green 부분은 박스가 줄어들지 않고 왼쪽 기사 부분만 박스가 줄어들죠?

이 테크닉을 웹 앱에 적용하면 아주 유용할 겁니다.
PC나 태블릿, 모바일 폰 모두 크기가 제각각인데 이 기능을 이용하면 어느 환경에서나 보기 좋게 화면을 보여 줄 수 있으니까요.

그럼 오늘은 여기까지 하겠습니다.

자신이 열심히 만든 소스를 공유하고 있는 보스톤의 Bucky 에게 고맙구요..
thenewboston.org
가서 댓글을 달던지 광고를 클릭하던지 여유 있으면 Donate를 하던지 합시다..

참 나는꼼수다 무리들 그저께 뉴욕에 있었고 오늘은 보스톤에서 행사가 있다는 것 같은데...
미국에서도 나꼼수 재밌게 듣고 있는데 이번주는 녹음 잘 하고 일찍 업로드 할 지 어떨지 궁금하네요...

4th.html

main01.css


반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
HTML5 시작하기  (0) 2011.12.07
WEB_APP/HTML5

HTML5 화면 Layout 잡기 -1

2011. 12. 9. 01:21 | Posted by 솔웅


반응형
오늘은 처음 다뤘던 HTML 소스로 작업하겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <header>
        <h1> Welcome to Dougy's HTML5. </h1>
    </header>
    <nav>
        <li> Home </li>
        <li> Tutorials </li>
        <li> Podcast</li>
    </nav>
    <section>
        <article>
            <header>
                <hgroup>
                    <h1> DDanzi in NY</h1>
                    <h2> come to Zuccotti Park with Pizza</h2>
                </hgroup>
            </header>
            <p> DDanzi guys have visited in Zuccotti park yesterday to encourage the occupier of Occupy Wall St. Protesters.</p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
        <article>
            <header>
                <hgroup>
                    <h1> Title of Article 2</h1>
                    <h2> Subtitle for Article!</h2>
                </hgroup>
            </header>
            <p> This is the 2nd article. </p>
            <footer>
                <p> -- written by Dougy </p>
            </footer>
        </article>
    </section>
    <aside>
        <h4> News </h4>
        DDanzi guys have visited Zucotty Park Yesterday.
    </aside>
    <footer>
        Copyright Bucky thenewboston.
    </footer>
</body>
</html>

이 화면은 헤더와 메뉴(nav) 그리고 메인 공간으로 section에 두개의 기사가 있고 한쪽에 aside 그리고 아래에 footer로 구성 돼 있습니다.
이것을 CSS를 이용해서 레이아웃을 잡을 겁니다.
지나번 글을 맨하튼 Zuccotti Park 갔다가 미국 방문한 나는 꼼수다 팀을 보고 난 다음에 작성해서 article에 나꼼수 팀이 피자 나눠준 얘기가 있네요.
저도 피자 한조각 얻어 먹고 왔어요. ^^



CSS를 적용하지 않은 화면은 이와 같습니다.

우선 CSS를 이용하기 위해서는 우선 div 태그로 body 태그 안을 모두 감싸고 각 레리아웃 구성 별로 id를 부여합니다. (div도 id를 부여 합니다.)
 <div id="big_wrapper">
    <header id="top_header"> ...
     <nav id="top_menu">...
     <section id="main_section">...
     <aside id="side_news">...
     <footer id="the_footer">...
  </div>
이렇게 HTML 파일을 수정합니다.

그 다음 main.css 파일로 가서 코딩을 시작합니다.
일단 모두 지우고 아래 내용을 코딩해 넣으세요.
*{
    margin: 0px;
    padding: 0px;
}
h1{
    font: bold 20px Tahoma;
}
h2{
    font: bold 14px Tahoma;
}
전체 마진과 패딩을 0으로 하고 h1 태그에는 볼드 20픽셀 사이즈 타호마 폰트를 적용하고 h2 태그에는 볼드 14픽셀 사이즈 타호마 폰트를 적용한다는 내용입니다.


이 내용을 적용하면 화면이 이렇게 변합니다.
지금은 h1,h2 태그에 대한 css 효과만 있습니다.

이제 레이아웃을 잡기 위해서 그룹화(블럭화)를 시킵니다.
header,section,footer,aside,nav,article,hgroup{
    display:block;
}
그리고 body내의 모든 내용을 기본적으로 center align으로 정합니다.
body{
    text-align:center;
}



이제 각 id 별로 css 효과를 주겠습니다.
우선 div는 id가 big_wrapper 였죠? 이 div 부터 주겠습니다.
#big_wrapper{
    border:1px solid black;
    width:1000px;
    margin: 20px auto;
    text-align:left;
}

이렇게 하면 1픽셀 테두리가 쳐진1000픽셀 너비의 사각형이 나올 겁니다.
윗쪽 마진은 20픽셀이고 왼쪽,오른쪽,아래쪽 마진은 자동적으로 정해 집니다.
그리고 글자들은 왼쪽 정렬이 됩니다.


그 다음은 top_header 에 효과를 주겠습니다.
#top_header{
    background:yellow;
    border: 1px solid blue;
    padding: 20px;
}
그리고 top_menu에는 아래와 같이 효과를 주구요.
#top_menu{
    background:blue;
    color:white;
}
그런데 이 Home, Tutorial, Podcast 가 좌에서 우로 한줄로 표시하고 싶습니다.
이게 메뉴거든요. 그래서 아래와 같이 li 태그에 효과를 줍니다.
#top_menu li{
    display:inline-block;
    list-style:none;
    padding: 5px;
    font: bold 14px Tahoma;
}



자 여기까지 완성이 됐습니다.
헤더가 있고 메뉴도 그럴듯하게 자리를 잡았네요.
이제 article에 대해 효과를 줘 볼까요?
main_section의 article이 왼쪽에 자리잡고 오른쪽에 조그맣게 aside가 자리 잡도록 하겠습니다.
#main_section{
    float:left;
    width:660px;
    margin:30px; /* 전체 너비가 1000 픽셀이므로 계산을 하면서 해야 함*/
}
#side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:34px;
    background:#66CCCC;
}
float 명령어를 잘 보세요.
줄단위로 표시하지 않고 좌우로 표시하려면 이 float를 사용해야 합니다.
그리고 the_footer를 아래와 같이 코딩하세요.
#the_footer{
    clear:both;
    text-align:center;
    padding:20px;
    border-top: 2px solid green;
}
여기서 clear:both의 의미는 좌우로 배치하는 것을 그만 두겠다는 의미입니다.
그러면 상하로 배치 되겠죠? footer는 가운데 정렬에 윗쪽에 녹색 줄이 그어 지게 됩니니다.


이렇게 나올 텐데요.. 좀 이상하네요. News 녹색 사각형이 Article 오른쪽에 있어야 되는데 밑에 있습니다.
파이어폭스, 사파리, 크롬 모두 저렇게 나오네요. 맥도 그렇고 윈도우즈도 그렇고...
뭐가 잘못 됐을까요? 브라우저 버전 문제인가?
네이버에서 다른 float 예제를 찾아서 해도 다 안 되더라구요.

일단 지금 제가 테스트 해 볼 시간이 없어서요. 다음으로 넘어가겠습니다.

다음은 각 article 을 보기 좋게 꾸미겠습니다.

article {
    background:#FFFBCC;
    border: 1px solid red;
    padding:20px;
    margin-bottom: 15px;
}
article footer {
    text-align:right;
}


조금 그럴듯하게 됐죠?
첫 강좌때 말씀 드린것처럼 원본 소스는 bucky 가 공개한 소스입니다. thenewboston.com으로 가면 원본 동영상 강좌를 보실 수 있습니다.

일단 오늘 강좌에선 float가 원하는 대로 작동 되지 않았네요.

여러분들도 한번 테스트해 보시고 제가 잘못한 부분이 있으면 댓글로 알려 주세요.
소스코드는 아래에 있습니다.

third.html

main.css

다음시간엔 새로운 CSS 태그로 오늘 한 웹 페이지를 좀 더 flexible 하게 표현하는 방법을 공부하도록 하겠습니다.
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
HTML5 시작하기  (0) 2011.12.07
WEB_APP/HTML5

HTML5 CSS 이해하기

2011. 12. 8. 07:55 | Posted by 솔웅


반응형
negation pseudo-class

어제 썼던 HTML 코드 그대로 쓰겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="mommy">
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
    </div>
</body>
</html>

여기에 일단 main.css에는 아래와 같이 넣으세요.
  * {color:blue;}

그럼 전부 파란색으로 나오겠죠?
*표는 all 을 뜻하는 거라는 걸 어제 다뤘었습니다.

       
HTML 파일을 아래와 같이 바꾸세요.
          <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
css는 아래와 같이 바꾸시구요.
  * {color:blue;}:
not(.bucky){color:red;}


css를 보시면 모든 색은 파란색으로 하는데 그 밑에 bucky가 아닌 것은 red로 하라고 돼 있습니다.
그래서 클래스 이름이 bucky가 아니고 sally인 것은 모두 빨간 색이 됐습니다.

CSS3 Selectors



이제 main.css에 있는 내용을 다 지우고 아래 내용을 넣어 보세요.
div> p {color:green}
브라우저를 실행하면 모두 녹색으로 돼 있을 겁니다.
이건 div 를 parent로 갖는 모든 요소에 적용하라는 내용입니다.
    <div id="mommy">
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
    </div>
이 div 태그 내에 있는 모든 내용에 적용되기 때문에 전부 녹색이 됩니다.
그러면 div의 parent는 뭘까요?
<body>
    <div id="mommy"> ....
이렇게 돼 있으니까 body가 div의 parent 이죠?
body> p {color:green}
이렇게 해 보세요.
그러면 녹색이 아니라 전부 검정색으로 나옵니다.
무슨 의미일까요?
body>는 body를 parent로 같는 요소들입니다. div는 p의 parent  이지만 body는 아닙니다. grand parent 라고 해야 할까요?
그래서 p에 이 css가 적용되지 않은 겁니다.

그러면 이제 다 지우고 css를 아래와 같이 넣어보세요.
p.bucky+p{color:blue;}

이렇게 나옵니다.
이 내용은 p 태그로 시작하는 것 중 bucky 가 아이디인 태그의 다음 태그에 내용을 파란색으로 하라는 겁니다.
좀 헛갈리나요?
        <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
html 이 이랬으니까
보시면 첫번째는 그 이전에 아무런 p 태그가 없었으니까 당연히 p태그 다음에 나오는 p가 아니라서 검정색
두번째는 bucky라는 클래스 다음에 오는 p태그가 아니죠? sally라는 클래스 다음에 오는 p 태그입니다. 그래서 검정색
세번째는 bucky 라는 클래스를 가지고 있는 p태그 다음에 오는 p 태그네요. 그래서 당연히 글자 색이 파란색으로 됩니다.
이제 이 + 의 의미가 뭔지 아시겠죠?
        <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="sally"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <span> testtesttest </span>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
위와 같이 하면 어떻게 될까요? 이러면 밑에서 두번째 줄의 p 태그는 bucky 클래스를 가진 p 태그의 바로 다음줄이 아니기 때문에 검정색이 됩니다.

그럼 이 상태에서 css 의  +를 ~로 바꿔 보세요.
그럼  밑에서 두번째줄도 파란색으로 됩니다.
~는 중간에 뭐가 있던지 그 이전에 있던 p 태그가 bucky 클래스 이면 효과를 적용하라는 명령어 입니다.

반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 두번째 CSS 이해하기 (pseudo-class)  (2) 2011.12.07
HTML5 시작하기  (0) 2011.12.07
WEB_APP/HTML5

HTML5 두번째 CSS 이해하기 (pseudo-class)

2011. 12. 7. 04:55 | Posted by 솔웅


반응형

오늘은 다시 빈 body 태그서부터 시작하겠습니다.
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
   
</body>
</html>
일단 body 태그 안에 아래 세줄을 채워 넣으세요.
    <p> 1st practice with css</p>
    <p> What is CSS?</p>
    <p> You don't know CSS?</p>

이 상태로 브라우저로 html파일을 불러오세요.

이렇게 나올 겁니다.
이런 연습때 사용했던 캡쳐 화면이네요. 이렇게 나오지는 않구요. 그냥 저 위에 있는 세 문장이 모두 검은 색으로 나올 겁니다.... 미쳐 캡쳐 받아 두질 못했습니다. ;;

이젠 main.css를  만들겁니다.
여러분이 사용하는 에디터로 main.css 파일을 만드세요.
그리고 아래 한줄을 넣어 보세요.
#tuna{color:red;}
이건 tuna라는 id를 가진 태그안의 내용 색을 붉은 색으로 하라는 내용입니다.
main.css를 저장하시고 아까 body안에 있던 내용을 아래와 같이 바꿔보세요.
    <p id="tuna"> 1st practice with css</p>
    <p> What is CSS?</p>
    <p> You don't know CSS?</p>

이렇게 하면 id가 tuna인 첫번째 줄이 빨간색으로 표시 됩니다.

#tuna{color:red;} -> .tuna{color:red'}
<p class="tuna">
이렇게 해도 똑같은 결과가 나옵니다.

첫번째는 id이고 두번째는 class 입니다.
main.css의 내용을 아래와 같이 바뀌면 어떻게 될까요?
p.tuna{color:red'}
이 경우 p 태그안의 클래스가 tuna인 경우만 적용 됩니다.
아래와 같이 해 보세요.
p[name]{color:blue}  -> main.css
    <p id="tuna"> 1st practice with css</p>
    <p name="larry"> What is CSS?</p>
    <p> You don't know CSS?</p>
이러면 두번째 라인만 파란색으로 표시 됩니다.
이 css코드 의미는 name이 있는 태그 내의 내용에 적용하라는 겁니다.

p[name="bucky"]{color:blue}  -> main.css
    <p name="sally"> 1st practice with css</p>
    <p name="larry"> What is CSS?</p>
    <p name="bucky"> You don't know CSS?</p>
이러면 세번째 줄만 이 css가 적용 됩니다. (attribute selector)

이렇게 css를 적용하는 여러 방법이 있습니다.
이 외에도 더 있습니다. 한번 볼까요?

p[name^="bacon"]{color:blue}  -> main.css
    <p name="baconsub"> 1st practice with css</p>
    <p name="mybacon"> What is CSS?</p>
    <p name="omgbacontuna"> You don't know CSS?</p>


p[name$="bacon"]{color:blue}  -> main.css

p[name*="bacon"]{color:blue}  -> main.css


첫번째 ^ 는 name이 bacon으로 시작되는 태그에만 적용합니다.
두번째 $는 name이 bacon으로 끝나는 태그에만 적용합니다.
세번째 * 는 name에 bacon이 들어가는 모든 태그에 적용합니다.

CSS를 제대로 활용하려면 1. 이런 기능이 있다는 것을 알아야 하고 2. 이런 기능을 많이 사용해서 숙달 돼 있어야 합니다. 3. 그래서 웹 화면을 디자인 할 때 CSS의 어떤 기능들을 적용할 지 설계할 수 있어야 합니다.
이 외에도 여러가지 기능들이 있는데요.. 나머지는 각자 Research 해 보세요.

이제 다시 body태그를 비워보겠습니다.

그 안에 아래 내용을 아래와 같이 넣어 보세요.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title> Dougy's HTML5 </title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
<body>
    <div id="mommy">
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
        <p class="bucky"> tuna and bacon...</p>
    </div>
</body>
</html>

main.css를 아래와 같이 고쳐 보세요.
p:nth-child(3){color:green;}

이 css는 p 태그의 3번째 child에 내용을 적용하라는 의미입니다.
보시는 대로 세번째 줄만 녹색이 됐습니다.
p:nth-child(odd){color:green;} 이렇게 고치면 홀수 번째 줄만 녹색이 됩니다.
p:nth-child(even){color:red;} 이것까지 추가해 보세요.


이 기능은 아주 유용하겠죠?

다음 강좌에서도 계속 CSS에 대해 알아 보겠습니다. 6
반응형
저작자표시 비영리 동일조건

'WEB_APP > HTML5' 카테고리의 다른 글

HTML5로 비디오 보여주기 Video Tag  (0) 2011.12.17
JavaScript 맛보기  (0) 2011.12.16
HTML5 CSS Animation 효과  (5) 2011.12.15
HTML5 CSS Text shadow, translate 효과 등등  (0) 2011.12.14
CSS3 Rounded Corner, 그림자 효과 사용하기  (0) 2011.12.12
webkit-box 좀 더 알아보기 (Flexible Box Model)  (6) 2011.12.10
HTML5 화면 Layout 잡기 -2 (Flexible Box Model)  (2) 2011.12.09
HTML5 화면 Layout 잡기 -1  (6) 2011.12.09
HTML5 CSS 이해하기  (0) 2011.12.08
HTML5 시작하기  (0) 2011.12.07
이전 1 2 3 4 5 다음

티스토리툴바