23개의 게시물을 찾았습니다.
4.1. Box Model
4.2. 외부여백(Margin) 속성
4.3. 내부여백(Padding) 속성
4.4. 테두리(Border) 속성
4.4.1. Border-width 관련 속성
4.4.2. Border-color 관련 속성
4.4.3. Border-style 관련 속성
4.4.4. Border-width 관련 속성
4.1. Box Model
CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다.
4.2. 외부여백(Margin) 속성
margin 속성은 문단의 테두리와 외부의 다른 요소와의 간격을 조절할 때 사용되는 속성이다.
margin-left, margin-right, margin-top, margin-bottom을 이용하여 각 요소의 margin 값을 각각 주거나 margin 속성 - 대표속성이다 - 을 이용하여 동시에 줄 수 있다.
속성은 다음과 같다.
속성 속성값 설명 margin-left 길이 | 퍼센트 | auto 왼쪽 margin의 폭을 정한다. margin-right 길이 | 퍼센트 | auto 오른쪽 margin의 폭을 정한다. margin-top 길이 | 퍼센트 | auto 윗쪽 margin의 폭을 정한다. margin-bottom 길이 | 퍼센트 | auto 아래쪽 margin의 폭을 정한다. margin 길이 | 퍼센트 | auto 네 곳의 margin폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다.
길이 : 상대길이와 절대길이가 있다.
- 상대길이 : em(현재 글자의 크기), ex(현재 글자 중 x자의 크기), px(픽셀)
- 절대길이 : in, cm, mm, pt(포인트 : 1pt=1/72in), pc(피카 : 1pc=12pt)
CSS의 가장 기본적인 가정은 모든 요소가 신문의 박스기사 형식으로 둘러 쌓여 있다는 것이다. 이것은 하나의 박스의 위치를 독자적으로 - 절대위치 또는 상대위치 - 결정할 수 있음과 동시에 박스와 박스 사이의 여백, 박스와 박스기사의 내용(Content) 사이의 여백, 그리고 박스의 테두리 등, 보다 세밀한 부분을 제어할 수 있다는 것을 의미한다. 물론 아직까지 익스플로러와 넷스케이프가 이러한 모든 기능을 제공하고 있지는 못하다. 그러나 표준 권고안으로 제시된 기능들을 살펴보며 이러한 개념들을 좀더 자세히 이해해 보기로 하자.박스기사라는 모델에 이용될 수 있는 HTML의 태그는 블록 요소였던 P, BLOCKQUOTE, DIV 등이다. 먼저 이들과 관련되어 여백을 좀더 세밀히 조정하는 속성들인 margin, border, padding 속성에 대해서 알아본다. | |
 |
☞ 하나의 요소가 다른 요소를 포함하고 있을 때 부모요소의 특성이 자식 요소에도 똑같이 적용되는 경우가 있다. 이를 상속(Inheritance)라고 한다. margin 속성의 경우 에는 P에 margin 값을 주었어도, P에 포함된 SPAN의 margin값에는 영향을 미치지 않는다는 뜻이다.
☞ margin과 같이 여러 개의 속성을 하나로 묶어서 쓰도록 한 속성을 대표속성(Shorthand property)이라고 한다. 대표속성에는 초기값이 없다.
| BODY { margin: 2em } /* 모든 margin이 2em */ BODY { margin: 1em 2em } /* top과 bottom은 1em, right과 left는 2em */ BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em(right의 값을 그대로 가져옴) */ |
4.3. 내부여백(Padding) 속성
패딩 속성은 문단의 내용과 문단의 테두리 사이의 간격을 지정할 때 사용되는 속성이다. 폭을 지정하는 속성으로, padding-left, padding-right, padding-top, padding-bottom을 이용하면 4 곳의 패딩 값을 각각 줄 수 있고, padding 속성을 이용하면 4곳의 패딩 값을 동시에 줄 수 있다.
속성 속성값 설명 padding-left 길이 | 퍼센트 왼쪽 padding의 폭을 정한다. padding-right 길이 | 퍼센트 오른쪽 padding의 폭을 정한다. padding-top 길이 | 퍼센트 윗쪽 padding의 폭을 정한다. padding-bottom 길이 | 퍼센트 아래쪽 padding의 폭을 정한다. padding 길이 | 퍼센트 네 곳의padding폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 값을 하나만 쓰면 하나의 값이 네 곳에 모두 적용되고, 값을 둘 쓰면 위아래-왼쪽오른쪽의 순서로 적용된다. 대표속성에는 초기값이 없다.
| H1 { background: lime; padding: 1em 2em; } /*H1의 배경색은 라임색이고, 상하 패딩 폭은 1em, 좌우 패딩 폭은 2em이다.*/ | |
 |
