table 태그를 꾸며주는 style 과 target button만들기

2014. 11. 15. 10:58 html과css공부

style sheet로 테이블 꾸미기

이번시간에는 table태그로 박스를 만들고 outline방식으로 style 을 주는 방법에 대해 공부 하는 시간을 가져 보도록 합니다.
지난 시간에 공부한 table 꾸미기는 태그에 직접 스타일을 입력 하는 inline방식 이였다면 오늘은 원격 제어 방식인 outline방식의 스타일 시트로 박스를 꾸며 보는 시간을 가져 봅니다.

먼저 body부에 코딩을 해 주어야 겠지요

혼선을 피하기 위해서는 이렇게 테이블테그에 id네임을 주어 이어서 만들 테이블과

구분을 해주도록 합니다.

<tbody> 테이블의 기본 구조 인 table의 body인 태그로 생략하지 않도록 합니다.

<tr> tr태그는 테이블 안에서 태그당 하나의 블록을 형성 해주는 태그 이며

td 태그를 감싸 주는 태그 입니다.

이렇게 td 에 id네임을 주는 것은 잠시 후에 td를 타겟하기 위한 버튼을 만들 것인데요

이버튼을 클릭 할 경우 타겟하기 위한 네임이 없으면 버튼의 효력은 유명무실 해지게 되겠죠

버튼이 찾아 갈수 있도록 일종의 주소를 만들어 주는 것입니다.

</tr>위의 tr을 닫아 주는 태그로 여기까지가 한블록 이 됩니다.

<tr> 이렇게 원하는 블록수 만큼 tr태그를 삽입 해 주도록 해야 겠죠

td태그는 테이블 내에서 tr이 만드는 블록안에서 가로로 블록을 형성 하는 인라인블록 이며

td태그의 수만큼 가로 셀이 생성 됩니다.

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

위에는 코딩만 되어 있는 상태 이며 이렇게 속성을 꾸며 주는 스타일을 주지 않을 경우 아래 처럼

td속의 글자들만 세로로 정렬된 상태로 브라우져상에 뜨게 됩니다.

삼국지

수호지

금병매

서유기

그럼 이렇게 코딩 된 테이블에 스타일을 주어 제대로 된 테이블의 모양을 원격 시트로

만들어 봅니다.

그러기 위해서는 스타일 시트를 작성 해야 하는데요

원격제어 방식인 스타일 시트를 만들기 위해서는 블로그의 메인skin에디트 아래에 위치한 서브 style sheet나 에디트의 바디부 상단인 head부에 스타일 정의를 해주어야 합니다.

오늘은 head부에 시트를 만들고 정의 하도록 합니다.

html의 기본 구조는 생략 합니다.

<head>와 </head>사이에 <style></style>태그를 기록 해주고

style태그 내에 스타일정의를 하면 되는 것입니다.

테이블을 꾸며 주는 스타일 을 정의 하면 아래 처럼 이런모양이 되겠죠

<head>

</head>

자그럼 테이블 스타일 정의로 테이블을 꾸며 보도록 하겠습니다.

<head>

<style>

#bob{

border-collapse:collapse;

box-shadow: rgba(0, 0, 0, 0.41) 2px 2px;

border:1px solid red;

position:relative; top:30px;

z-index:0; width:105px;

height:125px;

} /*박스의 테두리를 collapse속성 으로 단일선 만들기, box-shadow 속성으로 그림자 생성*/

#bob>tr>td{

padding:5px 10px;

boder:1px solid blue;

width:100px;

height:30px;

text-align:center;

}

#tia, #tib, #tic, #tid{

padding:5px 10px;

boder:1px solid green;

width:100px;

color:blue;

height:30px;

background:yellow;

text-align:center;

} /*그룹 선택자를 이용하여 td의 배경을 노란색으로

글자는 청색으로 만들어 줍니다.*/

#tia:target, #tib:target, #tic:target, #tid:target{

background:blue;

color:red;

} /*:target가상클래스를 이용해 버튼을 클릭했을 때 제목부분의 배경은 blue 글자색은 빨간색으로

보이도록 정의 하도록 합니다.*/

.pog {

display:block;

margin-bottom:20px;

font-size:18px;

color:white;

text-align:center;

position:relative; top:20px;

border:1px solid lime;

background:gold;

}

</style>

</head>

이렇게 위 처럼 헤드안에 스타일 정의를 해 주게 되면 바디부에 코딩된

table에 아래와 같은 모양으로 스타일이 주어 지게 되는 것입니다.

결과 입니다.

삼국지

수호지

금병매

서유기

자 이번에는 타겟 할 버튼을 만들어 보도록 하겠습니다.

<ul>

</ul>

</div>

<style>

#sagac{width:100%;height:auto;

}

#sagac>ul{display:block;position:relative;width:380px;height:30px;

}

#sagac>ul>li{display:block;float:left;width:94px;height:28px;position:relative;margin-left:-1px;

border:1px solid red;border-radius:0.5em;background:lime;list-style:none;

}

#sagac>ul>li>a{font-family:'Malgun Gothic',Arial;font-size:14pt;text-align:center;color:blue;text-decoration:none;

}

