香港居民

음수 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 : 외부 스타일시트에 그림을 지정할 경우 이미지 ..

첫글자나 단락 첫 줄의 형식정의 CSS 에는 :first-letter 및 :first-line 가상 엘리먼트를 이용하여 단락의 일부분만을 형식정의 할수있다. 엄밀히 이 가상 엘리먼트는 CSS 프로퍼티가 아니라 CSS 프로퍼티가 적용되어야 할 곳이 단락의 어느부분인지 정해주는 선택자 종류이다. 가상 엘리먼트 :first-letter 를 사용하여, 손으로 쓴 원고처럼 흉내낸 대문자로 첫글자를 만들 수 있다. 각 단락의 첫글자를 빨간색 볼드체로 만들려면, 다음과 같이 작성하면 된다. p:first-letter{font-weight:bold;color:red;} 좀더 선택적으로 특정 단락의 첫 글자만 형식화 하려면, 단락에 .intro 와 같은 클래스 스타일을 적용하고 .intro:first-letter 와 같..

It's because imgs are display: inline, so they sit on the baseline like text, with a bit of space below them for descenders. Make the img display: block. or img vertical-align:bottom; 이미지 넣어보면 아래단에 쓸데 없는 공백이 생긴다 뭐 이유는 알아서 해석해서 보시고 display:bolck 로 주면 좌측에 딱 붙어버려서 다른 정렬방식이 안 먹는거같다 vertical-align:bottom 은 정렬방식도 바꿀수 있어서 더 나은듯.