엔디프의 웹표준 커버스토리

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 의 차이를 아시겠나요? 정리 하자면 이 두 단위의 차이점은 부모요소로 부터 상속을 받느냐 아..

버킷브랜드 세미나 후기 지인의 소개로 우연찮게 디자인 세미나를 듣게 되었습니다. 솔직히 처음에는 크게 기대 하지 않고 갔다. 그런데 너무 와닿는 부분이 많아서 후기를 적어볼까 합니다. 세마나의 강사님은 디자인 팝의 김민호 대표님그날 처음 뵌것이지만 강민호 대표님의 마인드는 보고 배울게 많았던것 같습니다. 대표님 강의 중에 정말 와닿았던 몇가자만 소개해보고자 합니다. "우리가 전문가인데 왜 우리가 컨폼을 받아야 하는 것입니까? 그거 이상하지 않나요?"시안 A 와 B를 들고 업체에 찾아가서 컨폼을 받으니 클라이언트가 그럽니다. A와 B를 합쳐서 C를 만들어주세요그래서 디자이너는 C를 만들어서 들고갔더니 이것저것 고쳐달라고 합니다. 그래서 몇일을 고생한 끝에 고쳐서 갔더니 클라이언트가 그럽니다. 그냥 처음께 ..

애플과 디자인 트랜드 드디어 애플에서 아이폰6와 플러스를 발표했다. 오랫동안 애플제품을 써온 나로서는 굉장히 반가운 일이였다.애플에서 신제품을 발표하자 수많은 기사들이 쏟아지기 시작했다. 크게는 혁신이냐 아니냐의 문제이고 또는 우리가 애플에게 기대하고있던 기대치를 충족시켰느냐 아니면 그렇지 못했느냐 의 기준으로 나뉘었다. 수많은 아이폰 분석기사들을 뒤로하고 나는 그렇게 생각한다.애플의 진짜 힘은 보여지는 제품이 아니다. 나는 그들이 가지고 있는 진짜힘, 견고한 소프트웨어와 하드웨어의 조화 그리고 디자인의 트랜드를 이끌어나가는 힘이 그것이다. 애플 소프트웨어 IOS는 두말할 것도 없이 세계 최고 수준의 소프트웨어 플랫폼이다.그리고 내가 이야기 하고싶은것은 애플의 디자인 철학, 그리고 디자인의 트랜드 이다...

웹을 하다보면 참 여러가지 소스가 필요합니다.저도 작업을 하다보면 여러가지 소스가 필요한데요 그런소스들을 모아서 가지고 있다면 편하게 쓸수 있겠죠그래서 제가 유용하게 활용하는 소스들을 몇가지 정리해보도록 하겠습니다. 1. 새창띄우기새창링크

안녕하세요 엔디프입니다.제가 이번에 고급 소파를 구매해서 소소하게 포스팅 해볼려고 그래요~ 되게 이쁜 소파라고 소개해드리고 싶네요~ 김해에 있는 가구와 목수쟁이 에서 구매 했어요~주인아저씨가 정말 친절하게 설명해주셨어요첨에는 원목 소파로 구매할려고 했었거든요 그런데 주인아저씨가 차근차근 설명해주면서 이런 좋은 소파를 좋은 가격에 공급해주셨네요~ 저도 디자인일에 종사를 하고 컬러리스트 공부도 해봤지만 이 소파의 색은 되게 만들기 어려운 색이면서도 고급스러운 색이라는 판단이 들더군요쉽게 구할수 없는 색인것이죠 진 고동 빛깔이 나면서도 회색빛이 도는 미묘한 색이지요.. 인터넷으로는 뒤져바도 이런 색의 소파는 거의 없더군요.. 제가 못봤는지도. ^ ^;; 그리고 이 소파의 재질은 고급 천연 가죽이고 이태리 에서..

안녕하세요 엔디프 입니다. 오늘은 반응형 웹디자인에 대해 알아보겠습니다.그냥 반응형 웹디자인이라고 하니까 좀 막연하시죠?제가 분석한것은 반응형 코딩을 하는 기본 방식과 익스 하위버전에서 반응형 코드를 인식하는 방법입니다.저도 html5와 미디어쿼리를 가지고 익스 하위버전에 맞추고 싶진 않은데요..어쩌겠어요.. 우리나라는 아직 이런걸 원하는데요 ^^;; 간단하게 반응형 웹을 알기전에 알아야 할것들이 있습니다. 1. 프레임워크란?프레임워크란 반응형 웹디자인을 쉽게 만들어 줄수있게 만들어주는 도구이며 여러가지가 존재한다. 그중에서도부트스트랩, 파운데이션, 스켈렉톤 등이 있다. * 참조사이트 http://gokgo.tistory.com/96 반응형 웹디자인을 하실때 참고할 사이트 예제 입니다. http://al..

html 덕타입 선언 이후 붙는 메타 태그들은 중요한 역할을 합니다. 그래서 제가 메타 태그들의 기능에 대해서 분석해보았습니다. 출처 IT용어사전 | 메타 태그 하이퍼텍스트 생성 언어(HTML) 문서의 맨 위쪽에 위치하는 태그. HEAD 태그 사이 또는 뒤에 있어도 되지만, 반드시 BODY 태그 앞쪽에 위치해야 한다. 브라우저와 검색 엔진을 사용할 수 있도록 문서의 정보를 포함하고 있다. 외국어 표기 meta tag(영어) 출처 무역용어사전 | 메타 태그 메타 태그란 키워드 검색엔진에 특정 홈페이지 또는 HTML문서에 대한 색인정보 즉, 키워드와 약간의 정리된 내용(컨텐츠)을 표현하는 HTML Tag이다. 외국어 표기 META TAG(영어) ***[네이버 지식백과] 메타 태그 [meta tag] (용어해..

안녕하세요 엔디프 입니다. 이번에는 placeholder 에 대하여 한번 알아보겠습니다. PLACEHOLDER 란 인풋텍스트나 아레아 등에서 안내 문구를 삽입해 주는 기능입니다. 그리고 클릭하면 사라지는 아주 좋은 기능입니다.placeholder를 넣지 않고 이 기능을 구현하기 위해서는 복잡한 스크립트를 사용해야 하므로 개발자나 스크립터가 아닌 이상에야 사용하기가 불편합니다. ex) ---------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------..

안녕하세요 엔디프입니다.이번에는 HTML5의 기본구조에 대해서 알아보도록 하겠습니다.솔직히 조금만 관심이 있어서 책 찾아봐도 다 나오고 검색해도 친절하게 설명하고있는 곳이 많기는합니다.저도 제 나름대로 분석하고 연구한 것을 토대로 포스팅 해보도록 하겠습니다. HTML5가 HTML4와 다른점은1. 의미있는 태그의 존재입니다.쉽게 설명드려서 HTML4.01 에서 라고 썼다면 이것은 html5에서 or 로 바뀌었죠 의미가 없는 디브 요소가 빠지고 의미가 있는 요소들이 생기면서 html5가 좀더 웹표준에 가까워 졌다는 이야기 입니다. 1. 는 사이트 상단을 나타냅니다.2. 는 네비게이션 을 나타냅니다.3. 중요한건 section과 article의 관계인데요 잠시 section과 article의 관계를 알아보도록..