혜랑's STORY

[WEB 4주차 실습] : CSS 본문

2020 SISS 21기 활동/여름방학 WEB

[WEB 4주차 실습] : CSS

hyerang0125 2020. 8. 2. 12:47

#표에 스타일시트 적용하기

Chapter05-(1) 실습 사진

<!-- Chpater05-(1).html -->
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
    table, th, td{
        border:1px solid black;
        border-collapse:collapse;
        text-align:center;
    }
    th{
        width:120px;
    }
</style>
</HEAD>
<BODY>
    <h2>2020 1학기 시간표</h2>
    <table>
        <tr style="background-color:skyblue">
            <th>시간</th>
            <th>월</th>
            <th>화</th>
            <th>수</th>
            <th>목</th>
            <th>금</th>
        </tr>

        <tr>
            <td>9</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>10</td>
            <td></td>
            <td rowspan="2" style="background-color:moccasin">소프트웨어의이해</td>
            <td></td>
            <td rowspan="2" style="background-color:moccasin">소프트웨어의이해</td>
            <td></td>
        </tr>
        <tr>
            <td>11</td>
            <td></td>
            <td rowspan="2" style="background-color:lightgreen">세계시민교육과리더십</td>
            <td></td>
        </tr>
        <tr>
            <td>12</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>13</td>
            <td></td>
            <td rowspan="2" style="background-color:lightpink">커뮤니케이션영어</td>
            <td rowspan="2"style="background-color:aquamarine">비판적사고와토론</td>
            <td rowspan="2" style="background-color:lightpink">커뮤니케이션영어</td>
            <td rowspan="4" style="background-color:mediumpurple">진로탐색과역량개발</td>
        </tr>
        <tr>
            <td>14</td>
            <td></td>
        </tr>
        <tr>
            <td>15</td>
            <td></td>
            <td style="background-color:gray">컴퓨터과학의이해</td>
            <td></td>
            <td style="background-color:gray">컴퓨터과학의이해</td>
        </tr>
        <tr>
            <td>16</td>
            <td></td>
            <td></td>
            <td rowspan="3" style="background-color:blueviolet">국가안보론</td>
            <td></td>
        </tr>
        <tr>
            <td>17</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>18</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>

    </table>



</BODY>
</HTML>

#박스모델에 다양한 효과로 장식하기

Chapter05-(2) 실습 사진

<!-- Chapter05-(2) -->
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
    .MainTitle{
        border:1px;
        background-color:silver;
        padding:20px;
        border-radius:0px 40px 0px 40px;
    }
</style>
</HEAD>
<BODY>
    <div class="MainTitle" style="box-shadow:10px 10px 10px #888888 ">
        <h2>HTML5 웹프로그래밍 입문</h2>
        <h4 style="font-weight:bolder">5장. CSS3 스타일시트 기초</h4>
    </div>
    <h2>CSS 개요</h2>
    CSS란 문서의 스타일을 정의하는 속성을 모아놓은 언어이다.

</BODY>
</HTML>

#레이아웃 설정 스타일시트 연습하기

Chapter05-(3) 실습 사진

<!-- Chapter05-(3).html -->
<HTML>
<HEAD>
<TITLE></TITLE>
<style>
    .title{
        position:absolute;
        left:10%;

        width:60%;
        border:6px;
        border-style:double;
        padding:5px;

    }
</style>
</HEAD>
<BODY>
    <span class="title">5.5 새로운 문서 표준 HTML5</span>

    <p style="padding:12px; border-style:dotted; border-color:blue; position:absolute; top:60px;">
        <img src="W3C.png" style="float:right;" width="72" height="40"/>
        현재 W3C에서 표준안을 개발을 하고 있는 HTML5는 차세대 웹문서 표준안으로
        많은 관심이 집중되고 있다. 특히, 표준안 개발에 마이크로소프트, 모질라, 
        애플, 구글, 오페라 등 대다수 웹브라우저 개발사가 참여하고 있다.
    </p>

</BODY>
</HTML>

#다양한 CSS 적용하기

Chapter05-(4) 실습 사진

<!-- Chapter05-(4) -->
<HTML>
<HEAD>
    <TITLE></TITLE>
    <style>
        .title {
            position: absolute;
            left: 10%;
            width: 60%;
            border: 6px;
            border-style: double;
            padding: 5px;
        }
        .title:hover{
            color:blue;
        }
    </style>
</HEAD>
<BODY>
    <span class="title">5.5 새로운 문서 표준 HTML5</span>
    <img src="W3C.png" style="position:absolute; top:15px; right:50px; transform:rotate(15deg)" width="72" height="40" />

    <p style="padding:12px; border-style:dotted; border-color:blue; position:absolute; top:60px;">
        현재 W3C에서 표준안을 개발을 하고 있는 HTML5는 차세대 웹문서 표준안으로
        많은 관심이 집중되고 있다. 특히, 표준안 개발에 마이크로소프트, 모질라,
        애플, 구글, 오페라 등 대다수 웹브라우저 개발사가 참여하고 있다.
    </p>

</BODY>
</HTML>
저작자표시

'2020 SISS 21기 활동 > 여름방학 WEB' 카테고리의 다른 글

[WEB 5주차 이론] : JavaScript  (0) 2020.08.08
[WEB 4주차 공부] : CSS  (0) 2020.08.02
[WEB 3주차 실습 : CSS]  (0) 2020.07.16
[WEB 3주차 공부 : CSS]  (0) 2020.07.16
[WEB 2주차 실습 : HTML]  (0) 2020.07.14
'2020 SISS 21기 활동/여름방학 WEB' Related Articles more