Cascading Style Sheet의 다양한 적용예와 예문

2014. 10. 21. 16:20 html과css공부

Cascading Style Sheet의 정의

<html>

<head>

<title> Cascading Style Sheet의 정의</title>

<style>

div,p{font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:17px; color:blue;}

h2{font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:17px; color:red;}

</style>

</head>

<body> <title> Cascading Style Sheet의 정의 </title>

《이 부분은 body 부로 content 정보 입력 공간》

</body>

</html>

오늘은 지난 시간에 이어Cascading Style Sheet ( CSS)에 대해 좀더 세부적으로 파고 들어 공부 하면서 여러가지 적용 예들을 가지고 공부 하는 시간을 가져 보도록 합니다.

Style Sheet의 정의 와 적용 하는 방법에 대해서는 지난 시간에 기술 했기 때문에 길게 설명 드리지는 않겠습니다.

지난 페이지 다시 보기

스타일 시트의 적용 방법에는 크게 태그에 직접 적용하는 inline과 태그의 외부에서 적용하는 outline방식으로 나눌수 있으며 outline방식에는 외부서버의 라이브러리를 가져와서 적용하는 Externallink방식 과 내부 시트 의 링크internalrel link방식으로 나눌수가 있습니다.

그리고 내부의 시트를 적용하는 방법에는 스타일 시트를 독립적으로 관리하는 서브 페이지로 적용 하는 방법과 head에 기록 하는 방식으로 나눌수가 있습니다.

외부서버의 라이브러리를 가져와서 적용하는 External은 head 에 링크 하는 서버의 url 을 기록 해 주므로 라이브러리를 이용 할수가 있습니다.

서두에 표시한 웹문서는Hyper Text Markup language 문서의 기본 구조 이며 골격 이라고 할수 있는 html의 모습 입니다.

우리가 실질적으로 내용들을 기록 하는 부분은 body 부 이며 브라우져 상에 표시 되는 부분으로 이곳에 기록한 html의 태그tag 는 표시 되지 않습니다.

이 페이지 처럼 태그를 표시 하기 위해서는 escape라는 특수 부호를 이용 해야 가능 합니다.

태그와 같은 모양을 갖추어 브라우져를속인 후 태그의 모양은 남겨 두고 속성은 탈출 시켜 주므로 브라우져는 태그를 문서로 처리 해 주게 되어 브라우져상에 태그를 표시 해 주게 되는 것이죠

말 그대로 탈출 시킨다 는 의미의 특수 문자 입니다.

다음과 같은 모양을 하고 있습니다.
< < 좌측 꺽쇠 기호를 나타내며 > > 우측 꺽쇠기호를 나타 내는 부호 이죠
위에서 <나 >다음에 원래는 ;세미콜론 기호를 찍어야 하지만 그럴경우 바로 꺽쇠 부호로 나타나 버리기 때문에 대신 콜런으로 표시를 해 둔것입니다.

그외에도 간격을 벌여주는 특수 기호   가 있죠

지난 페이지 다시 보기

"허~걱" 콜론 기호를 붙히는것도 브라우져에서 세미콜론으로 인식 하는 것 같은 효과를 나타 내어 콜론 부호는 삭제 하도록 합니다.

허~ㄹ지금 제 블로그의 글쓰기 에디터의 경우 너무 친절 한것도 탈인것 같네요 콜론 부호를 다 삭제 하고 적용을 했는데 스스로 세미 콜론을 만들어 붙혀서 특수 문자가 아닌 꺽쇠로 만들어 버리네요

이럴때 사용 하는 특수 기호가 또 있는데요 자기 자신의 모습을 드러내 주는 & 엠퍼스트 라는 기호 입니다.

여러가지 화살표를 만들어주는 &arr: &carr: 등 특수문자들이 많이 있는데요 이런 기호들을 적절히 이용 하면 문서를 보다 다양 하고 이쁘게 만들수가 있겠죠

