CSS 아키텍쳐

html 2013.02.13 09:31 |

참고 : http://msdn.microsoft.com/en-us/magazine/jj983725.aspx

현재 주요 사이트들의 CSS 는 불필요한 남용과 중복코드의 잘 못된 사용의 대표적인 사례가 될 만하다.

사용되지 않는 코드나, 불필요하게 긴 선택자 , !important 의 남용 등이 그렇다.

 http://msdn.microsoft.com/en-us/magazine/ff679957.aspx (serveral basic,solid CSS writing practices) 에서 공동작업시 CSS 관리 기법을 살펴 보았지만, 정말 중요한 것은 확장성을 담보할 수 있는 CSS 구조를 잡는 것이다.


이하 생략...귀차니즘...



신고

댓글을 달아 주세요

HTML5의 모든 것 을 읽다가 깜짝 놀랬다.

2.3 항목에  html microdata 란 것이 있는데 이것이 마이크로포맷을 이용한 것이란다.
마이크로 포맷은 한참 웹2.0을 공부할때 가장 감명깊었던 것 중에 하나였는데, 이렇게 만나게 된다니 기쁘다.
마이크로 포맷이 주목을 잘 받지 못해 안타까웠는데 이렇게 html5에 포함된다니...
RDF 와 비교 논의 중인듯 한데...둘다 써본 입장에서 마이크로 포맷이 더 낫다고 본다.
마이크로포맷은 태깅하면서 바로 시멘틱웹을 적용할 수 있지만..  RDF 는 다시 서머리해야 하는 번거로움이..

잠깐 살펴보니, 마이크로포맷에서는 css 클래스를 이용한 반면 , microdata 에서는 html5 에 새로 추가된  itemprop 속성을 사용한다고 한다.

마이크로포맷 사이트 : http://microformats.org/
신고

'html > html5' 카테고리의 다른 글

html5 에 마이크로포맷이...  (0) 2010.05.11
html4 와 html5 차이점  (0) 2010.05.11
html5  (0) 2010.02.02

댓글을 달아 주세요

http://www.w3.org/TR/html5-diff/

html5의 모든 것 :  http://channy.creation.net/blog/776
신고

'html > html5' 카테고리의 다른 글

html5 에 마이크로포맷이...  (0) 2010.05.11
html4 와 html5 차이점  (0) 2010.05.11
html5  (0) 2010.02.02

댓글을 달아 주세요

html5

html/html5 2010.02.02 13:15 |
html5 에 대한 윤석찬씨의 글
http://www.bloter.net/wp-content/bloter_html/2010/02/24791.html


html5 의 이야기는 몇년전인가 들은것 같은데...그때, 웹표준도 멀었는데 과연 이것이 브라우저에 쓰일날이 올까?
하고 생각하고 그냥 넘겨버린 기억이 있다.

이제 슬슬 그 모습을 드러내려하나..

암튼 관심있게 좀 봐야 할 것 같다.스티브 잡스도 밀고 있다니..

html5 과 기존의 html(xhtml 포함) 과 다른점은 html 을 문서로 보지않고 웹어프리케이션으로 보고 있다는 것이다.
그래서 다양한 비주얼 기능과 pc 와의 연동 자체 저장소를 통한 오프라인 기능등을 포함한다고 한다.

글에서 언급된
http://www.rgraph.net/ html5 그래프... 애니메이션도 된다니..

아이폰용 어플리케이션 개발을 위해 오브젝트 c 를 따로 배우지 않아도 된다면...웹개발자들에겐 정말 기회일 수 있겠다.
신고

'html > html5' 카테고리의 다른 글

html5 에 마이크로포맷이...  (0) 2010.05.11
html4 와 html5 차이점  (0) 2010.05.11
html5  (0) 2010.02.02

댓글을 달아 주세요

출처 :http://jonnoriekwel.nl/blog/remove-firefoxs-dotted-link-border/

a:active, a:focus {
-moz-outline: none;
outline: none;
ie-dummy: expression(this.hideFocus=true);
}


