개발/CSS3

테이블 테두리 둥글게(라운딩) 만드는 방법 | table with border radius css

요즘 실제 웹서비스를 구현할 때 레이아웃에 테이블을 사용하진 않지만 Email HTML 템플릿 코딩을 하다보면 테이블 태그를 꽤 많이 사용합니다. 아래 이미지와 같이 테이블 테두리를 라운딩 처리를 하기 위해 border radius 속성값을 부여했을 때 제대로 동작하지 않는 경우가 생깁니다. 해결방법 만약 테이블 태그에 해당 이슈가 발생했다면 border-collapse: collapse; 속성 때문일 것입니다. .... border-collapse: separate (기본값)으로 설정하면 정상적으로 border radius 속성을 적용할 수 있습니다.

개발/CSS3

[CSS] :not() 선택자(selector) 초간단 사용방법

CSS를 작성하다보면 "~이 없을 경우"와같이 특정 선택자가 없을 때에 대한 스타일 처리를 하고 싶은 경우가 생깁니다. 이번 포스팅에서는 특정 선택자가 포함되어 있지 않는 요소에 대하여 스타일을 적용하기 위한 방법에 대해 소개하도록 하겠습니다. :not() 선택자 CSS :not() 선택자는 부정(negation) CSS 가상클래스로CSS의 :not() 선택자를 사용하면 특정 선택자가 제외된 경우에 대한 스타일 적용을 할 수 있습니다. 일반적으로 선택자(selector)를 해당 요소를 선택하기 위해 사용되지만 not 선택자는 해당 선택자를 제외한 나머지 요소를 선택하기 위해 사용합니다. not 선택자를 활용하면 실무에서 꽤 유용하게 사용되는 경우가 많기 때문에 알아두면 작업하는데 많이 도움이 될 것입니다..

개발/CSS3

CSS에서 텍스트 ellipsis('...') 말줄임 표시 처리하는 방법 (2줄, 3줄)

서버사이드에서 데이터를 내려줄 때 강제로 텍스트를 truncate 처리한 후 내려줄 수 있지만, CSS만으로 텍스트를 원하는 단위로 자를 수 있다는 것 알고 계셨나요? 이번 포스팅에서는 CSS를 활용해서 텍스트 말줄임 처리하는 방법에 대해서 알아보도록 하겠습니다. 한 줄 단위로 텍스트 자르는 방법 CSS로 말줄임 처리를 하기 위해서 글자를 출력할 공간이 필요합니다. 기본적으로 CSS display 속성의 inlline 값은 요소의 너비를 가질 수 없기 때문에 이를 block으로 바꿔줌으로써 너비를 가질 수 있게 변경해야 합니다. .box { display: block; } 요소에 너비가 지정되었다면 이제 텍스트는 너비를 넘어서게 되면 자동으로 줄바꿈을 하게 됩니다. 자동으로 줄바꿈되는 것을 white-s..

개발/CSS3

CSS width height 같게 반응형 정사각형 만드는 방법 (CSS width height same)

