CSS/HTML (16) 썸네일형 리스트형 단위 (unit) length units 상대값, 절대값 두 가지의 형태가 있고, 상대값은 상위에 비례한 값을 지정합니다. "+", "-"를 사용할 수 있고 지정하지 않으면 기본으로 "+"가 지정됩니다. 예를 들면, 12pt, 2em, -100px 하위는 상위의 값이 절대값을 가졌을 때 상위값을 상속받을 수 있지만, 상대값(relative)을 가진 상위의 값은 상속받을 수 없습니다. BODY {font-size:12pt; text-indent:3em;} H1 {font-size:15pt;} H1에서의 text-indent는 36pt이다. 45pt가 아니다. (em은 font의 크기다) 상대 치수 em -- 택의 글꼴 자신의 크기이다. font-size를 지정한 element에서 font-size의 값을 가진다. 주의할 점.. style 상속 Style 상속 택에 지정한 style을 지정하면 택 자신이 가지고 있는 모든 택에 상속을 해줍니다. 나는 SPAN입니다.으로 SPAN 택에게 글자 크기를 '10pt'로 지정합니다. SPAN 택에 포함되어 있는 택의 글자 "SPAN"도 자신의 style을 지정하지 않았지만 'font-size:10pt'가 됩니다. 부모의 style을 상속 받기 때문입니다. 여기서 택이 부모이고 택이 자식입니다. <DIV>와 <SPAN> , 택은 , , 같은 다른 택을 여러개 포함할 수 있는 block element 입니다. 택은 inline element로 택 처럼 여러개의 다른 element를 포함할 수 있지만 택이 택 앞과 뒤에서 줄넘김을 하는 반면에 이것은 줄넘김을 하지 않습니다. 이 줄넘김의 차이가 , 택의 차이이고 나머지 용도는 같습니다. 이 두개의 택은 CSS 사용에서 다른 택보다도 유용하게 사용할 수 있습니다. 이 택의 용도가 단순히 다른 여러개의 택을 가질수 있는 택이기 때문에 style을 사용하면서 style을 지원하지 않는 브라우저와의 호환성있는 페이지 작성을 가능하게 합니다. 그리고 일반적인 다른 택은 택 자체의 구문을 가지고 있습니다. 하지만, span이나 div는 자체의 어떤 기능도 없습니다. 그래서 style을.. property와 value 사용하기 요소(Property)와 값(Value) 사용하기 Style 적용순위(Cascade) 선택자 Cascade !important 사용 값의 종류와 사용 Style과 택 속성의 관계 요소는 선택자에게 사용할 style의 종류를 지정하는 것이고 값은 요소의 값입니다. H3 { font-size: 12pt; color: red; }는 택에 font-size:12pt, color:red 를 지정하게 합니다. 여기서 font-size, color 가 요소이고 12pt, red가 값입니다. 요소와 값은 colon(:)으로 구분하고 각 요소:값은 semicolon(;)으로 구분합니다. 요소와 colon, 값, semicolon 사이에 공백은 넣어주어도 되고 안넣어주어도 됩니다. 두칸 이상의 공백도 한칸으로 지정됩니다... css2 선택자 선택자 (Selector) 선택자는 style을 사용할 대상을 지정하는 것입니다. 하나의 선택자로 사용할 수 있고 여러 선택자를 그룹으로 같이 지정할 수도 있습니다. 선택자 { 요소: 값 } 로 선택자에게 요소와 요소의 값을 지정합니다. 선택자를 선언하는 형식도 선택자 하나만 사용할 수 있고 선택자를 두개 이상 나열하고 여러개를 같이 지정할 수 있습니다. 아래가 선택자의 종류입니다. Type (element 택 이름) class ID grouping descendant child Universal attribute(속성) Adjacent sibling pseudo class pseudo element 선택자 이름짓기 class와 ID의 차이점 type 선택자 H3 { font-size: 12pt; col.. css2 들어가기 CSS2 들어가기 CSS 란? Style 지정하기 페이지에 Style 지정과 적용 위치 Style 주석 달기 CSS 란? CSS는 HTML 문서의 양식을 지정합니다. HTML 택의 고유 양식과 속성을 대체하고 새로운 양식을 제공하여 기존의 택 하나 또는 모든 택에 각기의 모양이나 색상, 위치 등을 지정할 수 있게 하고 이들을 효율적으로 다룰 수 있는 수단을 제공합니다. 이 새로운 양식으로 고정되고 제한되어 있는 HTML 고유 속성을 넘는, 새로운 양식을 표현할 수 있는 능력을 제공하여 다양한 양식의 문서를 정확한 위치에 배치할 수 있게 합니다. 페이지를 구성을 위해 택을 사용하고 글꼴과 색상을 지정하기 ㎸漫? 택을 사용하여 모든 페이지에 일일이 지정하는 기존의 작성을 , 택 같은 전혀 성격이 다른 택으로.. 선택지 사용하기 ID 선택자 사용하기 - ID 각 태그들이 가질 수 있는 고유한 이름인 'ID' 에 스타일을 정의하는 방법이다. 이방법을 사용하는 것은 Dynamic HTML 에서는 모든 태그들을 하나의 객체로 사용하는데 그객체의 이름을 ID 에 부여한 고유한 이름으로 사용한다. 또한 그 태그에 선언된 스타일을 객체의 property로 생각하여 처리한다. ID 에 스타일을 정의하는 방법은 우물정자(#)를 아이디 앞에 붙여주어 정의한다 HTML Source ID사용예 선택자 사용하기-집합 선택자 사용하기 - 집합 Style Sheet는 우리에게 여러종류의 선택자(selector)를 제공합니다. 보통 우리가 아는 html 태그들을 그 선택자로 사용하고 있습니다. 특히 이 부분은 상당히 중요한 부분이며 잘 활용할 경우에 html문서의 최대 약점인 반복태그 사용을 최대한으로 절제 할 수 있다는 장점이 있습니다. 또한 상당히 고난도의 HTML문서도 작성이 가능합니다. 하지만 조금 어렵다는 단점이 있습니다. 1. 여러 개의 선택자가 같은 속성을 사용할 때 : 하나로 묶어서 사용. 예제) H1 { font-family: Helvetica } H2 { font-family: Helvetica } H3 { font-family: Helvetica } 결과) H1, H2, H3 { font-family:.. font-weight Font-weight 글자의 두께를 결정할 수 있습니다. 다음은 사용 할 수 있는 속성값들입니다. font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; 이런 속성값들이 어떻게 보이는지 확인하는게 제일 이해가 쉬울듯합니다. font-weight:normal font-weight:normal font-weight:bold font-weight:bold font-weight:bolder font-weight:bolder font-weight:lighter font-weight:lighter font-weight:100 font-weight:100 font-weight:200 font-.. font-variant Font-variant variant는 크기가 작은 대문자로 바꾸어주는 효과를 얻을 수 있습니다. 두가지 값을 가질 수 있는데 하나는 normal 이고 다른 하나는 small-cap 입니다. normal 은 보통을 의미하며 small-caps는 크기가 작은 대문자로 바꾸어 주고 있습니다. 예제를 보면 확인이 가능합니다. 참고로 한글에는 별 효과가 없는듯합니다. font-variant font-variant font-variant font-variant font-style Font-style 폰트의 스타일을 적용시킬수 있습니다. 다음은 그 적용예입니다. normal은 폰트스타일을 적용시키지 않았을때와 같습니다. italic과 oblique는 모두 기울어진 형태를 나타내고 있습니다. 확인해보세요. 폰트스타일 폰트스타일 폰트스타일 폰트스타일 폰트스타일 폰트스타일 font-size Font-size 폰트사이즈로 폰트의 크기를 지정할수 있습니다. 다음은 그 사용예입니다. 자신의 홈에 적당한 사이즈를 적용시켜 사용할 수 있습니다. 참고적으로 많은 사람들이 크기를 보통 9pt를 많이 사용하고 있습니다. 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 폰트싸이즈 font-family Font-family 스타일시트의 요소(element)로써 글자체를 font-family에서 지정할수 있습니다. 즉 원하는 글자체로 글자를 보여줄 수 있다는 것이지요. 하지만 여기서 주의해야 할점은 내가 원하는 글자체로 지정을 해도 방문객의 폰트디렉토리에 이런 폰트가 없으면 무용지물이 되어 버린다는 것입니다. 내 컴에는 수많은 폰트들이 들어 있어서 폰트패밀리에 지정한 글자체로 보여질지라도 방문객의 컴퓨터에는 어떤 폰트가 있는지 알수가 없으므로 폰트패밀리의 사용은 그만큼 제약을 받게됩니다. 따라서 이 요소를 사용할시에는 너무 멋진 폰트만 찾지 말고 공통적으로 윈도우를 인스톨 시키면 들어 있는 폰트의 범위내에서 사용해야 하겠습니다. 억지로 어떤 폰트를 사용하고 싶다면 방문객에게 폰트를 제공하고 설치후 다시 .. css 사용법 2 Css 사용방법(2) 이용방법(1)에서 다루었던 1.Linking 스타일 시트의 좀 더 자세한 사용방법이다. 링킹 스타일 사용방법은 일전에 알아본바와 걋?확장명이 .css 를 가지는 화일을 링크시켜 글자관련정보를 지정한 .css 파일에서 다루는 방법이다. 다음은 내가 사용하는 index.css 의 예를 들어 알아본다. 위와 같이 index.css 파일을 만든다. 만드는 방법은 그냥 메모장에 위의 내용을 치고 저장할때 확장명을 *.* 에 놓고 화일 이름을 index.css하면 된다. 사용방법은 html 문서내 사이에 라고 입력만 하면 된다. 속성을 알아보자 A:link -- 링크된 부분을 어떻게 표현할것인가를 지정하는 곳이다. text-decoration:none -- 이 부분은 링크된 곳이 글자인경우(그.. css 사용방법 1 Css 사용방법(1) 스타일 시트의 선언은 의외로 간단하다.우리가 지정하고 싶은 속성과 그 속성의 값만 지정해 주기 때문이다. 좀더 깊이 들어가면 다양하게 지정하는 방법이 있지만 차분히 하나하나 들어가 보도록 하자. 우선 스타일 선언은 아래와 같이 행하면 된다. {PROPERTY:VALUE} CSS Example - 1.Linking 스타일 시트 다음의 내용을 copy해서 sample.css로 저장한후 아래의 소스를 이용해서 test.html을 만든후 검사한다. H1{font-family:Arial;font-size:40pt;Color:red} P{font-size:12pt;line-height:20pt} HTML Source This is a HI stylesheet This is a P stylesh.. css란 무엇인가? CSS 란 무엇인가? 기존의 브라우져는 사용자 환경에 많은 영향을 받았다.하나의 텍스트 문서라도 사용자 브라우져의 기본 폰트 종류와 폰트 크藪?따라서 여러 가지 형태로 나타날 수 밖에 없었다. 하지만 사용자 환경에 영향을 받지 않고 HTML 파일을 화면에 보여줄 수 있는 '스타일 시트'를 이용하면 프로그래밍을 몰라도 간단한 HTML차원에서 응용할 수 있게 된다. CSS의 장점 레이아웃, 폰트, 색깔, 배경 및 인쇄상의 효과를 훨씬 정교하게 할수 있다. 기존문서의 유지보수가 쉽다. 운영체제에 상관없이 적용할 수 있다. 코드 크기가 작아서 페이지를 불러오는데 걸리는 시간의 부담이 적다 웹페이지를 보다 아름답게 꾸밀 수 있다 SGML -Standard Generalized Markup Language SGML.. 이전 1 다음