HTML 회원가입 양식 라디오/체크박스 버튼 디자인 하기 울며 겨자 먹기~~!! 오늘은 간단하지만 매우 유용한 CSS디자인방법을공유하고자 합니다. 회원가입시에 만나게되는약관동의 그리고 그 옆에 있는 체크박스! 사실, HTML 내부에 이미 들어있는체크박스 디자인을 사용하셔도상관은 없습니다. 하지만 이쁘지 않죠 ㅠㅜ 그래서 디자이너분들이 이 체크 박스를이쁘게 만들어 주십니다. 바로 이렇게 말이죠~~!(너무 이뻐) 여기에는 한가지 트릭이 있습니다.우선 html 기본 코드를 살펴 보도록 하겠습니다. 기본적으로 인풋과 레이블을 사용합니다.그리고 이것을 하나의 div로 감싸줍니다. 여기서 중요한것은 인풋은 화면에서 없에주고레이블에 체크.......

죽기전에 봐야할 고전영화_해외편 영화는 결국 우리의 삶을 스크린에 옮겨놓은 것입니다.책을 읽으면 타인의 생각을 이해할 수 있듯이영화를 통해 인생을 이해할 수 있습니다. 고전 영화로만 리스트를 만들어 갈 예정이며순위에 큰 의미를 부여하지 않았습니다.좋은것을 많이 나누고 싶네요:) 1. Les Diaboliques (Henri-Georges Clouzot, 1996) / 영상 감상하기 / 2. Rashomon (Akira Kurosawa, 1950) / 영상 감상하기 / 3. La Strada (Federico Fellini, 1954) / 영상 감상하기 / 4. Il Posto (Ermanno Olmi, 1963) / 영상 감상하기 / 5. The Tree of Wooden Clogs (Ermanno Olmi, 1978) / 영상 감상하기 / 6. Sherlock, Jr. (Bester Keaton, 1.......

HTML/CSS 뉴스레터 메일링 코딩_ 테이블 코딩 혹시 알고 계셨나요? 이메일 서비스에서 CSS스타일이 먹히지 않는다는 사실을? G메일, 다음, 네이버, 아웃룩 등 메일 서비스 업체에서보안상 CSS파일을 모두 제거합니다.그렇기 때문에 예전 방법인table 코딩 방식에 인라인으로 각각의 tr, td에 스타일을 넣어 줍니다. 넵, 알고 있습니다. 우리가 아는 웹표준에는매우 어긋나는 방법인것을요! 하지만, 현재까지는 방법이 없습니다 ㅠㅜ 그래서 오늘은 메일을 보낼때 사용되는 테이블 코딩에 관하여 글을 올리고자 합니다. 우선, 메일링 코딩의 몇가지 중요한 점이 있습니다.꼭 기억합시다! 1. 배경 이미지 사용하지 말것 2. 테이블 코딩을 할것 3. C.......

자바스크립트 강좌 2_언어의 기초 자바스크립트 문법_자료형 이제 자바스크립트의 문법에 대해 알아볼까요?! 모든 언어는 문법이 존재합니다. 문법이 없다면 그건 언어가 아니겠죠? 컴퓨터에서 사용하는 언어도 정해진 문법에 맞게끔코딩을 해줘야 합니다. 오늘은 자바스크립트 강좌 2편으로 기초 문법을 배워보겠습니다. 우선 글을 배우기 위해서는연필과 노트가 필요하겠죠? 무료로 가장 편리하게 사용할 수 있는노트패드++or, 무료 인터넷 편집자인JS Bin 을 사용하시면 됩니다. 저는 편리하게 JS Bin을 사용하도록 하겠습니다. 1. 자바스크립트 자료형 자바스크립트에는 자료형이라는 용어가 있습니다.이는 입력한 자료값이 문자 인지 숫자인.......

HTML, CSS 강좌_중앙정렬/ div 가로, 세로 정렬 완결판! 너무 어렵다 텍스트 그리고 div 중앙정렬~!!/* 수직정렬 꿀팁!! */ HTML에서 텍스트 또는 이미지의 중앙 정렬은하면 할 수록 어렵습니다.저 또한 어려운 부분이 많이 때문에오늘 포스팅을 통해 간단히 정리하고자 합니다. 1. 텍스트 중앙정렬 {width:200px;height:200px} 다음과 같이 "sound"를 상자의 중앙에 위치시키는방법에는 어떠한 것들이 있을까요? 첫째, div 박스에 text-align:center 값을 사용합니다.둘째, div 박스에 line-height 값을 높이만큼 줍니다. 여기서 중요한 점이 있습니다.text-align과 line-height의 속성을 잘 알아.......

웹표준을 향한 첫걸음 4편_이미지 가운데 정렬하기오늘은 html에서 간단한 css를 이용한이미지 가운데 정렬에 대해 알아보겠습니다.높이가 서로 다른 이미지를 가운데 정렬하는방법은 매우 유용합니다.물론, 각각의 크기다 다른 이미지를 정해진 width와 height값으로잘라서 사용하는 방법이 있지만그렇지 않은 이미지를 디자이너한테 받았을 때는다른 방법이 필요하겠죠?!개인적으로, 아직 완성된 방법은 아니지만한번 올려봅니다!여기 높이가 서로 다른 이미지 3장이 있습니다.귀엽죠? 출처는 구글입니다.다으은 이미지 HTML에서 이미지 정보입니다.서로 높이값이 다른걸 아실 수 있을 겁니다.그럼 이것을 어떻게 가운데 정렬할 수 있을까요?바.......

자바스크립트 강좌 1_자바스크립트 공부 시작해보자! 자바스크립트(JavaScript)는 객체 기반의 스크립트 프로그래밍 언어입니다.이 언어는 웹브라우저 내에서 주로 사용하며,다른 응용프로그램의 내장 객체에도 접근할 수 있습니다.또한 Node.js와 같은 런타임 환경과 같이서버 사이드 네트워크 프로그래밍에도 사용됩니다. 자바스크립트가 썬 마이크로시스템즈의 자바와 구문이 유사한 점도 있지만,두 언어는 직접적인 관련성은 없습니다. 특징 자바언어 자바스크립트 언어종류소스파일을 컴파일하여 실행하는 컴파일 언어 브라우저가 소스코드를 직접 해석하여 실행하는 인터프리트 언어 실행방식자바 가상 기계 위에.......

웹디자인 독학하기_웹표준을 향한 첫걸음 3편_크로스 브라우징크로스 브라우징은 웹개발에서 매우 중요합니다.그렇기 때문에 오늘부터 크로스 브라우징에서생기는 이슈에 대해서 정리하고자 합니다.저또한 웹개발 초보자이기 때문에 좋은 의견있으면답글 부탁드립니다 :D1.IE 6, 7에서 생기는 display:inline-block 문제display:inline-block은 일반적으로block태그를 inline처럼 정렬하기 위해 사용합니다.하지만, IE 하위버전에서는 inline-block을 인식하지 못해서새로 정렬이 되어버립니다.이때 {*display:inline;*zoom:1} 을 사용하시면 문제가 해결됩니다.2. IE 에서 생기는 block 떨어지는 현상부모 width 값이100%일때위 코딩은 크롬에서.......