지금 포스팅을 작성 하는기기는 겔 노트3이며 아시다 시피 인드로이드젤리빈 이상 버전의 경우 플레쉬가 지원되지 않아 제 글에는 이미지를 마음대로 올릴수가 없는 상황 입니다.

이미지가 너무 없어 보는 분들이 많이 지루 해 할것 같아서 이쯤에 에드센스 광고 하나를 넣도록 하겠습니다.

제 에드센스의경우는 비동기식이며 아무리 페이지가 많이 누출 되어도 한 페이지당 세개만을 걸수 있는것이 애드센스의 방침 이죠 그래서 제 홈에도 그렇게 설정이 되어 있으며 자바 스크립트를 이용해 세개 이상은 노출이 되지 않도록 만들어두었읍니다.

그리고 페이지내에 광고를 게재 하고 싶은 곳에 이렇게 간단하게 태그 한줄만 처리 해주면 되도록 만들어 두었죠

바로 위 의 태그 한줄이면 이부분에 애드센스 광고가 걸리게 되는 것입니다.

오늘은 스타일에 대해 공부 하는 시간 이니 이정도로 하고요 스타일은 말 그대로 태그의 요소에 적절한 속성과 값으로 태그 요소를 보다 풍성하고 화려 하게 꾸며 주는 역할을 하는 옷으로 치면 디스플레이 코디와 같은 것이라고 할수 있죠

예를 들어 이렇게 div 태그로 감싼 태그 내부의 폰트를 스타일 적용 전과 후의 변화를 살펴 보도록 하겠 습니다.

<div>Cascading Style Sheet 적용 방법</div>

결과 입니다.

Cascading Style Sheet 적용 방법

위 처럼 스타일 적용을 하지 않았을 때의 모습은 평범하게 나타 나게 되죠

그럼 이번엔 직접태그에 적용 하는 inline스타일 방식으로 스타일을 적용 해 보도록 합니다.

<div width="auto" style="font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:blue; border:1px solid red; text-align:center;">Cascading Style Sheet 적용 방법</div>

div 블록의 넓이는 width:auto 폰트 페밀리는 맑은고딕 애플고딕 이렇게 여러가지를 적용 해 주게 되면 사용자 브라우져에 있는 폰트를 찾아서 적용하게 됩니다.

적용된 폰트가 없을 경우 브라우져가 제공하는 기본 바탕체가 적용 됩니다.

폰트 크기(font-size)는 20픽셀 폰트의 굵기(weight) 두껍게 폰트 컬러(font-color)는 푸른색 테두리 선(border)은 1픽셀의 두께 선의 종류는 실선(solid) 선의 컬러는 적색 div영역 태그 내에 적용 되는 폰트는 text-align:center 라는 속성과 값으로 중앙에 정렬 하도록 적용 시켰 습니다.

적용 결과 입니다.

Cascading Style Sheet 적용 방법

위에서 스타일 적용 전 과는 후의 폰트 모습이 좀더 크고 화려 하게 바뀐걸 볼수가 있죠

그럼 이번엔 컬러를 화이트 로 나타 내면서 배경 색을 레드로 적용 시켜 보도록 합니다.

<div width="auto" style="font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif size:20px weight:bold color:white; background-color:red; border:1px solid lime; text-align:center;">Cascading Style Sheet 적용 방법</div>

적용 결과 입니다.

Cascading Style Sheet 적용 방법

그런데 이렇게 태그 직접 적용 방식으로 작성시 일일이 태그마다 긴 스타일 을 주는 번거로움이 따르게 되어 문서의 작성 효율성이 떨어지고 복잡하고 어지러워 작성자를 불편 하게 만드는 데요 이럴때 외부의 서버 라이버러리 이용에는 한계가 있고 내부의 서브 시트 역시 에디터로 불러 들이는 것은 상당히 불편 하므로 헤드에 스타일을 기록 하여 태그에 적용 시키는 방법으로 스타일을 줘 보도록 합니다.

