웹코딩/CSS 검색 결과

해당 글 41건

CSS 이벤트 제어(pointer-events ) 속성

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자. 숨김 속성과 값 공간점유 이벤트 탭(Tab) 접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비점유 비활성 불가능 display:..
웹코딩/CSS 2016. 2. 1. 11:00

CSS로 유동적인 컨테이너 너비에 기반한 이미지 비율 유지, 가운데 정렬, 자르기

이미지 요소나 비디오 요소를 특정 비율에 맞춰 확장 또는 축소되길 원할때 사용되는 기법에 대한 설명입니다. 스크립트의 사용없이 오직 CSS만을 이용하여 이를 구현해보며 원리의 이해를 돕습니다. 이미지 비율 유지 이미지의 비율을 유지하면서 크기 조정을 하는 방법은 이미지의 너비와 높이 둘 중 어느 하나를 auto 값을 유지한 채로 크기 조정을 하는 것이다. 흔히 반응형 이미지에 사용되는 방법은 아래와 같다. img { max-width: 100%; height: auto; } 반응형 이미지의 너비를 자유롭게 조정하기 위해서 이를 감싸는 컨테이너를 추가 해주고 적절한 너비를 부여하면 아래와 같다. .thumbnail-wrappper { width: 25%; } img { max-width: 100%; hei..
웹코딩/CSS 2015. 11. 26. 03:33

CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성

CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성과 매우 유사하다. object-fit 속성 값 속성값들의 변화를 살펴보..
웹코딩/CSS 2015. 11. 20. 11:00

CSS로 글자 자르기 - 한 줄, 여러 줄

고정된 너비만을 제공하는 레이아웃에서는 서버단에서 화면에 출력할 글자수를 미리 가늠하며 디자인하기가 수월합니다. 레이아웃이 유동적인 너비를 가지거나 서버 스크립트쪽에 접근할 수 없어 글자수를 제어하기 곤란할 경우에는 아래에서 설명하는 방법들이 추천됩니다. 한 줄 단위로 글자 자르기 처음으로 적용해 볼 것은 한 줄, 혹은 여러 줄에 걸쳐 출력되고 있는 글자들을 지정된 너비에 맞게 한 줄 단위로 자르는 법이다. 이는 여러가지 CSS 속성들을 조합하여 조건을 맞추는 일부터 시작된다. 출력될 너비 조정하기 CSS로 글자 자르기를 위해서는 글자가 출력될 너비가 필요하다. 기본적으로 CSS 박스 모델 (box model) #1 에서 살펴봤듯이 display 속성의 inline 값과 같이 요소의 너비를 가질 수 없는..
웹코딩/CSS 2015. 10. 30. 11:00

Column(열)의 높이를 맞추는 방법

CSS 디자인의 경우 복수의 열을 같은 높이로 맞춰야 하는 상황이 종종 발생합니다. CSS3를 이용하면 간단히 해결될 문제이지만, 이를 지원하지 않는 브라우저를 생각한다면 많은 고민을 필요로 하기에 이에 대한 방법을 정리해 봅니다. 열의 높이를 자동으로 맞추는 속성들을 활용 CSS 속성들 중에는 같은 부모의 자식 요소들 사이에서 자동으로 열의 높이를 맞추는 속성들이 있다. flex 속성 flex 속성을 이용하면 아주 손쉬운 작업이다. 대상 요소를 감싸는 부모요소에 display: flex 를 설정하고 대상요소들의 순서를 정해주면 간단히 완성시킬 수 있다. 다만 지원문법이 중간에 한번 교체되었고 구형 브라우저들에서 지원이 되지 않는 문제로 크로스브라우징에 문제가 발생한다. IE는 11버전 이상, 안드로이드..
웹코딩/CSS 2015. 10. 6. 11:00

아이콘 폰트(IconFont)의 모든 것

웹폰트의 또 다른 진화형태인 아이콘 폰트에 대한 설명과 이를 제공하는 사이트에 대하여 알아보고 궁극적으로 원하는 아이콘만을 삽입하는 방법을 거론합니다. 아이콘 폰트의 등장 기존에는 특수한 글꼴이나 아이콘을 사용하기 위해서 이미지 형식으로 제작하여 웹문서에 삽입하곤 했다. 이는 HTTP 요청을 많이 발생시켜 서버에 부하를 주고 로딩 속도에 영향을 미쳤다. 이를 극복하기 위해 CSS 기법 중에 하나인 Image Sprite 방식을 사용하여 여러 이미지를 하나의 큰 이미지에 포함시킨 배경 이미지로 제작하여 단 한번의 HTTP 요청을 통해 문서에 삽입하는 방법이 추천되었다. 필자의 기억으론 야후에서 처음 Image Sprite 방식을 사용했고, 이후 구글 및 대형 사이트들, 국내의 포럼등에서 사용되면서 널리 퍼..
웹코딩/CSS 2015. 10. 5. 11:00

트위터의 fave 애니메이션 - 즐겨찾기 버튼

평소 SNS을 하지 않다보니 눈치채지 못했는데 트위터의 fave 버튼의 애니메이션 효과가 특이하여 이를 검색하여 알아 보았습니다. 잘 정리된 곳을 발견하여 이를 번역하였습니다. steps timing function을 steps 타이밍 기능으로 번역하고 있으나 문맥상 steps 타이밍 함수가 더 맞을지도 모르겠습니다. 트위터 fave 소개 트위터는 fave(즐겨찾기로 알려진)의 디자인을 새로운 애니메이션 효과를 적용하여 업데이트하였다. CSS 트랜지션(transition: 전환) 효과보다는 이미지의 모음을 이용한 애니메이션 효과가 중점이다. CSS 애니메이션 steps 타이밍 기능을 이용하여 애니메이션을 어떻게 재생성하는지에 대하여 아래에서 알아보자. 움직임의 착시 삽화가 마치 살아 움직이는 Zoetro..
웹코딩/CSS 2015. 9. 3. 11:00

Normalize.css - CSS 초기화

브라우저마다 다르게 보이는 스타일들을 하나로 통일시키기 위해 자주 사용되는 것 중에 하나입니다. 계속적으로 보완되고 있는 프로젝트라 기준으로 잡고 스타일링을 하는데 도움이 될 것입니다. Normalize.css 소개 Normalize.css는 HTML 요소의 기본 스타일을 브라우저 간 일관성을 유지하도록 돕는 CSS 파일이다. 이것은 Boilerplate(보일러플레이트) 및 Bootstrap(부트스트랩) 등과 같은 크고 작은 프로젝트에서도 두루두루 사용되고 있다. HOME Normalize.css Project Site REPO Normalize.css source on GitHub Normalize.css 특징 브라우저(모바일 브라우저를 포함하여)를 광범위하게 지원하며, HTML5 요소, 타이포그래피,..
웹코딩/CSS 2015. 8. 24. 11:00

Noto Sans(본고딕) 웹폰트

Noto Sans를 웹폰트로 만들어 배포되고 있는 것들을 테스트하고 이를 소개하는 내용입니다. 웹폰트 사용을 고려하시는 분들께 도움이 되길 바랍니다. Noto Sans 웹폰트 소개 Noto Sans 웹폰트는 Noto Sans CJK를 웹폰트로 사용하기 위해 한국어 버전인 Noto Sans CJK KR에서 자주 쓰이는 완성형 한글 2,350자(KS X 1001 표준) 만 추출하여 만들어지고 있다. 이 제작과정은 한글 웹 폰트 경량화해 사용하기에 자세히 설명되어 있으며, 이를 이용해 NotoSansKR-Hestia라는 웹폰트가 공유 되고 있다(이하 Noto Sans Korean 이라고 칭함). 또한, 본고딕(Noto Sans) 웹폰트 사용하기에서도 비슷한 웹폰트를 배포(이하 notokr 이라 칭함)하고 있으..
웹코딩/CSS 2015. 8. 14. 11:41

CSS3 이면가시성(backface-visibility) 속성

괜스레 우리말로 번역한다고 더 어려워진 단어 같군요. backface-visibility 속성을 이용하면 어색한 CSS 효과를 수정할 수 있습니다. backface-visibility 속성 소개 이 속성은 3D transform(변형)과 연관되어 있으며, 입체적인 모습의 뒷면의 가시성을 결정하는 속성이다. 즉, 변형이 가해져 요소의 뒷면이 보여지게 될때, 이 속성으로 숨기거나 보여지게 할 수 있다. 대부분 어색한 번쩍이는 효과로 인해 이를 숨기고 싶어할 것이다. div { -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ backface-visibility: hidden; } backface-visibility 속성값 hidden : 이면..
웹코딩/CSS 2015. 7. 29. 11:00

CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다. appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다. div { appearance: button; -moz-appearance: button; /* Firefox */ -webkit-appearance: button; /* Safari and Chrome */ } 예를 들면 iOS의 폼 요소들에 부여되어 있는 둥근 테두리값이나 그림자 효과를 제거할때 사용할 수 있다. webit 계열의 브라우저의 type="sear..
웹코딩/CSS 2015. 7. 28. 10:00

CSS 크기 단위

CSS에서 사용할 수 있는 여러 크기 단위에 대하여 알아봅니다. 현재는 em, px 정도를 많이 사용하지만 rem 또한, 병행되어 사용되어질 수 있습니다. 가변 크기 단위 상대적인 크기를 지니는 단위이다. em em은 요소에 지정하는 글자 크기 단위다. em 단위를 쓰면 부모 요소에서 지정한 글자 크기를 기준으로 배율을 조정한다. 따라서 2em을 지정하면 부모 요소의 글자 크기의 2배가 된다. 문서 레이아웃을 글자 크기에 따라 유동적으로 만들때 많이 사용한다. ex ex는 요소에 들어잇는 현재 폰트의 문자 x의 높이에 해당하는 단위다. ex 단위의 크기는 em과 연관성은 있으나 거의 쓰이지 않는다. rem rem은 root em이라는 뜻으로, HTML 문서의 root 요소인 을 가리키며, 이 요소에 지정..
웹코딩/CSS 2015. 6. 17. 11:00

CSS 배치 모델(Placement Model)

웹문서를 작성하면서 요소를 적당한 위치에 놓기위해 고심을 하곤합니다. 이에 대한 전반적인 내용을 소개합니다. 배치 모델 소개 요소의 배치에 쓰이는 CSS 배치 모델은 정적, 절대, 고정, 상대, 플로트, 상대적 플로트 배치이다. 이 배치 모델은 여섯 가지 박스 모델과 관련이 있지만 대응되거나 같은 개념은 아니다. 정적 배치 모델 : 인라인, 인라인 블록, 블록, 테이블 박스의 배치에 사용한다. 절대 위치 모델, 고정 배치 모델 : 절대 위치 박스 배치에 사용하는데, 이때 어느 요소든 절대 위치 박스일 수 있다. 플로트 배치 모델 : 플로트 박스의 배치에 사용하는데, 마찬가지로 어느 요소든 절대 위치 박스일 수 있다. 상대 위치 모델 : 절대 위치 박스를 제외한 모든 박스의 상대 위치에 사용한다. 상대적 ..
웹코딩/CSS 2015. 6. 16. 00:00

CSS 박스 모델 크기 #2

각 종류의 박스를 지정한 크기로 표시하고, 내용에 맞춰 자동 축소시키고, 부모 요소에 맞춰 자동 확대시키기 위해 어떤 식으로 너비와 높이를 지정하는 법을 설명합니다. 박스 모델 너비 width 속성은 인라인을 제외한 모든 요소에 적용되는데 요소 종류에 따라 다르게 적용되며 위치 및 플로트에 따라서도 다르게 적용한다. height 속성과는 독립적이며 기본값은 width: auto이다. width: auto 자동 축소 : left: auto, right: auto, width: auto일때, 블록 박스를 제외한 모든 박스 모델이 자동 축소된다. 자동 확대 : left: 0, right: 0, width: auto일때, 블록 박스, 절대 박스는 자동 확대된다. width: 크기지정 : 요소에 너비를 지정할때는..
웹코딩/CSS 2015. 6. 15. 11:00