CSS 작업을 하다보면 너비값(width)은 가변으로 설정이 되지만, 높이값(height)은 가변으로 설정이 되지 않아서 고민을 해본 경험이 있을 것입니다. 이번 포스팅에서는 너비값 기준으로 높이값도 동일하게 가변으로 적용하기 위한 방법에 대해서 다뤄보도록 하겠습니다. 구현 예시 우리가 구현해볼 예시는 아래와 같습니다. CSS로 너비값이 퍼센트(percentage)로 설정되어 있고, 높이값 또한 퍼센트로 세팅해서 디바이스의 크기에 따라 원하는 가변 사이즈의 정사각형을 만들어 내는 것 입니다. 아래 코드와 같이 가변 너비값과 동일하게 높이값을 동일하게 퍼센트로 설정하면 어떻게 될까요? .box { float: left; width: 25%; height: 25%; background-color: blue;..

개발/CSS3

overscroll-behavior 속성을 활용해서 스크롤 체이닝 현상 막는 방법

웹에서 스크롤 작업을 하다보면 항상 마주치는 문제가 있습니다. 바로 스크롤 체이닝(scroll chaining) 입니다. 스크롤 체이닝이라고 표현하면 해당 이슈가 뭔지 모르실 수 있으니 아래 간단한 예제를 한번 다뤄보도록 하겠습니다. See the Pen BajEOGZ by ruden (@ruden91) on CodePen. 예시를 보면 overscroll-behavior 속성이 auto로 설정된 기본값 영역은 스크롤 영역이 모두 끝나면 부모 스크롤 영역이 움직이기 시작합니다. 이것을 스크롤 체이닝(스크롤이 연결되어 있기 때문에 체이닝이라는 단어를 사용)이라고 합니다. 하지만 overscroll-behavior 속성이 contain 값인 경우에는 어떻게 동작할까요? contain 값을 적용한 스크롤 영역..

개발/CSS3

[크로스 브라우징] IE9에서 자동으로 이미지 높이값을 default size로 계산하는 경우

IE에서 height auto를 정의해주지 않으면, 기본적으로 이미지의 고유 높이값을 자동삽입한다.

개발/CSS3

display: inline-block 속성 숨겨진 여백 제거

block 속성을 가진 태그 안쪽에 inline element가 있으면, 기본적으로 block 속성과 inline 속성 사이에 빈 여백이 존재한다. 해결법 wrapping된 태그에 font-size:0; letter-spacing:0; word-spacing:0;값을 넣어서 초기화 시켜주고 내부 태그에 다시 정의 내려주면 해결된다. 해결하기 어렵다면, float 속성으로 구현하면 해결된다.

개발/CSS3

CSS Normalize & CSS Reset

모든 웹 브라우저는 HTML 엘리먼트들에 자체적으로 설정된 스타일을 반영합니다. 이 말은 브라우저마다 HTML 엘리먼트 스타일에 대한 처리과정이 조금씩 다르다는 것을 의미합니다. 예를 들어, 사파리와 크롬은 동일한 HTML 문서를 다르게 보여줍니다. 이러한 차이점은 내장된 브라우저 스타일링 때문입니다. 브라우저 간 스타일 불일치를 피하기 위해 내장된 브라우저 스타일링을 제거함으로써 브라우저마다의 스타일링 차이점을 없앨 수 있습니다. 이렇게 내장된 브라우저 스타일링을 초기화하기 위해 사용하는 방법이 CSS Reset과 CSS Normalize입니다. CSS Reset CSS Reset 스타일시트는 모든 HTML 요소에 대한 내장 스타일링을 제거합니다. CSS Reset은 보편적으로 Eric Meyer가 제..

개발/CSS3

[CSS3] css3 가운데(중앙) 정렬

css를 활용해 가로 및 세로로 중앙정렬하는 방법에는 정말 많은 방식들이 있습니다. 각 중앙정렬 방법은 모두 주의할 점이 있지만 그러한 방법들을 조합하면 IE8 및 이후 버전에서도 일관되게 크로스 브라우징을 지원하는 중앙정렬 기법을 만들어낼 수 있습니다. 블록 만들기 반응형 웹사이트를 제작하고 있다면 대부분 요소의 크기를 퍼센트로 지정할 것이며, 여기서는 임의의 .container 요소를 만듭니다. 컨테이너 요소가 적절히 늘려질 수 있도록 html, body { width: 100%; height: 100%; }로 지정합니다. 테이블로 바꾸기 이제 .container 안에서 자주 사용되는 테이블 패턴을 이용해 수직 중앙정렬을 하도록 하겠습니다. 이렇게 하려면 일반 블록 레벨 요소가 필요하고, 이 요소들이..

개발/CSS3

[CSS3] emmet을 통해 효율적으로 CSS를 작성해보자

Emmet? Emmet이란 editor plugin으로써 단축키를 이용해 HTML, XML, XSL 코딩 속도를 비약적으로 향상시켜주는 툴입니다. 가령 긴 테이블을 코딩할 때, 손으로 입력하는 건 누가봐도 바보같은 짓이고 줄줄이 복사해 붙이는 것도 별반 나을 게 없어 보입니다. 물론 테이블 만드는 툴을 쓰는 게 가장 일반적인 방법이긴 합니다. 근데 언뜻 봐도 같은 태그의 반복임을 알 수 있는데요. 아래와 같이 자동완성을 해보면 어떨까요? table>tr*5>td*5 table 태그로 열고 그 아래 tr 태그 5개 열고 그 아래 td 태그 5개 열라는 뜻입니다. Emmet은 대부분 코딩을 하는 사람이라면 다른 툴과 달리 기본은 금세 배울 수 있습니다. 기본적으로 Emmet의 약어는 단어의 첫 글자를 따서 ..

개발/CSS3

[CSS3] Position : Float의 부모 height가 적용이 안되는 현상 해결법

css3에서 자식요소에 float를 적용하면 부모의 height가 0으로 되어버리는 경우가 있습니다. 오늘은 이 현상을 해결하는 법을 알아보도록 하겠습니다. 위 코드를 보시면 nav의 부모태그인 header의 height가 0가 되는 현상을 확인할 수 있습니다. 이유는 float 속성은 쉽게 말해 오른쪽이나 왼쪽으로 붕~띄운다는 뜻입니다. 한마디로 부모를 float로 설정하지 않는 이상, 거기에 적용받지 않고 독립적으로 위로 떠있는 상태죠. 이 상태를 부모요소까지 적용을 시키려면 다른 방법이 필요합니다. 방법 1 (가상 선택자 :after로 clear 하는 방법) 가장 탁월하다고 생각하는 방법이라 첫번째로 소개합니다. 우선 "가상 선택자"라는 개념을 이해하셔야 하기 때문에 약간 이해가 필요한데요. 가상선..

개발/CSS3

[CSS3] Height :100% 가 적용되지 않을때 해결하는 방법

웹표준으로 코딩을 하다보면 Height 단위인 %가 적용이 되지 않는 경우가 있습니다. px단위로는 height 값이 적용되는데 %는 적용이 되지 않는 경우의 대처법하는 방법에 대해서 알아보겠습니다. 아래 box 클래스에 height 100%를 먹여보았으나 정상적으로 작동하지 않는 것을 확인할 수 있습니다.하지만, 필요할 경우를 대비해서 한번 알아보도록하죠. HEIGHT:100%가 적용되게 하는 방법 생각보다 정말 간단하게 해결할 수 있는데요.html과 body 태그에 height 100%를 넣어주는 방법입니다. 위 코드를 적용시켜주면 정상적으로 box 클래스에 height 100%가 적용됨을 확인하실 수 있습니다. 원인 : %는 상대적인 값인데 div의 height값에 %를 적용하면 기준으로 삼을 상위..

개발/CSS3

[CSS3] Position : Float

이야기에 앞서 웹 문서가 포함하는 모든 요소의 위치를 잡는 포지셔닝(Positioning)은 사실 웹 디자인의 모든 것이라고 표현 할 수 있습니다. 집을 지을 때도 그에 맞는 Frame을 잘 설계를 해야 원하는 모양의 집을 잘 지을 수 있습니다. 웹사이트도 마찬가지 입니다. 만들고자하는 웹사이트의 Layout을 잘 잡아놔야 그 다음 세부적인 디자인을 쉽게 적용시킬 수 있습니다.하지만 포지셔닝은 꽤 다양한 개념을 이해하고 그것을 복합적으로 잘 사용해야만 원하는 결과를 얻을 수 있을뿐더러, 현재의 기술로 포지셔닝을 하는데 있어서 부딪히는 한계와 버그들에 대한 이해도 필요합니다. 이 글에서는 포지셔닝을 통해 HTML 문법은 물론, 웹 디자인을 위한 기초 골격을 만드는 부분에 대한 개념까지 어느정도 확립할 수 ..