CSS 이벤트 제어(pointer-events ) 속성 흔히 이벤트가 부여된 요소를 숨기면 해당 이벤트가 작동하지 않을꺼라 생각합니다. 대부분 의도한 결과를 반영하지만 숨김처리에 사용한 방법이 opacity 속성을 이용한 경우라면 가시성은 없지만 해당 영역의 이벤트에 응답하게 됩니다. 이를 강제로 제어하기 위해서는 pointer-events 속성을 활용해야 하며 관련하여 아래에서 추가적인 정보를 서술하였습니다. 숨김 처리 속성에 따른 특성 요소를 숨길때 사용하는 CSS 속성은 제각기 고유의 특성을 지니고 있다. 아래의 표를 참고하자. 숨김 속성과 값 공간점유 이벤트 탭(Tab) 접근 opacity: 0 점유 활성 가능 visibility: hidden 점유 비활성 불가능 visibility: collapse 테이블안에서만 비점유 비활성 불가능 display:.. 웹코딩/CSS 2016.02.01 11:00
CSS3 오브젝트 채우기, 위치조정 (object-fit, object-position) 속성 CSS를 이용하여 나 요소같은 오브젝트들을 비율을 유지한 채로 크기를 조정하는 것은 매우 까다로운 부분입니다. 오브젝트들이 출력될 공간이 유동적인 크기가 아닌 고정된 크기라면 더욱 골머리를 썩히게 됩니다. 이에 대응하는 CSS3 속성에 대하여 살펴봅니다. object-fit 속성 object-fit 속성은 대체되는 요소의 내용(, , , 등과 같은)이 지정된 너비와 높이에 맞게 장착되는 방식을 지정한다. 이는 프로필 이미지나 고정된 크기의 썸네일을 출력하는 다양한 경우처럼 제각각의 크기를 가진 오브젝트등을 넘겨받아 비율을 유지한 채로 일정한 크기로 재가공하는 경우에 유용하다고 할 수 있다. CSS3의 background-size 속성.. 웹코딩/CSS 2015.11.20 11:00
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.07.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.07.28 10:00
CSS 그림자속성 (Shadow Property) - Text-shadow, Box-shadow CSS3에는 요소(박스형태)에 그림자를 부여하는 box-shadow와 글자에 그림자를 부여하는 text-shadow가 있습니다. 글자에 그림자를 부여하는 경우는 한글 폰트의 희박성으로 효과가 미미하나 박스형태의 그림자 부여는 얼마든지 사용할 수 있습니다. text-shadow 글자에 그림자를 생성한다. IE9 버전까지는 지원하지 않고 자체 전용 속성인 filter: shadow를 지원하므로 CSS가 유효성 검사를 통과하지 못한다. 지원하지 않는 브라우저가 있다해서 text-shadow 속성을 지정해도 해가 될것은 없다. 없으면 없는데로 있으면 있는데로 렌더링될터이니... 모던 브라우저 선택자 { text-shadow: 색상 가로길이 세로길이 번짐; } .shadow { text-shadow:#999999.. 웹코딩/CSS 2015.06.08 17:00
CSS 줄바꿈속성 (LineBreak Property) - White-space, Word-wrap 줄바꿈을 원하는 곳에서 할 수 있도록 도와주는 속성들에 대하여 알아봅니다. white-space 내부에서의 자동 줄 바꿈 여부를 나타내는 값을 설정한다. 이 속성은 상속된다. p {white-space: nowrap;} 속성값 normal : 기본값으로 글자 줄이 자동으로 바뀐다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀐다. nowrap : 줄 바꿈이 실행되지 않는다. 콘텐츠가 다음 줄로 바뀌지 않는다. pre : 줄 바꿈과 기타 공백이 유지된다. 이 가능한 값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원된다. !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작한다. pre-line :.. 웹코딩/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 : 글자를 가운데에 정렬한다. right : 글자를 오른쪽에 정렬한다. justify : 글자를 양쪽에 정렬한다. text-align 데모 보기 자바스크립트 문법 object.style.textAlign="right" 지원 현황 인터넷익스플로우 파이어폭스 사파리 크롬 오페라 지원 지원 지원 지원 지원 inh.. 웹코딩/CSS 2015.06.06 17:00
CSS 글꼴속성 (Font Property) 흔히 폰트라고 부르는 글꼴과 관련된 CSS 속성을 다룹니다. 글꼴을 지정하고 자간을 조정하는데 필요한 속성입니다. font 축약 속성이며 시스템 글꼴 값을 제어한다. 웹코딩/CSS 2015.06.06 13:00
CSS 색상(Color)과 투명도(Transparent) 속성 CSS를 재정리하는 중이라 과거에 작성된 글들과 중복되는 내용이 많습니다. 검색결과에서도 나타나지 않는군요. color 텍스트의 색상을 지정한다. 기본적으로 값이 상속된다. body {color: red;} h1 {color: #00ff00;} p {color: rgb(0,0,255);} 속성값 color : CSS 색상값 inherit : 부모 요소로부터 값을 상속 받는다. 색상값 CSS의 색상값은 적색, 녹색, 청색의 혼합의 결과로 16진수를 이용한 표기법(HEX)과, RGB 표기법, HSL 표기법, 색상 이름을 직접 입력하는 방식들을 지원한다. 16진수 주요 브라우저에서 모두 지원한다. 16진수 색상은 #RRGGBB와 같은 형태로 RR(적색), GG(녹색), BB(청색)을 진수로 나타내며, 0~FF.. 웹코딩/CSS 2015.06.05 11:00
CSS Flex 속성 flex란 유연성을 뜻하는데 CSS에서 flex box라는 개념이 생겼습니다. 요소들을 자유자제로 위치 시키는 flex 속성에 대하여 알아봅니다. display:flex 블록 레이아웃, 인라인 레이아웃, 테이블 레이아웃 및 위치 지정 레이아웃 모드와 더불어 CSS3에서는 보다 복잡한 블록 타입 레이아웃 모드인 flexbox 레이아웃을 지원한다. flexbox의 콘텐츠는 어떤 방향에든 위치할 수 있으며, 동적으로 변경가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 한다. 과거 문법 display: box(old)와 같이 사용되다가 비공식적인 문법으로 display: flexbox(hybrid)와 같이 사용되었다. 근래에 명세에는 display: flex(modern).. 웹코딩/CSS 2015.06.04 17:00
CSS Display와 Visibility 속성 CSS 속성중에 요소를 표시하는 방법을 지정하는 display 속성과 요소를 보여주거나 숨기는 visibility 속성에 대하여 알아봅니다. display 요소를 표시하는 방법을 지정한다. p.inline {display: inline;} 속성값 inline : 인라인 요소처럼 표현한다. block : 블럭 요소처럼 표현한다. inline-block : 인라인의 흐름에 따르되 블록 박스처럼 마진, 테두리, 패딩, 너비, 높이 속성이 적용된다. flex : CSS3에 새로 생긴 값으로 블록-레벨의 flex 컨테이너처럼 요소를 표현한다. inline-flex : CSS3에 새로 생긴 값으로 인라인-레벨의 flex 컨테이너처럼 요소를 표현한다. list-item : 박스를 블록 처리하고 그 안의 아이템들을 인.. 웹코딩/CSS 2015.06.04 15:00
CSS Overflow와 Text-overflow 속성 CSS 속성중에 요소의 크기를 넘어서는 부분을 통제하는 overflow 속성에 대하여 알아봅니다. overflow 요소의 박스에 콘텐츠가 넘칠때 표현방법을 지정한다. div { width: 150px; height: 150px; overflow: scroll; } overflow-x와 overflow-y 속성에 대한 축약 속성이다. 이 속성의 두 번째 값은 선택적이며, 하나의 값만 지정할 경우 overflow-x와 overflow-y 속성에 모두 적용된다. 속성값 visible : 넘치는 콘텐츠를 자르지 않고 요소의 박스를 넘어 표시한다. 기본값이다. hidden : 넘치는 콘텐츠를 자르고 보이지 않게 한다. scroll : 넘치는 콘텐츠를 자르지만 스크롤바를 표시한다. auto : 넘치면 콘텐츠를 자르.. 웹코딩/CSS 2015.06.04 12:00
CSS 여백속성(Margin, Padding Property) CSS 속성중에 요소의 여백을 결정하는 속성들에 대하여 알아봅니다. margin 축약 속성이며, 요소의 테두리 외부에 투명한 공간을 확보한다. 값은 1개부터 4개까지 지정할 수 있다. h1 {margin: 10px 5px 15px 20px;} /* top-10px, right-5px, bottom-15px, right-20px */ h2 {margin: 10px 5px 15px;} /* top-10px, right & left-5px, bottom-15px */ h3 {margin: 10px 5px;} /* top & bottom-10px, right & left-5px */ h4 {margin: 10px;} /* all four margins are 10px */ 속성값 auto : 브라우저가 마진을 .. 웹코딩/CSS 2015.06.03 17:00
CSS 너비와 높이속성(Width, Height Property) CSS 속성중에 요소의 너비와 높이에 관여하는 속성들에 대하여 알아봅니다. width, height 요소의 너비와 높이를 지정한다. p { width:100px; height:100px; } 속성값 auto : 브라우저가 너비와 높이를 계산한다. 기본값이다. length(길이) : 너비와 높이를 부동 소수점 숫자 뒤에 절대 단위 지정자( cm , mm , in , pt , pc ) 또는 상대 단위 지정자( em , ex , px )가 오는 값을 지정한다. %(퍼센트) : 너비와 높이를 퍼센트로 폭을 적용한다. inherit : 부모 요소로부터 값을 상속 받는다. 자바스크립트 문법 object.style.width="50px" object.style.height="50px" 지원 현황 인터넷익스플로우 파이.. 웹코딩/CSS 2015.06.03 15:00
