본문 바로가기
웹프로그래밍 기초/A반소스자료

레이아웃 & CSS

by 이데렐라 2023. 3. 30.
반응형

레이아웃

<!DOCTYPE html>
<html>
    <head>
        <title>레이아웃 테스트</title>
        <link href="resource/css/common.css" 
        type="text/css" rel="stylesheet" />
        <style>
            div{background-color: orange;}
        </style>
    </head>
    <body>
        <header>
            <h1>LOGO</h1>
        </header>
        <h2>DIV</h2>
        <div style="background-color: blue;">첫번째</div>
        <div>두번째</div>
        <div>세번째</div>

        <h2>SPAN</h2>
        <span style="background:pink;">첫번째</span>
        <span>두번째</span>
        <span>세번째</span>

    </body>
</html>

CSS

<!DOCTYPE html>
<html>
    <head>
        <title>CSS TEST</title>
        <style>
            *{ color:blue; font-size:30px; }
            h2{color: red;}
            p{color: red;}

            h2, p{color: red;}
            #header{background-color: grey;}
            #footer{background-color: beige;}
            .black{ color: black;}
            input[type="password"]{ color: red; 
                font-size: 35px; }
            #header > h2{color: blueviolet; font-size: 40px;}

            li:hover{ background-color: gold; font-size: 35px; }
            li:active{ color: white; }

            input:enabled{background-color: gold;}
            input:disabled{background-color: black;}
            input:focus{background-color: white; color: blue;}
            input:checked{width:30px; height: 30px; 
                background-color: gold;}
            input[type="checkbox"]+label{ color: black; }
        </style>
    </head>
    <body>
        <div id="header">
            <h2 class="black">CSS 시작</h2>
            <p class="black">CSS 를 이용해 이제 꾸밀 수 있습니다.</p>
            <h2>자식인가</h2>
            <div>
                <h2>자식인가</h2>
                <p>후손인가</p>
            </div>
        </div>
        <div>
            <input type="text" /><br/>
            <input type="password" /><br/>
            <input type="text" disabled="disabled" /><br/>
            <input type="checkbox" id="chk_agree" />
            <label for="chk_agree">회원가입동의</label>
            <br/>
            <ul>
                <li>home</li>
                <li>profile</li>
                <li>photo</li>
                <li>contact</li>
            </ul>
        </div>
        <div id="footer">
            <h2 class="black">CSS 시작</h2>
            <p>CSS 를 이용해 이제 꾸밀 수 있습니다.</p>
        </div>
    </body>
</html>

divTest.html
0.00MB
cssTest.html
0.00MB
common.css
0.00MB

반응형

'웹프로그래밍 기초 > A반소스자료' 카테고리의 다른 글

디스플레이속성 과 폰트속성  (1) 2023.04.27
CSS 테스트  (0) 2023.04.06
table & form Tag  (0) 2023.03.23
이미지와 멀티미디어 Tag  (0) 2023.03.23
Text & List 태그  (0) 2023.03.23

댓글