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

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

설명하자면.. 화면의 전체 가로 수치에서 절반 만큼의 위치로 이동 시킵니다. (left:50%) 자신의 가로 수치의 절반 만큼 마이너스 이동 시킵니다. (transform:translateX(-50%))

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

자주 사용하는 CSS 셀렉터인데 표기법이 다소 생소해서 포스팅합니다. 한 줄로 어떻게 설명해야할지 몰라 포스팅 제목만 봐서는 이해가 잘 가지 않을 수 있습니다. 설명하자면 예를 들어 다수의 리스트 태그(li)를 이용해서 박스 형태의 타일 배열로 화면에 보여준다고 가정하겠습니다. 가로는 4개(한 줄에 4개)까지 표시되고 세로 줄 수는 리스트 개수에 따라 유동적이라고 보았을때 4번째 리스트 요소에만 margin-right:0px; 을 적용하고 싶습니다.Continue reading “[CSS] n의 배수에 해당하는 순서를 지정할 수 있는 셀렉터”

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

미디어 쿼리는 “반응형 웹”이라는 형태를 표현하는데 중추적인 역할을 합니다. 미디어 쿼리가 없다면 반응형 웹이라는 형태도 없었을 겁니다. 바로 본문으로 넘어가서 데스크탑, 태블릿, 모바일 구분하지 않고 단순하게 사용 예를 들겠습니다. 이 예제는 창 가로 폭이 1280px 이하인 경우 quick_menu 라는 클래스를 가진 요소를 보이지 않게 처리하는 방법입니다.

  여담으로 반응협 웹이라는 것은 컨텐츠 표현의 한Continue reading “[CSS] 미디어 쿼리를 이용하여 특정 해상도에서 CSS 속성 변경하는 방법”

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

CSS로 레이아웃을 잡을 때 보통 영역을 정확하게 확인하기 위해 해당 영역에 색상을 입히거나 임의의 텍스트를 넣어줍니다. 저는 보통 border style을 사용하는데 border는 상하좌우 1px씩을 더 먹게 되어 사이즈가 변하게 됩니다. 예를 들어 가로 300px, 세로 400px의 DIV 영역을 만들었을 경우, 여기에 border:1px solid red; 스타일을 적용했을 경우 DIV영역은 가로 302px, 세로 402px가 됩니다. 이런 1~2pxContinue reading “[CSS] 요소 영역의 사이즈 변화 없이 border 주는 방법”

[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 호환성보기)에서만 적용될 수 있도록Continue reading “[CSS] IE7, IE8 호환성 보기 모드에서 display:inline-block; 사용하는 방법”

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

옛날 우리는 Table을 이용해 레이아웃을 짜던 시절.. 거의 외우다 시피한 속성들이 있었죠. cellpadding, cellspacing, border.. 일명 DIV 코딩이라 불리우는 div 레이아웃을 사용하는 이 시점에서도 Table을 레이아웃으로 사용하지 않는다 뿐이지 아직도 Table은 유용한 녀석입니다. 하지만 예전같이 Table 태그라인 안에 속성을 박아넣고 W3C 검증을 받으면 Warning 메세지를 볼 수 있습니다. 즉, 형태를 꾸며주는 태그 속성대신 css를 이용하는Continue reading “[CSS] Table의 cellpadding, cellspacing, border 속성 style로 정의하기”

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

이 방법은 CSS3에서 지원되는 내용입니다. div_A라는 요소의 width 속성이 100%이고, 여기서 150픽셀만큼 빼고 싶은 경우를 가정하겠습니다. 예전같았으면 자바스크립트를 이용해 100%로 설정된 width의 실제 픽셀수치를 구한 후에 150픽셀을 빼는 방법을 사용했습니다. 한마디로 번거로웠죠. 하지만 CSS3가 많이 사용되고 있는 현재, 그런 번거로운 작업을 하지 않으셔도 됩니다.

위 처럼 한줄이면 됩니다. calc라는 함수인데요. 이름만 들어도 알 수Continue reading “[CSS] width 속성 퍼센트 값에서 원하는 픽셀만큼 빼는 방법”

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

테이블을 사용할땐 별다른 고민을 해보지 않았던 텍스트 세로 정렬입니다. 테이블을 사용할 당시에는 셀 안에 텍스트의 세로정렬은 큰 고민 없이 가능했습니다. 하지만 DIV안에 텍스트를 넣게 되는 경우 텍스트 새로 정렬에 대한 고민을 시작하게 됩니다. 가장 심플한 방법은 아래와 같습니다.

  여기서 중요한 2가지는.. 1. 텍스트를 감싸는 블록의 height 값이 명확해야 한다. 2. 부모 앨리먼트(div)의 cssContinue reading “[CSS] DIV 영역안에 텍스트 세로 중앙 정렬하는 방법”

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

IE 덕분에 작업 시간이 배로 늘어나는 느낌은 지울 수가 없습니다. 그것도 화면 퍼즐 맞추는 시간에 많은 시간을 소모하게 되는게 씁쓸합니다. IE7이 역사속으로 사라지기까지는 몇 년이 더 걸리겠지만 그 뒤엔 또 새로운 IE가 바통을 받아들겠지 ㅜ IE7에는 많은 버그가 있지만 그 중에 z-index 버그와 해결방법을 소개합니다. IE7은 이상하게도 position:relative 속성을 가지고 있는 엘리먼트는 z-index를 무참히 0으로Continue reading “[CSS] IE7 z-index 적용이 되지 않는 버그”

[css] IE 버전 별 CSS 핵 정리

IE6부터 IE9까지 자주 쓰이는 CSS 핵을 정리해봤습니다. IE6은 버리는 추세이고 IE8이상으로는 어느 정도 타 브라우저와 호환성이 준수한 편입니다. 하지만 IE7은 국내에서 아직까지 가장 많이 사용되고 있지만 IE6 수준과 버금가는 호환성을 지니고 있기에  무시 할 수 없습니다. IE7 위주로 CSS핵을 잘 숙지해두시더라도 코딩 작업에 도움이 많이 될겁니다. (핵은 예시 구문에 주황색으로 표시했습니다.) 단일 적용 핵 IE6Continue reading “[css] IE 버전 별 CSS 핵 정리”