신고

댓글을 달아 주세요

8가지 간단한 css tip!

html 2008.04.10 18:58 |

출처 : http://cssglobe.com/post/1392/8-premium-one-line-css-tips


1. line-height 로 수직정렬을...

line-height:24px;

샘플보기

2. 너무 큰 내용으로 인해 Float 을 사용한 페이지 레이아웃이 깨지는 것을 막기위해
#main{
overflow:hidden;
}

관련글

3. 링크가 너무 길어 두줄로 되는 것을 막기위해
a{
white-space:nowrap;
}

4. 파폭의 스크롤바 항상 보이게 하기
html{
overflow:-moz-scrollbars-vertical;
}
파폭유저가 아니라서 왜 필요한지 잘 이해를 못했다.
다만 수직스크롤바가 default 로 감춰져 있다고 한다.

5. 블록형(한 단으로 보여지는..인라인형은 쭉 일렬로 정렬되는 것) 엘리먼트 수평 가운데 정렬하기
margin:0 auto;

6. IE 에서 textarea 의 수직 스크롤바 제거하기
textarea{
overflow:auto;
}
IE 에서 textarea 의 수직스크롤은 default 다.

7. 프린트시 페이지 나누기
h2{
page-break-before:always;
}
프린트시 강제로 페이지를 나누기라는데...해보지는 않았다.

8. 링크에 점선으로 된 박스 테두리 없애기
a:active, a:focus{
outline:none;
}
링크를 클릭할때 포커스가 옮겨가면 생기는 점선 테두리를 없애주는 거란다.
신고

댓글을 달아 주세요


출처 :http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

소스코드를 보면 노란 박스가 z-index 가 20인데도 z-index 가 10인 초록색 박스 밑으로 깔려버린다.
두 박스의 차이점은 노란박스를 싸고있는 다른 div 가 하나 더 있다는 차이점 뿐이고, 노란박스를 싸고 있는 div 는
position:relative 로 되어있다는 것이다.
IE 에서만 이런경우 z-index 를 무시해 버린다.

이유는 잘 모르지만 노란박스가  20 의 z-index 값을 갖고있지만 노란박스를 싸고 있는 div 는 z-index 가 지정되지 않아 0 이고, 그의 자식인 노란박스가 그것을 따르는 것 같다.

