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

최근에 받은 트랙백

글 보관함

HTML5 CSS Animation 효과

2011. 12. 15. 05: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로만으로도 이런 기능이 가능하다고 하니 대단하네요.

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

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



반응형

Comment

  1. 질문요 2012.04.25 18:39

    html5에 대한 강의 매번 잘보고있습니다.
    좋은 강의 앞으로도 부탁드립니다 ㅎㅎ

  2. 엽이 2012.05.16 21:32

    이번 강좌편은 정말이지 놀라울따름이네요 ㅎㅎ
    잘 봤습니다.

    • 솔웅 2012.05.21 05:02 신고

      예 HTML5에는 기존이 HTML 에서는 생각할 수 없는 획기적인 기능이 많이 들어간 것 같애요.

  3. 질문요~ 2012.10.03 08:01

    강의 매번 잘 보고있습니다
    위 회전 효과의 경우
    박스는 가만히 있고,

    hover이 아닌 클릭시
    글씨만 회전하려면 어떻게 해야 합니까??

    아무리 해도 잘 모르겠습니다 ㅠㅜ

HTML5 CSS Text shadow, translate 효과 등등

2011. 12. 14. 06: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에서 이런 기능까지 적용이 된다면 간단한 애니매이션 기능도 구현할 수 있지 않겠어요?

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


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

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

반응형

Comment

Sencha Touch Road Show 를 다녀와서....

2011. 12. 13. 16:02 | Posted by 솔웅


안녕하세요?

오늘은 맨하튼에서 있었던 Sencha Touch Road Show를 다녀왔습니다.
9시30분부터 1시 30분까지 4시간 동안 진행 됐는데요.

중간에 샌드위치 스낵 커피 음료 등을 마음껏 먹을 수 있어서 좋았어요.
강의가 3개 있었는데 일반적인 HTML5 관련한 강의와 Sencha Touch 전반적인 사항 그리고 개발자가 나와서 예제 프로그램 설명하는 시간을 가졌었습니다.

자세히 필기하지 않아서 꼼꼼하게 정리는 못하지만 그나마 생각나는것들은 정리해 두는게 나중에라도 참고할 수 있고 더 좋을 것 같네요.

sencha 회사 홈페이지는 http://www.sencha.com/ 입니다.
products - sencha touch 메뉴로 가면 sencha touch를 다운 받을 수 있는데요.
지금은 1.0 버전과 1.1.1 버전이 다운 가능합니다.

이번에 참가자들에게 아직 공개 되지 않은 sencha touch 2.0 을 소개해 줬습니다.
위에 링크를 따라 가시면 다운 받으실 수 있을 겁니다.

그리고 조만간 Sencha Designer 도 개발 할 예정이라고 합니다.
Sencha Designer는 드림위버나 비쥬얼 베이직 같이 쉽게 개발할 수 있는 툴입니다.
Sencha 는 ExtJS 도 만들어 낸 회사인데요. 이미 ExtJS는 Ext Designer 가 나와 있습니다.

Sencha Designer가 궁금하시면 이 Ext Designer를 보시면 될겁니다. 같은 회사인데 비슷한 UI 일것 같네요.

오늘은 한 50여명이 참가했는데요. 강의마다 질문들이 꼬리를 이어서 이곳 개발자들의 열정을 느낄 수 있더라구요.

HTML- JAVA Script 관련 디버깅 툴을 누군가가 질문을 했는데 개발자가 Phantom JS 가 좋은 것 같다면서 추천해 주더라구요.
관심 있으신 분들은 가서 살펴 보세요.

예제를 다뤄준 마지막 강좌 파워포인트는 아래 올려 놓을 께요.


yelp.com 이란 곳에서 샌프란시스코의 store 정보를 얻어와서 보여주는 웹앱입니다.
그 contents는 한국에서는 별로 쓸모가 없었지만 개발 소스나 방법등을 배우기에는 좋을 것 같습니다.

