[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기)

▶과정

-윗부분은 4칸, 밑부분은 3칸이라서 줄 맞추기가 힘들었다

일단 사진부터 넣고 보기로함.

-줄도 안맞고 사진도 크기가 들쭉날쭉. 총체적 난국.

해결방법이 도저히 생각이 안나서 한숨 자기로함

-테이블 속 테이블을 만들면 어떨까싶어서 만들어봤더니 줄이 겹친다.

-한숨 자고 일어나서 생각해보니 12열로 해서 윗부분은 3개씩, 밑부분은 4개씩 병합하면 어떨까 라는 생각이 번뜩 들었다. 결과는 성공! 하지만 아직 사진크기를 해결하지 못했다. 아이콘도 넣어야하고...

-사진을 배경으로 넣으니까 해결됨. 근데 가운데 줄 간격이 맞지않다. '전남 순천시' 의 사진도 짤려서 나오고...

사진을 좀 더 크게 수정했다.

▶ 완성본

-산정호수 명성산 억새꽃 축제~영광 불갑산상사화축제 칸 라인 간격이 이상해져서 고치느라 힘들었음

<!doctype html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <title>pestival</title>
    <style>
        table, th, td { 
            border:1px solid gray;  /* 표의 테두리 - 1px 회색 실선 */
            border-collapse:collapse;  /* 표 테두리와 셀 테두리 합치기 */
            border-spacing:0px;
            table-layout:fixed;
        }
        th, td {
            width:200px;  /* 셀 너비 */
            padding:0px;  /* 셀 패딩(테두리와 내용 사이의 여백) */
        }
    </style>
</head>
<body>
    <table border="1" width="150" height="100">
        <tr>
            <th colspan="3" style="background-color:gray;"><img src="018.png" width="20" height="20"><font color="white">봄</font></th>
            <th colspan="3" style="background-color:silver"><img src="018.png" width="20" height="20"><font color="white">여름</font></th>
            <th colspan="3" style="background-color:gray;"><img src="018.png" width="20" height="20"><font color="white">가을</font></th>
            <th colspan="3" style="background-color:silver"><img src="018.png" width="20" height="20"><font color="white">겨울</font></th>
        </tr>   
        <tr>
            <td colspan="6" align="left" background="leaps.png"><pre><strong>    단풍축제</strong></pre></td>
            <td colspan="6" align="center" valign="middle"><img src="018.png" width="20" height="20">불꽃·문화<img src="018.png" width="20" height="20">대하·전어<img src="018.png" width="20" height="20">먹거리 </td>
        </tr>
        <tr cellspacing="0">
            <td align="center" colspan="4">민둥산억새꽃축제<br><font size="2" color="C0C0C0">2019.09.27~2019.11.10</font></td>
            <td align="center" colspan="4">산정호수 명성산 억새꽃 축제<br><font size="2" color="C0C0C0">2019.10.12~2019.10.27</font></td>
            <td align="center" colspan="4">서울억새축제<br><font size="2" color="C0C0C0">2019.10.18~2019.10.24</font></td>
        </tr>
        <tr>
            <td colspan="4" align="center" valign="bottom" background="min.png" width="100" height="200" style="color:white;">강원 정선군</td>
            <td colspan="4" align="center" valign="bottom" background="san.png" width="100" height="200" style="color:white;">경기 포천시</td>
            <td colspan="4" align="center" valign="bottom" background="seoul.png" width="100" height="200" style="color:white;">서울 마포구</td>
        </tr>
        <tr>
            <td align="center" colspan="4">순천만갈대축제<br><font size="2" color="C0C0C0">2019.10.25~2019.10.27</font></td>
            <td align="center" colspan="4">영광 불갑산상사화축제<br><font size="2" color="C0C0C0">2019.09.18~2019.09.24</font></td>
            <td align="center" colspan="4">군산-서천 금강철새여행<br><font size="2" color="C0C0C0">2018.11.16~2018.11.18</font></td>
        </tr>
        <tr>
            <td colspan="4" align="center" valign="bottom" background="soon.png" width="100" height="200" style="color:white;">전남 순천시</td>
            <td colspan="4" align="center" valign="bottom" background="young.png" width="100" height="200" style="color:white;">전남 영광군</td>
            <td colspan="4" align="center" valign="bottom" background="gun.png" width="100" height="200" style="color:white;">전북 군산시</td>
        </tr>
    </table>
</body>
</html>

저작자표시

'HTML5 & CSS3' 카테고리의 다른 글

[HTML5 & CSS3] CSS 기초 - 텍스트 스타일 (0)	2021.02.03
[HTML5 & CSS3] CSS 기초 (0)	2021.02.03
[HTML5 & CSS3] 폼 관련 태그들 - 여러 데이터 나열해 보여주기 (0)	2021.02.02
[HTML5 & CSS3] 상품 주문서 작성하기 (0)	2021.01.30
[HTML5 & CSS3] <input> 태그의 다양한 속성 (0)	2021.01.29

🐠붕어의 코딩 공부 기록🐠

[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기)

▶과정

▶ 완성본

'HTML5 & CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML5 & CSS3] 숙제 (페스티벌 페이지 만들기)

▶과정

▶ 완성본

'HTML5 & CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바