반응형

 

 

CSS Flex

CSS Flexible Box Layout Module Level 1

 

일반적으로 웹페이지의 레이아웃은 display, float, position 등의 css 속성을 사용해 구현합니다.

하지만 복잡한 레이아웃의 경우에는 구현하기 어렵고, 한계점에 부딪칠 때가 있습니다. 

이에 레이아웃을 좀 더 간결하고, 쉽게 구현하기 위해 W3C(World Wide Web Consortium)에서 CSS3에 새롭게 추가한

레이아웃 방식이 Flexbox입니다.

그런 만큼 CSS3 flex는 기존의 방식보다 레이아웃의 가변적 배치, 정렬, 순서 등을 유연하게

구현할 수 있는 강력한 기술입니다.   

 

 

 

 

 

flex 브라우저 지원범위

 

Flexbox는 Chrome, Firefox, Edge, Safari, Opera 브라우저에서 모두 지원됩니다.

그러나 Internet Explorer 10, 11에서 부분 지원합니다.

Internet Explorer 11은 표준 스펙을 지원하기 때문에, 프로젝트 진행 시 크로스 브라우징 범위가 Internet Explorer 11 이상일 경우

flexbox 레이아웃을 사용한다면 간결하고, 직관적인 웹퍼블리싱을 할 수 있습니다. 

하지만 Internet Explorer 10, 11 에서는 버그가 발견되기도 합니다.

이 버그들은 flexbox 속성들의 특징과 기능을 정확하게 파악하고 있다면 해결해 나갈 수 있는 버그들입니다.

또한 Internet Explorer 버그 이슈에 대해 'Can I use 사이트'의  'Known Issues' 탭을 보면 해결 방법을 제시하고 있습니다. 

 

Flex Issues : https://caniuse.com/?search=flex 

 

"flex" | Can I use... Support tables for HTML5, CSS3, etc