4.4. 테두리(Border) 속성
테두리의 폭, 색, 모양을 지정하는 속성이다.
4.4.1. Border-width 관련 속성
속성 속성값 설명 border-top-width thin | medium | thick | 길이 윗쪽 보더의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 medium이다. border-right-width thin | medium | thick | 길이 오른쪽 보더의 폭을 정한다. border-bottom-width thin | medium | thick | 길이 아랫쪽 보더의 폭을 정한다. border-left-width thin | medium | thick | 길이 왼쪽 보더의 폭을 정한다. border-width thin | medium | thick | 길이 네 곳의 보더 폭을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.
| H1 { border-width: thin } /* thin thin thin thin */ H2 { border-width: thin thick } /* thin thick thin thick */ H3 { border-width: thin thick medium } /* thin thick medium thick */ | |
 |
4.4.2. Border-color 관련 속성
속성 속성값 설명 border-top-color 색이름 | RGB code 윗쪽 보더의 색을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 자신의 color 속성 또는 부모 요소의 color 속성의 값이다. 윈도우의 기본 16색인 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow는 이름을 그대로 쓸 수 있다. 이상 16색 외에도 orange, pink 등, 색 이름을 쓰면 그대로 나오는 것들이 더 있는데 브라우저에 따라서 지원되지 않을 수도 있으므로 주의해야 한다. RGB 값은 색생을 red, green, blue의 조합으로 나타내는 것으로 #뒤에 6자리의 숫자나 문자의 조합으로 만들어진다. RGB표를 참고한다. ->
RGB값참고페이지border-right-color 색이름 | RGB code 오른쪽 보더의 색을 정한다. border-bottom-color 색이름 | RGB code 아랫쪽 보더의 색을 정한다. border-left-color 색이름 | RGB code 왼쪽 보더의 색을 정한다. border-color 색이름 | RGB code 네 곳의 보더 색깔을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.
| H1 { border-color : black } /* black black black black */ H2 { border-color : black yellow } /* black yellow black yellow */ H3 { border-color : black yellow red } /* black yellow red yellow */ | |
 |
4.4.3. Border-style 관련 속성
속성 속성값 설명 border-top-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 윗쪽 테두리border의 모양을 정한다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 없다. border-right-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 오른쪽 테두리border의 모양을 정한다. border-bottom-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 아랫쪽 테두리border의 모양을 정한다. border-left-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 왼쪽 테두리border의 모양을 정한다. border-style none | dotted | dashed | solid | double | groove | ridge | inset | outset 네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.
| span { border-style : dottted } span.solid { border-style : solid } span.dashed { border-style : dashed } span.double { border-style : double } span.groove { border-style : groove } span.ridge { border-style : ridge } span.inset { border-style : inset } span.outset { border-style : outset } |
|
 |
