香港居民

마크업 스타일 div{width: 100px; height: 100px; line-height: 100px;}img{vertical-align: middle;} 요 두가지 스타일 필요 내 경우는 div 가 각 리스트(li)요소안에 있어서샵리스트를 쭉 나열하는 상황이었다.샵로고의 크기가 각각 다르기 때문에 div 안에서의 이미지가 가로 세로 정렬이 필요한 상황.백그라운드 이미지를 깔고, width, height를 백그라운드 넓이,높이만큼 고정.그다음 line-height 를 div 높이와 동일하게 부여.img 에 vertical-align : middle ; 일단 문제 해결. ie9 이하버전에는 지원하지 않는다는 말이 있음.무시함.파폭, 크롬, 오페라, ie9 이상 버전 테스트에 문제없음.어차피 모바일코딩..

페이지가 렌더링 될때 모바일 브라우져는 텍스트 Block의 width에 맞춰 텍스트의 크기를 자동으로 조절한다. -webkit-text-size-adjust를 이용해 텍스트의 크기를 고정하거나 원하는 대로 조절할 수 있다. -webkit-text-size-adjust는 3가지 속성을 가지고 있다. 1. auto body{-webkit-text-size-adjust:auto} 아무것도 지정하지 않았을때 기본값이 된다. 화면의 폭에 맞추어서 텍스트의 크기를 자동으로 조절한다. 2. none body{-webkit-text-size-adjust:none} 폰트의 자동크기변환을 막는다. 일반적으로 none으로 설정한다. 3. n% body{-webkit-text-size-adjust:120%} 폰트크기를 지정된..

여러 종류의 텍스트 프로퍼티를 차례로 일일이 작성한다는 것은 피곤한 일이다. 다행히 css 에는 font 라는 약식 프로퍼티가 존재하는데,이것을 사용하면 다음의 프로퍼티를 한줄에 통합해서 작성할 수 있다. font-style, font-variant, font-weight, font-size, line-height, font-family. 예를 들어font:italic bold small-caps 18px/150% Arial, Helvetica, sans-serif; 라고 하면줄간격이 150% 인 볼드 이탤릭체 소문자 18px Arial(또는 Helvetica나 sans-serif)의 텍스트로 만든다.이러한 명령들을 기억하도록 하자. 이 프로퍼티에 모든 것을 포함할 필요는 없으나,font: 1.5em G..

colgroup 안의 width 는 border 를 포함한 계산 값이다. 가령 border=1 이라면 실제 컨텐츠 영역은 좌우 1px 씩 제하고 98px 이 된다. 외부 css 파일의 colgroup col{width:150px;} 가 마크업상의 width=100px 보다 우선 순위를 가진다.

ou can display default text within your web page form input box. The INPUT tag is used to create input fields within a web page form. When using HTML forms within a web page, many times you may need to display some 'default text' within your form to show your visitors what they should type in the form field. This can be accomplished by adding the VALUE attribute to your input form. Displaying de..

CSS를 위한 HTML 인식 전환CSS를 최대한 제대로 활용하려면 어떻게 해야할까? 먼저 HTML 코드를 빈틈 없이 작성하여 체계적인 기반을 마련하여야 한다. 이번장에서는 보다 체계적으로 CSS를 적용할수 있도록 HTML 작성 방법에 대해 알아보겠다. 여러분이 운영하는 사이트 곳곳에 CSS를 사용해보자. HTML을 작성하기가 훨씬 쉬워질것이다. 더 이상 본연의 의도와는 달리 HTML을 디자인에 이용해 보려고 힘들어 할 필요는 없다. CSS가 여러분을 대신해서 그래픽 디자인 작업을 원하는 대로 완벽하게 해 줄것이다. 게다가 새롭게 작성하기도 한결 간단하다. CSS를 적용시키기 위한 뼈대로 작성한 HTML 페이지에는 코드 사용이 줄어들어 결국 타이핑만으로도 쉽게 작성할 수 있기 때문이다. 사이트 방문자들에게..

Keyword 두 개로 이루어진 키워드를 사용할 수 있다. 하나는 세가지 가로위치 ( left, center, right ) 를 조정하고, 다른 하나는 세가지 세로 위치 ( top, center, right ) 를 조정하는 것이다. 이미지를 페이지의 정 중앙에 위치시키고자 한다면 다음과 같이 작성하면된다 body { background-image : url (bg_page.jpg); background-repeat : no-repeat; background-position : center center; } 그 이미지를 오른쪽 상단 귀퉁이로 옮기려면, background-position 을 다음과 같이 바꾸어 주면 된다 background-position : right top ; Note : 만약 back..

IE 5 에서 깨지는 박스 모델 바로잡기 조금 나쁜 소식이 있다. 5.5이하 버전의 인터넷 익스플로러는 폭과 높이 계산이 정확하지 않다. 다른 브라우저 들과 달리 익스플로러는 엘리먼트가 차지하는 실제영역을 margin, border, padding, width 의 합산값으로 할당하지 않는다. IE 5.5 이하 버전의 인터넷 익스플로러나 관용모드의 IE 6 에서는 margin 과 width 만이 계산된다. 이 들 브라우저에서는 padding 과 border 가 width 프로퍼티 값에 포함되므로 내용 영역이 다른 브라우저에 비해 줄어든다 만약 박스 넓이를 160px 로 잡는다고 가정하면 최근의 브라우저들은 10+10( 좌우 margin) + 100 ( width ) 로 총 120px 이 되어야한다. 그러나..

Main CSS 박스 모델의 일부를 구성하는 다른 두개의 CSS 프로퍼티 width, height 는 테이블, 단, 배너, 사이드 바 등과 같은 대상의 치수를 지정하는데 유용하게 사용된다. height 및 width 프로퍼티를 이용하여 스타일의 내용 영역의 높이과 너비를 지정한다. 이 프로퍼티는 이 후에 설명할 CSS 레이아웃 같은 것을 제작할 경우 주로 사용하지만, 테이블의 너비 지정이나 간단한 사이드바 제작, 혹은 썸네일 갤러리 제작 등과 같은 보다 기본적인 디자인 작업에도 유용하게 사용된다 스타일에 이 프로퍼티를 추가하는 것은 매우 간단하다. 이미 해봤던 대로 그저 프로퍼티 다음에 css 단위 체계대로 넣어주면 된다 , 예를 들면 width :300px; width : 30%; height : 20..

인라인 및 블럭 - 계층 박스 표시하기 웹브라우저가 모든 태그를 일종의 박스처럼 취급하기는 하지만, 모든 박스가 같은 것은 아니다. CSS 에는 두 종류의 태그(인라인 및 블럭)에 해당하는 두가지 다른 종류의 박스가 존재하는데, 블럭 박스와 인라인 박스가 그것이다. 블록-계층태그는 그 앞 뒤에 틈을 만든다. 예를 들면 태그는 위 아래 태그로 부터 분리된 블록을 생성한다. 제목, 태그, 테이블, 목록은 블럭-계층 태그의 서로 다른 예다 인라인 태그는 그러한 태그들의 앞이나 뒤에 블럭을 생성하지 않는다. 인라인 태그는 내용, 그리고 그옆 태그들과 같은 줄에 위치한다. 태그는 인라인태그다. 이 태그로 형식 정의된 단어는 다른 텍스트 옆에 적당히 놓인다. 같은 또 다른 인라인 태그에 감싸인 텍스트 옆에도 놓일수..