#sagac>ul>li>a:hover{width:100%height:100%;background:blue;color:red;

}

</style>

위의 버튼을 클릭해 변화를 확인 해 보세요

박스에 그림자를 생성 해주는 box-shadow 속성

오늘 유의 해서 보아야할 요소는 지난시간에 배우지 않은 추가된 요소 인데요

box-shadow엘리먼트 입니다.

블록태그로 만든 박스에 그림자 효과를 주는 엘리먼트 입니다.

box-shadow:rgba(0, 0, 0, 0.41) 2px 2px; 이렇게 속성자 안에 속성과값을 정의 해 주는데요

rgba(0, 0, 0, 0.41) 2px 2px; 여기에 정의된 rgb속성은 색의 삼원색을 의미 하며

r은red 색상 g는green색상 b 는blue 색상을 의미 하는 것입니다.

그리고rgba 의 a 는 그림자의 명암값을 의미 하는 것입니다.

위처럼 이렇게 box-shadow:rgba(0, 0, 0, 0.41) 2px 2px; 속성과 값을 주게 되면 회색 톤으로 우측측면과 하단부에 각각2픽셀 만큼의 굵기로 그림자선을 만들어 주게 되는 것입니다.

box-shadow:rgba(0, 0, 0, 0.41) 2px 2px 2px 2px; 네 면에 똑같이 그림자가 주어 지게 됩니다.

box-shadow:rgba(0, 0, 0, 0.41) -2px -2px;이 값으로 하면 상단면과 좌측면에 그림자가 생성됩니다.

box-shadow:rgba(200, 0, 0, 0.41) 2px 2px;red 색상이 두드러진 그림자가 생성됩니다.

box-shadow:rgba(0, 200, 0, 0.41) 2px 2px;green색상이 두드러진 그림자가 생성됩니다.

box-shadow:rgba(0, 0, 200, 0.41) 2px 2px;blue색상이 두드러진 그림자가 생성됩니다.

box-shadow:rgba(0, 0, 0, 1) 2px 2px;명도 선에 가까운 뚜렸한 그림자가 생성됩니다.

box-shadow:rgba(0, 0, 0, 0.1) 2px 2px;명도 가장 희미한 그림자가 생성됩니다.

그럼 이렇게 만들어진 테이블 td속의 콘텐츠를 타켓 할 메뉴 버튼을 만들어 보도록 하겠습니다.

메뉴버튼은 div영역 태그로 만들도록 합니다.

지난시간에 드롭다운버튼 만들기를 통해 공부한 사항이기 때문에

버튼 만들기부분의 설명은 생략 하도록 하겠습니다.

지난글 드롭다운 메뉴버튼 만들기 보기

삼국지

수호지

금병매

서유기

이번에는 위의 테이블에 타겟 할 버튼 만드는 코딩과 스타일 정의 입니다.

아래는 바디부에 코딩한 모습입니다.

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

코딩한 태그에 스타일 정의를 하도록 하겠 습니다.

<style>

.nav{

display:block;

margin:auto;

width:400px;

height:30px;

}

.nav>.goo {

display:block;

position:relative;

left:-18px; top:50px;

width:400px;

height:30px;

list-style:none;

/*border:1px solid red; background-color:#434a54; */

} /*메뉴바를 만들지 않을 경우엔 테두리 선과 배경컬러는 주석 처리 하도록 합니다.*/

.nav .goo li{

float:left;

width:70px;

height:28px;

margin-right:5px;

border:1px solid red;

border-radius:0.5em;

background:lime;

text-align:center;

list-style:none;

}

.nav a{

font-size:16px;

color:blue;

}/*a태그의 속성과값으로 글자크기와 글자의 색상을 정의 해 줍니다.*/

.nav a:hover{

color:gold;

}/*a태그를 클릭 했을때 이렇게 바뀌도록 정의 합니다.*/

</style>

결과 입니다.

버튼의 완성 :target 가상클래스 선택자

이렇게 위의 결과에서 나타나는 것 처럼 삼국지라는 버튼을 클릭 했을때 위 테이블속의 td안의 삼국지 컨텐츠가 타겟되어 나타 나게 되는 것입니다.

#tia:target, #tib:target, #tic:target, #tid:target{background-color:red; color:white;}이렇게 :target가상클래스로 정의 해 주므로 가능 한것인데요 위에서도 언급했지만 버튼의 링크 주소와 타겟되는 td의 id네임이 정확 하게 일치 해야만 버튼이 찾아 가게 됩니다.

버튼을 눌렀을때 찾아가게 되는 카테고리의 모습이 클릭후 변경되도록 위처럼 스타일을 정의 할수가 있습니다.

이런 경우 에 같은 이름을 많이 가질수 있는 클래스 선택자로는 거의 불가능 하며 아디선택자 로 정의 해야 유효 할수 있다는 것에 유의 해야 합니다.

이것을 잘응용 하면 홈페이지 카테고리를 메뉴버튼으로 타겟 할수가 있겠죠