스킨 에디터와 글쓰기 에디터가 분리 되어 있어도 사실은 글쓰기 에디터는 스킨 에디터의 헤드일부와 바디 일부를 가져다 놓은 것으로 보면 될것 같습니다.

글쓰기 에디터의 상단부를 헤드로 생각 하고 스타일을 기록 하면 궂이 head나 body부를 따로 표시 하지 않아도 스타일 태그 아래 부분을 바디부로 인식 하도록 설계 되어 있어 아래 부분의 태그들에 스타일이 적용 되어 지는 것을 확인 할수가 있습니다.

지금 현재 상단부에는 스타일을 기록 한 부분이 있고 div 태그에도 스타일을 준 상태 이기 때문에 이럴때는 셀렉트를 만들고 스타일을 줘야 서로 중복 되는 것을 막을수가 있겠죠

스타일 정의 셀렉터의 종류는 크게 세가지로 나눌수가 있습니다.

id선택자 class선택자 타입선택자(단순선택자) 이렇게 구분 합니다.

id선택자의 경우 학교로 비유 하자면 많은 학생들이 있어도 그 중에서 오직 한명의 학생만 가질수 있는 혼자만의 이름이며 유일한것처럼 네임 선택자도 하나의 이름만 을 가질수 있다고 생각 하면 될것 같고요 학생의 두발이나 옷 이나 신발과 같은 것들을 교체 할수 있듯 네임선택자도 그런 속성과 값을 제어 해 줍니다..

class선택자 는 핵생들의 이름표를 학년별로 동일한 색상으로 묶어 주는것과 같죠 1학년은 빨간색 2학년은 초록색 3학년은 하얀색 이런식이 되는 것이고 여러명의 학생이 같은 학년별로 같은 색상의 이름표를 가지고 있는 것 처럼 같은 이름을 태그마다 사용 할수가 있으며 두발 이나 신발 옷의 색 등을 학년별로 바꾸어 주듯 클래스 선택자 역시 그런 속성과 값으로 제어 해 주는 것입니다.

타입선택자(단순 선택자)는 위의 두가지 경우 처럼 학생들의 이름이나 학년별 이름표 정도를 기준으로 하는 것이 아니고 이미 고유의 이름을 가지고 있는 학교건물을 바꾸는 것에 비유 할수가 있는데요

이미 세워져 있는 학교의 건물을 어떻게 꾸미고 바꿔 줄 것인지를 결정 하는것과 같으며 서울 경기고등학교 또는 부산 수산 고등학교 처럼 이미 존재하고 있는 학교의 이름을 바꿀수는 없으며 이름외의 건물의 색상이나 크기등 을 바꿀수 있듯 이미 정해져 있는 태그명으로 속성과 속성값만을 제어 해주는 것입니다.

물론 네임선택자 나 클래스선택자 역시 이미 정해져 있는 요소를 가진 태그에 이름을 지정 해 주는 것으로

태그 자체를 따로 만들어 이름을 줄수는 없는 것은 마찬가지 입니다.

즉 table태그 div태그 a태그 p태그 span태그등 등...

만약 학교명을 바꾸려면 수많은 기관들과 협의 해서 고칠수 있듯 타입선택자 역시 바꾸기 위해서는 개발단계의 원천적인

변경을 필요로 하게 되겠죠

그럼 이 세가지 셀렉트선택자들의 스타일 선언 방법에 대해 알아 봅니다.

id선택자 는 태그에 id이름을 주는 것으로 이럴 경우 같은 페이지 내에서 동일한 아이디를 한번이상 사용할수가 없습니다ᆞ

head부에 표시할 style은 <style>스타일 선언 해 주는곳</style>태그 쌍을 기록 한후 아래 처럼스타일 태그 안쪽에 선언을 해 주는 것입니다.

# 과 태그에 적용한 id 이름으로 선언을 해 줍니다.

이때 스타일 선언을 해주는 선택자를 id선택자 또는 네임선택자 라고 하며 아래와 같은 모양이 됩니다.

