코드 215

font-size:62.5% 의 이유

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

코드/Html & CSS 2011.09.02

이미지 블릿

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

코드/Html & CSS 2011.09.01

:first-letter, :first-line

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

코드/Html & CSS 2011.08.26

img 요소 아래단 공백 뜨는 현상 (Img - bottom margin)

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 은 정렬방식도 바꿀수 있어서 더 나은듯.

코드/Html & CSS 2011.06.11

text-indent 상속.

#header { width:800px; text-indent:10% } #innerHeader { width:600px; text-indent:10%; } MIME은 아스키 데이터만 처리할수 있는 인터넷 전자우편 프로토콜이다 . 즉 SMTP 를 확장하여 오디오, 비디오, 이미지, 애플리케이션, 기타 여러가지 종류의 데이터 파일을 주고받을 수 있도록 기능을 확장한 프로토콜이다. 이러한 재생용 프로그램 중 일부는 웹 클라이언트 , 즉 브라우저에 기본적으로 탑재되며(예를 들면 모든 브라우저는 HTML 파일을 처리하는 것 뿐만 아니라 GIF 와 JPG 이미지를 보여줄수도 있다), 그외의 프로그램은 필요할때마다 다운로드한다. 서버는 어떤 웹전송에라도 시작부분에 MIME 헤더를 집어넣으며, 클라이언트는 헤더가 나..

코드/Html & CSS 2011.06.04

Inherit, 자식 선택자.

DOCTYPE TYPE 을 선언한다 XML namespace 를 선언한다 컨텐츠 타입을 선언한다 모든 태그는 꼭 닫는다 Unity3D Molehill 컨텐츠 타입을 선언한다 모든 태그는 계층에 맞게 감싸고 있어야한다 인라인 태그는 블럭 레벨 태그를 감쌀수 없다 태그는 소문자를 쓴다 태그를 속성 바꿀경우 반드시 해당 속성은 그 값을 가져야한다 /CSS 의 속성은 ";" 로 마무리한다 /*css*/ #navi { font-size:0.8em; border:1px solid red; } #inner { font-size:0.8em; } #inner 안의 폰트는 0.8 * 0.8 em 이 된다. #navi 요소로부터 폰트 크기를 상속 받는다. /*-----------------------------------*..

코드/Html & CSS 2011.05.28