앞으로 Corona SDK 와 HTML 5 , Sencha Touch 로 이 블로그를 채워 나갈 것 같습니다.
그리고 추가한다면 Phonegap이 있을 수 있겠구요.
좀 바쁘겠네요..

컨퍼런스가 증권거래소 근처에서 열렸었거든요.
끝나고 나오니까 증권거래소 앞 크리스마스 트리가 멋있게 서 있어서 한 카트 찍었습니다.

질문이나 의견 제안 어떤 것이든 댓글 달아 주세요. 저도 배우는 과정이니까 같이 알아보면 서로 도움이 될 것 같아요..

그럼..
반응형

Comment

  1. 사진을 두개 올렸는데 안 나타나네요..
    왜 그럴까?
    다른 분들도 안 나오나요?

  2. 지나가는 사람 2011.12.15 18:33

    사진 두 개 다 보이네요. 잘 보고 갑니다.

  3. 오우 2012.01.08 04:01

    잘 보고 갑니다~

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

2011. 12. 12. 06: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;



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

오늘은 간단히 여기까지 하구요.
다음 글에선 박스 안에 그라데이션 효과를 주는 법을 공부 하겠습니다.
반응형

Comment

웹앱 (WEB APP) 관련 메모 정리

2011. 12. 10. 09:21 | Posted by 솔웅


웹 앱을 공부하려고 했는데 파고 들면 들수록 이쪽도 알아야 될게 아주 많고 생각보다 분야가 다양하네요.
일단 잊어버리기 전에 관련 용어와 개념들을 정리한 다음에 차근차근 공부해 나가야 겠어요.

모바일 웹 , 앱, 하이브리드 앱에 대해 메모 해 둬야 겠습니다.

- 모바일 웹
   : 일반 브라우저를 통한 서비스
  장점
  : 기존 HTML을 그대로 사용할 수 있다.
  : 개발, 유지보수가 용이하다.
  : 개발비용이 일반 앱개발보다 저렴하다.
  단점
  : 폰의 다양한 센서, 기능을 활용하기 어렵다.
  관련 툴
  : JQTouch
    - 가볍고 빠른 기본 프레임웍, iOS에 최적화된 프레임웍
    - 확장 플러그인, 네이티브 웹킷 애니메이션, 간단한 테마 지원
  : JQueryMobile
    - JQuery 팀이 개발, 다양한 브라우저 호환성 지원, 멀티 스크린 지원
    - 많은 수의 UX 컨트롤 지원
    - 자동화된 프레임웍 구조
    - 모바일 웹서비스에 최적화
    - ARIA 표준지원
  : SenchaTouch
    - 강력한 라이브러리 제공, Sencha 스타일 컨트롤 제공
    - 자바스크립트 API 기반 개발, 모델 뷰 컨트롤러 구현(MVC)
    - iOS,Android,BlackBerry 6, 스마트폰과 타블렛 레이아웃 자동변환

- 앱
  : 일반적인 앱, 즉 Objective-C, JAVA, C#의 네이티브 프로그래밍 언어와 각 OS별 SDK 를 이용해서 개발
  장점
  - 폰의 다양한 센서, 기능을 활용할 수 있다.
  - 모바일웹에 비해 실행, 페이지 로딩 속도가 빠르다.
  단점
  - 개발 비용이 높다.

