CSS 검색 결과

해당 글 36건

Flexible box Layout - 플렉스 박스 #2

플렉스 박스 #2 앞선 포스팅에서 언급했듯이 플렉스박스 레이아웃 모드는 여유 공간에 따라서 플렉스 항목의 너비 또는 높이를 유연하게 변형시킬 수 있는 기능을 기반으로 하고 있습니다. 그래서 당연히 플렉스박스 모듈은 항목들의 크기를 변화시키는 방법에 대한 탁월한 제어 능력을 제공해 주고 있습니다. 이번 포스팅에서는 앞에서 미처 설명하지 못한 플렉스박스 속성들과 그 기능에 대해 계속 알아보도록 하겠습니다. order 앞선 내용에서 flex-direction, flex-wrap 그리고 이 두 개의 단축 속성을 지정할 수 있는 flex-flow 들은 플렉스 항목의 순서와 방향을 효과적으로 제어할 수 있게 해줍니다. 그런데 시각적인 순서에 관해서는 이보다 더 제어력이 뛰어난 order 라는 속성이 있습니다. or..
StyleSheet/CSS 2018. 10. 12. 14:46

Web Font - @font-face 적용 방법

Font(서체)의 사용 좀 더 흥미진진한 웹 사이트를 만들고 싶을 때 첫 번째로 고려하게 되는 것은, 표제어나 단락 등, 페이지를 구성하는 각 요소에 서로 다른 서체를 지정하는 것입니다. 최근의 모든 브라우저들은 웹 서체(Web Font)라는 것을 지원하며 사이트를 볼 때 다운되는 서체를 웹 폰트라고 합니다. 웹 폰트 또한 font-family 속성을 사용하지만, @font-face 지시어(directive)라는 CSS 명령어를 사용해서 웹 브라우저에게 해당 서체를 다운로드할 것을 알리면서 사용할 수 있습니다. 사용자는 이미 검증된 서체만 사용하는 방법을 택할 수도 있고(대부분의 컴퓨터에 설체된 기본 서체만 사용하는 방법), 아니면 웹 폰트를 사용해 더 많은 폰트 가운데 하나를 골라 쓰는 방법을 택할 수..
StyleSheet/CSS 2018. 10. 12. 11:03

Font Size(Unit 단위) #2

Font Unit (폰트 단위 크기 비교) css에서는 글자 폰트 크기나 width, height 등의 크기를 pt, px, em, ex, % 등의 다양한 단위를 사용할 수가 있다. 대부분 프론트 개발 시에는 px 단위를 사용하고 있지만 요즘 트렌드인 반응형(RWD)이나 모바일로 인하여 em, % 단위를 사용하고 있는 추세이기도 하다. pt, px 은 절대적인 크기를 나타내는 반해서 em, ex, % 는 상위 엘리먼트에 대한 상대적인 크기를 나타낸다. em, ex, % 단위의 장점이라면 웹 브라우저의 메뉴에서 글꼴 크기를 조절할 수 있고, 그에 따라 레이아웃이 유동적으로 변화 될 수 있기 때문에 접근성이 향상된다. 즉, 작은 글자를 보기 어려운 사람들도 글자 확대를 하여 쉽게 볼 수 있다는 점이다. 그럼..
StyleSheet/CSS 2018. 10. 11. 10:39

CSS3 :nth-child() - 의사 클래스(Pseudo-Classes)

의사(가상) 클래스는 :hover와 :before, :active와 같은 형태로 많이 사용되고 있습니다. 그리고 현재 CSS3는 새로운 의사(가상) 클래스들을 상당히 많이 제공하여 웹을 좀 더 유연하게 제어할 수 있도록 해주고 있습니다. 이 글에서는 nth-child에 대해 중점적으로 다룰 것이고 그 외의 몇 가지 가상 클래스를 소개해 보도록 하겠습니다. CSS3 가상 클래스를 IE 구형 브라우저에서도 사용할 수 있는 Selectizr 포스팅보기 처음과 마지막 요소 선택 일반적으로 많이 사용하는 선택자들로 간단히 짚고 넘어가겠습니다.:first-child는 요소 유형(타입)에 상관없이 요소의 첫 번째 자식을 선택합니다. 이 가상 클래스는 CSS2.1에서 먼저 정의되었고 IE7+ 모든 브라우저들이 지원하고..
StyleSheet/CSS 2016. 12. 2. 17:19