시험삼아 노란박스를 싸고 있는 div(#container) 에 z-index  20 을 주니 정상적으로 동작했다.

IE 에서는 포지션이 지정된 엘리먼트의 자식노드들은 부모 노드의 z-index 를 따르는 것인가?
신고

댓글을 달아 주세요

  1. 2008.10.21 14:24 Address Modify/Delete Reply

    비밀댓글입니다

div 로 해더와 풋터가 있는 3단 구성을 하는 것은 생각보다 어려운 일이였다.
해더와 풋터의 높이는 고정이고 가운데 컨텐츠 부분은 윈도우 창 사이즈에 따라 변화해야 한다.
이때 풋터는 항상 전체 문서의 맨 아래 부분에 위치해야 한다.

여러가지 시도중
CSS layout: 100% height with header and footer 를 발견했다.

멋진 꽁수다.

풋터는 absolute 포지션을 지정하여 bottom:0 으로  전체 문서에서 맨 아래에 위치하도록 조정한다.
그러면 항상 풋터는 문서의 맨아래 있게 되는데, 문제는 이 놈이 컨텐츠 부분위를 덮고 있어서 풋터 높이 만큼의 컨텐츠 부분을 가리게 된다.
컨텐츠 부분은 높이를 100% 로 유지하도록 하고 padding 으로 아랫부분을 풋터 높이 만큼 밀어 올린다.
그렇게 되면 마치 풋터가 컨텐츠 부분안에 들어있는 듯이 동작한다.
좋은 팁이다.
신고

댓글을 달아 주세요

출처: [http]Creating different CSS style selector
[http]css-design-concerns-for-ie6-ie7-and-firefox

IE7 의 렌더링 방식이 IE6과 다르다.
CSS testing of Selector and Pseudo selectors 를 보면 IE7 은 FF 에 더 가까와 지고 있다.
그래서 바야흐로 브라우저 3개를 켜고 코딩을 해야하는 시대가 온 것이다.

이를 해결하기 위한 방법 중 하나는 Selector Hack 을 이용하는 것이다.

.context_bar_form_field
{
height: 15px; // 모든 브라우저
#height: 15px; // IE 전용
_height: 21px; // IE6.0 과 이전버젼용
}
우선 파폭에 맞추어 개발을 한 후 E7 에서 점검한다. 수정할 부분이 있다면 # 접두어를 붙여 수정해 준다. #이 붙은 것은 FF 에서 무시한다. 하지만 IE 는 재설정 해준다.
다음에 IE6 을 열고 수정하면서 _ 를 접두어로 붙여 새로 재설정 한다. IE7 은 '-' 가 붙은 것을 무시한다.
 
또 다른 방법은,
.title h3 {height: 21px; }
.title > h3 {height: auto; min-height: 21px; }

이렇게 하는 방법도 있다. 맨 아래줄은 파이어폭스와 IE7만 적용된다.

한가지 주의할 점은

body
{
text-align:-moz-center; /*FF*/
#text-align:center; /*IE */
}
속성 키워드 자체가 다른 것이 많다. 주의 할 것!
위에서 처럼 속성값 자체가 다른 경우가 있다. 그러니 안된다고 hack 만 쳐다보고 있으면 밤세야 한다.

내가 보기에 가장 좋은 방법은 Conditional Comments 를 사용하는 것이다.
복잡하게 한 파일에 구질구질 작성하지 말고 파일을 분리해 버리는 것이다.

참고 :http://webborg.blogspot.com/2007/01/css-compatibility-ie6-ie7-firefox-and.html

<head>
<title>my css hacked page</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="iehacks.css">
<![endif]-->
<body>
  <div class="watermark">....</div>...

이렇게 분리해서 각개격파하는 것이 좋을 듯 싶다.

참고글
w3cschools.com 브라우저 접속률
CSS Hacks
신고

댓글을 달아 주세요

  1. Favicon of http://louisvuittononline.naturallynails.com BlogIcon deEFtxsngsb 2013.05.19 01:54 신고 Address Modify/Delete Reply

    now this fantastic mobilephone for free. A hobby computer bill implanted collectively computer technology, http://louisvuittonbelt.naturallynails.com fake louis vuitton luggage bag louis vuitton men's wallet http://louisvuittonstore.naturallynails.com louis vuitton sunglasses fake or real louis vuitton outlet stores in chicago

  2. Favicon of http://louisvuittononline.naturallynails.com BlogIcon Fessmnhtt 2013.05.21 08:38 신고 Address Modify/Delete Reply

    provide mission these people are http://outletlouisvuitton.naturallynails.com louis vuitton store las vegas louis vuitton watch tambour automatic chronograph http://outletlouisvuitton.naturallynails.com black louis vuitton wallpaper authentic louis vuitton backpacks

http://kimblim.dk/csstest/
위의 링크를 보면 IE6,IE7과 파폭등이 지원하는 W3C 권고사항 선택자들을 보여주고 있다.
IE7 은 파폭과 상당히 호환되는 것을 볼 수 있다.
신고

댓글을 달아 주세요

아래로 길게 스크롤되는 목록을 보여주기 위해 target=_search 를 이용해 볼까 했는데...
보안상 IE7 에서 이 기능을 disable 시켯다고 한다.
다시 기능을 on 시키려면 브라우저의 인터넷 옵션을 수정해야 한다고 하니....
이 기능 때문에 유저들에게 강요할 순 없고...포기해야 겠다.
신고

댓글을 달아 주세요

유용한 태그 5가지

html 2007.05.28 09:59 |
출처: [http]http://www.codeproject.com/html/FiveXhtmlElements.asp

지금부터 소개할 태그들은 XHML 에서 사용할 수 있는 태그 들이지만 잘 알려지지 않아
개잘자들이 잘 쓰지 않는 태그들이다.
이 태그들은 ei6 과 ff1.5 에서 잘 동작하고 xhtml validation 을 통과한 것이다.

optgroup

리스크박스 컨트롤의 아이템들을 그룹화해서 보여준다.

http://www.codeproject.com/html/FiveXhtmlElements/optgroup.gif

 <label for="county">County</label>
<select id="county">
    <optgroup label="England">
        <option>Surrey</option>
        <option>Kent</option>
    </optgroup>
    <optgroup label="Scotland">
        <option>Orkney</option>
    </optgroup>
</select>

<label for="languages">Languages</label>
<select size="6" multiple="multiple" id="languages">
    <optgroup label="Classical">
        <option>C#</option>
        <option>C++</option>
        <option>Java</option>
    </optgroup>
    <optgroup label="Web">
        <option>ASP.NET</option>
        <option>PHP</option>
    </optgroup>
</select>

label


특정 컨트롤의 캡션 기능을 제공한다.
for 속성을 통해, 라벨 클릭시 for 에 지정된 컨트롤에 포커스를 보낸다.
아래 예제의 경우 Full Name 캡션을 클릭하면 for 에 지정된 FirstName input box 에 포커스가 이동하고
Male 캡션을 클릭하면 male 이라는 아이디를 갖는 라디오 버튼이 클릭된다.

http://www.codeproject.com/html/FiveXhtmlElements/label.gif

<label for="FirstName">Full&nbsp;Name</label>
<input id="FirstName" type="text" />
Gender:&nbsp;
<label for="male">Male</label>
<input id="male" type="radio" name="gender" />
<label for="female">Female</label>
<input id="female" type="radio" name="gender" />

fieldset/legend


프레임을 그려서 그룹 영역을 표현한다.
legend 는 그룹 영역의 캡션을 지정한다.

http://www.codeproject.com/html/FiveXhtmlElements/fieldset.gif

<fieldset>
    CP is a good place to publish XHTML related articles. 
</fieldset>

<fieldset>
    <B><legend>Personal Information</legend></B>
    <label for="FirstName">Full&nbsp;Name</label>
    <input id="FirstName" type="text" />
    Gender:&nbsp;
    <label for="male">Male</label>
    <input id="male" type="radio" name="gender" />
    <label for="female">Female</label>
    <input id="female" type="radio" name="gender" />
</fieldset>


col/colgroup


colgroup 은 table 엘리먼트로서 , 하위 엘리먼트로 col 엘리먼트를 갖는다.
각 col 엘리먼트는 테이블의 특정 컬럼에 영향을 준다.
이 태그사용의 장점은 td 에 매번 같은 속성을 지정하지 않고 col 한곳에 지정하여
같은 효과를 얻을 수 있다는 것이다. 따라서 코드 관리가 보다 쉬워진다.

http://www.codeproject.com/html/FiveXhtmlElements/colgroup.gif

<table border="1">
    <colgroup>
        <col width="150px" />
        <col width="10px"  />
        <col width="220p" />
    </colgroup>
    <tr>
        <td valign="top">1</td>
        <td>&nbsp;</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>&nbsp;</td>
        <td>4</td>
    </tr>
</table>

acronym


약자 등 용어 설명에 사용한다.
태그에 쌓인 단어에 마우스를 올리면 title 속성에 지정한 설명이 팝업으로 나타난다.
ie 에서는 acronym 로 쌓인 부분이 표시가 안되고 있으며 ff 에서는 밑줄이 쳐진다.
ie 에서는 따로 스타일을 지정해서 표현해 주어야 한다.

http://www.codeproject.com/html/FiveXhtmlElements/acronym.gif

<acronym title="Code Project">CP</acronym> is a good place to publish 
<acronym title="Extensible HyperText Markup Language">XHTML</acronym>
related articles.

abbr 태그도 비슷한 효과를 낸다.
신고

댓글을 달아 주세요