4.4.4. Border-width 관련 속성
속성 속성값 설명 border-top border-top-width|| border-top-style || color 윗쪽 테두리border의 폭을 정한다. Thin이 가장 얇고, thick이 가장 두껍다. 모든 요소에 적용할 수 있고, 상속되지 않는다. 초기값은 각각의 속성의 초기값이다. border-right border-right-width || border-right-style || color 오른쪽 테두리border의 모양을 정한다. border-bottom border-bottom-width || border-bottom-style || color 아랫쪽 테두리border의 모양을 정한다. border-left border-left-width || border-left-style || color 왼쪽 테두리border의 모양을 정한다. border-style border -width | border -style | color 네 곳의 테두리border 모양을 동시에 정한다. 순서는 top, right, bottom, left이다. 대표속성에는 초기값이 없다.
| P { border: solid red } /*테두리border 선은 굵은 선, 색은 빨강색.*/ |
다응의 그림을 보면서 지금까지 정리한 내용들을 확인해 보도록 하자.
 |
3.1. 캐스캐이딩과 캐스캐이딩 순서(Cascading Order)
3.1. 캐스캐이딩과 캐스캐이딩 순서(Cascading Order)
cascade의 사전적 의미는 작은 폭포를 뜻한다. 그러나 지금 우리가 여기서 언급하는 캐스캐이딩은 이러한 사전적 의미와는 다소 다르다.
하나의 문서가 이미 내장하고 있는 스타일 정보가 있다고 하자. 만약 외부파일의 스타일이 이 문서에 적용이 되는 경우에 같은 요소에 대하여 서로 다른 스타일이 정의될 수 있다. CSS2에서는 이럴 때 우선순위가 가장 큰 스타일시트를 적용할 수 있도록 하고 있다. 이것을 캐스캐이딩이라고 한다.
익스플로러 4.0같은 경우에는 사용자가 스타일을 정의할 수 있도록 하고 있는데, 브라우저 사용자가 정의해 놓은 스타일시트는 웹 문서 작성자의 스타일시트보다 비중이 낮다. 따라서, 이 경우에는 웹 문서 작성자의 스타일시트가 우선적으로 적용된다.
스타일을 정의할 때 뒤쪽에 !important를 붙여주면 모든 것에 우선하게 된다.
| H1 { color: black ! important; background: white ! important } P { font-size: 12pt ! important; font-variant: italic } /*font-variant만 중요도가 낮다.*/ |
순서대로 우선순위가 높다.
- id 속성을 쓰면 우선순위가 가장 높다.
- class 등 속성을 쓰면 우선순위가 높다.
- Selector로 사용한 요소의 수가 많으면 우선순위가 높다.
- STYLE 요소 안에 정의한 것보다 style 속성으로 정의한 것이 우선순위가 높다.
2. 셀렉터(Selector)
2.1. Type Selector
2.2. Group Selector
2.3. Class attribute selector
2.4. ID Attribute Selector
2.5. Contextual selectors
2.6. Pseudo-Elements and Pseudo-Classes
2.6.1. Anchor Pseudo-Classes : :link, :visited, :active
2.1. Type Selector
Type selector는 HTML 요소를 selector로 사용하는 것이다. HTML에서는 selector를 쓸 때 대소문자를 구분하지 않는다.
| H1 { font-family: Helvetica } |
2.2. Group Selector
여러 개의 selector가 같은 속성을 사용할 때는 하나로 묶어서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
| H1 { font-family: Helvetica } H2 { font-family: Helvetica } H3 { font-family: Helvetica } |
| H1, H2, H3 { font-family: Helvetica } |
하나의 selector가 여러 개의 속성을 사용할 때는 속성들 사이에 세미콜론(;)을 써서 쓸 수 있다. 아래의 두 예는 같은 뜻이다.
| H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal } |
| H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; } |
어떤 속성은 shorthand property라고 부르는 대표속성을 가지고 있어서, 위의 H1에 대한 예는 아래와 같이 더 간단하게 만들 수 있다.
| H1 { font : bold 12pt/14pt Helvetica } |
2.3. Class attribute selector
Class 속성을 이용하면 여러 개의 요소를 그룹으로 묶어서 같은 스타일을 적용할 수 있다. Class attribute selector를 쓸 때는 아래의 예와 같이 마침표(.)를 사용한다.
| .pastoral { color : green } /* class=pastoral 속성이 들어간 모든 요소에 적용 */ H1.red { color : red } /* class=red 속성이 들어간 H1 요소에 적용*/ ... ... 녹색으로 나오겠지... 여기도 녹색으로 나오겠지... 여기는 빨간색으로 나오겠지...여기는 검은색일꺼야. | |
 |
