香港居民

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

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

음수 Margin 을 이용하여 간격 없애기 CSS 에서 대부분의 치수는 양수 값이어야한다. 결과적으로 -20px 크기의 텍스트라는게 어떻게 보이겠는가? 그리고 Padding 값도 양수 값이 되어야 한다. 그러나 여러가지 창의적인 기법을 위해 음수 Margin 을 사용하는 것은 허용된다. 그러므로 텍스트 단락을 제목에 겹치게 할수 있고, 그것을 포함하고 있는 엘리먼트(사이드 바 또는 다른 레이아웃 )로 밀어낼수있으며, 혹은 브라우저 창의 가장자리를 벗어나서 안보이게 할수도 있다. 게다가 음수 margin 을 유용하게 이용할 수도 있다. 두 제목 사이의 margin 을 0으로 지정하더라도, 제목 텍스트 사이에는 약간의 공간이 있다. 너무 몰려있거나 붙어있는 문장을 읽기는 어렵기 때문에, 일반적으로 이것은 장..

여러 Margin 사이의 충돌 CSS에서는 2더하기 2가 반드시 4가 되지는 않는다. 하나의 엘리먼트의 아래 여백이 다른 엘리먼트의 위 여백에 맞 닿을 경우, 좀 기괴한 계산에 직면할 수 있다. 두 여백을 합산하는 것이 아니라, 웹브라우저는 두 여백 중에서 더 큰 것을 적용한다. 비순차목록의 아래여백이 30px 로 지정되고, 목록 다음에 오는 단락의 위 여백이 20px 로 지정된 것으로 가정하자. 목록과 단락 사이에는 두 값을 더해서 50px 의 공간이 생기는 것이 아니라, 웹브라우저는 가장 큰 margin 값을 사용하므로 이경우에는 30px의 공간이 생긴다. 이렇게 되는 것이 싫다면, top 이나 bottom 둘중하나를 padding 으로 대체한다. 하나의 엘리먼트가 다른 엘리먼트 안에 있을 경우 훨씬..

Margin 및 Padding 의 간략한 표기 네 방향 모두에 대해 스타일의 margin 이나 padding을 지정해 주어야 할 경우가 자주 있다. 그러나 각각의 스타일마다 네개의 프로퍼티(margin-right, margin-left, margin-top, margin-bottom)를 일일히 입력하는 것은 지겨운 일이다. 하지만 속기형 프로퍼티인 margin 과 padding 을 사용하여 네가지 각 프로퍼티들은 빠르게 지정해줄수 있다 margin:0 10px 10px 20px; padding:10px 5px 5px 10px; Tip : 만약 CSS 에서 사용되는 값이 0이라면, 측정 단위를 붙이지 않아도 된다. 예를 들어 margin:0px;대신 margin:0 이라고만 입력해도된다 값을 지정하는데 있..

Margin 과 Padding 으로 공간 조절하기 Margin 과 padding 은 내용주변에 공간을 준다. 이 프로퍼티를 사용하여 엘리먼트를 서로 떼어놓거나 내용과 테두리 사이에 공백을 삽입할수있다. 예를 들면, 왼쪽의 네비게이션 메뉴와 오른쪽의 주요 페이지 내용사이에 공간을 줄수 있다. 사진의 외곽에서 border 를 떨어 뜨리고 싶을 경우 사용하면 된다. Padding 과 margin 은 비슷한 기능을 하므로 만일 테두리나 배경 색상을 적용하지 않는 다면, 두 태그 사이의 공간이 padding으로 생긴 건지 margin 으로 생긴 것인지 실제로 구분 할수가 없다 . 그러나 만약 엘리먼트 둘레에 테두리가 있거나 엘리먼트 뒤에 배경이 있다면, 두 프로퍼티 간의 차이가 두드러져 구분하기 쉽다. Paddi..

박스 모델의 이해 단락이나 제목을 생각할때는 아마 글자, 단어, 문장에 대해서 생각할 것이다. 그리고 태그를 생각하면 동시에 사진, 로고, 혹은 그밖의 여러 사진이 떠오를 것이다. 그러나 웹브라우저는 모든 태그를 하나의 박스로 취급한다. 브라우저 입장에서 보면, 모든 태그는 그안에 텍스트, 이미지 등을 포함하는 여느 태그처럼 무언가를 포함한 박스이다. 내용을 둘러싸는 것은 박스를 만드는 다른 여러 프로퍼티다. Padding(내부공백) 은 내용과 테두리 사이의 공간이다. Padding 은 사진과 사진의 틀을 이루는 테두리를 분리시켜주는 매개 영역이다. Border(테두리)는 박스의 각 변둘레에 그려지는 선이다. 네변 전체에 border를 넣을수도 있고, 한면에만 혹은 각면의 조합 전체에 border 를 넣..

청소년 보호정책 팝업으로 띄움 이용약관 팝업으로 띄움 개인정보 보호정책 팝업으로 띄움 사이트맵 페이지 이동. 고객 셑너 페이지 이동

페이지의 기본 글꼴을 62.5% 로 설정하기 Note : 왜 페이지의 기본 글꼴을 62.5%로 지정할까? 62.5% 곱하기 16px( 대부분의 웹브라우저의 기본 텍스트 크기 16픽셀) 은 10 px 이기 때문이다. 최상위 상속자에 글자크기를 10px 로 지정해 놓으면, 화면에서 다른 텍스트 크기가 어떤 크기 정도로 보일지 계산하기 편리하다. 예를 들어, 1.5em 은 1.5 * 10 = 15px 이 된다 2em 은 20 px 이 되는등 간편하게 10을 곱하면 된다.

이미지 블릿 사각형이나 원형의 블리세 만족할 수 없다면, 자체적으로 제작하자. 포토샵이나 파이어웍스 같은 이미지 편집 프로그램을 사용하면,다채롭고 재미있는 블릿을 금방 제작할수있다. 페이지에 HTML, 태그의 src 애트리뷰트를 사용하여 이미지를 넣을 경우 파일을 지정하는 것과 마찬가지로 CSS에서는 list-style-image 프로퍼티를 이용하여 사이트 상의 그림 경로를 지정할수 있다. 다음과 같이 프로퍼티를 사용하면된다. list-style-image:url(images/bullet.gif); url 이라는 용어와 소괄호는 꼭 있어야 한다 괄호안의 부분은 그림이 있는 경로다.HTML 과는 달리 경로를 따옴표로 감싸지 않는다는 점에 주의하자. Note : 외부 스타일시트에 그림을 지정할 경우 이미지 ..