게으른 완벽주의자의 개발자 도전기
[css] colgroup, padding 활용하여 게시판 꾸미기 본문
<title>Insert title here</title>
<style type="text/css">
table {
border: 1px solid black; 1px 검은색 실선
border-collapse: collapse;
(테이블 border를 만들면 두줄처럼 겹쳐지는데 한줄로 되도록 만드는것)
width: 700px; 너비
margin: 0 auto; 가운데 정렬
font-size: 20px; 글씨크기
margin-top: 50px;
(위의 margin 0 auto 와 작성 순서가 중요하다
가운데 정렬 전에 이 효과를 준다면 후에 가운데 정렬때매 margin top은 의미 없어진다)
text-align: center; 글씨 가운데로
}
thead{
background-color: #C8B6E2; 배경색
font-weight: bold; 글씨 두께
color: white; 글씨 색깔
}css는 title 아래 style 태그를 만들고 시작한다!
1) padding으로 안쪽여백 주기
tr, td{
border: 1px solid black;
padding: 6px;
}
★padding은 안쪽 여백을 주는 태그이다.
.titleTd{ 제목부분
text-align: left;
}
input { 버튼부분
font-size: 24px;
padding: 4px 10px;
(나는 버튼에 padding을 이용하여 안쪽여백을 주었다
상하로 4px 좌우로 10px 주겠다고 작성함 )
}
</style>
2) colgroup으로 열 속성주기
게시글에서 글번호 부분은 작게 제목부분은 크게 이런식으로 열마다 속성값을 주고 싶을 때
colgroup을 이용하면 각 열의 속성값을 줄 수 있다.
기본 형태는 아래와 같은 형태이다.
<colgroup>
<col>
<col>
</colgroup>
나는 칸 너비를 조절하기 위해서 width를 이용하고자 한다.
<body>
<table>
<colgroup>
<col width="12%"> 글번호에는 12% 정도 넣고
<col width="*"> <!-- 값에 " * " 적으면 전체 비율에서 나머지 값이 자동으로 들어감
<col width="15%"> 작성자에는 15%
<col width="20%"> 작성일자에는 20%
</colgroup>
<thead>
<tr>
<td>글번호</td>
<td>제 목</td>
<td>작성자</td>
<td>작성일</td>
</tr>
</thead>
버튼은 div태그를 이용하여 align 가운데 정렬을 이용하여야 한다!
<div align="center" style="margin-top: 20px">
<input type="button" value="글쓰기">
</div>
a태그 밑줄 없애기 및 클릭 시 색깔 변동없애기
a {
text-decoration: none;
color : green;
원하는 색상 지정해서 넣으면 된다
}'html css' 카테고리의 다른 글
| [css]무료 폰트 사이트 눈누 (0) | 2022.08.07 |
|---|---|
| [css]inline-block, button 꾸미기, position (0) | 2022.08.07 |
| [css] 색상 선택하기 사이트, 프로그램 다운로드 (0) | 2022.07.23 |
| [css] div 이용하여 style꾸미기 (0) | 2022.07.23 |
| [html] 정리하기3(input 태그, select태그, textarea태그) (0) | 2022.07.23 |
'html css' Related Articles
more
