목록CSS연구소 (8)
엔디프의 웹표준 커버스토리
SCSS를 사용하는 방법을 알아볼게요SCSS는 변수와 믹스인, 익스텐드 와 함수의 기능으로 이루어져 있습니다. 그럼 하나씩 알아보도록 할게요. 변수SCSS에서 변수는 자바스크립트에서의 변수의 개념보다 실수의 개념에 가깝습니다.$sz100 : 100%;$default_sz : 0;$default_szpx : 1px;$base_color : #555;$base_bgcolor : #fff;$base_font : '돋움', dotum,'Helvetica', sans-serif;$font_type1 : 'arial';$hide : none;$hidden : hidden;$normal : noraml; $구문을 사용하여 값을 변수에 담을 수 있습니다.부트스트랩의 SCSS 변수를 보면 상당히 많은 변수를 체계적으로 ..
Syntext Awsome style sheet SASS는 css의 preprofessor(전천후 처리기) 입니다. sass를 활용하면 css를 더욱 강력하게 구조화 시키는것이 가능합니다. SASS to css compilesass 파일은 css 로 컴파일 되어야 하며, 컴파일 할 수 있는 방법은 많이 있지만 그중에서 가장 쉽고 유용한 방법을 소개해드릴게요. 코알라 사용코알라 라고 하는 프로그램을 사용하면 쉽게 SASS를 CSS로 컴파일 하는것이 가능합니다.물론 서버사이드에서 여러가지 설정으로 컴파일 해주는 방법이 있지만, 처음 해보면 복잡할 수도 있고 어려울 수도 있습니다. 코알라 사용법은 매우 단순합니다.코알라 프로그램 다운로드 : http://koala-app.com왼쪽 상단 +표시를 누르면 scs..
HTML 의 element는 크게 block-level 과 inline-level 로 구분 할 수 있습니다. 이 두가지 element level 에 대하여 알아보겠습니다. block-level : 줄바꿈이 되지 않으며, 기본적으로 width 값을 100%로 설정합니다. block-level 은 vertical-align 속성을 적용 되지 않고, height, margin, padding, line-height 속성이 적용될 수 있습니다. inline-level : 줄바꿈이 되며, 수평으로 정렬이 가능한 요소들입니다. inline-level은 height속성은 적용 되지 않고, vertical-align, line-height값이 적용 됩니다. inline-block : inline-block은 block..
html5에서 라디오 버튼 디자인 하는 방법 input[type="radio"] {display:none} /* 디폴트 상태 */ input[type="radio"] + label {display:inline-block; background:url(../../) } /* 온상태일때 */ input[type="radio"]:checked + label onclick="window.open('')"
안녕하세요 엔디프입니다. CSS는 상속이 무엇보다 중요하자나요 상속 개념중에서도 폰트 상속에 대해서 이야기를 해볼려고 합니다. 제가 코딩할때는 먼저 body 속성이나 공통선택자 * 에 body {font:100%/1.2 ''dotum'} 이라고 적어줍니다. 폰트사이즈를 상속받기 위함이죠 100% 라고 하는건 현재 웹 화면의 크기에 최적화 된 사이즈로서 보통 16px를 나타내며 16px는 1em 입니다. em단위는 부모요소로부터 상속받기 때문에 사용할때 샘법이 필요합니다. 폰트 크기 01 폰트 크기 02 이렇게 적게 되면 폰트 크기는 div 도 14px, 자식요소인 p 도 14px 로 같아 졌습니다. em과 rem 의 차이를 아시겠나요? 정리 하자면 이 두 단위의 차이점은 부모요소로 부터 상속을 받느냐 아..
안녕하세요 엔디프 입니다. 이번에는 placeholder 에 대하여 한번 알아보겠습니다. PLACEHOLDER 란 인풋텍스트나 아레아 등에서 안내 문구를 삽입해 주는 기능입니다. 그리고 클릭하면 사라지는 아주 좋은 기능입니다.placeholder를 넣지 않고 이 기능을 구현하기 위해서는 복잡한 스크립트를 사용해야 하므로 개발자나 스크립터가 아닌 이상에야 사용하기가 불편합니다. ex) ---------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------..
이번연구는 이미지 스프라이트 기법으로 코딩해보는 것입니다.먼저 이미지 스프라이트 기법에 대한 사전이해가 필요할것입니다.그리고 이미지 스프라이트 기법은 무엇이며 왜 이렇게 해야하는지도 알아야 할것입니다. 이미지 스프라이트 기법이란 여러개의 이미지를 따로 두고 코딩하는게 아니라 하나의 png 파일에 모아서 코딩하는 방식입니다. 이 기법이 유용하게 활용된 배경에는 모바일 웹이 활성화 되면서 부터 였죠이미지스프라이트 방식으로 코딩했을시에 기존 코딩방식으로 메모리를 적게 먹어서 좀더 빠르고 가볍게 코딩할수 있다는것이 장점입니다.이미지 스프라이트 기법으로 코딩하는 방식은 다양하게 존재하며 이번에는 그중 한가지 방식에 대해서 연구해보도록 하겠습니다.먼저 png 파일을 정리해보록 해요 png 파일을 만들어갑니다. 이때..