[CSS] position:absolute 인 요소를 중앙 정렬하는 방법

position:absolute로 절대 좌표 값으로 위치를 지정했을때 중앙 정렬하는 방법은 아래와 같습니다.

설명하자면..

화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 시킵니다. (left:50%)

자신의 가로 수치의 절반 만큼 마이너스 이동 시킵니다. (transform:translateX(-50%))

[CSS] n의 배수에 해당하는 순서를 지정할 수 있는 셀렉터

자주 사용하는 CSS 셀렉터인데 표기법이 다소 생소해서 포스팅합니다.

한 줄로 어떻게 설명해야할지 몰라 포스팅 제목만 봐서는 이해가 잘 가지 않을 수 있습니다.

설명하자면 예를 들어 다수의 리스트 태그(li)를 이용해서 박스 형태의 타일 배열로 화면에 보여준다고 가정하겠습니다.

가로는 4개(한 줄에 4개)까지 표시되고 세로 줄 수는 리스트 개수에 따라 유동적이라고 보았을때 4번째 리스트 요소에만 margin-right:0px; 을 적용하고 싶습니다.

여기서 세로가 유동적인 것이 아닌 한계가 정해져 있다면 nth-child(4), nth-child(8), nth-child(12)… 이런식으로 처리 할 수도 있습니다. 하지만 여기선 세로의 개수를 예상 할 수 없는 경우이기 때문에 무한정 저런 방법으로 늘려갈 수는 없습니다.

그렇다면 4의 배수(4, 8, 12, 16, 20, 24..)로 셀렉터를 지정한다면 간단히 해결됩니다.

다음과 같이 지정해 줄 수 있습니다.

이 구문을 간단히 설명하자면 n / 4를 했을때 나머지 값이 0이 되는 요소를 가르키는 셀렉터 입니다. 여기서 0을 1로 바꾼다면 나머지가 1로 떨어지는 경우가 해당되겠죠.