<style>

#hp{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; color:white; background-color:red; boder:1px solid lime; text-align:center;}

</style>

<div id="hp">솰라 솰라</div>이렇게 div태그에 아이디 이름을 태그내에다 주고 헤드의 스타일시트에 #hp라고 선언 한후 중괄호 속에 바꾸고 싶은 속성과 값을 설정 해 주면 되는 것이죠 이때 조심 할 것은 띄우는 것과 기호 들 입니다.

지난 시간에 이런 내용들을 자세히 알아 보았으므로 오늘은 생략 하고 넘어 가도록 합니다.

지난 페이지 다시 보기

div 블록의 넓이는 역시 auto로 설정 하고 폰트 페밀리는 맑은고딕 애플고딕을 적용 했고 폰트크기는 20px 폰트 컬러는 흰색을 적용 했습니다.

배경 컬러 역시 적색이고 border (테두리선) 녹색에 굵기1픽셀의 실선 으로 적용 하고 태그내의 내용만 솰라 솰라 로 바꾸어 주었습니다.

결과는 아래와 같습니다.

솰라솰라

이렇게 헤드부에 스타일시트를 만들어 주고 바디 에는 태그에 id이름만 주므로 작성자로서는 아주 간편하고 효율적으로

문서를 작성 할수가 있겠지요 현재 위에 만든 스타일 시트는 예문을 만들기 위해 만든 가짜 이며 진짜 스타일 시트는 헤드부에 존재 하고 있으며 브라우져 상에는 나타나지 않는데요 이것이 바로 html태그가 가진 비밀이며 기능 인 것입니다.

자 하나더 예문을 만들어 보도록 합니다.

이번에는 div태그의 아이디를 hk로 주고 폰트크기는 20픽셀 폰트의 두께 두껍게 폰트 컬러는 흰색 테두리 선의 굵기는 1픽셀 선의 종류는 실선 선의 컬러는 lime색상 폰트와 블록의 간격은 좌측에서 30픽셀 이렇게 적용 시켰 습니다.

결과를 보기 위해 위와 동일 한 모양이라 조금 다르게 배경색만 적색에서 오렌지로 바꿔서 적용 시켜 보도록 합니다.

스타일 선언 은 아래와 같습니다.

<style>

#hk{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; color:white; background-color:orange; boder:1px solid lime; text-align:center;}

</style>

<div id="hk">Cascading Style Sheet 적용 방법</div>

결과 입니다.

Cascading Style Sheet 적용 방법

이번엔 똑같은 모양 이지만 class선택자 로 적용 해 보도록 합니다.

class선택자 를 선언 할때는 태그에 적용한 클래스 이름 앞에 ( . )마침표를 쓰야 합니다.

이때 동일한 네임의 클래스이름을 여러 태그에 사용 할수 있으며 태그역시 같은 블록 레벨 태그라면 아무태그에 클래스명을 줘도 상관 없죠 예를 들어 div태그 p태그 span태그등 태그는 달라도 클래스 이름만 같으면 같은 이름의 클래스 에 동일한 스타일이 적용 됩니다.

<style>

.hss{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; background-color:red;}

</style>

<div class="hss" > Cascading Style Sheet 적용 방법 </div>

<span class="hss" > Cascading Style Sheet 적용 방법 </span>

<p class="hss" > Cascading Style Sheet 적용 방법 </p>

Cascading Style Sheet 적용 방법

결과 입니다.

Cascading Style Sheet 적용 방법

위의 결과에서 확인 한것 처럼 여러개의 태그에 동일 한 속성들이 적용 된것을 확인 할수가 있습니다.

이렇게 정의된 스타일의 셀렉터 선택자를 class선택자라고 하는 것입니다.

span태그의 경우는 블록레벨 엘리먼트 태그가 아니기 때문에 한블록까지 길게 영역을 표시 하지 않고 마침 태그가 있는곳에서 끝이 납니다.