2.4. ID Attribute Selector
Id 속성은 class와 비슷하지만, 한 문서에서 같은 id는 하나만 존재해야 한다는 것이 다르다. Id attribute selector를 쓸 때는 #표시를 사용한다. Id 속성을 쓰면 하이퍼링크의 대상이 될 수 있다는 점을 기억하자.
| H1#z98y { letter-spacing: 0.5em } ... ... Wide text | |
 |
2.5. Contextual selectors
"H1 안에 들어있는 EM 요소에만 파란색 글자를 주고 싶다"와 같이 특정 요소에 포함된 요소에만 스타일을 적용시키고자 할 때 contextual selector를 사용한다. 요소와 요소 사이읏?빈칸을 주고 나란히 써 주면 된다. Class나 id와 함께 사용할 수도 있다.
| H1 EM { color : blue } ... ... 여기는 검은색여기도 검은색 여기는 검다가 여기는 푸른색 다시 검은색 | |
 |
2.6. Pseudo-Elements and Pseudo-Classes
거짓 요소와 class는 보다 다양하게 스타일을 적용시키기 위해서 HTML 4.0에 존재하지 않는 요소를 만들어 낸 것을 말한다. First-line pseudo-요소와 First-letter pseudo-요소 역시 제공된다고 하나 실제로 는 제대로 구현되지 않으므로 우리는 Anchor pseudo-classes에 대해서만 알아보도록 하자.
2.6.1. Anchor Pseudo-Classes : :link, :visited, :active
링크의 색이나 밑줄 등을 바꿀 때 사용한다. :link는 한 번도 클릭하지 않은 링크, :visited는 가본 적이 있는 링크, :active는 클릭하는 순간의 링크를 말한다.
진보네트워크 | |
 |
A.external:link(class=external인 A의 링크)와 같이 클래스와 같이 쓸 수도 있고, a.link나 a#link와 같이 link, active, visited를 클래스나 id로 사용할 수도 있다.
1.1. CSS - Cascading Style Sheet
1.2. 간단한 예
1.3. 스타일시트의 구성 요소
1.4. 스타일시트 삽입하기
1.4.1. 문서의 HEAD에 정의하기
1.4.2. style 속성 이용하기
1.5. 기호 설명
1.1. CSS - Cascading Style Sheet
HTML은 운영체제나 사용하는 프로그램에 관계없이 누구나 같은 내용의 문서를 볼 수 있도록 하겠다는 취지에서 만들어졌다. 그러나, 웹문서가 인쇄 매체처럼 다양하고 화려해짐에 따라, 점차 전자출판의 성격을 띄게 되었고, HTML은 그 한계를 드러내고 있다. 여기서 한계라고 짚어볼 수 있는 부분들은 무엇보다도 레이아웃의 세밀한 제어, 그리고 배경과 문자열과의 배치 등을 꼽을 수 있다. 스타일시트를 사용하면 기존의 TABLE이나 FRAME에 의존하던 문서의 레이아웃을 보다 효과적으로 할 수 있고, 글자 크기나 글자체, 줄 간격, 배경 색상 등도 자유롭게 선택할 수 있다. 또한, 스타일을 정의해 놓고 여러 개의 문서에서 불러 쓸 수 있어, 일관된 외양을 요구하는 여러 개의 문서를 만들 때 매우 편리하다. 그러나 CSS의 단점도 상당부분 존재한다. 무엇보다도 대중적으로 널리 사용되고 있는 넷스케이프와 익스플로러에서 각기 다른 표준안을 채택하고 있다는 점이 가장 문제가 되는 점이다. 이점은 두 브라우저에서 달리 사용되는 부분에 대한 중복적인 코딩을 해야한다는 의미가 되며 웹디자이너들을 혼란에 빠뜨리는 이유가 된다. 또한 표준 권고안으로 제시된 부분에 대해서도 아직까지 지원이 안되는 기능들이 상당히 많은 문제점도 가지고 있다. CSS는 현재 Level 2 버전이 나와있으며, 넷스케이프와 익스플로러 4.0 이상이 지원한다. HTML 4.0과 CSS, JavaScript 등을 함께 일컬어 Dynamic HTML이라고 부르기도 한다.
1.2. 간단한 예
앞에서 배운 HTML의 H3 요소에 이탤릭 효과와 글씨 색으로 녹색을 지정하기 위해서 HTML에서는 H3 요소에 일일이 다음과 같이 해 주어야 한다.
녹색 이탤릭 |
| H3 {font-style : italic; color : green} |
1.3. 스타일시트의 구성 요소
HTML이 태그들의 모음이라면, 스타일시트는 프로퍼티(property)들의 모음이다. 위의 예에서 font-style이나 color가 속성(attribute)이 되고, italic과 green은 해 당 속성에 대한 값(value)이다. HTML의 속성은 정해진 요소에만 붙을 수 있지만, 스타일시트의 속성은 거의 모든 요소에 다 붙을 수 있다는 점이 다르다. 속성이 붙는 H3과 같은 요소를 스타일시트에서는 선택자(selector)라고 부른다.
다음과 같은 형식을 기억하면 된다.
| Select { Attribute : Value } |
스타일시트에서의 주석은 /*와 */ 사이에 써 준다.
1.4. 스타일시트 삽입하기
HTML문서에서 스타일시트를 사용하는 방법은 다음의 세가지가 주로 사용된다.
1.4.1. 문서의 HEAD에 정의하기
이 문장은 원래의 H3 특성과 함께 녹색, 이탤릭체로 나타난다.이 부분도 마찬가지이다. | |
 |
