Digital Bohemian | 'CSS' 태그의 글 목록
Digital Bohemian 위치로그  |  태그  |  미디어로그  |  방명록
icon CSS 에 해당하는 글6 개
2010.09.11   [UI 개발자가 되자] HTML & CSS편
2009.06.18   내가 주로 사용하는 Flex CSS 스타일 선택 방법 (1)
2007.12.01   css 네비게이션 메뉴
2007.11.30   CSS핵(hack) 정리
2007.11.30   CSS 핵 - 브라우저별 CSS 적용
2007.11.22   브라우져 화면의 100% 높이를 유지하는 레이아웃


icon [UI 개발자가 되자] HTML & CSS편
2010년 | 2010.09.11 12:30
 원래  Server Side 개발자였던 나는 지금  Daum에서 Client Side 개발자로써  FT라는 직군으로 일을 하고 있다.  FT라 함은 Frontend Technology라 하여 미들 서버에서 전달 받은 데이터를 가지고 Javascript, Java templates 등을 이용하여 사용자가 볼수 있는  UI를 개발함을 말한다. 

작년 입사시엔  HTML Markup 과  css styling도 같이 작업했었지만 현재는 팀이 따로 분리되어  완료된  Markup 을 가지고 미들 데이터와 연동하는 작업만 하고 있다. 

그 옛날 코더라고 불리며 이 바닥에서 큰 인정을 못받고 무시당하는 직군으로 여겨졌던것도 이젠 옛말이고 웹 퍼블려서로서,  Javascript UI 개발자로써 예전보단 인정받고 대우받는 분위기로 흘러가고 있다. 

그런 의미에서 오늘은 이 방향으로 나아가고자 하는 예비 개발자를 위해 내가 공부했던 책들을 간략하게 살펴보고자 한다. 
아마 Frontend에 관심이 있었다면 아래 책들은 한번씩 보지 않았을까 싶은데, 이책 저책 많은 상황에서 나름 실용적인걸로 추려보았으니 한번 봐주길 바란다. 

1.  HTML & CSS