이런태그를 inline레벨 엘리먼트라고 합니다.

타입선택자를 선언 하는 방법은 웹에 주어진 속성을 가지고 있는 태그들의 명만을 사용 할수가 있으며 태그의 이름으로 선택자를 선언 하는 방법 입니다.

<style>

div, h3, span, p, br, b, u{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; background-color:red;}

</style>

타입 선택자의 경우 잘못 사용하게 되면 문서 내에 동일한 태그들에 모두 적용이 되게 되므로 문서에 수없이 기록 되는 태그들의 경우 문서를 완전히 뒤죽박죽 만들어 버릴수가 있습니다.

영역 지정과 같은 것에는 효과 적이지 못한 반면 문서 내의 전체 폰트를 제어 하는 것에 아주 적합 합니다.

현재의 페이지에도 타입선택자를 적용 하였기 때문에 실제로 적용은 할수가 없습니다.

실제 적용을 해볼수는 없지만 위와 같은 모양으로 스타일 선언을 해 주면 선택된 태그에 동일한 속성과 값이 적용 되어 집니다.

그럼 이번에는 또다른 예를 만들어 보도록 합니다.

아이디선택자와 클래스 선택자를 그외의 선택자를 동시에 선언 해 주는 방법입니다.

이런 선택자를 그룹 선택자라고 합니다.

<style>

#kk,.ha{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; background-color:red;}

</style>

위에서 보는 바와 같이 두가지이상을 선택자로 선언 할 경우( , ) 콤마로 구분을 해 주면 되는 것이죠

위처럼 이렇게 선언을 하고 태그를 작성 해 봅니다.

태그 역시 하나의 태그에 id네임과 class네임을 동시에 줄수 있습니다.

아래 처럼 div 태그를 만들고 내용 글까지 기록하여 태그를 작성 해봅니다.만약 위에서 네임선택자나 클래스 선택자로 스타일을 동시에 주게 되어도 결과는 같이 나오게 되겠지요

결과는 아래와 같습니다.

솰라솰라 왈라쿰바 와살라 바이쿰

솰라솰라 왈라 쿰바 와살라 바이쿰

솰라솰라

왈라 쿰바 와살라 바이쿰

솰라솰라

왈라 쿰바

와살라 바이쿰

솰라솰라 왈라 쿰바

와살라 바이쿰

이렇게 했을 경우 위의 왈라 쿰바는 span 영역이 적용 되므로 마침 선이 p태그 아래로 내려와서 생기게 되죠

이것으로 span태그의 영역은 줄바꿈 없이 계속 연속적 적용 되기 때문임을 알수가 있습니다.

그러므로 블록 레벨안에 인라인엘리먼트를 쓸수 있어도 인라인레벨엘리먼트 안에는 블록 레벨 엘리 먼트를 사용 하지 않아야 하는 것입니다.

다만 글 을 쓰는데 있어 span태그 내에 p태그는 허용이 됩니다.

그외의 경우는 문서가 나타나지 않거나 이상한모양으로 엉망이 되버리거나 깨져서 나타날수 있으므로 인라인레벨과 블록레벨을 잘 구분해서 사용하도록 해야 합니다.

그럼 이번에는 class중에 두번째 클래스에 적용 되는 폰트 색상과 배경색을 바꾸어 보도록 해 봅니다.

이런경우 아래 처럼 스타일 선언문을 따로 분리를 해 줘야 하며 클래스 명도 새로 지정 해 줘야 합니다.

<style>

#kk{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; padding-left:27px; background-color:red;}

.ht{width:auto; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:red; text-align:center; border:1px solid lime; padding-left:27px; background-color:green;}

</style>

솰라솰라 왈라 쿰바 와살라 바이쿰

위의 결과 에서 알수 있듯이 하나의 태그 내에 있는 id선택자와 클래스 선택자에 따로 스타일을 주게 되드라도 우선 순위는 id선택자 라는걸 알수가 있습니다.