HEAD에 정의할 때는 STYLE 태그를 사용한다. type 속성은 반드시 함께 써 주어야 한다. 주석 표시는 스타일시트를 지원하지 않는 브라우저가 스타일을 무시하도록 하기 위한 것이다 (앞에서 자바스크립트의 경우와 연관지어 보자). 다시 한번 언급하지만 스타일을 정의하는 부분은 { } 안에 넣는다. 속성과 값은 콜론(:)으로 구분하고, 2개 이상의 속성을 쓸 때는 세미콜론(;)으로 구분한다. HTML에서와 마찬가지로 대소문자나 빈칸은 구분하지 않는다.
1.4.2. style 속성 이용하기
| |
 |
특정한 요소에 한 번만 스타일을 적용할 때는 style 속성을 사용할 수 있다. 이 때는 HTML의 문법을 따르므로, style 뒤에 " " 표시를 하고 속성과 값을 써 준다. 속성과 값 사이에 콜론, 속성과 속성 사이에 세미콜론을 쓰는 것은 첫 번째와 같다.
1.4.3. 외부 스타일시트 연결하기
먼저 다음과 같은 내용의 파일을 만들고 style.css로 저장한다.
| h3 {font-style : italic; color : green} |
HEAD 부분에 LINK 요소를 사용해 style.css 파일을 연결한다.
여기는 녹색이고 이탤릭체인 H3이다.여기도 그렇다. | |
 |