가로 셀의 갯수를 생성 하는 td태그

이번엔 위의 테이블속의 td를 주 카테고리 옆으로 3개씩을 더 만들어 보도록 하겠습니다.

아래는 body에 코딩 한 소스 입니다.

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

위 스타일에 추가한 td를 꾸며주는 정의부분만 추가 해주면 되겠죠 추가한 td들에는 모두ff라는 class네임을 지정 해 주었기 때문에 스타일 에도 클래스 선택자로 정의 해 주어야 합니다. 아래는 추기한 소스 입니다.

.ff{padding:5px 10px; boder:1px solid green; width:100px; height:30px; background-color: skyblue; text-align:center;}

이제는 타겟할 버튼을 상위에 만들어 주어야 겠지요

이번에는 조금 색다르게 버튼을 메뉴바 안에 집어 넣어서 만들어

봅니다.

그리고 버튼을 아이콘으로 이쁘게 꾸며줘 보도록 합니다.

버튼형식을 (bar)바 형식으로 만들기 위해 서는 위 스타일 시트에서 주석처리했든 부분을 해제 해 주고

아이콘이 차지하는 공간만큼 전체의 가로폭과 세로폭을 조금 수정 해 주어야 하겠죠

결과 입니다.

삼국지	유비	관우	장비
수호지	무송	양산박	홍의병
금병매	서문경	홍등가	개과천선
서유기	삼장법사	손오공	사오정

위의 코딩과 결과 에서 알수 있듯 tr태그가 감싸는 td태그의 갯수만큼 가로 로 셀이 만들어 진것을 볼수 있습니다.

좀데 테이블의 구조를 완벽하게 이해 하기 위해 예제 코딩을 더 만들어 보도록 하겠습니다.

테이블의 기본 구조는 이렇습니다.

<table>

<tbody>

<tr>

</tr>

</tbody>

</table>

그러나 이렇게만 코딩 해서는 아무것도 나타나는게 없겠죠 테이블은 넓이와 높이 그리고 border라는 테두리선을 속성과 값으로 설정해 주어야 합니다.

<tbody>

<tr>

</tr>

</tbody>

</table>

위처럼 이런 식으로 코딩과 마크업 을 하게 되면 아주 간단한 기본적인 테이블이 생겨 나게 되겠죠

실행해 보겠습니다.

그럼 이번에는 tr은 그대로 두고 td만을 4개를 더주어 가로셀을 늘려 보도록 합니다.

이때 주의 할것은 테이블의 넓이 값보다 td태그의 넓이 합의 값과 셀 스펙싱 셀패딩의값을 더했을때

같거나 작아야합니다.

이러식으로 코딩이 되겠죠

<tbody>

<tr>

</tr>

</tbody>

</table>

실행 시켜 보도록 합니다.

그럼 이번에는 tr태그를 하나더 늘려 보도록 하겠 습니다.

그리고 tr태그에 스타일을 줘 보도록 합니다.

<tbody>

<tr>

</tr>

</tr>

</tbody>

</table>

위에서 알수 있듯 tr태그 에는 영역은 갖게 되지만

스타일이 적용이 안된다는 것을 알수가 있습니다.

제대로된 코딩을 위해서는 tr 태그 안에 td태그가 존재 해야 되는 것입니다.

<tbody>

<tr>

</tr>

</tr>

</tbody>

</table>

위의결과에서 알수 있듯 td태그 하나를 tr안에 삽입했을때 아래로

셀이 하나가 더 생성 된것을 볼수 있습니다.

위의 방법은 태그에 직접 스타일을 주입한 inline방식 이므로 마지막 테이블의 모습을

스타일 시트로 원격 제어 하는 outline방식으로 구현 해 보도록 합니다.

head부에 스타일 정의를 아래 모양처럼 해 주면 됩니다.

<style>

#tablo {width:310px; height:200px; border:1px solid red; cellspacing:5px; cellpadding:5px;}

#tablo .tdo {width:65px; height:90px; border:1px solid blue;}

</style>

테이블태그에는 id네임을 주고

td태그에는 class네임을 주어 위 스타일 시트에

네임 선택자(#) 와 클래스 선택자(.)로 테이블id네임과 td의class네임을 정확히 맞추어 정의 해 주면 되는 것이죠

바디부에는 table태그를 아래 처럼 코딩해 주면 되는것입니다.

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

위의 직접 주입 방식으로 코딩 한것과 비교 했을때

아주 간단하게 두줄 만 추가 해 주면 되는 것입니다.

그리고 위의 결과로 tr태그는 td태그를 감싸 주며 세로로

한블록씩 생성 하도록 해 주는 block요소를 가지고 있다는 것과

td태그는 tr내부에서 그 갯수 만큼 가로로 셀을 생성 해 주게 되는

inline-block 요소를 가지고 있다는 것을 알수 있습니다.

다음 시간에는 상단 홈바에 이미지를 삽입하는 방법에 대해 공부 하는 시간을 갖도록 합니다.

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

T,back: Comment:

공부 하는남자

table 태그를 꾸며주는 style 과 target button만들기

티스토리툴바

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