솰라솰라 왈라 쿰바 와살라 바이쿰

솰라솰라

왈라 쿰바 와살라 바이쿰

솰라솰라

왈라 쿰바

와살라 바이쿰

솰라솰라 왈라 쿰바

와살라 바이쿰

그럼 이번에는 조금 다른 선언 방식을 만들어 보도록 하겠습니다.

보통 이경우는 목록 태그에 자주 이용 하는 선언 인데요

<style>

#dv{width:282px; height:200px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; padding:0px; background-color:red;}/*메뉴 버튼이 들어가는 페이지 영역 제어*/

#dv ul{width:90px; height:50px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:red; text-align:center; border:1px solid lime; padding-left:2px; background-color:green; display float:left; position:relative; top:-15px;}/*순서 없는 목록 주메뉴 영역제어*/

#dv ul ul{display:none;}/*순서없는 목록의 서브 메뉴 영역 제어*/

ul
{list-style:none;}/* 전체 메뉴 영역에 적용되는 내용으로 리스트 스타일을 적용 하지 않음

이렇게 하면 나타나는 리스트에

○

요렇게 생긴 불린이 없어 짐*/

#dv>ul>li>a{width:90px; height:50px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:red; text-align:center; border:1px solid lime; padding-left:2px; background-color:green; float:left; position:relative; top:-15px;}/* 주 메뉴영역 의 모습 제어*/

#dv>ul>li>a:hove{width:90px; height:50px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; padding-left:2px; background-color:red; display float:left; position:relative; top:-15px;}/*마우스를 올렸을 때의 나타나는모습 제어*/

#dv ul li ul{font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; display:none;}

#dv ul li:hove ul{width:50px; height:50px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; padding-left:2px; background-color:red; display:block;}/*주메뉴에 hover했을때 서브메뉴의 영역제어*/

#dv ul li li{width:50px; height:50px; font-famliy:'Malgun Gothic','맑은고딕','Apple Gothic','sans-serif; font-size:20px; font-weight:bold; color:white; text-align:center; border:1px solid lime; padding-left:2px; background-color:red; display:block;}

</style>

<div id="dv">메뉴 버튼이 들어 가는 페이지 영역

<ul>순서없는 목록 전체메뉴영역

<li>주메뉴1

<ul>순서없는 목록 서브 메뉴 영역1

</ul>

</li>

<li>주메뉴2

<ul>순서없는 목록 서브 메뉴 영역2

</ul>

</li>

<li>주메뉴3

<ul>순서없는 목록 서브 메뉴 영역3

</ul>

</li>

</ul>

</div>

오늘은 여기까지 하도록 하고 다음 시간에 목록태그에 대해 더 세부적으로 파헤쳐 보고 다양한 예문을 만들어 보도록 하고아울러 영역 태그에 대해서도 알아 보도록 하겠습니다.

영역을 지정 하는 태그에는 넓이와 높이라는 크기를 가지게 되는데요

대표적인 태그로는 body태그 그리고 table태그 그리고 div태그 이렇게 세가지가 있습니다.

그외에도 from태그의 textarea태그도 있 있지만 지난 시간에 대충 다루었기에 생략 하도록 합니다.

body태그의 경우는 문서 작성 하는 전체 공간을 설정하고 제어 하므로 보통의 경우 skin에디터에 정의를 해두고 사용 하홈페이지를 만드는 단계에서 거의 결정을 하므로 크게 사용할일은 없습니다.

table태그와 div태그는 홈페이지 만들때 부터 시작해서 문서를 작성 할때도 자주 사용 하는 태그로 아주 유용한 태그 이죠

이런 내용들로 다음 시간에는 이 두가지의 태그들에 스타일을 정의 하는 시간을 가져 보도록 합니다.

저작자표시 비영리 변경금지

T,back: Comment:

공부 하는남자

Cascading Style Sheet의 다양한 적용예와 예문

Cascading Style Sheet의 정의

티스토리툴바

2024.5
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31