강의실 (109) 썸네일형 리스트형 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사용예 선택자 사용하기-class 선택자 사용하기 - class 다음은 지금까지 배운 선택자에 스타일 시트를 적용한 간단한 예제입니다. 다음의 예제를 보고 이해가 안되시면 처음부터 다시 읽어주시기 바랍니다. HTML Source This is a H1 stylesheet (1) This is a H1 stylesheet (2) 설명하면 입이 아프겠습니다. H1 선택자의 스타일 시트를 Head 태그 사이에서 집합으로 적용시켰고 이 선택자를 사용하기 위해서 body 태그 안에서 적용이 되었습니다. 결駭?뻔하겠죠? ① , ② 의 색은 모두 빨간색을 나타냅니다. 그런데 똑같이 선택자 H1을 사용해서 ② 부분을 녹색으로 바꾸려면 어떻게 해야하는가? 하는 질문이 가능합니다. 소스를 다음과 같이 바꾸어 보세요. HTML Source This is a.. 선택자 사용하기-집합 선택자 사용하기 - 집합 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.. 테이블의 응용 3 테이블의 응용(3) 이번에는 테이블을 이용한 박스 만들기에서 제목부분에 그림을 같이 사용해보자. 이렇게 하면 전체 박스를 이미지를 사용하지 않아도 그냥 하나의 이미지만으로 마치 전체 박스가 하나의 이미지인듯한 착각 효과를 부여한다. Table Example 테이블의 내용을 적는곳 HTML Source 테이블의 내용을 적는곳 테이블의 응용 4 테이블의 응용(4) 테이블의 전체 외곽을 그림으로 메꾸고 그 안의 내용을 글로 채우는 방법이다. 이렇게 하면 마치 그림위에 글자를 쓴 듯한 효과를 부여한다. 소스를 보면 금방 이해가 될듯하다. 활용예제 이곳에 쓴 글은 text입니다. 사용된 그림 HTML Source 이곳에 쓴 글은 text입니다. 테이블의 응용 2 테이블의 응용(2) 테이블의 응용(1)에서 배운것을 토대로 다음과 같이 테이블의 각각의 줄에 대하여 각기 다른 색을 입힌다면 간단하게 멋진 박스를 구성 할 수 있다. 어렵지 않게 이미지 없이 박스 만드는 방법의 편법이다. Table Example 테이블 제목 첫번째 내용. 두번째 내용. 세번째 내용. 네번째 내용. HTML Source 테이블 제목 첫번째 내용 두번째 내용 세번째 내용 네번째 내용 테이블의 응용 1 테이블의 응용(1) 테이블의 기본구성방법과 셀합치기 나누기등을 공부하였으면 이제 이런 간단한 태그를 이용한 응용방법을 알아보도록 하자. 우선 가장 많이 응용되는 테이블이용 경계선있는 박스 만들기는 다음과 같다. Table Example 테이블 제목 이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다. HTML Source 테이블 제목 이곳의 들어가는 내용은 내가 원하는 글을 넣을 수 있다. 당신의 원하는 만큼 코딩도 가능하며 배경색에 어울리는 그림도 삽입 할 수 있다. 설명 테이블을 멋지게 응용하기 위해서는 다음의 두개의 테이블구성성분을 이해하여야 한다. cellpadding 과 cellspacing은 테이블의 옵션입니다.. 목록의 제목 목록의 제목 리스트의 제목에 해당하는 부분이다. 연구목록과 같이 제목이 있고 그 아래 순서가 있을 경우 적용하면 좋은 모양을 갖춘 결과를 얻을 것이다 다음은 그 사용방법과 결과이다. 목록의 제목 예제 결과 제목이 들어가는 부분 (1) 제목아래에 들어가는 부분 (1-1) 제목아래에 들어가는 부분 (1-2) 제목이 들어가는 부분 (2) 제목아래에 들어가는 부분 (2-1) 제목아래에 들어가는 부분 (2-2) 제목이 들어가는 부분 (1) 제목아래에 들어가는 부분 (1-1) 제목아래에 들어가는 부분 (1-2) 제목이 들어가는 부분 (2) 제목아래에 들어가는 부분 (2-1) 제목아래에 들어가는 부분 (2-2) 순서있는 목록 순서있는 목록 순서있는 목록은 나열하고자하는 목록에 자동으로 번호를 매기는 태그이다. 이때 번호의 타입은 아라비아숫자, 로마숫자등으로 내가 원하는 타입으로 지정할 수 있다. 순서없는 목록보다는 보기가 좋다는 장점이 있다. 순서가 있는 목록 만들기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 타입을 바꾸어 보자 예제 결과 서울시 1 서울시 2 부산시 1 부산시 2 인천시 1 인천시 2 광주시 1 광주시 2 서울시 1 서울시 2 부산시 1 부산시 2 인천시 1 인천시 2 광주시 1 광주시 2 내가 원하는 번호에서 시작하기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 순서없는 목록 순서없는 목록 List 태그는 정보나 자료를 나열하는데 사용된다.흔히 논문을 쓰거나 할 일 등을 쪽지에 적어 놓을 때 목록을 만드는 경우가 많다. 인터넷 홈페이지 상에서도 많은 경우에 이러한 태그가 필요하게 된다. 예를 들어 홈페이지 상에 "제 홈페이지는 다음과 같은 것들로 구성되어 있습니다"라고 미리 알리거나 제목 등을 좀더 색다르게 표현하기 위해서 목록 정의 태그를 사용한다. 모든 목록 태그에는 종류에 관계없이 라는 태그를 함께 사용한다. 이 태그는 단독 태그이다. 즉 종료태그가 필요없다는 뜻이다. 순서가 없는 목록 만들기 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 타입을 바꾸어 보자 예제 결과 서울시 부산시 인천시 서울시 부산시 인천시 특수문자2 특수문자(2) 특수문자(1)과는 다르게 특수문자(2)에서는 컴퓨터 자체내에서 제공하는 특별한 기호를 이용하는 방법이다. 즉 다음과 같은 키보드에는 없는 문자들을 내 홈페이지에 삽입하는 방법은 다음과 같다. ＃ ＆ ＊ ＠ § ※ ☆ ★ ○◎ ◇ 이런 따위의 특수한 모양을 가진 문자를 문서내 삽입하는 방법이다. 1. 글자언어를 영문에서 한글로 바꾼다. 현재 한글모드라면 바꿀 필요 없겠다. 2. 한글로 ㅁ(미음)만 친다 - 미음만 치고 가만히 있으면 커서는 미음 주위를 감싸고 있을 것이다. 3. 이때 한자전화키를 누른다. - 하단 오른편에 선택할 수있는 여러가지 특수 문자가 보일 것이다. 원하는 문사를 골라 마우스로 클릭한다. - 결과 문자는 특수문자로 바뀔것이다. 4. 이런식으로 하면 되고 미음 뿐만아니라 .. 특수문자 특수문자(1) HTML문서를 작성하다 보면 홈페이지 상에서 구현하기 까다로운 문자들이 있다.이것을 특수문자(Escape Sequence)라 부르는데 특수문자란 © @등과 같이 키보드로 직접 입력할 수 없는 아스키(ASCⅡ)코드의 문자를 말한다. 이러한 특수 문자들을 웹 문서 상에서 종종 사용해야 할 경우가 있다.예를 들어 홈페이지의 맨 끝부분에 우리가 흔히 사용하는 ~라는 태그와 함께 'Copyright© All Rights Reserved'라는 문구를 삽입할 때 이러한 특수 문자를 사용하게 된다.특수 문자들은 HTML 문서 상에서 다음과 같이 표기한다. © © 위의 특수 문자 코드를 입력하면 결과는 모두 © 로 나타난다. 위에서 알 수 있듯이 모든 특수 문자들은 &로시작해서 ;로 끝난다. 모든 특수 문.. 프레임의 경계선 프레임의 경계선 프레임의 경계선의 굵기를 지정하는 부분이다. frameset 부분에 frameborder 부분을 설정하고 각각의 프레임에 대한 소스문서를 지정하는 frame src 부분에 border를 지정할 수 있다.다음은 네스케이프의 경우 프레임의 경계선이 나타나고 안 나타나는 예이다 프레임의 경계선 예제 설명 실제로 프레임의 경계선은 사용하지 않는다. 대부분 경계선을 사용하면 제작자가 의도하는 프레임을 나눈 의미가 퇴색하기 때문이다. 따라서 보더의 경우 보통 0 값을 사용하여 배경색이나 배경이미지로 프레임의 경계 사용하기도 한다. 익스플로워랑 네스케이프의 프레임 지정 방식이 틀린 이유로 나중에 배울 자바스크립트부분에서 방문객의 브라우저가 무엇인지를 알아내고 브라우저에 따라 각각의 프레임을 지정하는 .. 프레임모양의 지정방법 프레임의 모양지정방법 프레임을 사용하였을때 프레임 안에 들어갈 내용과 프레임과 프레임을 구분해주는 경계선과의 공간, 즉 여백즐 지정하는 방법이다. 프레임구분 경계선의 굵기도 조절 할 수 있다. 프레임의 모양 조절하기 예제 설명 프레임에 들어갈 문서에 여백을 지정해 주는 옵션이다. 태그 안의 FRAMESPACING속성은 태그의 CELLSPACING속성과 마찬가지로 프레임간의 공간을 픽셀단위로 지정할 수 있는 부분이다. 태그 안의 MARGINWIDTH 의 속성은 프레임의 좌우 여백을 지정하고 MARGINHEIGHT 속성은 프레임의 위아래 여백을 지정한다. 이것는 역시 TABLE 태그의 cellpadding 부분과 유사하다. 각각의 프레임에 보여줄 문서내용을 프레임의 상하 좌우와 얼마의 크기를 가진 여백을 지.. 프레임의 목표창 프레임의 목표창 프레임을 사용하여 창을 나누는 대부분의 이유가 한쪽은 홈페이지의 여러가지 메뉴부분으로 사용하고 나머지 한쪽은 메뉴부분에서 선택한 문서를 보여줄 창으로 사용하는 경우가 대부분이다. 이럴 경우 메뉴창에서 선택한 문서를 원하는 곳에 보여주고 싶다면 각각의 창 이름을 지정하고 링크 태그시 target 부분에 창 이름을 지정해 주어야 한다. 만약 이런 과정을 생략하면 메뉴창에서 호출한 문서는 메뉴창에 바로 떠 버린다. 메뉴와 그에 따른 결과를 보여주지 못하게 되는것이다. 목표창의 이름을 붙이는 방법 일단 프레임을 지정하는 문서가 다음과 같다고 가정하자. 이에 대한 결과는 우리는 알고 있다. 이제 demo10_1.html에 다음과 같이 되어 있다고 하자 demo10_3.html호출 링크시킬때 tar.. 프레임문서 만들기 기본 프레임문서 만들기 프레임이란 쉬운말로 브라우저 창을 여러개의 창으로 나누는 것을 말한다. 메뉴가 많은 홈페이지라면 사용자들을 위해 적당하게 프레임을 나눔으로 인해 사용자가 미궁에 빠지는 일이 없도록 배려하기도 하고 깔끔한 인터페이스를 제공하는 목적으로도 사용된다. 우선 프레임의 기본적인 것을 알아보도록 한다. 웹 상에 프레임을 만들기 위해서는, 영역을 구분해 주는 태그와 나누어진 영역 내에 넣을 HTML문서를 가져오는 태그가 필요하다. 우선 창을 내 맘대로 나누고 각각의 나눈 창에 보여줄 html문서를 지정한다는 의미이다. 태그는 태그 사이에 위치하게 되고, 태그는 비율로 나누기 - 상하로 나누기 숫자로 나누기 - 좌우로 나누기(1) 여기에서 3* 이란 오른쪽을 *으로 잡고 왼쪽은 그것에 3배 즉 .. 셀안의 배경 셀안의 배경 테이블의 셀안에는 body 태그에서처럼과 같이 배경색 또는 배경그림을 지정 할 수 있다. 배경색의 지정은 각각의 셀에서 지정이 되거나 테이블 전체에서 또는 한줄에서 배경색을 지정 할 수 있다. 배경 그림의 경우는 각각의 셀에 배경그림지정이 가능하며 따라서 body 태그안에 배경그림과 셀안의 배경그림을 적절이 이용하면 배경그림을 두가지로 조합해서 사용 할 수 있다. 셀안의 배경넣기 - 색넣기 예제 설명 (1,1) (1,2) (1,1) (1,2) 각각의 셀의 바탕색을 지정하는 방법이다. 색지정은 bgcolor=#ffffff 식으로 칼라코드로 대입하면 된다. 다음은 옆의 결과이다. (1,1) (1,2) (2,1) (2,2) 셀안의 배경넣기 - 그림배경 예 설명 (1,1) 예제는 1X1 테이블안에 .. 이전 1 2 3 4 다음