- 하이브리드 앱
  : 내부 콘텐츠를 HTML로 개발 (일반적으로 외부의 서버와 연동)
  : 외부 프레임은 네이티브 언어로 개발
   장점
   - OS별로 개발, 유지보수 부담이 작다.
   - 기존 HTML 형태의 콘텐츠를 사용할 수 있다.
   단점
   - 폰의 다양한 센서, 기능의 활용이 어렵다.
   특징
    - DB, 콘텐츠 중심의 서비스에 적합
    - 게임, 앱내 결제에는 부적합
    관련 툴
     - PhoneGap
       : 오픈소스 프레임웍, 플랫폼별 개발 탬플릿 제공
       : 6개의 모바일 플랫폼 지원, 네이티브 API 접근 지원, 플러그인 확정 지언
    - Appcelerator Titanium
       : 오픈소스 프레임웍, 대부분의 네이티브 API지원
       : 모바일, 데스크탑 앱 빌드, 웹 표준 기술 사용
       : 네이티브앱 빌드 (모바일), 통합 IDE 제공, Titanium Studio
    - Appspresso
       : 통합 개발환경 지원, Eclipse IDE, 향상된 네이티브 API 제공
       : iOS, Android, W3C Widget, JS frameworks 포함
       : WAC/Waikiki API, On The Fly Development
       : Plug-in Development Kit (PDK)

이런 구분과 특성과 개념과 용어와 관련 툴들이 있네요.
기본적으로 HTML5를 공부하고 다음에 웹앱 그리고 하이브리드 앱을 공부해 볼 생각입니다.

다음주 화요일(12월 13일 2011) 맨하튼에서 Sencha Touch 관련 컨퍼런스가 있습니다.
참가 신청해서 초청장 받았습니다.
무료이고 가면 커피도 주고 음식도 주고 관련 기술도 알려 준다고 합니다.


다녀와서 후기 올릴께요.

그럼...
반응형

Comment


어제 만들었던 소스코드도 그렇고...
웬만한 브라우저에서는 제대로 실행이 안 될 수 있습니다.
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 됐습니다.


반응형

Comment

  1. 내용 정리 잘 하셨네요^^ㅋ
    webkit box 공부 중인데 군더더기 없이 알짜정보만 쏙쏙 들어있어요
    잘 보고갑니다^^

    • 솔웅 2012.01.10 05:26 신고

      감사합니다.
      저도 공부하면서 올린거라 부족한 점도 많을 텐데...
      자주 들려주세요.. :)
      Thanks

  2. 익명 2012.02.11 01:53

    비밀댓글입니다

    • 솔웅 2012.02.12 05:46 신고

      <!DOCTYPE html>
      <style>
      .div {text-align: center; display:webkit-box; width:100% }
      .div button {50px }
      .div input {200px -webkit- box-flex:1 }
      </style>
      <div class=div> input button </div>

      이렇게 하면 가운데 정렬이 될 겁니다.
      <!DOCTYPE html>
      <style>
      .div { display:webkit-box; width:100% }
      .div button {50px }
      .div input {text-align: center; 200px -webkit- box-flex:1 }
      </style>
      <div class=div> input button </div>

      이렇게 하면 가운데 정렬이 안 될 겁니다.

      무슨 얘기냐 하면 첫번째 .div에서는 적용이 되는데 세번째 .div에서는 적용이 안 된다는 거거든요.

      그 이유는 input 은 태그 일 경우에 적용되는 겁니다. 글자가 input 이라고 해서 적용 되는게 아닙니다.
      <input ..... 이런식으로 input tag일 경우에 적용이 됩니다.

      정확히 구현하고 싶으신게 뭔지 잘 몰라서 그냥 코드만 보고 답변을 했는데요.

      제가 이해를 잘 못했다면 다시 질문을 해 주시면 또 답변 드릴께요.

      감사합니다.

  3. 스니키 2014.01.02 00:41

    너무유용한정보네요
    width가 지정되지않은 하나의 개체에만 webkit 으로 넘치지않게 100% 채워지는 방법을 찾다가 본문의 알짜배기 내용으로 성공했습니다. 감사드려요!!

  4. ㅁㄴㅇ 2017.05.16 21:48

    kid 아이디값이 모두 같아요 ㄷ

    <div id="kid1"> kid 1 </div>
    <div id="kid1"> kid 2 </div>
    <div id="kid1"> kid 3 </div>
    <div id="kid1"> kid 4 </div>


