10. 반응형 스타일 적용하기
페이지 정보
작성자 관리자 댓글 0건 조회 532회 작성일 22-01-13 23:00본문
10. 반응형 스타일 적용하기
스타일 파일에서 고정 크기를 %로 바꿔준다.
파일 : css/style1.css
.boardArticle table {
width:70%;
border-collapse: collapse;
border-top:2px solid #777;
}
/*글목록*/
#list th {
padding:5px 0; border:1px solid #777;
}
#list td {
padding:8px; border:1px solid #777;
}
#list .no {
width:60px; text-align:center;
}
#list .subject {
}
#list .author {
width:100px; text-align:center;
}
#list .date {
width:100px; text-align:center;
}
#list .hit {
width:40px; text-align:center;
}
#list .btnSet{
width:70%; text-align:right;
}
#list .paging {
width:70%; text-align:center;
}
#list .paging li {
display:inline-block; width:30px; height:30px; margin:0 5px;
border:1px solid #777;background:#b3b3b3;
line-height:21px;
}
#list .paging li.currentPage, li.hover {
background:#777;
}
#list .paging li.currentPage, li.hover a{
color:#fff;
}
#list .search {
width:70%; text-align:center;
}
/*글쓰기*/
#write table{
width:70%;
}
#write th{
width:15%; padding:5px; text-align:right; vertical-align:top;
}
#write td{
width:85%; padding:5px;
}
#write #id{
width:20%;
}
#write #password {
width:20%;
}
#write #subject {
width:50%;
}
#write #content {
width:50%; height:150px;
}
#write .btnSet{
width:70%; text-align:center;
}
/*글보기*/
#boardView #bSubject {
width:70%;
background:#eeeeee;
line-height:30px;
font-size:18px;
font-weight:bold;
text-align:center
}
#boardView #bInfo {
width:70%;
border:1px solid #666;
margin:10px 0;
padding:10px 10px;
position:relative;
}
#bInfo #ID, #bDate {
margin-right:20px;
}
#bInfo #bHit {
position:absolute;
right:0;
padding-right:5px;
}
#boardView #bContent {
margin:10px 0;
}
#boardView .btnSet{
width:70%; text-align:center;
}
/*글삭제*/
#boardDelete table {
width: 70%; border:1px solid #666;
margin-bottom:10px;
}
#boardDelete tbody th {
width: 100px; padding:5px;
text-align:right;vertical-align:top;
}
.btnSet {
width: 70%; text-align:center;
}
댓글목록
등록된 댓글이 없습니다.