2009/04/15 13:04 IZECT RIA LAB/ETC..

웹 표준 가이드북 - 실전 CSS 레이아웃

  1. CSS 제대로 사용하기.
    1. HTML의미 바로 알기
      • HTML은 markup language이다.
      • 마크업 : 눈으로 보이는 글자 외에 원고에서 특정 부분의 의미가 무엇인가를 설명하고 그것을 표기하는 것.
      • 일반적으로 작업자들은 HTML을 markup하는 용도보다는 겉으로 어떻게 문서가 보이는 지 만을 나타내기 위해 사용.
    2.  HTML과 CSS의 관계

      • HTML : 컨텐츠의 내용과 구조를 표시.

      • CSS : HTML으로 제작된 페이지를 어떻게 표현해 내는지에 대한 것을 담당.

      • CSS의 가장 큰 목적은 문서의 내용과 표현을 분리하는 것.

  2. CSS의 개념 및 소개

    1. CSS(Cascading Style Sheet)란 무엇인가?

      • CSS : 구조적으로 짜여진 문서(HTML, XML)에 style(글자, 여백, 레이아웃) 등을 적용하기 위해서 사용하는 language

    2. CSS의 선언


      • p.text {

         margin: 0;
        }
      • p.text : 선택자
      • margin:0; : 선언부
      • p.text, 
        span.name {
         color: #666;
        }
         
      • 선택자는 콤마로 구분 가능하다.
      • 선언부의 내용을 두가지 이상의 요소에 적용할 때 사용한다.
      • h1 { font-weight: bold }
        h1 { font-size: 3em }
        h1 { color: #333 }
        h1 { margin: 1.5em 0 1em }
        h1 { padding: 0 0 0 8px }
         
      • 위의 경우 아래처럼 세미콜론으로 구분하여 선언 가능.
      • h1 {
         font-weight: bold;
         font-size: 3em;
         color: #333;
          margin: 1.5em 0 1em;
          padding: 0 0 0 8px;
        }
    3.  CSS 선택자
      1. 일반 선택자
        • 공용 선택자 * 모든 태그를 지정
          타입 선택자 A 태그 A를 지정
          클래스 선택자 .A 클래스가 A인 태그를 지정
          ID선택자 #A 아이디가 A인 태그를 지정
           
      2. 복합 선택자
        • 하위 선택자 A B 태그 A로 감싸져 있는 태그 B를 지정
          자식 선택자 A > B 태그 A로 감싸져 있는 태그 B중 한 단계 밑에 것을 지정
          인접 선택자 A + B 태그 A와 B가 연속으로 나와 있는 것을 지정
      3.  가상 클래스 선택자
        •  
          :first-child 선택자 A:first-child 태그 A로 감싸져 있는 가장 처음 태그를 지정
          언어 선택자 A:lang(B) 태그 A중 언어가 B로 설정된 것을 지정
          링크 선택자 A:link 태그 A중 링크가 걸려있으면 지정
          A:visited 태그 A중 링크가 걸렸고 사용자가 이미 클릭한 태그를 지정
          동적 선택자 A:active 태그 A중 사용자가 마우스를 누르고 있는 태그를 지정
          A:hover 태그 A중 사용자가 마우스 포인터를 위에 올려 놓은 태그를 지정
          A:focus 태그 A중 사용자의 키보드 입력을 받는 태그를 지정
      4.  동적 선택자
        •  
          :first-line 선택자 A:first-line 태그 A의 문단중 첫번째 줄을 지정
          :first-letter 선택자 A:first-letter 태그 A의 문단중 첫번째 글자를 지정
          :before 선택자 A:before 태그 A의 문단 앞을 지정
          :after 선택자 A:after 태그 A의 문단 뒤를 지정
    4.  CSS 선언 방법
      1. 외부 선언
        •  <link rel="stylesheet" type="text/css" href="myCss.css" /> 의 형식
      2. 엘리먼트에 직접 선언
        • <div style="padding: 10px; border: 1px solid #eee;"> 의 형식
      3. 사용자 정의 형식
    5. CSS 적용의 체크 포인트 4가지
      1. XHTML이 표준 문법이어야 한다.
      2. XHTML 문서가 의미와 구조적으로 구성되어야 한다.
      3. CSS가 표준 문법이어야 한다.
      4. CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
  3. CSS 레이아웃 기초
    1. 레이아웃에 사용되는 두가지 속성 position vs. float
      1. position
        • position은 static, relative, absolute의 세가지 값을 가질 수 이싿.
        • static : 기본값
        • relative : static과 같지만 offset을 지정 할 수 있고, 하위 엘리먼트 offset의 기준점이 된다.
        • absolute : 화면상에서 다른 컨텐츠에 위치에 영향을 미치지 않고 위치 지정이 가능하다. 보통 레이어라고 불리우는 것.
      2. float
        • float은 left, right, none의 세가지 값을 가질 수 있다.
        • left : 엘리먼트를 좌측으로 배치함.
        • right : 엘리먼트를 우측으로 배치함.
        • none : float시키지 않음.
크리에이티브 커먼즈 라이선스
Creative Commons License

'IZECT RIA LAB > ETC..' 카테고리의 다른 글

넷빈즈(NetBeans)로 JavaFX파일 웹에서 실행하기~!  (0) 2009/07/28
Java FX Lesson 1 : 자바 스크립트와 함께 시작하기  (0) 2009/07/23
웹 표준 가이드북 - 실전 CSS 레이아웃  (0) 2009/04/15
웹 표준 가이드 북 - 구조적 XHTML 사용 방법  (0) 2009/04/13
실전 웹 표준 가이드 - XHTML 의 소개  (0) 2009/04/13
Thead, tbody, tfoot 를 사용하는 이유  (2) 2009/04/07
Posted by 메튜장
 TAG Web 2.0, xhtml, 웹표준, 웹표준화, 표준화
트랙백1 댓글0

트랙백 주소 http://izect.kr/trackback/278 관련글 쓰기

  1.  삭제

    Subject: 군중소싱

    2009/05/18 10:51 | Tracked from 변화를 꿈꾸는 그대에게

    잼있네요. 아시는 지는 모르겠지만... Wired라는 잡지가 인터넷 기술 변화와 그로 야기된 사회 변화의 트렌드를 따라잡는 데는 최고의 잡지 중 하나입니다. OLPC 운동의 주창자이자 MIT 미디어랩 창시자인 네그로폰테가 공동 창간자였고 롱 테일로 유명한 크리스 앤더슨이 예전에 편집자였죠. 거기서 나온 비디오 중에... 잼있는 게 있어서 올립니다. 한국어 자막도 달려있어요. (사실 제가 가끔 번역 봉사하러 가는... 사이트에서 발견한 겁니다.) 참고..

댓글을 달아 주세요

2009/04/13 19:26 IZECT RIA LAB/ETC..

실전 웹 표준 가이드 - XHTML 의 소개

  1. XHTML이란?
    • HTML 4.01 규약에 거의 준한다.
    • 일반 HTML에 비해 좀더 명확하고 구조적인 특징을 가지고 있다.
    • XSL을 함께 사용하면 브라우저에 사용자의 새로운 태그를 표시할 수 있다.
  2. XHTML의  장점
    • 호환성 및 확장 가능성
    • 유지 비용의 감소 및 재생산성 확대
    • 가벼운 로딩 속도
  3. XHTML 문서의 구조
    1. HTML 2.0 표준 문서 형식
      • <! DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
    2. HTML 3.2 표준 문서 형식
      • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
    3. HTML 4.01 표준 문서 형식
      • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      • "http://www.w3.org/TR/html4/strict.dtd">
      • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      • "http://www.w3.org/TR/html4/loose.dtd">
      • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
      • "http://www.w3.org/TR/html4/frameset.dtd">
    4. XHTML 1.0 표준 문서 형식
      • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
      • "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    5. XHTML 1.1 표준 문서 형식
      • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
      • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  4. 표준 문서 구조
    • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    • "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    • <html xmlns=http://www.w3.org/1999/xhtml xml:lang="ko-KR">
    • <head>
    • <title>...</title>
    • </head>
    • <body>
    • ...
    • </body>
    • </html>
  5. XHTML 일반 문법 준수
    • 정확한 문서 구조 준수
      • 문서의 루트 요소는 html이 도어야 하며, 이 html 요소는 xhtml 네임스페이스를 지정해야 한다.
      • <html xmlns="http://www.w3.org/1999/xhtml">
    • 모든 문서는 완벽하게 중첩되어야 한다.
      • 모든 요소들이 완벽하게 내포 되어야 하는 것은 필수적이다.
    • 모든 속성 값은 인용 부호("나')로 묶어야 한다.
    • 모든 요소와 속성은 소문자여야 한다.
    • 모든 요소는 닫아야 한다.

      •  DTD에서 EMPTY로 선언된 경우를 제외하고 모든 요소에는 종료 태그가 포함되어야 한다.

      • 빈 요소에는 종료 태그가 포함되거나 시작 태그가 />로 끝나야 한다.

      • 또한, XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다.

    • 모든 속성값은 속성이 함께 선언되어야 한다.

    • 모든 Script 및 Style 요소에는 type 속성이 포함되어야 한다.

    • 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.

    • 모든 script 내의 태그는 Escape 시켜야 한다.

      • XHTML에서, 스크립트와 스타일 요소들은 #PCDATA 컨텐츠를 갖는 것으로 선언된다.

      • 결과적으로, <과 &는 마크업의 시작으로 처리되고, &lt;과 &amp;와 같은 개체들은 XML프로세스에 의해 각각 <M과 &로의 개체 참조로서 인식되므로 CDATA로 마크업 하여 표시하는 게 좋다.

      •  <script type="text/javascript">

        • <![CDATA[

        • ... <h1 데이터</h1>

        • ]]>

      • </script>

    • 모든 문서 내 URL에서 &를 쓰면 안 된다.

      • HTML 문서 내에서는 &대신 &amp;를 사용한다.


(본 내용은 KIPA에서 제공한 실전 웹 표준 가이드의 내용을 제가 정리한 것입니다.)
크리에이티브 커먼즈 라이선스
Creative Commons License

'IZECT RIA LAB > ETC..' 카테고리의 다른 글

Java FX Lesson 1 : 자바 스크립트와 함께 시작하기  (0) 2009/07/23
웹 표준 가이드북 - 실전 CSS 레이아웃  (0) 2009/04/15
웹 표준 가이드 북 - 구조적 XHTML 사용 방법  (0) 2009/04/13
실전 웹 표준 가이드 - XHTML 의 소개  (0) 2009/04/13
Thead, tbody, tfoot 를 사용하는 이유  (2) 2009/04/07
Dom 구조 이용한 XML 처리 예제  (0) 2008/12/06
Posted by 메튜장
 TAG Web 2.0, xhtml, 웹 표준, 웹표준
트랙백0 댓글0

트랙백 주소 http://izect.kr/trackback/276 관련글 쓰기

댓글을 달아 주세요

2008/03/28 11:53 IZECT SOCIAL LAB/웹

웹 2.0과 온라인게임의 접목

사용자 삽입 이미지

최근에 회사에서 웹2.0에 대한 연구를 계속 진행중에 있다. 연구하면 할수록 흥미있는 분야가 웹 2.0이 아닌가 싶다. 모든 것이 하나의 개인 혹은 기업이 아닌 이 모든 것이 사용자들, 인터넷 네티즌들의 참여로 이루어지기 때문이다.

내가 종사하고 있는 게임 업종. 물론 나는 개발쪽은 아니지만 다양하게 MMORPG와 웹 2.0에 대한 접목에 대해 생각하고 있다. MMORPG게임은 사용자 참여로 모든 것이 이루어지는 게임이다. MMORPG는 유저가 없으면 아무리 기획자가 노력해서 컨텐츠를 제공한다 한들 재미가 없어진다. 유저가 없으면 게임을 유지하기도 힘들다. 회사는 서서히 기울어 간다. 게임 개발사는 유저가 즐길 수 있는 기반(platform)을 깔아놓고 유저의 참여를 기다린다.

웹 2.0 사이트도 마찬가지로 기반을 깔아두고 유저의 참여를 기다려서 적극적인 유저의 참여로 닷컴이 사느냐 죽느냐가 결정된다. 그리고 웹 2.0이나 MMORPG(여기서는 MMORPG라 했으나, 모든 온라인 게임이 이에 적용된다 생각한다.)나 유저의 참여와 입소문으로 계속적으로 성장해 나가는 것이다.

마케팅에 대해 연구하면서, 이제는 더이상 돈을 들여 홍보하는 시대는 지났다는 생각이 계속 들었다. 세상은 레드오션으로 가득 차 있고, 번뜩이는 아이디어 없이는 시장에서 살아남기 힘들다. 제품의 퀄리티도 중요하지만 제품의 퀄리티를 생각하기 이전에 사람들이 진정 바라는 게임이 무엇인가에 대해 연구하고 이를 제품에 적용하는 것도 상당히 중요하다 생각한다.

게임이든 웹2.0사이트든 모든 것은 유저가 결정한다는 점에서 특히나 메리트가 있는 것 같다. 세상은 민주주의 사회이다. 더 이상 삼성같은 대기업이 1위에 있으라는 법은 없다. 대기업 조차도 이제는 국민에게 어떻게 하느냐에 따라 기업의 생사가 갈라진다.

약간 주제를 벗어난 것 같은데, 어쨋든 지금 내가 연구하고자 하는 것은 성격도 비슷한 웹 2.0과 MMORPG의 조화이다.

작년에 많은 온라인게임 2.0(?) 관련 논문, 글, PT자료 등을 보았다. 허나 게임의 기술, 즉 DX나 API를 활용하여 개발한 클라이언트의 기술(즉 게임내에서 유저가 놀 수 있는 기술적인 기반)에 대한 사용자 참여적인 접목을 시켜본 글은 없었고 대부분이 MMORPG의 웹 사이트에서 위키를 운영한다니, 블로그를 운영한다니, 사용자 커뮤니티를 활성화한다니, RSS를 제공한다니 등의 지금은 너무나도 일반적인 서비스들을 알려주고 있었다.

나는 이러한 웹 사이트 내의 커뮤니티, 정보제공 적인 부분에서의 사용자 참여를 유도하고자 하는 것이 아니다. 왜냐하면 유저는 결국 게임을 플레이 함으로써 게임 "내에" 정보를 축적하지, 게임 사이트에 정보를 축적하는 것은 아니다. 많은 유저들이 게임을 하는 이유는 게임 내의 자신의 캐릭터에 대한 대리 만족 혹은 게임 내에서의 커뮤니티이다.

이 글에서 나는 웹 2.0과 온라인게임의 접목에 대한 연구 결과를 말해주려는 것은 아니다. 이제 시작일 뿐이다. 마케터를 꿈꾸는 사람으로써, 그리고 최신 기술에 대한 프로그래밍적 기술을 갖추고 싶은 사람으로써. 유저가 진정 원하는 것이 어떤 것인지 유저의 입장에서 바라보고 설계하도록 노력해 보려 한다.

크리에이티브 커먼즈 라이선스
Creative Commons License

'IZECT SOCIAL LAB > 웹' 카테고리의 다른 글

e세대에 편리한 구글의 서비스 정리 - 1. 지메일  (0) 2009/05/14
MSN 9버전 베타가 나왔습니다.  (0) 2008/12/30
구글 문서도구여 내가 간다, MS Office Live 베타  (0) 2008/12/30
인터넷 브라우저도 내맛대로, 웹마와 크롬 브라우저  (0) 2008/12/25
미투데이 vs 제로보드  (0) 2008/12/23
웹 2.0과 온라인게임의 접목  (2) 2008/03/28
Posted by 메튜장
 TAG MMORPG, Web 2.0, 온라인게임, 온라인게임2.0, 접목
트랙백0 댓글2

트랙백 주소 http://izect.kr/trackback/50 관련글 쓰기

댓글을 달아 주세요

  1. Favicon of http://kooh.tistory.com/ BlogIcon 쿠 2008/03/29 02:57  댓글주소  수정/삭제  댓글쓰기

    저도 예전부터 웹2.0에 관심이 있었고 프로그래밍도 게임에 좀 손을 댔더니 게임하고 접목하는 여러 가지 상황을 생각하게 되더군요. 그중 제가 뽑은 좋은 생각 2가지를 말해볼게요.

    [게임->웹] 게임의 아바타를 웹으로 이동 UCC와 같이 거제가 가능하도록 하는 것입니다. 예로 마비노기는 자기 사이트 한정이지만 게시판을 보면 자신의 아바타를 볼 수 있습니다. 이거 정말 매력적이지요. 잘만 만들면 유저는 자신의 캐릭터를 웹에 거제 활용 할 수 있고 회사는 게임의 홍보를 노릴 수 있으니 좋지 않을까요? 물론 아바타만 볼 수 있게 하는 게 아니라 여러 가지 기능을 넣으면 좋겠죠? 이건 정말 많은 사람들이 원하는 부분 일겁니다. [웹->게임] 반대로 아까 말한 아바타 웹 위젯등과 같은 곳에서 게임과 연동을 시키는 것을 생각해도 좋을 듯합니다.
    그리고 유저는 게임 속에서 커뮤니티를 하는 것을 우선으로 삼지만 꼭 그렇지만은 않다는 것을 염려 해야죠. 오프라인 상태에서 참여를 하려면 결국 웹 게시판으로 가니까요. 이점을 잘 살펴 생각해봐야죠.

    음 다시 살펴보니까 아이지님은 웹 2.0 과 같이 게임에서도 사용자가 직접 창작을 하거나 놀 수 있다는 말로 들리네요. 즉 게임이 직접 웹 2.0과 연개 한다는 말이 아니고 그것과 유사한 환경을 게임 내에서도 만들자고 하는 것 같은데 이것이 맞나요?
    그것도 아주 오랫동안 생각 해둔 것이 있죠. 바로! 캐릭터의 스킨제작! 이것이 제일 매력적이죠! 제가 게임을 만들면 반드시 넣을 시스템! 이번에 팡야3 가 나왔는데 제일 마음에 드는 건 옷을 마음껏 색칠할 수 있다는 건데 역시 사용자들은 별거 다 만드는 군요. ㅎㅎ
    아직까지 모델링 데이터는 못 만지고 매우 제한적이지만 이정도도 감지덕지 하죠.
    예전에 일본인이 팡야를 건드려 마음껏 스킨 제작 하는 걸 보고 정말 가지고 싶었는데 뭐 차차 지원 해주겠죠. http://shiro.tistory.com/133
    아니면 웹에서는 전략게임(오게임, 부족전쟁)을 하고 pc게임 내에서는 그 역동적인 세계관에서 캐릭터를 키워나가는 것도 재미있을 것 같네요. 너무 어렵나?
    이런 추세를 따르는 게임이 점점 많아 질것으로 예상 되는데요. 일단 표면적으로 나온 것으로 아이온이나 라이프온라인은 플레이어에 의해 항상 세계관이 변한다고 하고 마비노기의 작곡 시스템도 여기에 둘 수 있고 홀릭의 UCQ라던가 UCD도 포함되고 음 이런 것이 제일 극대화 된 것으로 세컨드라이프를 둘 수 있겠네요.
    이런 것이 게임 내 2차 창작물이 아닐까요? 맵을 만지거나 퀘스트에 손을 댄다던가 액션이나 행동 같은 것도 만들면 정말 좋을 것 같은데 어쨌거나 2.0 하면 사용자가 직접 참여 하거나 손쉽게 접근 하는 거겠죠? 이런 너무 두서가 없죠?　저도 좀 더 찾아보고 생각해봐야겠네요. 사용자들이 진정 원하는 것은 무엇인가에 대해서요.

    참고가 되었으면 좋겠습니다.

    • 아이지 2008/04/01 11:52  댓글주소  수정/삭제

      이야, 좋은말씀 감사합니다. 쉽게 공유하기 힘든 생각일텐데요 ^^
      커스토마이징.. 참 중요하죠. 사람들이 다들 다른 게임 하는 이유가 자기 취향 따라, 끌리는 대로 게임을 하는게 아니겠습니까~ 그런 취향을 여러가지로 뽑아 놓는다면 그 게임에서는 여러가지 색이 나오는 거겠죠 ^^
      다만 중요한건 하도 요샌 겜들이 많으니, 특색 있는 색을 찾으라는 것이 결국엔 불루 오션 시장을 찾으라는 말이죠. 그러나, 고객이 원하는 커스토마이징 또한 상당히 중요하다고 봅니다. 덧, 유저가 개발에 적극 참여할 수 있다면 그거야 말로 윈-윈이 아닐까 싶네요. 물론 중간에 조율 과정은 필요하지만 ^^

      팡야.. 골프겜 아닌가욥?;; 전 캐주얼은 잘 안해서 ^^; 와우나 아바를 주로 하지요 ㅋㅋ 요새는.. 일바뻐서 암것도 못하고.. ㅜㅜ

이전버튼 1 이전버튼


블로그 이미지
html5,모바일웹,웹앱,자기브랜드,시간관리 등을 다룹니다.
메튜장

Yesterday256
Today21
Total477,759
HTML5 Powered with Connectivity / Realtime, Device Access, and Semantics

My view

달력

 « |  » 2012.02
일 월 화 수 목 금 토
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29