[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법

미디어 쿼리는 “반응형 웹”이라는 형태를 표현하는데 중추적인 역할을 합니다. 미디어 쿼리가 없다면 반응형 웹이라는 형태도 없었을 겁니다.

바로 본문으로 넘어가서 데스크탑, 태블릿, 모바일 구분하지 않고 단순하게 사용 예를 들겠습니다. 이 예제는 창 가로 폭이 1280px 이하인 경우 quick_menu 라는 클래스를 가진 요소를 보이지 않게 처리하는 방법입니다.

 

여담으로 반응협 웹이라는 것은 컨텐츠 표현의 한 방법일 뿐이지 다른 방식보다 진보된 형태는 아닙니다. 무분별한 미디어 쿼리 사용은 데스크탑/태블릿/모바일 디바이스에 대응하는 웹페이지를 따로 구성하는 것보다 난해한 구조를 가지게 될 수 있습니다. 표현될 컨텐츠의 성격에 따라 적절하게 사용해줘야 하며 여기서 말하는 적절함이란 복잡하지 않은 레이아웃 또는 한 페이지에 표시될 컨텐츠의 양을 기준으로 합니다.

예를 들어 네이버, 다음과 같은 대형 포털사이트를 반응형으로 만든다면.. 실제 이런 포털은 반응형을 사용하지 않습니다. 데스크탑 레이아웃에서 보여질 컨텐츠를 모바일에서 모두 보여줄 필요가 없거니와 각 해상도에서 최적화된 구조를 잡을 수 없기 때문입니다.

그렇기 때문에 무조건 반응형 구조를 지향할 필요는 없습니다. 어떤 컨텐츠를 어떻게 구성 하느냐에 따라 반응형 또는 별도 페이지, 기능에 따라 미디어 쿼리를 섞을 지를 결정하는 것이 중요하다는 생각입니다.

[CSS] 요소 영역의 사이즈 변화 없이 border 주는 방법

CSS로 레이아웃을 잡을 때 보통 영역을 정확하게 확인하기 위해 해당 영역에 색상을 입히거나 임의의 텍스트를 넣어줍니다.

저는 보통 border style을 사용하는데 border는 상하좌우 1px씩을 더 먹게 되어 사이즈가 변하게 됩니다.

예를 들어 가로 300px, 세로 400px의 DIV 영역을 만들었을 경우, 여기에 border:1px solid red; 스타일을 적용했을 경우 DIV영역은 가로 302px, 세로 402px가 됩니다.

이런 1~2px 차이때문에 레이아웃이 깨지는 경우가 생겨 확인하는데에 불편함이 있습니다. 하지만 border 말고도 비슷한 역할을 하는 스타일이 존재합니다. outline 이라는 스타일입니다. 사용법은 border와 같고 해당 영역의 사이즈에 변화를 주지 않습니다.

단 border-left, border-top 같은 부분 적용은 안되는 듯합니다. 아마 다른 방법이 있는 듯합니다. 이 부분은 좀 더 찾아보고 다음 포스팅에서 다루겠습니다.

[CSS] IE7, IE8 호환성 보기 모드에서 display:inline-block; 사용하는 방법

IE 8버전 호환성보기 모드와 IE7에서는 display:inline-block; 이 지원되지 않습니다. 레이아웃을 잡는데 자주 사용되기 때문에 쓰지 않을 수 없는 코드입니다.

이를 사용하기 위해서는 IE에 적용되도록 CSS 핵을 사용해야합니다. 아래는 IE8 호환성보기와 IE7에 적용할 수 있는 display:inline-block의 CSS 핵입니다.

[기존]

[변경]

위와 같이 zoom:1과 *display:inline; 을 추가해주시면 되고 display앞에 *은 IE7(IE8 호환성보기)에서만 적용될 수 있도록 하는 CSS핵 입니다.

CSS핵에 대한 더 자세한 내용은 [css] IE 버전 별 CSS 핵 정리 을 참조하시기 바랍니다.

[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border..

일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다.

하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는 것을 권장하는 겁니다.

이 것이 과거에 우리가 즐겨 사용하던 방법입니다. 거의 기계적으로 혹은 반사적으로 cellpadding과 cellspacing 그리고 border를 속성으로 지정해주곤 했습니다.

그럼 이걸 어떻게 css로 정의할 수 있을까요..

 

이런식으로 정의할 수 있겠습니다. 하지만 저렇게 style을 인라인으로 입력하는 경우는 드믈죠.

 

다시 정리해보겠습니다.

정리를 하면 이렇습니다. cellpadding은 td의 padding css 속성이, cellspacing은 table의 border-spacing css 속성이, border는 table의 border css 속성이 대신 역할을 하게 됩니다.

[CSS] width 속성 퍼센트 값에서 원하는 픽셀만큼 빼는 방법

이 방법은 CSS3에서 지원되는 내용입니다.

div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다.

예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠.

하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수 있듯 수치를 계산해줍니다. 상이한 단위와 상관없이 말이죠.

예제에서는 %와 px간의 계산이었지만 em, pt, mm 등등 css에서 사용되는 모든 단위를 사용할 수 있습니다.

연산 또한 빼기(-) 뿐만이 아니라 더하기(+), 곱하기(*), 나누기(/)도 가능합니다.

[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법

테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다.

테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다.

가장 심플한 방법은 아래와 같습니다.

 

여기서 중요한 2가지는..

1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다.

2. 부모 앨리먼트(div)의 css 속성을 display:table; 자식 앨리먼트(p)의 css 속성을 display:table-cell; 로 지정해주면 vertical-align 속성이 적용된다.

* IE7 이하 버전에서는 display:table, table-cell이 지원되지 않기 때문에 적용되지 않습니다.

 

[CSS] IE7 z-index 적용이 되지 않는 버그

IE 덕분에 작업 시간이 배로 늘어나는 느낌은 지울 수가 없습니다. 그것도 화면 퍼즐 맞추는 시간에 많은 시간을 소모하게 되는게 씁쓸합니다. IE7이 역사속으로 사라지기까지는 몇 년이 더 걸리겠지만 그 뒤엔 또 새로운 IE가 바통을 받아들겠지 ㅜ

IE7에는 많은 버그가 있지만 그 중에 z-index 버그와 해결방법을 소개합니다.

IE7은 이상하게도 position:relative 속성을 가지고 있는 엘리먼트는 z-index를 무참히 0으로 만들어 버립니다. 이 말은 곧 z-index가 먹히지 않는다는 말입니다.

크롬에서 작업을 마치고 IE로 테스트를 하는 순간 멘붕이 오는 요소 중 하나이기도 합니다

자, 여기서 우리는 IE7의 버그를 버그로 해결할 수 있습니다. 이열치열이 아닌 이버그치버그랄까..

뭐 이미지는 없어서 대충 코드로 설명합니다. 위 상황은 “아래 이미지가 날 가려버림 ㅜㅜ” 에 속한 div를 아래 “나는 이미지다” 녀석이 z-index를 무시하고 덮어버리는 상황입니다.

대표적으로 네비게시션 메뉴의 서브 메뉴가 나타나는 롤오버 메뉴를 메인 이미지가 먹어버리는 경우를 볼수 있습니다. 이 경우 부모 엘리먼트의 z-index를 자식보다 높게 주면 해결되는 IE7의 또다른 버그가 있습니다. 이 버그로 해결할 수 있습니다.

부모 div에 position:relative와 z-index를 주었습니다. 자식 엘리먼트의 z-index보다 높게 말이죠. 이런 방법을 쓰면 해결이 되는 이유는 저도 모릅니다.

버그니깐요.. –;

[css] IE 버전 별 CSS 핵 정리

IE6부터 IE9까지 자주 쓰이는 CSS 핵을 정리해봤습니다.
IE6은 버리는 추세이고 IE8이상으로는 어느 정도 타 브라우저와 호환성이 준수한 편입니다. 하지만 IE7은 국내에서 아직까지 가장 많이 사용되고 있지만 IE6 수준과 버금가는 호환성을 지니고 있기에  무시 할 수 없습니다.

IE7 위주로 CSS핵을 잘 숙지해두시더라도 코딩 작업에 도움이 많이 될겁니다.
(핵은 예시 구문에 주황색으로 표시했습니다.)

단일 적용 핵

IE6
언더스코어 핵 (underscore hack) – 적용 범위 : property
=> div{_width:150px; _height:70px;}

 

IE7
*+html body 핵 – 적용 범위 : selector
=> *+html body div{width:100px; height:50px;}

*:first-child+html 핵 – 적용 범위 : selector
=> *:first-child+html div{width:100px; height:50px;}

 

IE8
괄호 핵 – 적용 범위 : property
=> div{width:100px; ()height:50px;}

 

IE9
:root ~ \0/IE9 핵 – 적용 범위 : selector + property
=> :root div{width:100px \0/IE9; height:50px \0/IE9;}

 

공통 적용 CSS 핵

IE6, IE7
스타 핵 (star hack)
 – 적용 범위 : selector
=> *div{width:150px; height:70px;}

닷 핵 (dot hack) – 적용 범위 : property
=> div{width:150px; .height:70px;}

 

IE6, IE7, IE8
\9 핵
 – 적용 범위 : property
=> div{width:100px; height:50px\9;}

 

IE7, IE8, IE9
html>body 핵 – 적용 범위 : selector
=> html>body div{width:100px; height:50px;}

 

IE8, IE9
\0/IE8+9 핵
 – 적용 범위 : property
=>div{width:100px \0/IE8+9; height:50px \0/IE8+9;}