techhan

techhan

Always a Student

2020년 12월 01일

업데이트:

웹 문서 구조 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02_웹문서구조1</title>

    <style>
        div{
            /* 모든 div에 적용할 스타일 작성 */
            border : 1px solid black;
            /* 테두리를 1px 검은색 실선 */

            box-sizing : border-box;
            /* width/heigth 속성 값이 content, padding, border의 합과 같게 설정 */
        }

        /* 전체를 감싸고 있는 wrapper 설정 */
        .wrapper{
            width : 1000px;
            height : 800px;

            /* 상위 요소(body == 창) 가로 중앙에 배치 */
            margin : auto;
        }

        .header {
            width : 100%;
            height : 20%;
        }
        
        .content {
            width : 100%;
            height : 60%;
        }

        .content-1 {
            width : 15%;
            height : 100%;
            float : left;
        }

        .content-2 {
            width : 85%;
            height : 100%;
            float : left;
        }

        .footer {
            width : 100%;
            height : 20%;
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <div class="header"></div>
        <div class="content">
            <div class="content-1"></div>
            <div class="content-2"></div>
        </div>
        <div class="footer"></div>

    </div>
</body>
</html>



웹 문서 구조 예제 1

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03_웹문서구조 예제</title>
    <link rel="stylesheet" href="03_웹문서구조예제.css" type="text/css">
</head>
<body>
    <div class="header">
        <!-- 왼쪽 상단 로고 -->
        <img id="logo1" src="logo1.jpg" width="100px" height="100px">

        <!-- 오른쪽 상단 로그인 폼 -->
        <table id="login-form">
            <tr>
                <td>아이디</td>
                <td><input type="text" name="userId" id="userId"></td>
            </tr>

            <tr>
                <td>패스워드</td>
                <td><input type="password" name="userPw" id="userPw"></td>
            </tr>

            <tr>
                <td colspan="2">
                    <input type="submit" value="로그인">
                    <button type="reset">취소</button>
                </td>
            </tr>
        </table>

    </div>
    
    <div class="nav">
        <ul>
            <li> <a href="#">메인</a></li>
            <li> <a href="#">공지사항</a></li>
            <li> <a href="#">자유게시판</a></li>
            <li> <a href="#">갤러리</a></li>
            <li> <a href="#">회원관리</a></li>
            <li> <a href="#">채팅하기</a></li>
            <!-- # -> 임시 값 -->
        </ul>


    </div>
    <div class="section">
        <div class="aside">
            <img id="logo2" src="logo2.jpg" >
        </div>
        <div class="content"></div>
    </div>
    <div class="footer">
            <!-- 생략 -->
    </div>
</body>
</html>

* {
    /* 모든 요소의 margin을 없앰 */
    margin : 0;
}

/* div{
    border : 1px solid black;
    box-sizing : border-box;
} */

.header{
    width : 100%;
    height : 100px;
}

/* 내비게이터 영역 */
.nav{
    width : 100%;
    height : 50px;
    background-color : #ccc;
}

/* section 영역 */
.section{
    width : 100%;
    height : 400px;
}


/* aside 영역 */
.aside{
    width : 15%;
    height: 100%;
    float : left;
    background-color : #ccc;
}

/* content 영역 */
.content{
    width : 85%;
    height : 100%;
    float : left;
}

/* footer 영역 */
.footer{
    width : 100%;
    height : 50px;
    text-align : center;
    line-height : 50px;
    background-color : #e1dede;
}

#logo1{
    float: left;
}

#login-form{
    float : right;
}

/* nav에 있는 a 태그 선택 */
.nav > ul { list-style-type : none;} /* 불렛 없음 */
.nav > ul > li > a { 
    text-decoration: none;
    /*  글자를 20px 흰색 두껍게 */
    font-size : 20px;
    color : white;
    font-weight: bold;
} /* a 태그 밑줄 없음*/

/* nav 메뉴(li태그) */
.nav > ul > li {
    display: inline-block; /* 수평 분할 + width/height 적용 O */
    width : 15%;
    line-height : 45px; /* 장평 설정 */
}

/* aside 내부 이미지 */
#logo2{
    width : 100%;
    height : 80px;
}

.content{ /* 선택자 중복 작성이 가능 */
    background-color : gray;
}



웹 문서 구조 예제 2

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04_웹문서구조예제2</title>

    <link rel="stylesheet" href="04_웹문서구조예제2.css" type="text/css">

</head>
<body>
    <!--  시맨틱(Semantic) 태그
            - 페이지 구조를 특정 기능에 맞는 태그로 사용하여 구분.
            - 페이지 구조를 쉽게 파악 가능하고 좀 더 정확한 정보 검색이 
              가능하여 웹 접근성을 높이는 기술

        (시맨틱 태그는 div 태그가 이름이 바뀐 것 뿐이다.)
    -->

    <header>
        <!-- 로고1 -->
        <img id="logo1" src="logo1.jpg" width="100px" height="100px" >
        <!-- 로그인 -->

        <table id="login-form">
            <tr>
                <td>아이디</td>
                <td> <input type="text" id="userId" name="userId"> </td>
            </tr>
            <tr>
                <td>비밀번호</td>
                <td> <input type="password" id="userPw" name="userPw"> </td>
            </tr>
            <tr>
                <td colspan ="2">
                    <button>로그인</button>
                    <button type="reset">취소</button>
                </td>
            </tr>
        </table>
    </header>

    <nav>
        <!-- 메뉴 작성 -->
        <ul>
            <li> <a href="#">메인</a></li>
            <li> <a href="#">공지사항</a></li>
            <li> <a href="#">자유게시판</a></li>
            <li> <a href="#">갤러리</a></li>
            <li> <a href="#">회원관리</a></li>
            <li> <a href="#">채팅하기</a></li>
        </ul>
    </nav>
    
    <section>
        <aside>
            <img id="logo2" src="logo2.jpg" >
        </aside>
        <article class="content"></article>
        <!-- article : 웹 페이지 내용이 작성되는 태그 -->
       
    </section>

    <footer>
            <!-- 생략 -->
    </footer>
</body>
</html>

/* 영역 분할 시 보기 좋게 테두리 부여 */
/* header, nav, section, aside, article, footer{
    border : 1px solid black;
    box-sizing : border-box;
} */

/*  모든 요소의 margin을 없앰 */
* { margin : 0; }

header{
    width : 100%;
    height : 100px;
}

nav{
    width : 100%;
    height : 50px;
    background-color : #ccc;
}

section{
    width : 100%;
    height : 400px;
}

aside {
    width : 15%;
    height : 100%;
    float : left;
    background-color : #ccc;
}

.content {
    width : 85%;
    height : 100%;
    float : left;
}


footer{
    width : 100%;
    height : 50px;
    text-align : center;
    font-size : 20px;
    background-color : #e1dede;
}

#logo1{
    float : left;
}

#login-form {
    float : right;
}

nav > ul { list-style-type : none;}
nav > ul > li > a {
    text-decoration: none;
    font-size : 20px;
    color : white;
    font-weight : bold;
}

nav > ul > li {
    display : inline-block;
    width : 15%;
    line-height : 45px;
}

#logo2{
    width : 100%;
    height : 80px;
}

.content {
    background-color : gray;
}

태그: ,

카테고리:

업데이트:

댓글남기기

관련 글 더보기