반응형 유튜브 동영상 삽입하기 - Responsive YouTube Video

Responsive YouTube Video & Object유튜브와 같은 미디어는 고정된 높이와 너비를 제어하여 추가하기 때문에 브라우저 크기나 장치의 폭에 따라 크기를 조정할 필요가 있을 경우 문제가 될 수 있습니다.다시 말해, 반응형 웹에서 일반적인 유튜브 소스코드를 추가할 시에 모바일,태블릿,스크트톱에서 원치않는 사항에 직면하게 될 것입니다.이렇듯 반응형 웹에서 유튜브 동영상과 같은 미디어를 다루는 방법에 대해 간단히 알아봅니다. 일반적인 마크업 구조유튜브 동영상을 삽입시에 다음과 같은 마크업을 할 수 있습니다. html 위와 같이 유튜브 소스를 아이프레임으로 삽입시에 아이프레임을 감싸주는 부모 컨테이너와 같은 요소가 필요합니다. CSS 구성 css .video-container { position..
StyleSheet/CSS 2016. 9. 30. 08:20

반응형 말줄임(text ellipsis) 효과

RWD ellipsis(반응형 말줄임 참고 자료) 공지사항과 같은 리스트 타입에서 말줄임 효과를 구현해 봅니다. RWD 공지사항 말줄임 효과 만들어보기 html Lorem ipsum dolor sit amet, consectetur adipisicing elit. Neque nihil! 2014-08-30 Lorem ipsum dolr adipisicing elit. Neque nihil! 2014-09-03 css .article-list { width: 70%;} .article-list li {} .article-list li a {position: relative;display:block;line-height: 27px;padding-right: 80px; color: #333;} .article..
StyleSheet/CSS 2016. 9. 30. 08:09

반응형 탭 스타일 CSS

RWD Tab Style 반응형 탭 스타일에 대해 알아봅니다. 반응형 탭 CSS Ref 마크업 및 CSS 는 다음과 같습니다. html Why choose Samsung Printers? content 1 Why choose Samsung Supplies? content 2222 Why choose Samsung Solutions? content 333 Why choose Samsung Services? content 444 css * { margin:0; padding:0 } .b2b-tabswrap .b2b-tabs {width:100%; height:auto; position:relative; } .b2b-tabswrap .b2b-tabs li {float:left;display:block;widt..
StyleSheet/CSS 2016. 9. 30. 08:09

반응형 웹 디자인(RWD) 기초 다지기

Responsive Web Design 웹 디자이너는 760픽셀 폭의 노트북 화면에서부터 데스크톱 모니터에 이르기까지, 다양한 크기의 디스플레이를 지원하는 문제로 항상 이슈가 생겼습니다. 게다가 스마트폰과 태블릿의 등장으로, 고려해야 하는 디스플레이 크기는 더 다양해졌습니다. 그래서 어떤 회사는 모바일 브라우저와 별도의 웹 사이트를 구축하기도 합니다. 하지만 두 가지 종류의 사이트와 웹 서버 프로그램을 동시에 개발하여, 단말 종류에 따라 다른 사이트가 전송되도록 할 시간, 돈, 인력등이 충분하지 않다면 모바일 전용 웹 사이트를 구축하기는 아마 어려울 것입니다. 다행히도, 하나의 웹 사이트로 다양한 크기의 디스플레이를 지원할 또 다른 방법이 있는데, 이 디자인(설계) 기법의 이름은 '반응적 웹 디자인'으로..
StyleSheet/CSS 2016. 9. 30. 08:06

커스텀 라디오 버튼 - Designed radio button(custom radio)

커스텀 라디오 버튼 만들기 Basic Radio Button Type - jQuery See the Pen 커스텀 기본 라디오 버튼 #1 by jaeheekim (@jaehee) on CodePen. 생성자 함수 방식의 라디오 버튼 See the Pen 생성자 함수 방식의 라디오버튼 by jaeheekim (@jaehee) on CodePen. 프로토타입 방식 패턴 코드 HTML 마크업은 위와 동일합니다. javascript /** *--------------------------------- * custom radio button * -------------------------------- */ (function(global, $){ $(runRadio); function runRadio() { va..
Code Lab 2016. 9. 29. 13:19

compass 고급 스프라이트 사용 패턴

Advanced Compass CSS Sprite 앞선 포스팅에서 Compass Basic Sprite 에 대해 알아보았으며 이 글에서는 좀 더 고급 사용이 가능한 Compass helper 인 CSS Sprite 에 대해 알아보는 시간을 가져보겠습니다. Compass의 스프라이트 고급 패턴을 사용하려면 Compass 에서 제공되는 functions(Helpers for Compass) 및 Mixin을 사용합니다. 이 고급 패턴 역시 png만을 지원하고 있습니다. CSS Sprite Helpers for Compass sprite-map($glob, ...) sprite-map() 은 개별 스프라이트 이미지를 병합된 스프라이트 이미지를 생성하도록 도와줍니다. SCSS $icons: sprite-map("..
StyleSheet/Compass 2016. 9. 29. 10:17

vertical align & center box(수직 중앙 정렬)

요소 중앙 정렬(수직정렬)요소를 중앙(센터) 정렬하는 방법에는 여러가지가 있습니다.가령, 가장 잘 알려진 line-height 로 중앙정렬을 시키는 방법은 text/image 가 single line 일 경우에만 가능하다는 단점이 있습니다. 그리고 위의 그림과 같은 position: absolute 를 이용하는 방법(demo)과 display: table-cell 을 이용하는 방법이 있습니다. table-cell 은 다음과 같이 많이 사용합니다. Unknown stuff to be centered. .something-semantic { display: table; width: 100%; } .something-else-semantic { display: table-cell; text-align: cen..
StyleSheet/CSS 2016. 9. 29. 08:36

CSS3 transition(화면이동,전이)

화면이동(transition) 기능으로 2D 전환(transform)에 생동감 부여하기 앞선 포스팅에서 언급했듯이 CSS transform은 애니메이션과 결합할 때 그 진정한 힘과 다양한 위력을 발휘할 수 있게 됩니다. 자바스크립트의 도움없이 순수하게 CSS, 엄밀히 말하자면 "CSS3 transition(전이)"만을 사용하여 다양한 효과를 나타낼 수 있습니다. CSS transition(전이,화면이동) 소개 transform과 마찬가지로 전이는 CSS에 추가된 강력한 기능으로 애니메이션 형식으로 그 능력을 한 차원 끌어올렸습니다. CSS 전이를 CSS 애니메이션 모듈과 혼동하면 안됩니다. 후자는 완전히 별개입니다. 애니메이션 모듈은 훨씬 더 규모가 크고 복잡하며 다양한 능력을 가지고 있습니다. 그렇다면..
StyleSheet/CSS 2016. 9. 29. 08:25

CSS3 transform - 2D 전환

CSS3 2D transform(전환) transform(변형)은 CSS3에 추가된 강력한 기능입니다. 지난 몇 년사이에 웹에서 CSS와 연관된 것 중 감탄할 만한 새로운 시도들을 발견했다면 그 기저에는 transform(변형)이 있을 확률이 높습니다. 변형이라는 것은 쉽게 말해서 특정 요소를 여러 가지 방법으로 모양을 바꾸는 것을 의미합니다. 전환의 진정한 잠재력은 CSS transition(이동효과)와 함께 사용될 때, 또는 3D 기능들과 함께 사용될 때 완전하게 표현됩니다. 그렇지만 먼저 가장 기본적인 전환의 형태인 2D 전환에 대해서 이해해야 합니다. 지금부터 2D 전환에 대해 알아봅니다. 2D 전환만으로도 요소의 위치, 크기, 방향, 원근 등을 의도대로 조정할 수 있고 이 모든 것이 한 줄의 C..
StyleSheet/CSS 2016. 9. 29. 08:23

Skip Navigation 및 Dimmed style guide

스킵 네비 및 딤처리 가이드 접근성 스킵 네비게이션 스타일가이드 css .skipNav { width:980px;overflow:hidden;margin:0 auto;position:relative } .skipNav a { display:block;background:#000;font-weight:bold;width:0;height:0; margin:0 -1px -2px 0;overflow:hidden;font-size:11px;text-align:center } .skipNav a:hover, .skipNav a:focus, .skipNav a:active { height:20px;line-height:1;margin:0;padding-top:5px;width:auto; text-decoration:..
StyleSheet/CSS 2016. 9. 29. 08:06