1-1.  실용예제로 배우는 웹 표준 (http://www.yes24.com/24/goods/1522512)



이 책은  HTML에 관해 아무런 지식이 없다면 강력추천하는 책!
내용이 간결하고 간단한 예제들로 구성되어있고  HTML의 구조 이해를 하기위해선 더없이 훌륭한 책인듯.

1-2.  CSS 마스터 전략 (http://www.yes24.com/24/goods/2306350?scode=032&srank=9)



`실용예제로 배우는 웹 표준`가 기본기를 다져준 책이였다면 이 책은 실제 업무에서 활용되는 다양한 요소들 ( CSS  selector,  box model, floating, IR(image replacement)  등)에 대해 설명하고 있고, 기본기를 통해 다져진 지식을 이용하여 좀더 다양한 UI를  Markup으로 작업할수 있는 예제, 각 브라우져별 버그 및 핵, 필터 등을 소개하여 좀더 심도있게 공부해볼수 있다. 
이 책은 반드시 한번은 읽어야 할것이다. 

1-3. 웹2.0을 이끄는 방탄웹 (http://www.yes24.com/24/goods/3280568?scode=032&srank=13)



이제  Markup 이 손에 익는가? 어느정도 코드를 보면 흐름이 읽혀지나? `실용예제로 배우는 웹표준`, ` CSS 마스터 전략`을 읽은 상태에서 그 지식을 이제 어떤식으로 활용할지 고민인가?
그렇다면 이제 마무리 하자. 방탄웹은 위 두 책에서 나온 지식과 정보를 이용하여 실무에서 사용할법한 예제들을 많이 나열하고 있다. 
이 책까지 완독한다면 실제 어떤 사이트라도  Markup 구조가 대충 머리속에 어떤식으로 작업이 되었는지 그려질것같다. 

1-4.  웹표준 교과서 (http://www.yes24.com/24/goods/2634462?scode=032&srank=3)



이 책은 위의 책들과는 달리 레퍼런스 북이라 생각하면 되겠다. 
CSS의 각각 property 들의 에 대한 상세한 설명과 values 들의 설명이 담겨져 있는 책이다. 
개발을 하고자 할때 다양한 values 에서 어떤것이 자기가 개발하는데 맞는값인지 찾아보는데에는 이만한게 없을꺼 같다. 

참고로 난 http://www.w3schools.com/css/css_reference.asp 와  http://www.quirksmode.org/css/contents.html  이곳에서도 많은 도움을 받고 있다. 

요즘 게임 개발사, 포털, 중견, 소기업 막론하고 많은 회사에서  UI 개발자를 많이 채용하고 있는 상태이다. 또한 Flash로만 작업할수 있었던 고급 animations이  HTML5, CSS3 로도 가능해져가고 있다. 
이런 상황이라면 UI 개발자의  needs는 더욱더 커질수 밖에 없다. 

많은 친구들이 이 분야에 도전하여 멋진 웹사이트와  시멘틱웹을 구축하는데 있어 한몫해줄수 있기를 기대해보며 이 글을 마치려 한다. 

 ps.다음번엔 Javascript 책 추천들어갑니다~


저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, HTML, UI 개발자
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon 내가 주로 사용하는 Flex CSS 스타일 선택 방법
FLEX | 2009.06.18 10:38
플렉스 CSS를 이용하여 스타일을 적용하는 방법은 여러가지가 있다. 
그 중 내가 자주 사용하는 방법에 대해서 포스팅 하려고 하는데 상황은 다음과 같다. 

1, 2, 3, 4, 5, 6, 7, 8, 9, 10 이라는 이미지가 있고, 동적으로 image 태그에 embed 시킬일이 있을경우.

나는 개발할때 보통 이미지를 MXML이 아닌 CSS에 embed 시켜놓고 stylemanager를 통해 load하여 내부 리소스를 사용한다. 

일단 구현 방법..

test.css

CountDown {
count1: Embed(source="assets/images/quizplay/label/count_1.png");
count2: Embed(source="assets/images/quizplay/label/count_2.png");
count3: Embed(source="assets/images/quizplay/label/count_3.png");
count4: Embed(source="assets/images/quizplay/label/count_4.png");
count5: Embed(source="assets/images/quizplay/label/count_5.png");
count6: Embed(source="assets/images/quizplay/label/count_6.png");
count7: Embed(source="assets/images/quizplay/label/count_7.png");
count8: Embed(source="assets/images/quizplay/label/count_8.png");
count9: Embed(source="assets/images/quizplay/label/count_9.png");
count10: Embed(source="assets/images/quizplay/label/count_10.png");
}

test.mxml

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" creationComplete="onCreationComplete()">
public function GetCSSResource(parentName:String, childName:String):Class 
{
var imgClass:Class;
var cssClass:CSSStyleDeclaration = StyleManager.getStyleDeclaration(parentName);
imgClass = (cssClass.getStyle(childName)) as Class;
return imgClass;
}

private function onCreationComplete():void {
      img.source = GetCssResource("CountDown", "count1");
}
<mx:Image id="img" />
</mx:Application>

분명 찾아보면 다른 더 좋은방법도 많겠지....
저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, Flex, getStyleDeclaration, StyleManager
arrow 트랙백1 | 댓글1
ray ban 2013.04.01 20:31 신고 L R X
아름다운 여자가 해바라기하는 걸 좋아해요

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon css 네비게이션 메뉴
CSS | 2007.12.01 11:49
http://www.alvit.de/css-showcase/css-navigation-techniques-showcase.php
http://del.icio.us/coti22/css?setminposts=5
http://www.dynamicdrive.com/style/
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, css 메뉴, 네비게이션
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon CSS핵(hack) 정리
CSS | 2007.11.30 11:15
http://www.nmindplus.com/2006/06/28/css-hack/
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, CSS 핵, filter, hack, 브라우져 화면
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon CSS 핵 - 브라우저별 CSS 적용
CSS | 2007.11.30 10:25
http://kaludin.egloos.com/967831
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : CSS, CSS 핵, filter, hack
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



icon 브라우져 화면의 100% 높이를 유지하는 레이아웃
CSS | 2007.11.22 15:14
브라우져 화면의 100% 높이를 유지하는 레이아웃

   1. 우선 height 100%를 사용하려면 html element와 body element의 높이를 100%로 확보해 주어야 합니다.
   2. #body 는 min-height 로 100%높이를 유지 해주고, #content-area 는 원하고자 하는 컨텐츠 영역을 확보 합니다.
   3. 이때, IE 는 min-height 를 지원하지 않으므로, conditional comment를 사용하여 height를 100% 로 확보 합니다. (주석같이 보이는 부분)
   4. #head 의 높이와 #foot 의 높이가 고정이어야 한다는 제약이 있습니다...만, 거의 대부분의 웹사이트가 고정이므로 별 문제는 없으리라 봅니다.

예시

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#head {
    height: 100px;
    background: #ddd;
    position: relative;
    z-index: 1;
}
#body {
    min-height: 100%;
    margin: -100px 0 -50px;
}
* html #body {
    height: 100%;
}
#content-area {
    padding: 100px 0 50px;
}
#foot {
    height: 50px;
    background: #ddd;
}
</style>
</head>

<body>
<div id="head">
    요건 100px 높이 헤드
</div>
<div id="body">
    <div id="content-area">
        <p>컨텐츠 영역 1</p>
        <p>컨텐츠 영역 2</p>
        <p>컨텐츠 영역 3</p>
        <p>(계속 추가해서 테스트 가능)</p>
    </div>
</div>
<div id="foot">
    요건 50px 높이 풋
</div>
</body>
</html>
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
이 저작물은 크리에이티브 커먼즈 코리아 저작자표시 2.0 대한민국 라이선스에 따라 이용하실 수 있습니다.

arrow 태그 : 100%, CSS, height, 레이아웃, 브라우져 화면
arrow 트랙백0 | 댓글0

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



[PREV] [1] [NEXT]
BLOG main image
雜役夫
분류 전체보기 (89)
Mac OSX (2)
Linux (3)
Windows (1)
Database (3)
ASP (6)
PHP (1)
CSS (7)
Javascript (10)
Browser (4)
ASP.NET with C# (2)
Ruby on Rails (3)
FLEX (5)
2008년 (23)
2009년 (7)
2010년 (7)
2011년 (3)
여행 (2)
非常に自転車 超ブレーキ
非常に自転車 超ブレーキ
bp claims
bp claims
http://www.plaxo.com/profile..
http://www.plaxo.com/profile..
http://engageseo.newgrounds...
http://engageseo.newgrounds...
Firebug의 console 파헤치기[..
웹프로그래밍
Total : 95,381
Today : 21
Yesterday : 32
rss
위치로그 : 태그 : 방명록 : 관리자
webkorea's Blog is powered by Daum / Designed by plyfly.net

티스토리 툴바