기본적으로 어제 사용했던 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를 하던지 합시다..

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


반응형

Comment

  1. 질문요 2012.04.24 23:58

    좋은강좌 잘봤습니다
    근데 파폭에서랑 익스플로어에서 실행했을때 aside 쪽 이 전혀 css가 자리이동이 먹질
    않는데 저만그런건가요??

    • 솔웅 2012.04.25 04:51 신고

      aside를 가지고 자세히 테스트해 보지는 않았지만 안되는게 맞을 겁니다.
      HTML5는 아직 표준으로 선정되지는 않았지만 곧 선정될 새로운 기술인데요. 지금은 구글하고 애플이 적극적으로 밀고 있습니다. 구글의 크롬 브라우저하고 애플의 사파리 브라우저에서는 많은 기능이 지원되는데 다른 곳에서는 안 되는 기능이 많이 있어요. 익스플로러는 더 많이 안 되구요. 그리고 크롬하고 사파리도 최신버전에서 더 많은 기능을 지원합니다.
      이 HTML5 기술은 스마트폰이 나오면서 더 각광 받고 있습니다.
      스마트폰의 브라우저는 모두 이 HTML5를 지원하는 최신 브라우저 거든요.
      PC에서 테스트 하시려면 크롬이나 사파리를 중심으로 테스트 하시고 다른 브라우저에서는 작동을 하는지 안하는지 점검 하시는 방법으로 개발 하셔야 할 겁니다.
      익스플로러가 대세인 한국에서는 아직 HTML5로 전체 웹사이트를 개발하는건 무리겠죠. 모바일 웹은 가능할 테구요....

HTML5 화면 Layout 잡기 -1

2011. 12. 8. 08: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가 원하는 대로 작동 되지 않았네요.

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

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

Comment

  1. 아 예 그렇군요. float 쪽이 익숙하지 않았었는데...
    감사합니다.

  2. hjp 2011.12.26 22:29

    #side_news{
    float:left;
    width:220px;
    margin:20px 0px;
    padding:30px;
    background:#66CCCC;
    }
    으로 고치면 오른쪽에 나옵니다.

    • 엽이 2012.05.14 18:16

      padding 사이즈의 문제였네요.

  3. 엑슈바이츠 2012.06.22 23:55

    많은 도움이 되었습니다.
    정말 감사합니다.

  4. qorgh 2012.09.03 17:35

    lang=en 를 반드시 설정해줘야하는건가요

    • 솔웅 2012.09.04 12:49 신고

      글쎄요. 반드시 해야 될 것 같지는 않네요.
      제 기억엔 HTML5 튜토리얼에 이게 반드시 들어가야 된다고 돼 있지 않은 것 같고.
      한번 직접 해 보세요.
      lang=en 부분을 없애보기도 하고 다른 언어를 넣어 보시기도 하고...
      예를 들어 lang="ko" 같은...
      검색해서 여기에 들어갈 수 있는 언어가 뭐가 있는지도 알아보시고 또 lang="ko" 가 들어가지 않은 상태에서 한글을 사용하면 어떻게 되는지 같은것도 직접 해 보시면 아주 많이 도움이 되실 겁니다.

HTML5 CSS 이해하기

2011. 12. 7. 14: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 클래스 이면 효과를 적용하라는 명령어 입니다.

반응형

Comment

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

2011. 12. 6. 11: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
반응형

Comment

  1. 쿠미야 2012.01.25 17:50

    좋은 자료 잘 보고 갑니다.
    내용중에 아아디를 클래스 변경할때
    #tuna -> .tuna 로 변경되어야 하는데
    #tuna -> .class 로 선언을 하셔서 오타가 아닌가 해서
    코멘트 남깁니다 ^^

    • 솔웅 2012.01.26 04:51 신고

      아.. 예.. 그러네요.
      수정해 놨습니다.
      이렇게 바로 잡아 주셔서 감사합니다 :)