rel은 연결하는 문서가 스타일시트 문서임을 말해준다. type은 스타일시트의 형식을 나타내고, href는 스타일시트 파일의 경로를 써 준다. 아무리 많은 문서를 만들어도 스타일은 style.css 파일에서 모두 정의해 주고, 문서들에는 LINK 요소만 넣어주면 된다. 수정을 할 때는 style.css 파일만을 고치면 된다. 앞으론 주로 이러한 방법을 자주 사용하기를 권한다.
1.5. 기호 설명
앞으로의 설명을 위해 반드시 알아두어야 할 기호들이다. 이러한 기호들은 이 글외에도 대부분의 컴퓨터 관련 서적에서 사용하고 있는 기호이므로 꼭 알아두도록 하자.
A | B : A 또는 B 중의 하나이다.
[ ] : 일반적인 의미의 괄호이다.
A {1,n} : A가 최소한 1번에서 최대한 n번 들어간다.
: A 속성의 값이 들어간다.
A || B : A 또는 B 중의 하나, 또는 두 개가 다 들어갈 수 있다.
A* : A가 0번 이상 여러 번 나올 수 있다.
A? : A가 들어갈 수도 있고, 안 들어갈 수도 있다.
8.1. 요소
8.2. 요소의 속성들
8.3. 요소의 속성들
8.4.
8.5. 프레임간의 상호작용
프레임 기능은 웹브라우저 화면을 분할하여 여러 개의 문서를 동시에 보여주기 위한 기능입니다. 예를 들어 화면을 좌우 두 개의 프레임으로 나누었다면 좌측과 우측 프레임에 서로 다른 문서를 동시에 보여줄 수 있게 됩니다. 이런 경우 좌측 및 우측에 나타날 문서 이외에 각 문서를 나타내는 방법, 각 문서들간의 관계 등을 설명하는 한 개의 문서가 더 필요하게 되는 데 이 문서를 마스터페이지 또는 프레임 정의문서라고 부릅니다.
마스터 페이지에 사용되는 요소는
, ,8.1. 요소
프레임 문서는 일반 HTML 웹페이지와는 페이지의 기능상에서 큰 차이점을 가지고 있기 때문에
8.2. 요소의 속성들
cols/rows 속성
Frameset 태그 내에는 반드시 cols 또는 rows 속성을 사용하여야 합니다. cols 속성은 프레임을 좌우로 분리하는 속성이며 rows는 프레임을 상하로 나누는 속성입니다. 속성값은 각 프레임의 크기를 지정하는데 사용되는데 화면에 대한 비율(%) 또는 픽셀 값으로 나타냅니다.
여기서 화면의 크기를 나타내는 방법은 다음과 같은 여러 가지 방법들이 있습니다.
첫 번째의 예 20%, 20%, 60% 는 좌우로 나누어진 세 개의 프레임이 각각 화면의 20%, 20%, 60%가 되도록 하라는 의미인데 이 경우는 세 개 값의 합이 100%가 되어야 합니다. 두 번째의 300, 600은 상하로 나우어진 두 개의 프레임의 높이가 각각 300픽셀, 600픽셀이 되도록 하라는 의미입니다. 창의 크기를 나타내는데 부호 *를 사용할 수도 있는데 100,*의 의미는 첫 번째 창의 크기는 100픽셀로 하고 화면의 나머지를 두 번째 창으로 사용하라는 의미가 되며 다음의 *,3*의 의미는 두 번째 창이 첫 번째 창의 3배가 되도록 창을 나누라는 의미가 됩니다.
| cols="20%,20%,60%" rows="300,600" rows="100,*" cols="*,3* |
border 속성
프레임간의 경계선의 두께를 지정하는 속성입니다.
7. 표 만들기
7.1. 요소의 속성들
7.2.
7. 표 만들기
표를 만들 때 사용하는 요소에는
7.1. 요소의 속성들
border 속성
표의 테두리선의 굵기를 지정하기 위해 사용하는 속성으로 이 속성의 속성값인 테두리선의 굵기는 픽셀 값에 의해 표현됩니다. 이 속성을 사용하지 않은 경우 경계선이 나타나지 않으며 border라는 속성만 사용하고 속성값을 지정하지 않은 경우 경계선의 굵기는 border=2를 사용한 경우가 됩니다.
cellspacing 속성
내부경계선의 굵기를 지정하는 속성이며 이 속성의 속성값 역시 픽셀값입니다. 기본값은 2가 됩니다. 즉, 속성값을 사용하지 않은 경우 내부경계선의 굵기는 2픽셀이 됩니다.
|  |
cellpadding 속성
이 속성을
|