HTML CSS border-spacing 속성
테두리의 여백을 설정합니다.
속성 값: (length),(length)(length),inherit
Tip: CSS 몇가지 방법
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.
1. 임베디드 스타일 시트(Embedded Style Sheet) : 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head> 테그 사이에 Style Sheet를 지정하는 방법입니다.
2. 링크타입 스타일 시트(External Style Sheet) : 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 테그로 연결하는 방법입니다.
3. 인라인스타일(Inline Styles) : HTML 웹페이지 내에서 직접 지정하는 방법입니다.
4.@import로 외부 스타일시트를 참조합니다.
5.xml-stylesheet 처리 명령으로 외부 스타일시트를 참조합니다.
CSS border-spacing 속성 값
(length) : length가 하나일 경우는 수직 수평 모두 동일하게 지정
(length)(length) : length가 두개일 경우는 앞의 값은 수평, 뒤의 값은 수직 지정
inherit : 부모(상위)부터 상속받음
1. CSS border-spacing : 링크타입 스타일 시트(External Style Sheet)
링크타입 스타일 시트(External Style Sheet)은 외부 스타일 시트라고도 하며 별도의 CSS파일을 만들어 Link 태그로 연결하는 방법입니다.
[style.css] 이라는 이름을 가진 별도의 파일입니다.
<style.css>
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 500px;
}
#no{
border-spacing: 4px;
margin-bottom: 10px;
}
별도의 이름을 가진 웹페이지입니다.(예 : sample.html)
HTML CSS font-size 속성의 예제 샘플입니다
<body>
<table id="no">
<caption>Apple</caption>
<tr>
<th>Botanical information </th>
<td>Wild ancestors, Genome</td>
</tr>
<tr>
<th>Cultural aspects </th>
<td>Germanic paganism,Greek mythology</td>
</tr>
<tr>
<th>CSS 레포드 과제 </th>
<td>CSS 속성 예제 만들기, CSS 속성의 링크타입 스타일 시트(External Style Sheet) 값은?</td>
</tr>
</table>
</body>
CSS border-spacing 예제 : 임베디드 스타일 시트(Embedded Style Sheet)
임베디드 스타일 시트(Embedded Style Sheet)은 내부 스타일 시트라고도 하며 HTML 웹페이지의 상단 <head>와 </head>태그 사이에 Style Sheet를 지정하는 방법입니다.
<head>
<style type="text/css"> <!--
table{
border-width: 1px;
border-style: solid;
border-collapse: separate;
width: 500px;
}
#no{
border-spacing: 4px;
margin-bottom: 10px;
}
--> </style>
</head>
<body>
<table id="no">
<caption>Apple</caption>
<tr>
<th>Botanical information </th>
<td>Wild ancestors, Genome</td>
</tr>
<tr>
<th>Cultural aspects </th>
<td>Germanic paganism,Greek mythology</td>
</tr>
<tr>
<th>CSS 레포드 과제 </th>
<td>CSS 속성 예제 만들기, CSS 속성의 임베디드 스타일 시트(Embedded Style Sheet) 값은?</td>
</tr>
</table>
</body>
CSS border-spacing 예제 : 인라인스타일(Inline Styles)
인라인스타일(Inline Styles)은 HTML 웹페이지 내에서 직접 지정하는 방법입니다.
<div style="border-spacing : 여기에 속성 값을 넣습니다;">HTML CSS border-spacing속성의 인라인스타일(Inline Styles) 예제 샘플입니다.<div>
CSS border-spacing 관련 태그
'CSS 스타일시트 ' 카테고리의 다른 글
WRITTEN BY
- white_rabbitstar
html대학에서는 html 태그,html5 신규태그,css등 모든 속성,이벤트,속성값을 정리하여 앞으로 열심히 글을 올리 겠습니다.
,
