자펫의블로그

특수기호 표시

zapet — Wed, 09 Jun 2010 10:59:18 +0900

공백을 표시하기위한 html 기호. 보통 html 에서 한칸의 공백을 띄우기 위해선 스페이스바를 이용하여 공백을 표시한다. 하지만 스페이스바 5번을 눌러도 공백은 하나로 인식이 되기 때문에 1개 이상의 공백은 &bsp; 라는 기호를 이용한다. 4개의 공백을 만들어야 할때.. 이렇게 해도 되지만.. " " 이렇게 해도 4개의 공백으로 인식을 한다. 스페이스 1번은 공백으로 인식을 하므로... < 부등호(<) 화면에 "<" 표시를 나타낸다. > 부등호(>) 화면에 ">" 표시를 나타낸다. & 앰퍼센드(&am.......

블로그 분리중 입니다.

zapet — Wed, 09 Jun 2010 10:15:05 +0900

내 나이 벌써 36. 물론, 정신연령은 아직도 20대 이지만... 이렇게 되어 버렸다. 이젠 입으로만 뭔가를 씨부리는 나이가 아니라는것이지... 어느순간... 이렇게 되어 버렸다... 카툰도 그리고 싶고, 디자인도 하고싶고, 어플도 만들고 싶고, 새로운 기술도 배우고 싶지만... 어느순간... 내 나이 벌써 36. 뭔가 정리가 필요한듯 싶었다. 그래서 블로그를 분리중이다. 작업이나, 포트폴리오 과련된 내용은 이 블로그에 이젠 없다. 이제 정말 뭔가를 해야 할 시기. http://www.vinus.co.kr

천암함에 대한 개인적인 생각.

zapet — Tue, 08 Jun 2010 12:31:18 +0900

Lie 이유가 무엇이든 문제는 우리나라에 있다. 처음 사고가 발생했을때 정부는 천암함이 정상적인 평시임무 수행중이라고 했다. 백령도에 몇십년씩 살고 있는 어부들이.. 초계함이 이렇게 섬 가까이 오는것을 지금껏 본적이 없다고 했는데도 말이다. 그리고.. 이어지는 상식밖의 이야기들.. 밀폐된 공간이라면 한계시간까지는 생존할 수 있다. 그래서 결국 UDT 전설이라 불리던 준위의 목숨을 앗아갔지... 처음엔 무조건 없다고 우기던 자료들과 증거들이... 어디서 찾았다.. 어디서 발견했다는 변명과 함께 공개되었다. 그리고 그것은 국민들에게 정부과 군에 대한 신뢰가 아닌 불신으로 다가왔다. 국가가 끝까.......

display 속성

zapet — Tue, 08 Jun 2010 10:31:28 +0900

Display display:none; 선언된 블록영역을 화면에서 감춘다. 비슷한 것은 visibility:hidden 이 있는데 다른점은 display:none 은 영역(자리)까지 숨긴다는 것. 완전히. 없는것이 된다. visibility:hidden 은 모습만 숨길뿐, 공간은 그대루 놓아둔다. display:block; 블록엘리먼트로 인식하게 한다. 해당 엘리먼트가 inline 이라고 하더라도 CSS 에서 이렇게 선언하면 블록레벨이 된다. 줄바꿈이된다. 다음에 나오는 영역이 아래로 내려간다. display:inline 인라엔엘리먼트로 인식하게 한다. 해당 엘리먼트가 block 이라고 하더라도 CSS 에서 이렇게 선언하면 인라인레벨이 된다. 줄바.......

앵커(링크)정의.

zapet — Tue, 08 Jun 2010 09:43:03 +0900

Link a{display: block;width: 7em;padding: 0.2em;line-height: 1.4;background:#988779;border: 1px solid black;color: #fff;text-decoration: none;text-align: center;} a:hover{background:#777777;color:121212;} a:active{background:#888888;color:fff;} 만 정의하기로 했음!

이미지 대치 기법

zapet — Mon, 07 Jun 2010 21:58:54 +0900

park

글제목

h2{ text-index: -12000px; background:url(logo.gif) no-repeat; width: 150px; height: 35px; } 스크린리더에서도 잘 동작하고, 불필요한(?) 마크업도 추가되지 않는다. 하지만.. 꼭 필요한 상황에서만 사용하자.

Table 엘리먼트

zapet — Fri, 23 Apr 2010 16:40:57 +0900

cellspacing IE 에서 각 셀의 기본패팅값을 없애기 위해 사용함. caption

TR 이나 TD 처럼 테이블 코드의 일부로 선언해서 사용.테이블의 제목처럼 사용됨. summary

테이블의 타입선언처럼 선언해서 사용. 테이블의 요약정보를 제공함. thead, tbody, tfoot 테이블을 보다 논리적으로 구성할때 사용되는 엘리먼트들. thead 와 tfoot 엘리먼트는 테이블에서 단 한번만 사용될 수 있음. 물론, 한번도 사.......

background-position

zapet — Fri, 23 Apr 2010 12:03:28 +0900

background 선언방법 background 에 이미지를 적용할때.. background: url(이미지명) no-repeat left top; 등의 형태로 background 에 삽입될 이미지와 출력방법에 대해 기술한다. background-position 은 언제쓰나? background-position 은 위에서 이미 백그라운드를 선언했을때 사용할 수 있다. 예를들어.. a{ display: block; width: 150px; height: 30px; text-decoration: none; color: #fff; background: url(이미지경로/이미지명) no-repeat left top; text-indent: 10px; } 라고 선언되어 있을때.. hover 에 대한 백그라운드 이미지의 위치만 변경해야 할때.. 위치만 변경한.......

버튼안의 글씨 간단한 가로정렬 - line-height

zapet — Thu, 22 Apr 2010 20:55:51 +0900

height 대신 line-height 를 쓰는 이유 보통은 높이를 지정할때 height 를 사용한다. 하지만 이럴경우 버튼(블록레벨엘리먼트) 안의 텍스트가 상단에 자리를 잡게 되어 padding 값을 새로 추가해 줘야한다. line-height 를 사용하게 되면 항상 라인박스 세로 가운데에 정렬하게 되어 padding 값을 별도로 지정할 필요가 없다. bt-subject{display: block;width: 6em;padding: 3px;line-height:1.4;background: #94B8E9;border: 1px solid black;color: #000;text-decoration: none;text-align: center;} 주의할점! 글씨가 길어져서 두줄이 되었을 경우 여백을 포함하여 블록레벨엘리먼트의 크기가 2배로 커진다. .......

display:inline&block 의 차이점

zapet — Thu, 22 Apr 2010 20:40:35 +0900

Display:inline 가로로 출력된다. width, height 속성을 사용할 수 없다. 상/하 margin과 padding 속성을 사용할 수 없다. 대표적인 Inline 테그인 도 Block 엘리먼트가 될수있다. span {display: block;} 으로 선언하면 된다. Display:block 줄바꿈되어 세로로 정렬된다. width, height 속성을 사용할 수 있다. 상/하 margin과 padding 속성을 사용할 수 있다. 대표적인 block 테그인

도 inline 엘리먼트가 될수있다. div {display: inline;} 으로 선언하면 된다. /* 웹표준 책을 보며 독학을 하고 있습니다. 틀린것이나, 좀더 좋은 방법을 알고 계신 분들은 코멘트를 꼭 남겨주세요 */

링크스타일

zapet — Thu, 22 Apr 2010 17:19:15 +0900

유사클랙스선택자(dynamic pseudo-class selector) :link - 방문하지 않은 링크(미클릭) 스타일 지정. :visited - 방문한 링크(클릭했던) 스타일 지정. :hover - 마우스 오버시의 스타일 지정. :active - 클릭되었을때 스타일 지정. a:hover, a:active {color: red;} /* 마우스오버 또는 클릭시 링크색을 Red 로 변경하라 */ ------------------------------------------------------------------------------------------------- 링크 밑줄관련 text-decoration:none; - 링크 밑줄 삭제 text-decoration:underline; - 링크 밑줄 생김 링크에 평상시엔 밑줄 X, 오버 및 클릭시 밑줄 생기게... .......