CSS Flexible Box Layout Module Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with `flex`, as well as `display: flex`, `display: inline-flex`, `align-content`, `align-items`, `align-self`, `justify

caniuse.com

 

 

 

 

 

flex 기본 문법 구조

 

Flexbox는 상위 부모 요소인 flex container와 그 복수의 자식 요소인 flex item로 구성됩니다.

<!DOCTYPE html>
<html>
    <head>
        <title>CSS Flex</title>
        <style>
            .container{
                display:flex;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item">1</div>
            <div class="item">2</div>
            <div class="item">3</div>
        </div>
    </body>
</html>

display:flex; CSS속성이 적용된 div.container가 부모 요소인 flex container가 되고, 하위 요소인 div.item은 자식 요소인 flex item이라 부릅니다.

쉽게 말해서 flex container, flex item 부모 요소와 자식 요소는  ul과 li의 관계처럼 떼려야 뗄 수 없는 관계라고 생각하시면 이해하기 쉽습니다.

 

 

Flex 부모 요소와 자식 요소 CSS 속성 구분

위에서도 언급했지만 flex 속성은 크게  컨테이너 속성아이템 속성으로 두 가지로 나누어집니다.

  • flex container 부모 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content
  • flex item 자식 속성 : flex, flex-grow, flex-shrink, flex-basis, order

 

 

 

 

 

flex-direction

 

flex item 요소들의 배치되는 메인축의 방향을 결정하는 속성입니다.

item의 배치된 방향의 축을 메인축(main axis), 메인축과 수직인 축을 교차축(Cross Axis) 이라고 합니다.

메인축의 방향은 부모 요소인 container의 flex-direction 속성으로 결정합니다.

flex-direction 속성을 따로 지정하지 않으면 기본값인 row가 적용됩니다.  

.container {
    flex-direction: row;
    /* flex-direction: row-reverse; */
    /* flex-direction: column; */
    /* flex-direction: column-reverse; */
}

 

메인축(Main Axis)과 교차축(Cross Axis) 구분 방법

  •  row(기본값) : Item이 행(수평축: 왼쪽에서 오른쪽) 방향으로 배치됩니다.
  •  row-reverse : Item이 row 반대축 방향으로, 요소들이 역순으로 배치됩니다.
  •  column : Item이 열(수직축: 위에서 아래) 방향으로 배치됩니다.
  •  column-reverse : Item이 column 반대축 방향으로, 요소들이 역순으로 배치됩니다.

  CSS : flex-direction 예제 실습 파일  

flex-direction.zip
0.03MB

 

 

 

 

 

flex-wrap

 

flex item이 flex container 영역을 넘어갈 경우 줄 바꿈을 할지를 결정하는 속성입니다.

flex-wrap 속성을 따로 지정하지 않으면 기본값인 nowrap이 적용됩니다.  

.container {
    flex-wrap: nowrap;
    /* flex-wrap: wrap; */
    /* flex-wrap: wrap-reverse; */
}
  • nowrap(기본값) : Item의 전체 값이 container의 영역 값을 넘치더라도 줄바꿈하지 않고 Item은 한줄로 배치됩니다.
  • wrap : Item이 container의 영역값을 넘치면 줄 바꿈 되어 Item이 배치됩니다.
  •  wrap-reverse : Item이 wrap의 역순으로 배치됩니다.

  CSS : flex-wrap 예제 실습 파일  

flex-wrap.zip
0.03MB

 

 

 

 

 

flex-flow

 

flex-direction과 flex-wrap을 한 번에 같이 지정할 수 있는 축약 속성으로 단축해서 사용할 수입니다.

flex-direction, flex-wrap의 순으로 한 칸 떼고 써주면 됩니다.

.container {
    flex-flow: row wrap;
    /* 아래의 두 줄을 축약하여 위와 같이 작성 */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
}

 

 

 

 

justify-content

 

Item의 메인축을 정렬하는 속성입니다.

메인축은 flex-direction에서 설정합니다.

justify-content 속성을 따로 지정하지 않으면 기본값인 flex-start가 적용됩니다.

.container {
    justify-content: flex-start;
    /* justify-content: flex-end; */
    /* justify-content: center; */
    /* justify-content: space-between; */
    /* justify-content: space-around; */
}
  • flex-start(기본값) : 메인축의 시작 지점을 기준으로 Item을 정렬합니다.
  • flex-end : 메인축의 마지막 지점을 기준으로 Item을 정렬합니다.
  • center : 메인축의 Item을 가운데 정렬합니다.
  • space-between : 메인축의 첫 번째 Item은 시작점에 마지막 Item은 끝 지점 정렬하고, 나머지 item은 사이에 동일한 간격으로 정렬합니다.
  • space-around : 메인축을 Item둘레에 동일한 간격으로 정렬합니다.

  CSS : justify-content 예제 실습 파일  

justify-content.zip
0.03MB

 

 

 

 

 

align-items

 

Item의 교차축을 정렬하는 속성입니다.

메인축에 수직인 축을 교차축이라고 합니다.

align-items 속성을 따로 지정하지 않으면 기본값인 stretch가 적용됩니다.

.container {
    align-items: stretch;
    /* align-items: flex-start; */
    /* align-items: flex-end; */
    /* align-items: center; */
    /* align-items: baseline; */
}
  • stretch(기본값) : container의 높이만큼 교차축 방향으로 item을 늘려, 전체 높이를 채웁니다.
  •  flex-start : 교차축의 시작 지점을 기준으로 Item을 정렬합니다.
  •  flex-end : 교차축의 마지막 지점을 기준으로 Item을 정렬합니다.
  •  center : 교차축 Item을 가운데 정렬합니다.
  • baseline : 글꼴의 기준선인 baseline을 기준으로 Item을 정렬합니다.

  CSS : align-items 예제 실습 파일  

align-items.zip
0.03MB

 

 

 

 

 

align-content

 

Item의 교차축을 정렬하는 속성입니다.

주의해야 할 점은 align-items 속성과 비슷하다는 것입니다. 

확실하게 다름을 구분해서 사용하는 방법은 align-items은 Item이 한 줄로 나열되었을 경우 사용할 수 있는 속성이고, align-content는 Item이 여러 줄(2줄 이상) 나열되어 있을 때 교차축 정렬을 위해 사용할 수 있는 속성입니다.

.container {
    flex-wrap: wrap;
    align-content: stretch;
    /* align-content: flex-start; */
    /* align-content: flex-end; */
    /* align-content: center; */
    /* align-content: space-between; */
    /* align-content: space-around; */
}
  • stretch(기본값) : container의 높이만큼 교차축 방향으로 item을 늘려, 전체 높이를 채웁니다.
  •  flex-start : 교차축의 시작 지점을 기준으로 Item을 정렬합니다.
  •  flex-end : 교차축의 마지막 지점을 기준으로 Item을 정렬합니다.
  •  center : 교차축 Item을 가운데 정렬합니다.
  • space-between : 교차축의 첫 번째 Item은 시작점에 마지막 Item은 끝 지점 정렬하고, 나머지 item은 사이에 동일한 간격으로 정렬합니다.
  •  space-around : 교차축을 기준으로 Item둘레에 동일한 간격으로 정렬합니다.
  •  

  CSS : align-content 예제 실습 파일  

align-content.zip
0.03MB

 

 

 

 

 

flex-grow

 

flex Item의 확장 너비 비율을 설정하는 속성입니다.

flex-grow의 속성 값은 0과 양의 정수를 사용합니다.

기본값은 0이며, 기본값을 가지고 있을 때는 Item의 너비가 커지지 않고 원래 크기를 유지합니다.

그러나 속성 값이 1 이상일 경우 Item의 크기에 상관없이 유연한(Flexible) 박스로 변경되고,

원래 너비에 상관없이 너비가 확장되며 container의 빈 공간을 채우게 됩니다.   

.item {
    flex-grow: 1;
    /* flex-grow: 0; */ /* 기본값 */
}

  CSS : flex-grow 예제 실습 파일  

flex-grow.zip
0.03MB

 

 

 

 

 

flex-shrink

 

flex Item의 축소 너비 비율설정하는 속성입니다.

flex-shrink의 속성 값은 0과 양의 정수를 사용합니다.

기본값은 1이며, 값이 0일 경우 Item의 너비가 축소되지 않고 원래 크기를 유지합니다.

그러나 속성 값이 1 이상일 경우 Item의 너비가 container 너비보다  클 경 크기에 상관없이 유연한(Flexible) 박스로 변경되고, 

container의 전체 너비 안에서, 원래 너비에 상관없이 축소되어 공간을 채웁니다.

.item {
    flex-shrink: 0;
    /* flex-shrink: 1; */ /* 기본값 */
}

  CSS : flex-shrink 예제 실습 파일  

flex-shrink.zip
0.03MB

 

 

 

 

 

flex-basis

 

flex Item의 기본 너비 설정하는 속성입니다.

flex-basis의 값은 auto입니다.

flex-basis 속성 값으로 auto와 0을 많이 사용합니다.

속성 값이 auto일 경우 Item의 값은 상대적인 기준이 되어 Item의 너비 기준대로  비율이 설정되며, 0일 경우 Item의 값은 절대적인 기준이되어 container를 기준으로 Item 너비 비율이 동일하게 설정됩니다.

 

  •  width와 basis 중 하나만 사용하는 것이 좋습니다.
  • 속성 값 단위로 0, auto, px, em, %, fill, content, max-content, min-content, fit-content 사용 가능합니다.

 

 

 

 

 

flex

 

flex grow, flex-shrink, flex-basis를 한 번에 같이 지정할 수 있는 축약 속성으로 단축해서 사용할 수 있습니다.

.item {
    flex: 1;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
    flex: 1 1 auto;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
    flex: 1 100px;
    /* flex-grow: 1; flex-shrink: 1; flex-basis: 100px; */
}

 

flex 축약되는 키워드 값에 따른 축약되는 속성의 설정값은 다음표와 같습니다.

flex flex-grow flex-shrink flex-basis
initial(기본값) 0 1 auto
none 0 0 auto
auto 1 1 auto
양의 정수 1 1 0

 

 

 

 

 

align-self

 

개별 Item의 교차축을 정렬하는 속성입니다.

align-items은 Container에 포함하는 모든 Item의 교차축을 정렬하는 속성이라면,

필요한 요소의 Item만 개별적으로 정렬을 변경하고자 할 경우 align-self 속성을 사용하면 됩니다.

align-self의 기본값은 auto입니다.

align-self는 align-items 속성보다 우선되어 적용됩니다.

이 말은 전체 설정보다 각각의 개별 설정이 우선된다는 것입니다.

기본값 auto 외에 align-items 속성 값과 동일합니다.

.item {
    align-self: auto;
    /* align-self: stretch; */
    /* align-self: flex-start; */
    /* align-self: flex-end; */
    /* align-self: center; */
    /* align-self: baseline; */
}
  • auto(기본값) : container의 align-items 값을 기본적으로 상속받습니다.
  •  stretch : container의 높이만큼 교차축 방향으로 선택한 개별 item을 늘려, 전체 높이를 채웁니다.
  •  flex-start : 교차축의 시작 지점을 기준으로 선택한 개별 Item을 정렬합니다.
  •  flex-end : 교차축의 마지막 지점을 기준으로 선택한 개별 Item을 정렬합니다.
  •  center : 선택한 개별 교차축 Item을 가운데 정렬합니다.
  •  baseline : 선택한 개별 글꼴의 기준선인 baseline을 기준으로 Item을 정렬합니다.

  CSS : align-self 예제 실습 파일  

align-self.zip
0.03MB

 

 

 

 

 

order

 

개별 Item의 '시각적' 나열 순서를 설정하는 속성입니다.

속성 값은 숫자로 설정하며, 숫자가 클수록 뒤에 배치되고, 숫자가 작을수록 앞에 배치됩니다.

음수 값도 설정 가능합니다.

.item:nth-child(1) { order: 3; } /* 세번째 배치 */
.item:nth-child(2) { order: 2; } /* 두번째 배치 */
.item:nth-child(3) { order: 1; } /* 첫번째 배치 */

  CSS : order 예제 실습 파일  

order.zip
0.03MB

 

 

 

 

 

마치며...

 

flex는 정말로 화면 구성 레이아웃을 퍼블리싱할 때 강력한 성능을 보여줍니다.

필자는 최근 2년 사이에 (주) 맑은 커뮤니케이션에서 일을 진행하면서  'Internet Explorer 10' 이상 크로브 라우징 하는 프로젝트가 대부분이었던 것 같습니다.

마이크로소프트에서도 2022년 6월부터는 'Internet Explorer 11' 보안지원을 중단한다고 했습니다.

고객사들도 의식이 많이 바뀌고 있다고 생각합니다.

아직도 display, float, position 등의 CSS 속성으로 레이아웃을 구성하시는 웹퍼블리셔 분들은 flexbox를 이용한 레이아웃 퍼블리싱을 도전해 보시길 추천드립니다. 

오랜만에 CSS 관련 포스팅을 했습니다.

다른 글 쓸 때보다 2배 이상의 정성을 다해서 쓴 것 같습니다.

웹퍼블리셔 동료  여러분들의 응원이 필요합니다!!

감사합니다.

 

반응형
반응형

 

안녕하세요.

(주)맑은커뮤니케이션의 여전히 나이막내(?) 스물다섯스물하나입니다.

2019년이 되었는데요.

2018년에는 다들 어떠셨나요.?

잘 되신 분들은 앞으로도 잘 되시기를 바라고

잘 안되었던 분들은 앞으로 하는 일 모두 잘 되시기를 바랍니다.

 

 

 

 

웹퍼블리싱 작업을 하다보면 아무래도 매번 쓰던속성만 쓰게되어

가까운 길을 냅두고 먼길을 돌아가는 상황을

셀프(?)로 만들때가 종종 있더라구요.

 

 

 

 

뿌엥...

 

 

그래서 셀프뺑뺑이(?)를 방지하기 위해

CSS탐방을 떠나보기로 했습니다.

 

 

 

세상은 넓고 CSS는 무궁무진하게 많다!

(※ 세상은 넓지만 CSS는 무궁무진하게까지 많지는 않습니다)

 

 

 

원래는 CSS4가 어디까지 작업이 되고 있나 한번 구경을 가볼까 하였는데요.

아직도 안되는 것들이 많아서... 패쑤!

 

 

그럼 본격적으로 같이 한번 떠나보겠습니다!

(제 기준에서 작성된 내용입니다 ㅠㅜ

어떤분들은 자주 사용하는 속성일수도 있어요.)

 

 

 

 

 

 

오늘의 첫번재 주인공은 바로

 

 

 

 

 

 

 

 

border(보더) 입니다.

 

 

◎ border

◎ border-bottom

◎ border-bottom-color

◎ border-bottom-style

◎ border-bottom-width

◎ border-color

◎ border-left

◎ border-left-color

◎ border-left-style

◎ border-left-width

◎ border-radius

◎ border-right

◎ border-right-color

◎ border-right-style

◎ border-right-width

◎ border-style

· · ·

 

보더에는 다양한 속성들이 있는데요.

저는 주로

1px solid #컬러컬러 형식을

99%정도로 대단히 많이 사용하는 것 같습니다

라인은 자고로 쏠리드(?)가 제맛이죠

 

 



보더스타일은 솔리드 밖에 모르는 바보였는데

최근에 어마어마한 속성이 존재하다는 것을 알게 되었습니다.

바로  border-image입니다.

 

 

 

이름만 봐도 딱 느낌이 오시죠?

같이한번 알아보도록 하겠습니다.

 

 

 

1.border-image

 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

설명

보더를 이미지로 지정

(기본적으로 border 스타일을 선언해 주어야 함)

 

 

 

속성
 
border-image : [ source slice width outset repeat ] | initial | inherit

 

border-image-source : 보더로 사용될 이미지 경로 (url형식으로 시작)

 

 

border-image-slice : 브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다. 

이미지는 4개 모서리, 4개 측면, 중앙의 9개 섹션으로 나뉜다.

 

 

border-image-width : 보더 이미지의 넓이를 제어

 

 

border-image-outset : 보더 이미지가 컨텐츠 영역 확장 거리를 제어

 

 

border-image-repeat : 보더영역을 채우기 위한 반복형태를 제어

 

 
 
 IE chrome  Firefox safari
 11+ 4+ -webkit, 16+ 3.5+ -moz-, 15+  3.1+ -webkit-, 6+

 

 
 
 
저는 이 속성을 한번도 사용해본적이 없는데요.
용어의 설명도 생소하여 생각보다 어려운 부분이 있었지만
이번에 여러분께 소개드리기 위해 학습을 해 보며 느낀점은
[최신브라우저만 맞춘다면 유용하게 쓰일것 같다] 였습니다.
 
저한테는 생소한 속성들이어서
조금 이해 안되는 부분만 짚어보도록 하겠습니다.
 
 
 
 

border-image-slice

 

브라우저에게 테두리 조각을 만들기 위해 이미지를 슬라이스할 위치를 알려준다. 

 

 

border-image-slice: [ number | percentage ] | fill | initial | inherit
 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 
slice 속성은 padding , margin과 마찬가지로 4방향을 설정할수 있고, 위아래 및 좌우 까지
설정법은 똑같습니다.
 
 
 
 

border-image-outset

 

보더 이미지가 컨텐츠 영역 확장 거리를 제어

 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

border-image-repeat

 

보더영역을 채우기 위한 반복형태를 제어

 
 
 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

 

reapeat 와 outset은 예제만 보더라도 바로 이해하실수 있을것 같아

별도의 설명은 생략하겠습니다.

 

 

border-image 속성을 이용하면 보더에 그라디언트를 넣을수 있습니다.

 

 

See the Pen Untitled by Jong Sang Park (@JongS) on CodePen.

 

 

이런식으로 말이죠!

이 글을 적으면서 여러 사이트들을 훓어보던 중

 

 

 

보더와 그라디언트를 활용한 사이트 몇개가 눈에 띄었습니다.

허나 아직은 다들 많이 안쓰시는것 같아요(저 포함).

하지만 잘 활용만 한다면 멋진 사이트를 만들수 있을것 같습니다.

 

 

 

오늘은 보더에 대해서 탐방을 해 보았는데요. 

다음번에는 더 재밌는 주제로 찾아오도록 할게요.

부족한부분, 잘못된 부분, 질문이 있으시다면 댓글 부탁드리겠습니다.

그럼 안녕~

 

 

 

 

 

반응형
반응형

안녕하세요.! 글 작성하다가 방금 꿀밤을 한대 맞은(힁 ㅠㅠ....)

맑은 커뮤니케이션의 나이 막내(?) 스물다섯스물하나입니다.! 

 

오늘 다룰 주제

사이트에서 많이 사용되는 형태인

 

 

 

동일한 넓이와 간격을 가지고 있는 컨텐츠 (정확한 명칭을 몰라서 ㅎㅎ....)

에 대해 알아보도록 하겠습니다.

 

(글이 지루하신 분은 Ctrl + F 를 눌러 '결론' 을 검색해 주시지 마세요. 읽고서 댓글로 짱똘 던져주세요 +_+ ㅎㅎㅎ;;;)

 

 

아마 위의 사진과 비슷한 형태를 작업해 보신 분들이 많을거라고 생각되는데요.

 

제가 웹퍼블리싱을 배울때

float으로 컨텐츠를 띄워 붙이고(왼쪽이나 오른쪽!) 

width값을 100%/ n(갯수) 만큼 주면

동일한 간격으로 정렬이 된다고 배웠습니다!

 

 

4개 정렬 = 25%

5개 정렬 = 20%

6개 정렬 = 16.66%

· · ·

 

이런식으로 말이죠.

많이들 알고 있는 공식(?) 이시잖아요~

 

 

 

 

저 또한 저 방법을 이용하여 작업을 했었습니다!(과거형!)

 

 

 

작업자님~~~

디자인 파일 메일로 보내드렸어요~!!

확인 부탁드려요!

 

 

 

 

네~~~

(딸깍딸깍)

 

 

 

 

 

 

 

별거 없군! 금방 끝내주겠어!!

(다다다다다다다다다다다다다다다닥다다닥)

 

 

 

.boxwrap {
	overflow: hidden;	
}

.boxwrap .box {
	float:left;
	width:25%;
}

 

 

 

짜잔~~! 다했따아~~

집에 가야지

 

 

개발자님~

작업물 푸시 했어요!

확인 부탁드려용~

 

 

 

 

 

 

 

이봐 스물쿤!! 갯수가 3개일때 이상하게 나오는데..?

확인좀 오네가이!

 

 

 

 

 

 

 

 

 

 

 

우씨... 알았어요..!

 

 

 

 

 

 

.boxwrap .box.length3 {
    width:33.33%;
}

 

 

3개 일때는 length3 클래스 추가해주세요!

 

 

됐죠??

그럼 전 20,000....

 

 

어이어이~ 

2개일때는!!!? 5개일때는!!?? 6개 일때는..!!?




 

 

(저 개ㅈ....ㅏ......ㅅ...)

 

 

 

 

 

훗..  금방 해드리죠!!

 

.boxwrap .box.length2 {
	width:50%;
}

.boxwrap .box.length5 {
	width:20%;
}

.boxwrap .box.length6 {
	width:16.66%;
}

 

자요!! 됐죠!!?

 

 

전 진짜 20,000~~ 수고하세용~~

 

 

 

 

· · · ·

저 개ㅅ.....

 

 

 

사진=영화 '어벤져스: 인피니티 워 닉퓨리역의 사무엘 잭슨 '

어머니....

 

 

----------------------------------------------------------------------------------------------------------------------------

 

 

 

자... 지금까지 스물쿤의 작업을 보셨습니다.

 

개발독은 스물쿤의 소스가 무척이나 별로라고 생각 할겁니다.

 

 

(끄덕끄덕)

 

 

프로젝트 마다 다르겠지만 

 

컨텐츠의 갯수가 고정적으로 정해져 있을수도,

유동적으로 변할수도 있습니다!.

 

과거의 퍼린이 였던 스물쿤은 이런점을 생각하지 못했었습니다.

 

 

 

 

스물쿤의 소스를 한번 최종적으로 볼까요??

 

.boxwrap {
	overflow: hidden;	
}

.boxwrap .box {
	float:left;
	width:25%;
}

.boxwrap .box.length2 {
	width:50%;
}

.boxwrap .box.length3 {
	width:33.33%;
}

.boxwrap .box.length5 {
	width:20%;
}

.boxwrap .box.length6 {
	width:16.66%;
}

 

이 소스가 결코 잘못되었다 고! 말할수는 없습니다.

이것도 방법이라면 방법이니까요.

하지만 좋은 방법은 아니죠.

 

 

갯수 제어 때문에 넓이를 조절하는 css가 4개나 더 늘었어요!!

 

만약 한줄에 7개, 8개 9개 10개 등등등... 갯수가 더 추가된다면

더 많아지겠죠!?!?!?

 

 

이쯤 되면 결코 좋은 소스라고 할수 없습니다.

 

이러한 넓이를 제어하는 CSS를 

 

싹!! 없애버릴수 있는 방법이 있습니다.

 

그거슨 바로!!

 

table  table-cell 입니다~!

(이말 하나 하려고 참 오래도 걸린다 임마!!)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

부모태그에 display : table을 선언해 주고!

 

자식태그에 display : table-cell을 선언해주면

 

갯수가 몇개가 되든 동일한 간격으로 영역 가지게 됩니다

(100개,200개가 되면 찌부가 될수 있겠죠...? 그렇게 가지는 않을테고..)

 

 

 

----------------------------------------------------------------------------------------------------------------------------

 

 

(다다다다다다닥)

 

.boxwrap {
	display:table;
	width: 100%;	
}

.boxwrap .box {
	display:table-cell;
	vertical-align: middle;
}

 

 

???: 에이 안되는구만

 

 

 

 

 

???: 동일하긴 뭐가 동일합니까!! 

길쭉해 지는구만.....

 

(에잇... 괜히 읽었어!!)

 

 

하하하.... 

제가 실수로 빼먹은게 있네요...

 

 

 

.boxwrap {
	display:table;
	width:100%;
	table-layout: fixed;
}

.boxwrap .box {
	display:table-cell;
	vertical-align: middle;
}

 

 

부모태그에 table-layout: fixed를 선언해 주시면!

 

 

 

짜잔~~~!

 

동일한 넓이를 가지게 됩니다~!!

 

 

 

신기하죠~~~~~~!!!?!?!?!?!?

ㅅ....시....신...기....

하...ㅅ...ㅣ..죠...?;;

 

----------------------------------------------------------------------------------------------------------------------------

 

(야.. 왜 갑자기 말돌려...)

넵.! 저는 오늘 여러분에게 

CSS 속성인

 

- display: table- display: table-cell- table-layout: fixed

존재 에 대해 말씀 드리고 싶었습니다!

 

 

 

 

이 속성이 '어떻게' 쓰이고 '무엇무엇' 이다~

라는 부가적인 설명은 안하고자 합니다.

 

왜냐하면 스물쿤도 퍼린이 시절..

새로운것 ,신기한 것을 발견하면

 

그 속성에 대해 열심히 찾아보았거든요 ㅎㅎ...

그러면서 재미도 느끼고 뭔가, 내가 발전해 간다는게 느껴져서 뿌듯했었죠.

저 보다도 먼저 이러한 속성을 잘~ 정리해 주신 분들이 많답니다 ㅎㅎ

 

 

??? : 괜히 모르ㄴ...

 

(쌰랍)

 

----------------------------------------------------------------------------------------------------------------------------

 

 

아무튼... 끝으로!!

처음에는 flex라는 속성으로 작업을 했었는데

이게 익스에 하위버전에서는 안되어 어쩔줄 몰라 하고 있었는데

그때 알게된 방법이 바로 display table 속성 이었죠!

(플롯밖에 몰랐던 나란 퍼린이...)

 

부족하고 노잼인 제 글을 읽어 주신분들께는 1감사 1따봉을 드리며

짧게 요약을 하고 저는 이만 물러 가겠습니다~!

 

(사장님 저 퇴근.....)

 

결론

1. display: table , table-cell 쓰세요.

2. table-layout : fixed도 쓰세용

3. 아래 링크에서 해보세영!

 http://jsfiddle.net/209p16n5/21/

 

 

 

여러분 안녕~~

 

 

 

 

----------------------------------------------------------------------------------------------------------------------------

 
 
 

 

???: 그러니까 결론은 css table 쓰라는거 아냐

 

 

 

??? : 하.......

 

 

 

 

 

 

 

 

 

반응형
반응형
최근 웹퍼블리싱을 하다보면 브라우저 크로스브라우징을 IE10이상 하게 되는 경우가 많다보니,
Jquery animation 보다는 CSS animate를 사용하게 되는 경우가 많아졌다.
그리고 특히 CSS animate를 하다보면 transform 속성을 많이 사용하게 될 것이다.
이유는 transform속성은 웹요소의 위치를 이동시키거나 크기 조절 및 회전시킬 수 있는 강력한 기능을 가지고 있기 때문이다.
그렇다면, transform 속성에 대해 자세히 알아보고, 실무에서 만들었던 파일을 같이 공유하여 이해를 돕도록 하겠다.

transform 속성

scale(), rotate(), translate(), skew()

브라우저 ie IE chrome 크롬 firefox 파이어 폭스 safari 사파리 opera 오페라
지원현황 IE10 36.0 16.0 9.0 23.0

transform:scale() - X 또는 Y축으로 확대/ 축소

scale은 해당 요소를 지정한 크기만큼 확대 또는 축소 시킬 수 있습니다.
사용방법은 아래와 같습니다.

transform:scaleX(x축 비율);          // x축으로 확대, 축소
transform:scaleY(y축 비율);          // y축으로 확대, 축소
transform:scale(x축 비율, y축 비율);  // x축, y축으로 확대, 축소

transform:rotate() - 지정 요소 회전

rotate는 요소를 지정한 각도만큼 회전시킵니다.
회전 각도가 플러스 값일 경우 시계 방향, 마이너스 값일 경우 반시계 방향으로 회전합니다.
사용방법은 아래와 같습니다.

transform:rotateX(Ndeg);  // x축 기준으로 N도 만큼 회전
transform:rotateY(Ndeg);  // y축 기준으로 N도 만큼 회전
transform:rotate(Ndeg);   // N도 만큼 회전

transform:translate() - 지정 요소 X 또는 Y축으로 이동

translate는 요소를 지정한 위치로 X 또는 Y축만큼 이동 시킵니다.
사용방법은 아래와 같습니다.

transform:translateX(10px);        // X축으로 10px 이동
transform:translateY(10px);        // Y축으로 10px 이동
transform:translate(-10px, -10px); // X축으로 -10px, Y축으로 -10px 이동

transform:skew() - 지정 요소 X 또는 Y축으로 기울이기

skew는 요소를 지정한 만큼 X 또는 Y축으로 기울입니다.
사용방법은 아래와 같습니다.

transform:skewX(Ndeg);             // x축으로 N도 만큼 기울이기
transform:skewY(Ndeg);             // y축으로 N도 만큼 기울이기
transform:skew(x축 Ndeg, y축 Ndeg); // x축, y축으로 N도 만큼 기울이기

transform-origin 속성

위의 transform 속성인 scale(), rotate(), translate(), skew()들을 한번씩 연습해 보았다면, 지정 요소의 중심을 기준으로 동작한다는 것을 알 수 있을 것 입니다.
하지만 transform-origin 을 사용하면 지정 요소의 기준점을 변경할 수 있습니다.
사용방법은 아래와 같습니다

transform-origin:x축 y축;  // px, 백분율(%), left, center, right 중에서 사용할 수 있습니다.

transform을 이용한 애니메이션 실무 예제 다운로드(꽃입 떨어지는 효과)

(주)맑은 커뮤니케이션에서 실무로 만든 예제이며, transform 애니메이션을 공부하는 분들에게 도움이 되었으면 합니다.

transform.zip
다운로드

반응형
반응형
최근 웹퍼블리싱을 하다보면 고객사의 요청에 의해 마이크로소프트(MS) 엣지(Edge) 브라우저를 크로스브라우징하여 마크업 진행하는 경우가 종종 있다.
크롬 또는 익스플로러 브라우저와 같이 크로스브라우징을 하면서 아직은 크게 어려움은 없었으나, 최근 엣지(Edge) 브라우저 크로스브라우징을 하다 페이지 전부 CSS가 깨져버린 상황을 겪었다.
그동안 엣지(Edge) 브라우저 크로스브라우징을 하면서 그런일은 없었기에 적지 않게 놀랐다.
작업했던 마크업 파일은 기존 우리 회사(맑은커뮤니케이션)에서 마크업하던 작업물이 아닌, 타 업체로 부터 인계를 받아 유지/보수 진행하던 마크업이라 더 난감한 상황이였다.
하지만, 구글링을 해봐도 css들이 왜 적용안되는지 알 길이 없었다.
혹시나 하여 css 처리방식이 @import 방식으로 처리되어 있어, link 방식으로 변경하였더니 멀정하게 반영되는 것이다.
문제의 답은 간단했다. 엣지(Edge) 브라우저는 @import 방식을 처리하지 못했던 것이다. 헉....
우리 회사(맑은커뮤니케이션)에서는 css 처리방식을 @import 방식을 쓰지 않고 link 방식만을 쓰기 때문에 그동안 문제를 발견하지 못했던 것이다.
하지만 많은 회사들이 @import방식을 아직도 많이 사용하기에 공유하고자 글을 작성한다.

Link 방식 vs @import 방식

결과적으로 보면 같아 보일 수 있겠지만, 사실은 Link 방식을 사용하는 것이 @import 방식을 사용하는 것보다 페이지의 로딩 속도 측면에서 뛰어나다.

@import 방식의 장, 단점

CSS파일 내에 @import를 이용하여 CSS를 연결하는 방식이다.
하나의 CSS파일에 여러개의 페이지 CSS를 로드시켜 편리하다고 생각하면, 편리하다고도 할 수 있다.
그러나 성능을 생각한다면 그리 좋은 방법은 아니다. @import를 많이 사용한다면, 익스플로러에서는 다운로드 순서가 다르게 작동하여 문제가 발생할 수 있으며, 병렬방식이 아닌 직렬방식으로 다운로드 하기때문에 전체 로딩시간이 길어지는 문제점이 있기에, 추천하는 방법은 아니다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 @import 방식을 사용할 경우 @import된 CSS파일을 적용하지 못한다.

사용방법은 아래와 같습니다.

@import url("reset.css");
@import url("content.css");

Link 방식의 장, 단점

HTML의 Link태그를 사용하는 CSS연결 방식이다.
필자가 사용하는 CSS연결 방식으로 하나의 파일에 여러 페이지의 스타일을 일괄 수정 및 추가 등 유지/보수에 용이하며, 직렬방식이 아닌 병렬방식으로 다운로드 하기에 로딩속도가 빠르고, CSS파일 여러개를 Link 방식으로 다운로드 하더라도 익스플로러에서 순서가 동일하게 작동한다.
그리고 이 글의 주제처럼 엣지(Edge) 브라우저에서 CSS파일을 다운로드 하지 않는 일이 발생하지 않는다.

사용방법은 아래와 같습니다.



마치며...

처음 이 글을 작성하고자 한 이유는 엣지(Edge) 브라우저가 @import 방식을 처리 안된다는 것을 공유하고자 작성하였으나, @import방식과 Link방식의 차이점을 설명하여 엣지(Edge) 브라우저의 버그문제도 있지만 Link 방식을 사용하는 것이 더 이롭다는것을 알려드리고 싶었습니다.
아직도 많은 회사들이 @import 방식을 많이 사용하는데, 이럴경우 접속자가 많은 사이트의 경우 로딩속도가 현저하게 늦어지며, 엣지(Edge) 브라우저에서 CSS가 적용안된 사이트를 보게 될 수 있기에 이 글을 작성하게 되었습니다.

반응형
반응형

css3 - calc()

반응형이나 모바일 코딩을 하다 보면 %로 값을 주기가 애매한 것들이 있습니다.
이러한 것들을 float이나 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하여 미디어 쿼리를 사용하여 해상도별로 나누어 해결하곤 하는데, calc() 함수를 사용하여 값을 쉽게 지정해 줄 수 있습니다.



calc()함수 사용

검사버튼 삭제버튼 calc() 함수는 width, height, margin, padding 값을 사칙연산자를 이용하여 표현할 수 있습니다.
각각 사용방법을 알아보겠습니다.

※ width

float값으로 width값의 %를 나누기 애매할 경우에 사용하기에 유용합니다.

Markup
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

위와 같이 lst_width class로 쌓여있는 li태그들을 7등분 하기 위해 calc()함수를 이용하여 간단하게 처리 할 수 있습니다.

css
.lst_width>li{
	float:left;width:calc(100% / 7);
	height:50px;
	color:#fff;
	text-align:center;
}
.lst_width>li:nth-child(odd){
	background:#333;
}
.lst_width>li:nth-child(even){
	background:#999;
}
width값 예시 보기

※ height

반응형이나 모바일에서 높이 값을 쉽게 잡을 수 있습니다.
위에서 언급했지만 position absolute 또는 fixed를 사용하거나 정확한 px 값을 지정하지 않아도 처리가 가능합니다.

height-calc.zip
다운로드

위 첨부파일은 모바일 햄버거 메뉴로 예제를 만들어 봤습니다.



후기

반응형 웹과 모바일 코딩을 하면서 width와 height의 값을 %로 사용하면서 길이가 깔끔하게 떨어지지 않을 때에 소수점으로 li:first-child{width:33.34%} li{width:33.33%} 이런 식으로 써줘도 상관없지만 calc() 함수를 이용하여 코딩을 한다면 한층 더 간결하고 깔끔한 코드가 되겠네요.

반응형
반응형
@font-face는 css3라고 알고 있지만, 사실 이전부터(css2) 있던 규칙이다.
다만 Embedded Open Type(EOT)포맷 라이센스로 인해 Microsoft의 웹 브라우저인 인터넷 익스플로어에서만 사용되어 왔다.
그러나 사파리 3.1의 릴리즈와 함께 라이센스 문제를 해결한 Tyue Type Font(TTF)와 Open Type Font(OTF)를 웹 페이지에 웹 폰트처럼 사용 할 수 있게 되었다.
웹 브라우저가 웹 폰트 형식의 Downloadable Font를 다른 포맷으로 지원하기 시작하고, Web Open Font Format(WOFF) 지원이 일반화되었다.

font-face란?

font-face규칙은 CSS3에 새로 추가된 웹 글꼴명세로 시스템에서 지원해주지 않는 글꼴을 웹 서버에서 내려 받아 화면에 표시해 주는 방법으로 MS가 독자적으로 IE6~8 브라우저에 지원하던 명세였는데 W3C에 제안하여 현재 CSS3 표준 초안이 되었다.

font-face 문제점 및 사용방법

font-face는 웹 서버에서 글꼴을 내려 받아 사용하므로 글꼴이 없는 사용자가 이용하는데 좋다.
하지만 font-face를 사용하기 전에 다음과 같은 몇 가지 문제를 확실히 알고 있어야 한다.

  • * TTF(True Type Font)는 용량이 커서 EOT(Embedding Open Type)나 WOFF(Web Open Font Format)를 쓰는 것이 일반적이다.
    (TTF형식일 경우 영문 글꼴은 크기가 작지만, 한글 글꼴의 경우 크기가 상대적으로 큼. TTF형식은 압축되지 않은 타입으로 웹에서 사용하긴 무리)
    ※ 예) 나눔고딕.TTF 는 2.23MB(한자 포함 4.13MB), EOT,WOFF로 변환하면 나눔고딕.EOT는 846KB, 나눔고딕.WOFF는 981KB

    해결방법

    TTF형식 파일을 EOT, WOFF형식 파일로 변환하여 사용.
    (EOT, WOFF형식으로 변환시 상대적으로 최대는 30%~70%의 용량으로 압축효과가 있다.)

  • * IE6~8 브라우저는 EOT형식 글꼴만 지원, 크롬, 사파리, 파이어폭스, 오페라는 WOFF형식 글꼴만 지원.
    (IE9 브라우저는 EOT, WOFF형식 글꼴 둘다 지원함)
      ie IE chrome 크롬 firefox 파이어 폭스 safari 사파리 opera 오페라
    WOFF 9부터 지원 지원 지원 지원 지원
    EOT 6~9지원 미지원 미지원 미지원 미지원
  • * 기본문법
    @font-face{
    	font-family: <a-remote-font-name>;
    	src: <source>;
    	font-weight: <weight>;
    	font-style: <style>
    }
    
    속성값(Values)
    <a-remote-font-name>
    font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.
    <source>
    원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
    <weight>
    폰트의 굵기(font weight) 값(생략 가능).
    <style>
    폰트 스타일(font style) 값(생략 가능).
    사용자의 로컬환경(local computer)에 설치된 폰트는 local() 이라는 구문을 사용하여 지정이 가능하다.
    만약 해당 폰트를 찾지못한다면, 다른 대체 폰트를 찾을때까지 폰트를 검색작업을 계속 할 것이다.
  • * 모든 브라우저에서 글꼴을 표시하기 위해 font-face규칙을 두번 선언해야 한다.
    @font-face{font-family:ngwoff; src:url(NanumGothic.woff)}
    @font-face{font-family:ngeot; src:url(NanumGothic.eot)}
    body{font-family:나눔고딕, NanumGothic, ngwoff, ngeot}
    
    font-face규칙을 두번 사용할 경우 시스템 글꼴이 없는 경우 IE6~9 브라우저에서 EOT형식 외에 WOFF형식도 요청하기 때문에 사용자는 불필요한 1MB미만의 파일을 추가로 내려받는 셈이다.
  • 해결방법위에서 봤듯이 IE6~8 브라우저는 EOT를 지원한다. 그렇기 때문에 불필요하게 WOFF파일까지 요청 할 필요가 없다.
    때문에 IE6~8에서는 local(※)이라는 구문을 넣어서 WOFF의 요청을 막아준다.local(※) 값의 괄호 안쪽에 포함된 ※ 기호는 사용자 시스템에 존재하지 않을만한 글꼴을 임의로 지정한 것. 굳이 2byte짜리 특수문자를 사용한 이유는 Mac OS에서 2byte짜리 문자열로 된 시스템 글꼴 이름은 아예 처리하지 않기 때문이다.
    (IE6~8 브라우저가 두번째 src속성을 해석하지 못하도록 하기 위함. local값의 용도는 사용자 로컬 시스템 글꼴이 있는 경우 참조하는 것인데 Mac 컴퓨터는 시스템 글꼴 이름이 모두 1바이트로 되어 있기 때문에 2바이트 이름을 사용해서 아예 제외. local값은 비워두면 안되기 때문에 반드시 넣어야 하고 여기에 로컬에 전혀 없을만한 글꼴이름을 넣는다.)☞ font-face 명세에 따르면 'EOT'글꼴에 대한 format('eot') 선언이 없기 때문에 선언을 굳이 안함.
  • format('woff') 포맷 타입이 선언되어있는데, format(‘woff’) 값을 명시적으로 작성하면 이 형식을 지원하는 브라우저만 글꼴을 내려받게 되어 있다.
    값은 반드시 홀따옴표 또는 쌍따옴표 안에 있어야 하며 작성하지 않는 경우 지원 여부에 무관하게 모든 형식의 글꼴을 내려받는것이 명세이다.
    글꼴을 지원하지 않으면서도 내려받는 상황을 예방하기 위해 이 형식을 지원하는 경우에만 외부 글꼴을 내려받도록 명시적으로 코드를 작성한 것이다.
    IE 7~8 브라우저는 이 코드를 해석하지 못하기 때문에 woff 글꼴을 추가로 요청하지 않도록 만든 것이다.
  • local(※) 값은 외부 자원을 참조하기 이전에 시스템에 설치된 글꼴을 우선 참조할 수 있도록 만들어 준다. 그러나 이코드에서는 IE6~8 브라우저가 local() 값을 처리하지 못하는 특징을 이용하여 WOFF 글꼴을 추가로 요청하지 않도록 해준다.
  • @font-face{
    	font-family:ng;
    	src:url(NanumGothic.eot);
    	src:local(※), url(NanumGothic.woff) format('woff')
    }
    
    body{font-family:나눔고딕, NanumGothic, ng}
    

참고

미디어 쿼리를 이용하여 @media 구문 안쪽에 @font-face규칙을 선언하는 경우 IE9 브라우저는 미디어쿼리 안의 @font-face를 무시하기 때문에 표시하지 못한다.

해결방법

* IE9 조건부 주석문 사용

<!–-[if IE 9]>
<style>
	/* This code is used only in IE 9 */
	@font-face{
		font-family:ng;
		src:url(NanumGothic.eot);
	}
	
	body{font-family:나눔고딕, NanumGothic, ng}
</style>
<![endif]-–>

* 나머지 브라우저에선 미디어쿼리를 이용

/* IE 9 does not support @font-face within @media */
@media all and (min-width:768px) {
	@font-face{
		font-family:ng;
		src:url(NanumGothic.eot);
		src:local(※), url(NanumGothic.woff) format(‘woff’);
	}

	body{font-family:나눔고딕, NanumGothic, ng}
}

해결방법

* @font-face 규칙을 미디어쿼리 밖에 선언

/* IE 9 does not support @font-face within @media */
@font-face{
	font-family:ng;
	src:url(NanumGothic.eot);
	src:local(※), url(NanumGothic.woff) format(‘woff’);
}

@media all and (min-width:768px) {
	body{font-family:나눔고딕, NanumGothic, ng}
}

IE6~8 브라우저는 미디어쿼리를 지원하기 위해 respond.min.js 파일을 사용해야 한다.(미디어쿼리 구문 안쪽에 @font-face 규칙을 추가하는 경우도 있다.)

마치며...

Font-Face(웹 폰트)의 성가신 점은 바로 브라우저 호환성이다. 브라우저마다 다르게 보인다, 브라우저마다 적용이 안 된다 등등
여러 가지 말들이 많지만, 맑은커뮤니케이션에서 테스트 해본 결과 위와 같은 방법을 사용하면 왠 만한 이슈는 예방하고 정상적으로 사용 할 수 있게끔 해준다.
이상!!!!!!!!!!

반응형
반응형
반응형웹은 데스크탑, 노트북, 넷북, 태블릿, 스마트폰, 스마트TV 등 N-Screen의 Multi Device에 어떠한 사용자도 제약없이 접근할 수 있도록 제공하는 웹을 말한다.
반응형웹에서 가장 중시되어야 할 것은 모바일을 우선순위로 해야한다.
최적화된 반응형웹 접근방식으로서 모바일을 우선에 두고 CSS를 작성하는 방법으로 가장 단순한 기기, 최소성능의 Device에 우선을 두고 작업을 하며, 이렇게 작업을 하면 기준치 이하의 Device에 과도한 짐을 지우지 않으면서, 최신 브라우저를 사용하는 사용자에게 풍부한 경험을 제공한다.
또한 웹의 창시자 팀 버너스 리 경(Tim Berners - Lee , W3C Director and inventor of the World Wide Web)은 이렇게 이야기 했다.
웹의 힘은 그것의 보편성에 있다. 장애에 구애없이 모든 사람이 접근할 수 있는 것이 필수적인 요소이다.
(The power of the Web is in its universality, Access by everyone regardless of disability is an essential aspect.)

반응형웹의 등장배경

현재 다양한 IT Device 등장함에 따라 N-Screen 욕구가 생겨나게 되고, 이에따라 Multi Device환경에 최적화된 디자인과 기능을 보여주어야 한다. 기존에는 이를 위해 사용자 브라우저 UA(User Agent) 정보를 감지하여 사용자 접속시 모바일 전용페이지로 이동할지 데스크탑 전용 페이지에 머무르게 해야 할지 판단했기에 새로운 Device가 등장할 때마다 개발자는 고민해야 햇다.
그리고 새로운 모바일 브라우저가 등장하면 개발자가 새로운 코드를 추가했다. 데스크톱과 모바일 이외에도 그 중간 정도 크기의 해상도인 태블릿 PC를 많이 사용하는 요즘과 같은 상황에는 유연하게 대응하지 못하는 방식이다. 만약 기존의 방식대로 대응한다면 태블릿 PC 전용 페이지를 추가로 개발하고 UA 정보를 추가한 다음 태블릿 PC 사용자 접속 시 태블릿 PC 전용 페이지로 이동하는 코드를 추가해야 한다.

이와 달리 반응형 웹은 사용자의 해상도와 같은 장치 특성을 해석해서 단 하나의 HTML 페이지가 여러 패턴의 CSS 뷰를 갖도록 만들어 준다. 특정 해상도에 최적화된 페이지를 만드는 것이 아니라 모든 해상도에 대응하는 페이지를 만들기 때문에 현존하는 모든 장치의 해상도를 일일이 파악할 필요가 없다. CSS3 미디어쿼리 규칙이 등장하면서 서버 측 개발자가 해야만 했던 일을 이제는 클라이언트 개발자가 할 수 있게 된 것이다. 이렇듯 웹은 데스크탑의 차원을 넘어서야 했다.

반응형웹 마크업 가이드 제작 전 고민사항

  • 1. 미디어쿼리 해상도 분기문제
  • 2. IE8 브라우저의 하위 호환성
  • 3. 모바일 환경에서의 성능문제
  • 4. 가변적 그리드 기반의 레이아웃
  • 5. 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제

고민사항1 : 미디어쿼리 해상도 분기문제 해결방법

다양한 Device를 어떻게 미디어쿼리로 분기 할 것인가에 대한 고민은 반응형웹 프로젝트를 진행하는 개발자라면 누구나 고민할 것이다.
모바일 페이지를 기본CSS로 작성하고 미디어쿼리를 사용하여 데스크탑 페이지, 테블릿페이지로 개발하면 된다.

  • 1. 데스크탑 페이지
    최근 고해상도 사용자가 많아짐에 따라 1280px 이상(데스크탑 페이지 가운데 정렬 디자인이 대부분이므로 CSS는 컨텐츠 영역을 PX로 고정한다.)으로 미디어쿼리 작성한다.
  • 2. 노트북 및 태블릿 페이지
    태블릿과 노트북은 가로사이즈가 1024px로 동일하다. 태블릿에서는 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.
    미디어쿼리의 해상도는 768px 이상 ~ 1025px 이하로 작성한다.
  • 3. 모바일 페이지
    미디어쿼리를 적용하지 않고 기본 CSS로 작성한다.
    태블릿과 같이 틸팅(화면회전)이 되므로 가로사이즈를 width="auto"로 CSS를 작성한다.
@media all and (min-width:768px) and (max-width:1024px){
/* 태블릿 및 노트북 CSS 작성 */
}

@media all and (min-width:1025px){
/* 데스크탑 CSS 작성 */
}

고민사항2 : IE8 브라우저의 하위 호환성 해결방법

반응형웹이란 IT Device에 반응하는 것이지 화면을 Resize해서 반응하는 것이 아니며, 그것이 본질이다. 그렇기에 데스크탑 페이지에서 Resize 해도 반응하지 않아도 무방하다.
그러나 클라이언트는 반응형웹의 본질에 대해서 모르는 경우가 대부분이다. 무조건 Resize되어야 반응형이라고 생각한다. 그렇기 때문에 논리적으로 설득하는것이 가장 좋은 방법이나, 안될 경우에는 Internet Exploer 6~8 버전 브라우저에서도 미디어쿼리를 해석할 수 있도록 만들어 주는 JavaScript 라이브러리가 있다.
respond.min.js라고 부르는 이 파일은 약 4KB 정도의 용량이다. 어떤 용도로 사용해도 제한이 없는 MIT 또는 BSD 라이선스를 가지고 있기 때문에 소스 코드에 포함된 라이선스 명시 조항만 지우지 않으면 github에서 언제든 내려받아 사용할 수 있다.

respond.min.js 내려받기 : https://github.com/scottjehl/Respond

respond.min.js 파일을 HTML 문서의 <head> 태그 부분에 다음과 같은 방식으로 삽입하면 Internet Exploer 6~8 버전 브라우저가 미디어쿼리를 해석할 수 있게 된다. 로컬(local)에서는 확인이 불가능 하며, 서버에 올린 후 적용된 것을 확인할 수 있다.

<!--[if lt IE 9]>
<script type="text/javascript" src="/js/respond.min.js"></script>
<![endif]-->

Internet Explorer 브라우저만 해석할 수 있는 조건부 주석을 사용했기 때문에 다른 표준 브라우저들은 이 코드를 무시하고 JS 파일을 요청하지 않으며 IE9 미만인 IE6 ~ IE8 에서만 사용된다.

고민사항3 : 모바일 환경에서의 성능문제 해결방법

데스크탑은 성능이 좋아 속도에 문제가 없지만, 모바일 Device 경우 낮은성능으로 인하여 최적화를 고려해야 한다.

  • 1. 모바일 CSS
    모바일 CSS를 기본으로 작성하고, 태블릿과 데스크탑 페이지를 미디어쿼리로 작성하여 모바일에 불필요한 CSS는 요청하지 않게 한다. 미디어쿼리의 경우 해당 해상도가 아닐경우 CSS를 요청하지 않아 성능을 최적화 할 수 있다.
  • 2. Sprite 기법 사용
    여러개의 잘개 쪼개진 이미지는 서버에 많은 요청을 유발하므로 의미가 비슷한 이미지의 경우 병합하여 사용함으로서 서버측에 이미지 요청 횟수를 줄여 성능을 최적화 한다.
  • 3. 들여쓰기 및 띄워쓰기 최소화
    CSS 및 마크업 들여쓰기 및 띄워쓰기를 최소화하여 성능을 높여준다.

    NHN Markup Coding Convention : http://html.nhncorp.com/

  • 4. 웹폰트 요청분기
    웹폰트사용 시 기본 CSS로 작성하지 않고 해당 데스크탑 미디어쿼리부분에 작성하여 모바일 Device의 성능을 올려준다.

고민사항4 : 가변적 그리드 기반의 레이아웃 해결방법

  • 1. 컨텓츠 레이아웃 시 rem, %를 사용하여 개발할 경우 아직 출시되지 않은 device에 대비한다.
  • 2. 이미지와 미디어들도 감싸 있는 그리드에 맞게 max-width:100% 넣어준다.

고민사항5 : 웹폰트를 기본글꼴로 사용시 브라우저 호환성 및 모바일 성능저하 문제 해결방법

IE9은 @media 규칙 내부에 @font-face 허용 안하기 때문에 @media 구문 안쪽에 @font-face 규칙을 선언하는 경우 IE9 브라우저는 외부 글꼴을 요청하지 않기 때문에 표시하지 못합니다.
그렇기 때문에 웹폰트 사용 시 IE9 조건부 주석을 사용하여 IE9에서만 해석할 수 있도록 개발해야 한다.

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="iefont9.css">
<![endif]-->

반응형웹 기본가이드 다운로드

맑은커뮤니케이션에서 만든 반응형웹 기본가이드는 미디어쿼리 및 자바스크립트로 분기하는 방법 2가지 자료를 첨부하였습니다.
사용 시 작성자 주석부분 지우지 말고 사용해 주세요.

반응형웹_1_미디어쿼리.zip
다운로드
반응형웹_2_자바스크립트.zip
다운로드

참고블로그 : http://helloworld.naver.com/helloworld/81480

반응형
반응형
Property 지원 Browser 설명 추가설명
Border Radius ie9 firefox chrome safari opera 둥근 모서리를 넣기
Box-shadow ie9 firefox chrome safari opera 박스에 그림자 효과 주는 속성
Text-shadow firefox chrome safari opera 텍스트에 그림자 효과 주는 속성
Multiple Colummns firefox chrome safari 텍스트 레이아웃에 대해 여러 개의 열을 주는 속성
Transitions firefox chrome safari opera css 값의 변화를 부드러운 애니메이션으로 표현함
Transform firefox chrome safari opera 회전 효과, 스케일링(확대/축소)효과, 기울임 조절, 위치 변경
Animation chrome safari 개체에 동적인 효과를 주기
Text-overflow ie7 ie8 ie9 firefox chrome safari opera 텍스트 랩핑(Wrapping)과 관련되는 스타일
Background-Size ie9 firefox chrome safari opera 백그라운드에 깔린 이미지의 사이징을 조절
반응형
반응형
웹퍼블리싱을 학원에서 배우거나 책으로 공부할때 CSS를 기본속성 값 그대로 표현하는 법은 많이 가르치고 책에도 나와 있지만, CSS Shorthand 대해선 사용하는 방법만 나와있지 정확한 순서나 원리 원칙에 대해 나와있는 것은 보기 힘듭니다. 그래서 CSS Shorthand에 대하여 정리하고 합니다.
CSS Shorthand, -우리말로 "줄여쓰기, 속기"- 는 스타일시트의 파일을 줄여줄 뿐만 아니라 가독성을 높여주고 수정할때에도 빠르게 할 수 있습니다.

1. Font

font 속성을 속기로 사용할때 선언하지 않은 값은 기본 값이됩니다. font의 기본 속성은 아래와 같습니다.

  • - font-style
  • - font-variant
  • - font-weight
  • - font-size
  • - line-height
  • - font-family

줄여쓰지 않고 속성 적용

.element {
	font-style: normal;
	font-variant: normal;
	font-weight: normal;
	font-size: inherit;
	line-height: normal;
	font-family: inherit;
}

CSS Shorthand 적용

.element {font: normal normal normal inhert/normal inherit;}

2. Background

배경화면은 단색, 이미지등으로 적용할 수 있습니다. 속성은 아래와 같습니다.

  • - background-color
  • - background-image
  • - background-repeat
  • - background-position
  • - background-attachment

줄여쓰지 않고 속성 적용

.element {
	background-color: transparent;
	background-image: none;
	background-repeat: repeat;
	background-position: top left;
	background-attachment: scroll;
}

CSS Shorthand 적용

.element {background: transparent url(image.png) repeat top left scroll;}

3. List

목록속성은 단 3가지만 있습니다. 속성은 아래와 같습니다.

  • - list-style-type
  • - list-style-position
  • - list-image

줄여쓰지 않고 속성 적용

.element {
	list-style-type: square;
	list-style-position: inside;
	list-style-image: url(image.png);
}

CSS Shorthand 적용

.element {list-style: square inside url(image.png);}

4. border

Border는 상하좌우의 속성을 지닙니다. 속성은 아래와 같습니다.

  • - border-width
  • - border-top
  • - border-top-color
  • - border-top-style
  • - border-top-width
  • - border-style
  • - border-right
  • - border-right-color
  • - border-right-style
  • - border-right-width
  • - border-color
  • - border-bottom
  • - border-bottom-color
  • - border-bottom-style
  • - border-bottom-width
  • - border-left
  • - border-left-color
  • - border-left-style
  • - border-left-width

Border 속성은 위와같이 많습니다. 하지만 많이 사용하는 것은 파란색으로 쓰여진 글자부분입니다. 위3가지 속성을 줄여서 사용하시면 되고 사용방법은 간답합니다.

줄여쓰지 않고 속성 적용

.element {
	border-width: 5px;
	border-style: dotted;
	border-color: #000;
}

CSS Shorthand 적용

.element {border: 5px solid #000;}

5. Margin과 Padding

Margin과 Padding은 각각 4가지 입니다. 속성은 아래와 같습니다. (padding 줄여쓰기 또한 아래와 동일합니다.)

  • - margin-top
  • - margin-right
  • - margin-bottom
  • - margin-left
  • - padding-top
  • - padding-right
  • - padding-bottom
  • - padding-left

줄여쓰지 않고 속성 적용

.element {
	margin-top: 5px;
	margin-right: 7px;
	margin-bottom: 5px;
	margin-left: 7px;
}

CSS Shorthand 적용 (순서는 위 > 오른쪽 > 아래 > 왼쪽 순서로 작성합니다.)

.element {margin: 5px 7px 5px 7px;}

CSS Shorthand 적용 (margin의 상하 속성이 같고, 좌우 속성이 같을경우)

.element {margin: 5px 7px;}

CSS Shorthand 적용 (margin의 상하 좌우 속성이 같을경우)

.element {margin: 5px;}

6. outline

outline은 element 요소 주변의 구분할 때 사용합니다. 속성은 아래와 같습니다.

  • - outline-width
  • - outline-style
  • - outline-color

줄여쓰지 않고 속성 적용

.element {
	outline-width: 3px;
	outline-style: dotted;
	outline-color: #000;
}

CSS Shorthand 적용

.element {outline: 3px dotted #000;}

7. Transition

Transition은 CSS LEVEL3 으로 마우스 이벤트에 의한 동적인 요소를 표현하고자 할 때 주로 사용됩니다. 속성은 아래와 같습니다.

  • - transition-property
  • - transition-timing-function
  • - transition-delay

줄여쓰지 않고 속성 적용

transition-property: all;
transition-duration: 3s;
transition-timing-function: ease-in;
transition-delay: 2s;

/* 파폭 4 */
-moz-transition-property: all;
-moz-transition-duration: 3s;
-moz-transition-timing-function: ease-in;
-moz-transition-delay: 2s;

/* 크롬과 사파리 */
-webkit-transition-property: all;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transition-delay: 2s;

/* 오페라 */
-o-transition-property: all;
-o-transition-duration: 3s;
-o-transition-timing-function: ease-in;
-o-transition-delay: 2s;

CSS Shorthand 적용

transition: all 3s ease-in 2s;
	
/* 파폭 4 */
-moz-transition: all 3s ease-in 2s;

/* 크롬과 사파리 */
-webkit-transition: all 3s ease-in 2s;

/* 오페라 */
-o-transition: all 3s ease-in 2s;

마치며

CSS 줄여쓰기는 문법적으로 강제성을 가지지는 않습니다. 그러나 작성시 시간절약과 CSS크기를 줄일 수 있습니다.
또한 저 같은 경우는 줄여쓰기를 자주 사용하는 편입니다. 그래서 위와 같이 정리하였으니 CSS작성하실 때 많은 도움이 되었으면 합니다.

반응형
반응형

맑은커뮤니케이션에서 현재까지(글 작성일 현재) Completed Work로 규격의 정의가 끝나 모든 모던 브라우저에서 실 사용이 가능한 Selectors Level 3 까지의 Selector들에 대해 정리해 보았습니다.

이전 http://biew.co.kr/10 포스트에서와 같이 selectivizr를 이용하면 사용 가능한 Selector들이 있고, 이를 사용하면 불필요한 클래스(특히 class="last" 또는 class="first" 등) 없이 사용 가능하므로 Front-end 단 Mark up 작성자도 편하고, Server 단 개발자와의 협업도 조금 더 수월해 질 것 입니다.
Selector는 많이 이해하고 응용력이 풍부할 수록 상상 이상의 디자인들을 심플하고 시멘틱한 마크업에 이미지 없이 입혀줄 수도 있습니다. (물론 다른 CSS3들과의 아름다운 조화가 필요합니다.)

현재 예제로 입력된 내용들이 썩 좋다고 이야기 드릴 수 없어서 죄송할 따름입니다만, 더 적합하고 이해하기 쉬운 예제들을 건의해주신다면 업데이트 하도록 하겠습니다.

(※ CSS3 예제들 같은 경우엔 IE를 제외한 브라우저에서 보셔야 정상적인 화면을 보실 수 있습니다. IE9도 지원은 하되 예제가 잘 안나오는 현상이 있습니다.)

CSS3에서 새로 추가된 Seletor

HTML5에서 새로 추가된 input Type
Selector 지원 Browser 설명
E[attr^=val] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값이 'val'으로 시작하는 요소를 선택
Mark up /* CSS */
.attrStartChar::after {display:block;clear:both;content:''}
.attrStartChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrStartChar > li[title^=Chrome] {border:3px solid purple}

/* HTML */
<ul class="attrStartChar">
     <li title="Internet Explorer">Internet Explorer</li>
     <li title="Firefox Browser">Firefox</li>
     <li title="Chrome Browser">Google Chrome</li>
     <li title="Safari Browser">Apple Safari</li>
</ul>
Result
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Apple Safari
E[attr$=val] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값이 'val'으로 끝나는 요소를 선택
Mark up /* CSS */
.attrEndChar::after {display:block;clear:both;content:''}
.attrEndChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrEndChar > li[title$=Browser] {border:3px solid purple}

/* HTML */
<ul class="attrEndChar">
     <li title="Internet Explorer">Internet Explorer</li>
     <li title="Firefox Browser">Firefox</li>
     <li title="Chrome Browser">Google Chrome</li>
     <li title="Safari Browser">Apple Safari</li>
</ul>
Result
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Apple Safari
E[attr*=val] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값에 'val'이 포함된 요소를 선택
Mark up /* CSS */
.attrAllChar::after {display:block;clear:both;content:''}
.attrAllChar > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrAllChar > li[title*=icon] {border:3px solid purple}

/* HTML */
<ul class="attrAllChar">
     <li title="icon creator">icon creator</li>
     <li title="nice graphics">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>
Result
  • icon creator
  • nice graphics
  • amazing icon list
  • greate png icons 25
E:root ie9 firefox chrome safari opera 문서의 최상위 요소(html, xml) 선택
 
E:nth-child(n) ie9 firefox chrome safari opera 앞으로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)
Mark up /* CSS */
.nthC_list::after {display:block;clear:both;content:''}
.nthC_list > li{float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthC_list.num {float:left;margin-right:30px}
.nthC_list.num span, .nthC_list.num p {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthC_list.num span:nth-child(3) {border:3px solid purple}
.nthC_list.odd_list > li:nth-child(odd) {border:3px solid purple}
.nthC_list.even_list > li:nth-child(even) {border:3px solid purple}
.nthC_list.etc > li:nth-child(3n+2) {border:3px solid purple}

/* HTML */
<div class="nthC_list num">
     <p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
<div class="nthC_list num">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>

<ul class="nthC_list odd_list">
     <li>John William Mauchly</li>
     <li>John Adam Presper Eckert Jr.</li>
     <li>John Vincent Atanasoff</li>
     <li>Clifford Edward Berry</li>
</ul>

<ul class="nthC_list even_list">
     <li>John William Mauchly</li>
     <li>John Adam Presper Eckert Jr.</li>
     <li>John Vincent Atanasoff</li>
     <li>Clifford Edward Berry</li>
</ul>

<ul class="nthC_list etc">
     <li>list1</li>
     <li>list2</li>
     <li>list3</li>
     <li>list4</li>
     <li>list5</li>
     <li>list6</li>
     <li>list7</li>
     <li>list8</li>
</ul>
Result
  • P Element


    Span Element

    P Element


    P Element


    P Element


    P Element


    P Element


    Span Element

    P Element


    P Element


    • John William Mauchly
    • John Adam Presper Eckert Jr.
    • John Vincent Atanasoff
    • Clifford Edward Berry
    • John William Mauchly
    • John Adam Presper Eckert Jr.
    • John Vincent Atanasoff
    • Clifford Edward Berry
    • list1
    • list2
    • list3
    • list4
    • list5
    • list6
    • list7
    • list8
E:nth-last-child(n) ie9 firefox chrome safari opera 뒤로부터 지정된 순서와 일치하는 요소가 E라면 선택 (E아닌 요소의 순서가 계산에 포함됨)
Mark up /* CSS */
.nthLc_wrap {float:left;margin-right:30px}
.nthLc_wrap > p, .nthLc_wrap > span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthLc_wrap > span:nth-last-child(4) {border:3px solid purple}

/* HTML */
<div class="nthLc_wrap">
     <p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
<div class="nthLc_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
Result

P Element


Span Element

P Element


P Element


P Element

P Element


P Element


Span Element

P Element


P Element

E:nth-of-type(n) ie9 firefox chrome safari opera E 요소 중 앞으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)
Mark up /* CSS */
.nthOt_wrap span {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthOt_wrap span:nth-of-type(5) {border:3px solid purple}

/* HTML */
<div class="nthOt_wrap">
     <span>DOS</span><br><span>Windows</span><br><span>Mac OS</span><span>UNIX</span><br><span>LINUX</span>
</div>
Result
DOS
Windows
Mac OSUNIX
LINUX
E:nth-last-of-type(n) ie9 firefox chrome safari opera E 요소 중 끝으로부터 순서가 일치하는 요소 선택 (E 요소의 순서만 계산에 포함됨)
Mark up /* CSS */
.nthLot_wrap span, .nthLot_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.nthLot_wrap span:nth-last-of-type(1) {border:3px solid purple}

/* HTML */
<div class="nthLot_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
Result

P Element


P Element


Span Element

P Element


P Element

E:last-child ie9 firefox chrome safari opera 마지막에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)
Mark up /* CSS */
.lc_wrap {float:left;margin-right:30px}
.lc_wrap span, .lc_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.lc_wrap span:last-child {border:3px solid purple}

/* HTML */
<div class="lc_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="lc_wrap">
     <p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><span>Span Element</span>
</div>
Result

P Element


P Element


Span Element

P Element


P Element

P Element


P Element


P Element


P Element


Span Element
E:first-of-type ie9 firefox chrome safari opera E 요소 중 첫 번째 E를 선택 (E 요소의 순서만 계산에 포함됨)
Mark up /* CSS */
.fOt_wrap {float:left;margin-right:30px}
.fOt_wrap span, .fOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.fOt_wrap p:first-of-type {border:3px solid purple}

/* HTML */
<div class="fOt_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="fOt_wrap">
     <span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
Result

P Element


P Element


Span Element

P Element


P Element

Span Element

P Element


P Element


P Element


P Element

E:last-of-type ie9 firefox chrome safari opera E 요소 중 마지막 E를 선택 (E 요소의 순서만 계산에 포함됨)
Mark up /* CSS */
.lOt_wrap {float:left;margin-right:30px}
.lOt_wrap span, .lOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.lOt_wrap span:last-of-type {border:3px solid purple}

/* HTML */
<div class="lOt_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="lOt_wrap">
     <p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><span>Span Element</span>
</div>
Result

P Element


P Element


Span Element

P Element


P Element

P Element


P Element


P Element


P Element


Span Element
E:only-child ie9 firefox chrome safari opera E 요소가 유일한 자식이면 선택 (E 아닌 요소가 포함되면 선택안함)
Mark up /* CSS */
.oc_wrap {float:left;margin-right:30px}
.oc_wrap span, .oc_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.oc_wrap p:only-child {border:3px solid purple}

/* HTML */
<div class="oc_wrap">
     <p>P Element</p><br><span>Span Element</span>
</div>
<div class="oc_wrap">
     <p>P Element</p>
</div>
Result

P Element


Span Element

P Element

E:only-of-type ie9 firefox chrome safari opera E 요소가 유일한 타입이면 선택 (E 아닌 요소가 포함되어도 선택)
Mark up /* CSS */
.oOt_wrap {float:left;margin-right:30px}
.oOt_wrap span, .oOt_wrap p {display:inline-block;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.oOt_wrap p:only-of-type {border:3px solid purple}

/* HTML */
<div class="oOt_wrap">
     <p>P Element</p><br><span>Span Element</span>
</div>
<div class="oOt_wrap">
     <p>P Element</p>
</div>
Result

P Element


Span Element

P Element

E:empty ie9 firefox chrome safari opera 텍스트 및 공백을 포함하여 자식 요소가 없는 E를 선택
Mark up /* CSS */
.empty_list::after {display:block;clear:both;content:''}
.empty_list > li {float:left;margin:5px;padding:5px 10px;border:3px solid #ddd;box-sizing:border-box}
.empty_list > li:empty {border:3px solid purple}

/* HTML */
<ul class="empty_list">
     <li>첫번째</li>
     <li></li>
     <li>세번째</li>
</ul>
Result
  • 첫번째
  • 세번째
E:target ie9 firefox chrome safari opera E의 URI가 요청되면 선택 (따라서 E는 ID가 지정되어야 함)
Mark up /* CSS */
.targetUl::after {display:block;clear:both;content:''}
.targetUl > li {float:left;margin-bottom:10px}
.targetUl > li > a {display:inline-block;padding:5px 10px}
.targetDiv {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.targetDiv:target {border:3px solid purple}

/* HTML */
<ul class="targetUl">
     <li><a href="#target1">#target1 go</a></li>
     <li><a href="#target2">#target2 go</a></li>
     <li><a href="#target3">#target3 go</a></li>
</ul>
<div id="target1" class="targetDiv">target1</div>
<div id="target2" class="targetDiv">target2</div>
<div id="target3" class="targetDiv">target3</div>
Result
target1
target2
target3
E:enabled ie9 firefox chrome safari opera 사용 가능한 폼 컨트롤(input, textarea, select, button) E를 선택
Mark up /* CSS */
.enabled_list::after {display:block;clear:both;content:''}
.enabled_list > li {float:left;margin:5px}
.enabled_list > li input[type=text]:enabled {border:2px solid purple}
.enabled_list > li input[type=checkbox]:enabled {box-shadow: 0 0 0 2px purple}
.enabled_list > li button:enabled {border:2px solid purple;color:purple}

/* HTML */
<ul class="enabled_list">
     <li><input type="text" disabled="disabled" /></li>
     <li><input type="text" /></li>
     <li><input type="checkbox" disabled="disabled" /></li>
     <li><input type="checkbox" /></li>
     <li><button disabled="disabled">button</button></li>
     <li><button>button</button></li>
</ul>
Result
  •  
  •  
E:disabled ie9 firefox chrome safari opera 사용 불가능한 폼 컨트롤(input, textarea, select, button) E를 선택
Mark up /* CSS */
.disabled_list::after {display:block;clear:both;content:''}
.disabled_list > li {float:left;margin:5px}
.disabled_list > li input[type=text]:disabled {border:2px solid purple}
.disabled_list > li input[type=checkbox]:disabled {box-shadow: 0 0 0 2px purple}
.disabled_list > li button:disabled {border:2px solid purple;color:purple}

/* HTML */
<ul class="disabled_list">
     <li><input type="text" disabled="disabled" /></li>
     <li><input type="text" /></li>
     <li><input type="checkbox" disabled="disabled" /></li>
     <li><input type="checkbox" /></li>
     <li><button disabled="disabled">button</button></li>
     <li><button>button</button></li>
</ul>
Result
  •  
  •  
E:checked ie9 firefox chrome safari opera 선택된 폼 컨트롤(input check="checked") E를 선택
Mark up /* CSS */
.checked_list::after {display:block;clear:both;content:''}
.checked_list > li {float:left;margin:5px}
.checked_list > li input[type=checkbox]:checked {box-shadow: 0 0 0 2px purple}

/* HTML */
<ul class="checked_list">
     <li><input type="checkbox" /></li>
     <li><input checked="checked" type="checkbox" /></li>
</ul>
Result
E:not(S) ie9 firefox chrome safari opera S가 아닌 E 요소를 선택
Mark up /* CSS */
.not_list::after {display:block;clear:both;content:''}
.not_list > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.not_list > li:not(:nth-child(2n)) {border:3px solid purple}

/* HTML */
<ul class="not_list">
     <li>list1</li>
     <li>list2</li>
     <li>list3</li>
     <li>list4</li>
     <li>list5</li>
</ul>
Result
  • list1
  • list2
  • list3
  • list4
  • list5
E~F ie9 firefox chrome safari opera E 요소가 앞에 존재하면 F를 선택
Mark up /* CSS */
.wave_warp ul {margin:7px 0 20px}
.wave_warp ul:last-child {margin-bottom:0}
.wave_warp ul::after {display:block;clear:both;content:''}
.wave_warp ul > li{float:left;margin-right:15px}
.wave_warp h3~ul {color: orangered}

/* HTML */
<div class="wave_warp">
     <h3>Won</h3>
     <ul>
         <li>1000 <span>원</span></li>
         <li>2000 <span>원</span></li>
         <li>500 <span>원</span></li>
         <li>100 <span>원</span></li>
     </ul>
     <h3>US Dollar</h3>
     <ul>
         <li>1 <span>달러</span></li>
         <li>2 <span>달러</span></li>
     </ul>
     <h4>US Cent</h4>
     <ul>
         <li>50 <span>센트</span></li>
         <li>10 <span>센트</span></li>
     </ul>
</div>
Result

Won

  • 1000
  • 2000
  • 500
  • 100

US Dollar

  • 1 달러
  • 2 달러

US Cent

  • 50 센트
  • 10 센트

CSS1 Seletor

기존 input Type
Selector 지원 Browser 설명
E ie6 ie7 ie8 ie9 firefox chrome safari opera E 요소를 선택
Mark up /* CSS */
.e_select_wrap span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid purple;box-sizing:border-box}

/* HTML */
<div class="e_select_wrap">
     <span>P Element</span>
</div>
Result
P Element
E:link ie6 ie7 ie8 ie9 firefox chrome safari opera 아직 방문한 적이 없는 hypertext의 앵커 E를 선택
Mark up /* CSS */
.link_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}

/* HTML */
<div class="link_wrap">
     <a href="#">Anchor Element</a>
</div>
Result
E:visited ie6 ie7 ie8 ie9 firefox chrome safari opera 이미 방문한 hypertext의 앵커 E를 선택
Mark up /* CSS */
.visited_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.visited_wrap a:visited {border:3px solid darkcyan}

/* HTML */
<div class="visited_wrap">
     <a href="#">Anchor Element</a>
</div>
Result
E:active ie6 ie7 ie8 ie9 firefox chrome safari opera E 요소에 마우스가 클릭되어 있거나 엔터가 눌려있는 동안 E를 선택
Mark up /* CSS */
.active_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.active_wrap a:visited {border:3px solid darkcyan}
.active_wrap a:active {border:3px solid goldenrod}

/* HTML */
<div class="active_wrap">
     <a href="#">Anchor Element</a><span>마우스를 클릭하고 있어보세요.<br>(마우스를 띄는 순간 색상이 원상복귀됩니다.)</span>
</div>
Result
Anchor Element마우스를 클릭하고 있어보세요.
(마우스를 띄는 순간 색상이 원상복귀됩니다.)
E:hover ie6 ie7 ie8 ie9 firefox chrome safari opera E 요소에 마우스가 올라가 있는 동안 E를 선택
Mark up /* CSS */
.hover_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.hover_wrap a:visited {border:3px solid darkcyan}
.hover_wrap a:active {border:3px solid goldenrod}
.hover_wrap a:hover {border:3px solid lightcoral}

/* HTML */
<div class="hover_wrap">
     <a href="#">Anchor Element</a><span>마우스 커서를 올려보세요.</span>
</div>
Result
Anchor Element마우스 커서를 올려보세요.
E:focus ie6 ie7 ie8 ie9 firefox chrome safari opera E 요소에 포커스가 머물러 있는 동안 E를 선택
Mark up /* CSS */
.focus_wrap a:link {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.focus_wrap a:visited {border:3px solid darkcyan}
.focus_wrap a:active {border:3px solid goldenrod}
.focus_wrap a:hover {border:3px solid lightcoral}
.focus_wrap a:focus {border:3px solid lightcoral}

/* HTML */
<div class="focus_wrap">
     <a href="#">Anchor Element</a>
     <span>
         마우스로 클릭해보세요.<br>
         (마우스를 클릭하고 있지 않아도 유지되며, 다른 곳을 클릭하여 포커스가 사라지는 순간 색상이 원상복귀됩니다.)
     </span>
</div>
Result
Anchor Element 마우스로 클릭해보세요.
(마우스를 클릭하고 있지 않아도 유지되며, 다른 곳을 클릭하여 포커스가 사라지는 순간 색상이 원상복귀됩니다.)
E::first-line ie7 ie8 ie9 firefox chrome safari opera E 요소의 첫 번째 라인을 선택(블럭요소에서만 사용가능)
Mark up /* CSS */
.firstLine_wrap::first-line {color:lightcoral}

/* HTML */
<div class="firstLine_wrap">
     오늘의 날씨는 "맑음"입니다.<br>
     즐거운 마음으로 하루를 활기차게 보냅시다.<br>
     내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.
</div>
Result
오늘의 날씨는 "맑음"입니다.
즐거운 마음으로 하루를 활기차게 보냅시다.
내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.
E::first-letter ie7 ie8 ie9 firefox chrome safari opera E 요소의 첫 번째 문자를 선택(블럭요소에서만 사용가능)
Mark up /* CSS */
.firstLetter_wrap::first-letter {color:lightcoral}

/* HTML */
<div class="firstLetter_wrap">
     오늘의 날씨는 "맑음"입니다.<br>
     즐거운 마음으로 하루를 활기차게 보냅시다.<br>
     내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.
</div>
Result
오늘의 날씨는 "맑음"입니다.
즐거운 마음으로 하루를 활기차게 보냅시다.
내일도 마찬가지로 맑은 날씨가 계속될 것으로 보입니다.
E.warning ie6 ie7 ie8 ie9 firefox chrome safari opera 클래스의 이름의 warning으로 지정된 E 요소 선택
Mark up /* CSS */
span.warning {color:lightcoral}

/* HTML */
<span class="warning">warning class</span>
Result warning class
E#myid ie6 ie7 ie8 ie9 firefox chrome safari opera 아이디의 이름이 myid로 지정된 E 요소 선택
Mark up /* CSS */
span#myid {color:lightcoral}

/* HTML */
<span id="myid">myid id</span>
Result myid id
E F ie6 ie7 ie8 ie9 firefox chrome safari opera E 요소의 자손인 F 요소를 선택
Mark up /* CSS */
.eInF span span {color:lightcoral}

/* HTML */
<div class="eInF">
     <span>P Element in <span>span Element</span></span>
</div>
Result
P Element in span Element

CSS2 Seletor

기존 input Type
Selector 지원 Browser 설명
* ie6 ie7 ie8 ie9 firefox chrome safari opera 모든 요소를 선택
Mark up /* CSS */
.starSeletor_wrap * {color:lightcoral}

/* HTML */
<div class="starSeletor_wrap">
     <span>p Element,</span><br>
     <span>span Element,</span>
     <blockquote data-ke-style="style1">blockquote Element,</blockquote>
     <dl>
         <dt>dt Element,</dt>
         <dd>dd Element</dd>
     </dl>
</div>
Result
p Element,
span Element,
blockquote Element,
dt Element,
dd Element
E[attr] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성이 포함된 요소 E를 선택
Mark up /* CSS */
.attrNormal::after {display:block;clear:both;content:''}
.attrNormal > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrNormal > li[title] {border:3px solid purple}

/* HTML */
<ul class="attrNormal">
     <li title="icon creator">icon creator</li>
     <li>nice graphics</li>
     <li>amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>
Result
  • icon creator
  • nice graphics
  • amazing icon list
  • greate png icons 25
E[attr=var] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값이 정확하게 일치하는 'var'이 포함되는 요소를 선택
Mark up /* CSS */
.attrVar::after {display:block;clear:both;content:''}
.attrVar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrVar > li[title='amazing icon list'] {border:3px solid purple}

/* HTML */
<ul class="attrVar">
     <li title="icon creator">icon creator</li>
     <li title="nice">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>
Result
  • icon creator
  • nice graphics
  • amazing icon list
  • greate png icons 25
E[attr~=var] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값에 공백으로 분리된 값이 일치하는 'var'이 포함되는 요소를 선택
Mark up /* CSS */
.attrWaveChar::after {display:block;clear:both;content:''}
.attrWaveChar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrWaveChar > li[title~=icon] {border:3px solid purple}

/* HTML */
<ul class="attrWaveChar">
     <li title="icon creator">icon creator</li>
     <li title="nice graphics">nice graphics</li>
     <li title="amazing icon list">amazing icon list</li>
     <li title="greate png icons 25">greate png icons 25</li>
</ul>
Result
  • icon creator
  • nice graphics
  • amazing icon list
  • greate png icons 25
E[attr|=var] ie7 ie8 ie9 firefox chrome safari opera 'attr' 속성의 값이 'val' 또는 'val-'으로 시작되는 요소 E를 선택
Mark up /* CSS */
.attrDashChar::after {display:block;clear:both;content:''}
.attrDashChar > li {float:left;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.attrDashChar > li[id|=icon] {border:3px solid purple}

/* HTML */
<ul class="attrDashChar">
     <li id="icon-1">icon num1</li>
     <li id="icon-2">icon num2</li>
     <li id="icon-3">icon num3</li>
     <li id="icon-4">icon num4</li>
     <li id="icon-5">icon num5</li>
</ul>
Result
  • icon num1
  • icon num2
  • icon num3
  • icon num4
  • icon num5
E:first-child ie7 ie8 ie9 firefox chrome safari opera 처음에 등장하는 요소가 E라면 선택 (E 아닌 요소의 순서가 계산에 포함됨)
Mark up /* CSS */
.fc_wrap {float:left;margin-right:30px}
.fc_wrap > p, .fc_wrap > span {display:inline-block;margin:5px;padding: 5px 10px;border:3px solid #ddd;box-sizing:border-box}
.fc_wrap > span:first-child {border:3px solid purple}

/* HTML */
<div class="fc_wrap">
     <p>P Element</p><br><p>P Element</p><br><span>Span Element</span><p>P Element</p><br><p>P Element</p>
</div>
<div class="fc_wrap">
     <span>Span Element</span><p>P Element</p><br><p>P Element</p><br><p>P Element</p><br><p>P Element</p>
</div>
Result

P Element


P Element


Span Element

P Element


P Element

Span Element

P Element


P Element


P Element


P Element

E:lang(en) ie8 ie9 firefox chrome safari opera HTML lang 속성의 값이 'en'으로 지정된 요소를 선택
Mark up /* CSS */
.lang_wrap span{font-weight:bold}
.lang_wrap ul{margin-top:7px}
.lang_wrap ul > li {margin:2px 0}
.lang_wrap ul > li:lang(en) {color:lightcoral}

/* HTML */
<div class="lang_wrap">
     <span>"안녕"의 다른 나라 말들</span><br>
     <ul>
         <li lang="en">Hello</li>
         <li lang="de">Hallo</li>
         <li lang="it">Ciao</li>
         <li lang="pt">oi</li>
     </ul>
</div>
Result
"안녕"의 다른 나라 말들
  • Hello
  • Hallo
  • Ciao
  • oi
E::before ie8 ie9 firefox chrome safari opera E 요소의 시작 지점에 생성된 요소를 선택
Mark up /* CSS */
.before_list > li {position:relative;margin:5px 0;padding-left:12px}
.before_list > li::before {display:block;position:absolute;top:50%;left:0;width:4px;height:4px;background-color:lightcoral;transform:translateY(-50%);content:''}

/* HTML */
<ul class="before_list">
     <li>iPhone</li>
     <li>Mac mini</li>
     <li>Macbook air</li>
     <li>iPad</li>
</ul>
Result
  • iPhone
  • Mac mini
  • Macbook air
  • iPad
E::after ie8 ie9 firefox chrome safari opera E 요소의 끝 지점에 생성된 요소를 선택
Mark up /* CSS */
.after_list::after {display:block;clear:both;content:''}
.after_list > li {float:left;position:relative;margin:5px 0;padding:0 10px}
.after_list > li::after {display:block;position:absolute;top:50%;right:0;width:1px;height:12px;background-color:lightcoral;transform:translateY(-50%);content:''}
.after_list > li:last-child::after {display:none}

/* HTML */
<ul class="after_list">
     <li>500</li>
     <li>800</li>
     <li>1000</li>
     <li>5000</li>
</ul>
Result
  • 500
  • 800
  • 1000
  • 5000
E>F ie7 ie8 ie9 firefox chrome safari opera E 요소의 자식인 F 요소를 선택
Mark up /* CSS */
.gt_list li {margin-left:10px}
.gt_list > li > ul > li {color:lightcoral}

/* HTML */
<ul class="gt_list">
     <li>리스트 내용
         <ul>
             <li>리스트 내 리스트
                 <ul>
                     <li>그 안의 또 리스트</li>
                     <li>그 안의 또 리스트</li>
                 </ul>
             </li>
             <li>리스트 내 리스트</li>
             <li>리스트 내 리스트</li>
         </ul>
     </li>
     <li>리스트 내용</li>
     <li>리스트 내용</li>
</ul>
Result
  • 리스트 내용
    • 리스트 내 리스트
      • 그 안의 또 리스트
      • 그 안의 또 리스트
    • 리스트 내 리스트
    • 리스트 내 리스트
  • 리스트 내용
  • 리스트 내용
E+F ie7 ie8 ie9 firefox chrome safari opera E 요소 바로 다음에 오는 F 형제 요소를 선택
Mark up /* CSS */
.plus_wrap h4 {margin-bottom:7px}
.plus_wrap h4 + span {color:lightcoral}

/* HTML */
<div class="plus_wrap">
     <h4>Apple iPhone</h4>
     <span>It's the most amazing iPhone yet.</span><br>
     <span>Copyright © 2012 Apple Inc. All rights reserved.</span>
</div>
Result

Apple iPhone

It's the most amazing iPhone yet.
Copyright © 2012 Apple Inc. All rights reserved.
반응형
반응형
CSS3 미디어 쿼리는 웹의 미래에 있어서 중요한 의미를 갖습니다. Device의 종류 별로만 스타일을 다르게 줄 수 있었던 이전과는 달리 Device 각각에 맞춰서 스타일에 변화를 줄 수 있기 때문입니다. 그 배경에는 웹에 접근할 수 있는 장치의 다양성이 점점 커지는 현상과, 이렇게 다양한 장치에서의 뷰를 효과적으로 컨트롤 할 수 있느냐에 대한 고민에서 시작되었습니다.
그리고 W3C에서는 이런 고민들은 이전부터 해왔습니다. 이에 MediaQuery라는 것이 탄생한 것 같습니다. 그렇다면 미디어쿼리가 무엇이고, 어떻게 사용하는지에 대하여 알아 보겠습니다.

브라우저 호환성

IE8 이하 브라우저에서 HTML5 적용하는 방법

현재 IE를 제외하면 미디어 쿼리를 지원하지 않는 브라우저 찾기가 정말 어렵습니다. 크롬, 사파리, 파이어폭스, 오페라 등은 모두 HTML5와 CSS3를 지원하기 때문입니다.
그럼 MediaQuery 사용하려면 먼저 미디어 쿼리를 지원하지 않는 브라우저를 확인해야 하는데요. 먼저 인터넷 익스플로러(이하 IE) 6, 7, 8은 CSS3 미디어쿼리를 지원하지 않습니다. 그냥 전체를 인식해서 알고 있는 미디어 종류가 아니니 무시하는 것으로 생각합니다.
정리하자면 IE 8 이하 버전을 제외하면 대중적인 모든 브라우저가 미디어 쿼리를 지원합니다. 그렇다면 IE를 상대적으로 많이 쓰는 우리나라에서는 사용할 수 없는가? 하는 의문의 가지게 됩니다. 하지만 사용이 가능한 방법이 있습니다.
일단 HTML5문서의 새로운 마크업 태그인 header, section, article, footer 등을 IE8이하 브라우저 에서 사용가능하게 해야 합니다. 이 문제의 해결방법으로 구글에서 제공하는 자바스크립트 라이브러리를 사용하고, CSS를 "Block Element"속성으로 지정해 주면 IE8 이하 브라우저에서도 HTML5의 새로운 태그들이 사용 가능해집니다. 사용방법은 아래와 같습니다.

head 태그 안에 삽입해서 사용 하시면 됩니다.
첨부파일은 아래에 있습니다.

출처 : http://code.google.com/p/html5shiv/

<!--[if lt IE 9]><![endif]-->
html5.js
다운로드

다음으로 html5 태그를 CSS를 이용하여 "Block Element"로 만들어 줍니다.

/* HTML5 새 요소 초기화 */
article, aside, figure, figure img,
figcaption, hgroup, footer, header, 
nav, section, video, object {display:block;}

위와 같이 실행했을 경우 IE8이하 버전에서도 HTML5 태그를 사용하여 Cross Browsing 할 수 있습니다.

CSS3 선택자(selector) 사용방법

가상 선택자를 사용하면 소스를 CSS를 최소화 하고 HTML문서를 더욱 시멘틱하고 간결하게 만들 수 있습니다. 그러나 IE8 이하 버전에서는 가상선택자를 대부분 지원하지 않습니다. 그래서 사용 할 수 없었으나 자바스크립트 라이브러리를 사용한다면 IE8 이하버전에서도 사용이 가능합니다.
사용방법은 http://jquery.com에서 제공하는 jQuery라이브러리와 선택자(select) 스크립트 라이브러리를 사용하시면 됩니다.

출처 : http://selectivizr.com/

<!--[if (gte IE 6)&(lte IE 8)]><![endif]-->
selectivizr.js
다운로드

위와 같이 적용하여 만들 경우 간결하고 시멘틱한 HTML5문서를 작성할 수 있으며, 모든 브라우저에서 Cross Browsing이 가능하게 될 것 입니다.

CSS Media Query 문법

@media all and (max-width:480px) { 
	해상도 480px이하 Size 의 css 적용 적용 
}

@media all and (min-width:481px) and (max-width:1024px) { 
	해상도 481px이상 1024px이하 Size의 css 적용 
}

@media all and (min-width:1025px){ 
	해상도 1025px 이상 Size의 css 적용 
}

저희 맑은커뮤니케이션의 경우 웹퍼블리싱 작업시 위 3가지 쿼리로 CSS문서를 작성합니다.
Media Query를 사용하는 방법은 3가지(첫째: 파일로 분기하는 방법, 둘째: 파일내에 작성하는 방법, 셋째: CSS파일내에서 작업하는 방법)가 있으나 속도를 고려 했을 경우 위와 같은 방법이 최선책입니다. 위 3가지 해상도는 모바일, 태블릿, 데스크탑, 스마트TV 및 여러 Device 넘나들수 있는 최소한의 쿼리 갯수입니다. 더 상세하게 나누는 것도 가능하나, 프로젝트는 일정이라는 시간내에 퍼블리싱을 완료해야 하므로 3개의 쿼리 CSS로 구분하였습니다.

위 방법들을 다 적용 하신다면 Media Query 기본 틀을 완성하게 되는 것입니다.

반응형
반응형
필자는 아직도 퍼블리싱을 할 경우 em과 px을 놓고 어떤것을 사용할지 고민할때가 많습니다. ie6에서 제공하지 않는 zoom 기능 때문에 사용자를 위해 em을 써야할지, 디자이너와 개발자의 편리함을 위해 em을 써야 할지 자주 고민을 합니다.
일반적으로 많은 사람들이 em단위를 쓰면 해상도에 따라서 크기가 달라진다고 오해하는 경우가 많습니다. 하지만 em을 쓰는 이유는 IE6과 같이 zoom기능이 없는 브라우저에서 브라우저의 글꼴 크기 옵션을 조절했을 때 동작하게 하기 위함입니다.
최근의 브라우저들이 모두 zoom 기능을 지원하고 있는 덕분에, 사실 em대신 px을 사용해도 무방합니다. em으로 취할 수 있는 이득이 거의 없기 때문이지요.
하지만 Responsive Web Design을 추구하는 작업을 하시거나, 화면 크기에 따라서 동적으로 body의 font-size를 조절하는 특수한 작업을 하실 경우에는 em을 활용하여 scaleable한 UI를 구성할 수도 있습니다. 또한 해외 웹사이트의 대부분이 em 을 사용하며, 유동성 부분 때문에 em이 표준으로 자리잡아가고 있습니다.

편리한 작업을 위한 CSS 단위별 폰트크기(px, em, %, pt)

Pixels EMs Percent Points
6px 0.375em 37.5% 5pt
7px 0.438em 43.8% 5pt
8px 0.5em 50% 6pt
9px 0.563em 56.3% 7pt
10px 0.625em 62.5% 8pt
11px 0.688em 68.8% 8pt
12px 0.75em 75% 9pt
13px 0.813em 81.3% 10pt
14px 0.875em 87.5% 11pt
15px 0.938em 93.8% 11pt
16px 1em 100% 12pt
17px 1.063em 106.3% 13pt
18px 1.125em 112.5% 14pt
19px 1.188em 118.8% 14pt
20px 1.25em 125% 15pt
21px 1.313em 131.3% 16pt
22px 1.375em 137.5% 17pt
23px 1.438em 143.8% 17pt
24px 1.5em 150% 18pt

단위별 폰트의 특징

pt :points(포인트) - 1포인트는 0.72인치
px :pixels(픽셀) - 화면 해상도에 대한 상대크기
%, em - 지정되거나 상속받은 (또는 상위 엘리먼트)에 대한 백분율 상대 크기

반응형
반응형
퍼블리싱을 할 때 CSS hack을 사용하는 것은 좋은 방법이라고 할 수 없습니다.
Cross Browsing을 위해 hack을 사용하기 전에 좀더 주의하고 각 브라우저의 특성을 파악하여 설계하시면 CSS핵을 사용하지 않고도 해결할 수 있는 경우가 많습니다.
하지만 퍼블리싱을 하다보면 어쩔 수 없이 CSS hack을 사용 해야하는 경우가 있습니다.
그렇기에 맑은커뮤니케이션에서는 업무의 효율을 위해 아래와 같이 CSS hack을 정리하였습니다. 2013-10-01 재정
IE 적용 Hack

- IE 6 hack (underscore hack)

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면 IE6에서만 적용이 됩니다.

#header {
	_width:100px;
}

- IE 6 hack (star hack)

셀렉트 앞에 *html을 붙이면 IE6에서만 적용이 됩니다.

*html #header {
	width:100px;
}

- IE 6 hack (해시 hack)

속성앞에 #삽입 IE6이하 버전에서만 적용이 됩니다.

#header {
	#width:100px;
}

- IE 6 hack (!important hack)

IE6버전에서는 한규칙안에 여러 개의 속성을 사용할수없으므로 첫번째 선언을 무시하고 두번째 선언을 적용 !important속성이 우선시되어 두번째 선언을 적용하게 됩니다. 나머지 브라우저에선 첫번째 속성이 적용됩니다.

#header {
	position:fixed !importent;
	position:static;
}

- IE 7 hack (star hack)

셀렉트 앞에 *+html body 또는 *:first-child+html 을 붙이면 IE7 or Opera 에서 적용이 됩니다.

*+html body #header {width:100px;} /* IE7, OPERA 적용 */ 
*:first-child+html #header {width:100px;} /* IE7 적용 */

- IE 7 hack (star hack)

프로퍼티의 가장 앞부분에 언더스코어(*)를 붙이면 IE7에서만 적용이 됩니다.

#header {
	*width:100px;
}

- IE 6, 7 hack (dot hack)

프로퍼티의 가장 앞부분에 닷(.)를 붙이면 IE6, 7에서만 적용이 됩니다.

#header {
	.width:100px;
}

- IE 7, 8, 9 hack (선택자 핵)

셀렉트 앞에 html>body를 붙이면 IE7, 8, 9 에서 적용이 됩니다.

html>body #header {
	width:100px;
}

- IE 8 hack (속성 핵)

프로퍼티의 속성값 앞부분에 (/*\**/)를 붙이면 IE8에서만 적용이 됩니다.

#header {
	width:/*\**/100px;
}

- IE 8, IE9, IE8+9 hack (속성 핵)

프로퍼티의 속성값 뒷부분에 \0/IE8 를 붙이면 IE8 에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE9 를 붙이면 IE9에서 적용이 됩니다.
프로퍼티의 속성값 뒷부분에 \0/IE8+9 를 붙이면 IE8과 IE9 모두 적용이 됩니다.

#header{
	width:100px \0/IE8;  /* IE8적용 */
	width:150px \0/IE9;  /* IE9적용 */ 
	height:50px  \0/IE8+9;  /* IE8+9적용 */
}	

- IE 9+10 hack (속성 핵)

셀렉트 앞에 @media screen and (min-width:0\0){} 를 감싸면 적용이 됩니다.

@media screen and (min-width:0\0){
	#header {
		width:100px;
	}
}

- IE 10 hack (속성 핵)

셀렉트 앞에 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {} 를 감싸면 적용이 됩니다.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#header{
		width:100px;
	}
}
FireFox 적용 Hack

- FireFox hack

셀렉트 앞에 @-moz-document url-prefix() {}를 감싸면 적용이 됩니다.

@-moz-document url-prefix() {
	#header {
		width:100px;
	}
}
Chorme 적용 Hack

- Chorme hack

셀렉트 앞에 @media screen and (-webkit-min-device-pixel-ratio:0){}를 감싸면 적용이 됩니다.

@media screen and (-webkit-min-device-pixel-ratio:0) {
	#header {
		width:100px;
	}
}
Safari 적용 Hack

- Safari hack

프로퍼티의 속성값 앞에 html[xmlns*=""] body:last-child {}를 감싸면 적용이 됩니다.

html[xmlns*=""] body:last-child #header {
	width:100px;
}
Opera 적용 Hack

- Opera hack

프로퍼티의 속성값 앞에 body:first-of-type #header {}를 감싸면 적용이 됩니다.

body:first-of-type #header {
	width:100px;
}
반응형
반응형

 

블루웨이브 홈페이지 개편 배경(http://www.bluewaves.co.kr)

N스크린은 디바이스 간 연동으로 컨텐츠를 다양하게 볼 수 있는 개념으로 스마트폰 대중화화 더불어 각광을 받기 시작했고, 태블릿PC 사용자들이 늘어남에 따라 더욱 주목을 받기 시작했습니다. 전문가들은 N스크린 시대의 도래는 진정한 콘텐츠의 시대의 도래를 의미한다고 말하며 콘텐츠 시대의 도래는 콘텐츠가 시스템에 종속되는 것이 아니라 콘텐츠를 위해 나머지 시스템이 존재하는 콘텐츠 중심의 생태계 재편으로 연결될 것이라고 말하고 있습니다.
그렇다면 지금 업체들의 가장 큰 고민은 N-screen에 대응하는 것입니다. 즉 컨텐츠를 하나를 만들어서 다양한 형태의 화면사이즈, 모바일폰, 태블릿, TV 에 대응이 되어야 한다는 것입니다. 웹기술의 엄청난 강점인 Cross platfom 이나 Cross device 대응은 이제 기본입니다.
이제는 한번 만든 컨텐츠를 다양한 크기의 화면에 어떻게 대응 될것이냐가 정말 중요한 토픽입니다. 그런데 이런 문제를 해결해 주는 거의 유일한 기술이 바로 웹기술(MediaQuery)이라는 점이 우리 웹퍼블리셔의 전망을 밝게 해주어 필자는 퍼블리셔로서 자긍심을 더욱더 가지게 합니다.
현재 아이패드, 갤럽시 탭과 같은 태블릿이 나오면서 기존의 앱개발자들은 화면 해상도 대응하는 것에 지금 비상이 걸렸습니다.
그런데 우리 웹기술(html5 Media Query)에는 이미 이런 내용들이 모두 준비되어 있습니다.
그리하여 우리나라에는 아직 많이 사용되지 않은 Media Query를 사용하여 N-Screen을 보여 드리고자 이렇게 개편하게 되었습니다.

Media Query를 이용한 Responsive Web Design 구현

웹서비스 사업자들의 고민은 스마트폰만이 아닙니다. Connected Device들이 다양해지면서 대응해야 할 전략과 개발 리소스는 급증있고 이에 대표적인 Device가 Smart Pad입니다. Blaze의 최근 보고서에 의하면 iPad의 경우 97%의 사이트가 PC Web으로 대응을 하고 있지만, Honey Comb이 탑재되어 있는 XOOM은 32%의 사이트가 Mobile Web으로 대응을 하고 있는 것으로 알려져 있습니다. 앞으로 이런 단편화 현상은 더욱 심화될 것입니다.
이런 고민을 해결하고자 최근 많이 도입되고 있는 것이 바로 'Responsive Web Design(반응형 웹)' 입니다. Responsive Web Design은 Screen Size, Orientation 등 divice 환경에 반응하여 최적화된 웹페이지를 제공하는 것을 말합니다.
그리하여 새로운 기술을 보여드리고자 탄생하게 된것이 블루웨이브 반응형 웹사이트입니다.

블루웨이브 Responsive Web(반응형웹) Media Query 표현기법

그렇다면 간단하게 블루웨이브 반응형웹 사이트의 표현기법에 대해 알아보겠습니다.
HTML5는 차세대 웹표준스펙적용을 선행적으로 수행하였고 CSS3는 Media Query를 사용하여 유연한 레이아웃을 적용할 수 있도록 구성하였습니다.
그렇다면 미디어쿼리 문법에 대하여 보겠습니다.

@media all and (max-width:480px) {
	해상도 480px이하 Size 의 css 적용 적용
}
@media all and (min-width:481px) and (max-width:1024px) {
	해상도 481px이상 1024px이하 Size의 css 적용
}
@media all and (min-width:1025px){
	해상도 1025px 이상 Size의 css 적용
}

블루웨이브 반응형 웹사이트는 크게 Mibile Device 해상도를 고려한 위 첫번째 미디어쿼리를 적용하였고, Tablet Device 해상도를 고려한 위 두번째 미디어쿼리를 적용, DeskTop 해상도를 고려한 위 세번째 미디어쿼리를 적용하여 작업하였습니다.

앞으로 Media Query의 미래

현재 시점에서 Responsive Web(반응형웹)의 효용성에 대해 논란도 존재합니다.
하지만 Responsive Web(반응형웹)은 특정 Framework을 지칭하는 것이 아니고 방법론입니다.
Responsive Web은 단편화가 심화되고 있는 Web 환경을 대응할 수 있는 좋은 해결책이라고 생각합니다. 그리고 앞으로 2년후에는 많은 사이트들이 Responsive Web(반응형웹)으로 만들어진 사이트들이 트렌드가 될 것같은 생각도 듭니다. 마지막으로 효용성을 고려한 최근에 나온 Responsive Web으로 만들어진 해외 사이트 두개를 아래와 같이 보여드리며 글을 마치겠습니다.

반응형

+ Recent posts