property 검색 결과

해당 글 19건

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

흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니..
웹코딩/CSS 2016.02.01 11:00

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

CSS를 이용하여 <img> 나 <video> 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(<img>, <video>, <object>..
웹코딩/CSS 2015.11.20 11:00

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

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

CSS3 외형(Appearance) 속성

조금은 생소할 수도 있는 appearance 속성에 대하여 설명합니다. 이 속성은 크로스브라우징을 할때, 알아두면 곤란함을 줄일수 있습니다. appearance 속성 소개 이 속성은 운영체제 및 브라우저에 기본적으로 설정되어 있는 테마를 기반으로 요소를 표현한다. 즉, 네이티브로 지원되는 모양들을 해제하거나 추가할때 이 속성을 이용할 수 있다. div { appearance: button; -moz-appearance: button; /..
웹코딩/CSS 2015.07.28 10:00

CSS 그림자속성 (Shadow Property) - Text-shadow, Box-shadow

CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. text-shadow 글자에 그림자를 생성한다. IE9 버전까지는 지원하지 않고 자체 전용 속성인 filter: shadow를 지원하므로 CSS가 유효성 검사를 통과하지 못한다. 지원하지..
웹코딩/CSS 2015.06.08 17:00

CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap

줄바꿈을 원하는 곳에서 할 수 있도록 도와주는 속성들에 대하여 알아봅니다. white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정한다. 이 속성은 상속된다. p {white-space: nowrap;} 속성값 normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다. nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다. pre : 줄 바꿈..
웹코딩/CSS 2015.06.08 11:00

CSS 글자정렬과 꾸밈속성 (Text Align, Effect Property)

글자들을 정렬하고 들여쓰고, 대소문자를 강제하는 방법들에 대하여 알아봅니다. text-align 글자를 왼쪽 정렬, 오른쪽 정렬, 가운데 또는 양쪽 정렬할지를 설정한다. 이 값은 상속된다. h1 {text-align:center;} h2 {text-align:left;} h3 {text-align:right;} 블록 요소에 적용된다. 속성값 left : 기본값으로 글자를 왼쪽에 정렬한다. center : 글자를 가운데에 정렬한다. ..
웹코딩/CSS 2015.06.06 17:00

CSS 색상(Color)과 투명도(Transparent) 속성

CSS를 재정리하는 중이라 과거에 작성된 글들과 중복되는 내용이 많습니다. 검색결과에서도 나타나지 않는군요. color 텍스트의 색상을 지정한다. 기본적으로 값이 상속된다. body {color: red;} h1 {color: #00ff00;} p {color: rgb(0,0,255);} 속성값 color : CSS 색상값 inherit : 부모 요소로부터 값을 상속 받는다. 색상값 CSS의 색상값은 적색, 녹색, 청색의 혼합의 결과..
웹코딩/CSS 2015.06.05 11:00

CSS Flex 속성

flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고..
웹코딩/CSS 2015.06.04 17:00

CSS Display와 Visibility 속성

CSS 속성중에 요소를 표시하는 방법을 지정하는 display 속성과 요소를 보여주거나 숨기는 visibility 속성에 대하여 알아봅니다. display 요소를 표시하는 방법을 지정한다. p.inline {display: inline;} 속성값 inline : 인라인 요소처럼 표현한다. block : 블럭 요소처럼 표현한다. inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다...
웹코딩/CSS 2015.06.04 15:00

CSS 너비와 높이속성(Width, Height Property)

CSS 속성중에 요소의 너비와 높이에 관여하는 속성들에 대하여 알아봅니다. width, height 요소의 너비와 높이를 지정한다. p { width:100px; height:100px; } 속성값 auto : 브라우저가 너비와 높이를 계산한다. 기본값이다. length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 ..
웹코딩/CSS 2015.06.03 15:00