본문 바로가기
반응형

IT/Web106

CSS3 미디어 쿼리 (media query) 미디어 쿼리(media query) CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다. 예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있습니다. CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다. 미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다. 미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변.. IT/Web 2020. 4. 27.
CSS3 다중 칼럼 Multi-column) 레이아웃 다중 칼럼(multi-column) 레이아웃 CSS에서는 신문과 같이 여러 개의 칼럼(column)으로 구성되는 구조를 column 속성을 이용하여 손쉽게 만들 수 있습니다. 속성 설명 columns 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음. column-count 해당 요소를 몇 개의 칼럼(column)으로 나눌지를 설정함. column-gap 칼럼 사이의 간격을 설정함. column-width 칼럼의 너비를 설정함. column-span 해당 요소가 몇 개의 칼럼(column)을 병합해서 표현할지를 설정함. column-fill 칼럼을 어떻게 채울지 설정함. column-rule 모든 columns 속성을 이용한 스타일을 한 줄에 설정할 수 있음. column-rule-st.. IT/Web 2020. 4. 14.
CSS3 사용자 인터페이스 - resize, outline-offset, box-sizing 사용자 인터페이스(user interface, UI) CSS3에서는 새로운 사용자 인터페이스를 이용하여, 사용자가 요소의 크기나 아웃라인 등을 마음대로 변경할 수 있게 해줍니다. CSS3 사용자 인터페이스(user Interface) 지원 버전 CSS3 사용자 인터페이스(user Interface)를 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 또한, 브라우저별로 벤더 프리픽스(vendor prefix)를 이용해 이 기능을 최초로 지원한 버전도 같이 표기했습니다. resize 속성 resize 속성은 사용자가 해당 요소의 높이나 너비를 변경할 수 있게 해줍니다. ※ resize 속성은 익스플로러에서 지원하지 않습니다. See the Pen eYppZBW by yunjunshin (@yjshin).. IT/Web 2020. 4. 14.
CSS3 버튼 CSS3 버튼(button) CSS를 이용하면 다양한 모양의 버튼을 여러 방식으로 만들 수 있습니다. CSS에서 버튼은 태그 뿐만 아니라 태그와 태그로도 만들 수 있습니다. 다양한 요소로 만드는 버튼 기본 버튼 button 태그 a 태그 CSS로 버튼 스타일 설정 button 태그 a 태그 버튼을 누르면 배경색이 변하는 버튼 다음 예제는 마우스를 올리면 배경색이 변하는 버튼 예제입니다. See the Pen RwWWrrL by yunjunshin (@yjshin) on CodePen. 위의 예제처럼 transition-duration 속성을 이용하면, 배경색 뿐만 아니라 글자의 색상까지 변경되게 할 수 있습니다. 그림자 효과 버튼 다음 예제는 그림자 효과를 설정한 버튼 예제입니다. See the Pen .. IT/Web 2020. 4. 13.
CSS3 글꼴 CSS3에서는 웹 글꼴을 위해 다음 규칙이 추가되었습니다. - @font-face 규칙 CSS에서 사용할 수 있는 font 속성은 다음과 같습니다. font-family font-style font-variant font-weight font-size CSS3 웹 글꼴(web font) 지원 버전 CSS3 웹 글꼴(web font)을 지원하는 주요 웹 브라우저의 버전은 다음과 같습니다. 웹 글꼴의 형식 웹 글꼴의 형식에는 다양한 종류가 있으며, 현재 가장 많이 사용하는 웹 글꼴 형식은 다음과 같습니다. 트루 타입 글꼴(TrueType Fonts, TTF) 맥(MAC)과 윈도우(Window) OS에서 사용되어 온 대표적인 글꼴입니다. 오픈 타입 글꼴(OpenType Fonts, OTF) 사용자가 자신의 컴.. IT/Web 2020. 4. 13.
반응형

티스토리툴바