100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자

Day 24 - html5, css

ksyke 2024. 8. 26. 17:47

목차

    • 웹표준이란것은 html55를 얘기한다.
    • html과 hrml5의 차이:
      • 주체자가 다름
        • hrml은 w3c가 주체가 된다.
        • html5는 브라우저 회사가 주체가 된다.

    HTML5의 기본 원칙

    <html>
    <head>
        <!-- 문서의 속성 -->
    </head>
    <body>
        <!-- 문서의 내용 -->
    </body>
</html>
    <!DOCTYPE html> <!-- html5임을 나타내는 코드 -->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <!-- HTML5의 기본 원칙 -->
        <!-- 1. 태그는 반드시 열고 닫는다. -->
        <p>내<br/>용<img/></p>

        <!-- 2. html은 논문(문서)만을 표현하도록 한다. 데이터의 구조(strurcture)를 표현. 
         디자인은 css를 이용해서, 동적인 작업(dom제어)은 js를 이용해서 처리한다. -->

        <!-- 3. 디자인만을 담당하던 태그는 삭제됨. -->

        <!-- 4. 제목과 내용이 존재하고, 필요하다면 표나 그림으로 표현이 가능하다.-->
        <h1>대제목</h1>
        <h2>중제목</h2>
        <h3>소제목</h3> 
        <!-- 중제목과 소제목이 중복으로 사용될 수는 있지만 대제목은 한 문서당 한번만 사용된다. -->
        <!-- 반드시 h1, h2, h3 순대로 사용돼야 하고, 건너뛸수는 없다. -->
        <!-- 대제목은 반드시 h1이어야 할 필요는 없고 h2나 h3을 사용할수도 있다. -->
        <!-- 내용은 <p>태그를 통해 작성이 가능한다. 개행은 <br/>태그를 이용한다. -->
        <p>내용<br/>내용</p>

        <!-- 5. 표는 반드시 표를 표현할 때만 사용한다. -->

        <!-- 6. 이미지는 반드시 설명을 위한 이미지만을 <img/> 태그를 사용해 작성한다. -->
    </body>
</html>

    HTML5의 사용 방식

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>대제목</h1>
    <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li>menu3
            <ol>
                <li>menu3-1</li>
                <li>menu3-2</li>
                <li>menu3-3</li>
            </ol></li>
        <li><a href="#">menu4</a></li>
    </ul>
    <h2>menu3</h2>
    <p>menu3의 <strong>내용</strong> <i>설명</i></p>
    <h3>menu3-1</h3>
    <p>설명</p>
    <table>
        <tr>
            <td>표 사용</td>
        </tr>
    </table>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form>
        <label for="id">id</label>
        <input type="text" id="id" name="id" />
        <label for="pw">pw</label>
        <input type="password" id="pw" name="pw" />
        <label for="num">num</label>
        <input type="number" id="num" name="num"/>
        <label for="tel">tel</label>
        <input type="tel" id="tel" name="tel"/>
        <label for="url">url</label>
        <input type="url" id="url" name="url" />
        <label for="email">email</label>
        <input type="email" id="email" name="email" />
        <label for="range">range</label>
        <input type="range" id="range" name="range" value="" min="11" max="20" />
        <label for="color">color</label>
        <input type="color" id="color" name="color" />
        <label for="date">date</label>
        <input type="date" id="date" name="date" />
        <label for="time">time</label>
        <input type="time" id="time" name="time" />
        <label for="datetime">datetime</label>
        <input type="datetime-local" id="datetime" name="datetime" />
        <input type="submit" value="전송1">
        <button type="submit">전송2</button>
        <button>전송3</button>
    </form>
</body>
</html>

    시맨틱 태그

    • 시맨틱 : '의미의', '의미론적인'
    <header>로고 등등..</header>
<nav>인덱스 메뉴..</nav>
<selction>
    <h2>이 페이지에서 하고자 하는 말</h2>
    <p>설명</p>
</selction>
<article>
    이 사이트에서 하는 얘기. 단 section 제외, 연관
</article>
<aside>
    이 사이트와는 무관한 광고..
</aside>
<footer>
    카피라이트 주소 정보 제공측..
</footer>
    <div class="header">header</div>
<div id="menu">nav</div>
<div id="content">content</div>
<div class="aside">aside</div>
<div id="footer">footer</div>

    CSS

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="Ex08.css">
    <style rel="stylesheet" type="text/css">
        p{
            color:red;
        }
        h2{
            color:beige;
        }
    </style>
</head>
<body>
    <h1>css</h1>
    <p style="color:rebeccapurple">css 설명</p>
    <h2>소제목1</h2>
    <p>설명</p>
    <h2>소제목2</h2>
    <p>설명</p>
    <h2>소제목3</h2>
    <p>설명</p>
    <h2>소제목4</h2>
    <p>설명</p>
</body>
</html>
    h2{
    background-color: rgb(81, 145, 202);
}

    Selector

    • p: 모든 태그에 일괄적용
    • id : 고위의 선택자
    • class : 다중의 선택자
    • 선택자의 우선순위는 인라인(추천하지않음) > id > class > tag 순으로 된다.
    • 더하기(+) 요소로 다음 형제 요소를 선택할 수 있다.
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        h1{color:aqua;}
        h1+h2{color:blue;}
        h1+h2+p{color:orange;}
        h1+h2+p+h2{color:gold;}
        h1+h2+p+h2+p+ul{color:palegreen;}
        h1+h2+p+h2+p+ul>li:first-child{color:lightcoral;}
        h1+h2+p+h2+p+ul>li:first-child+li{color:darkcyan;}
        h1+h2+p+h2+p+ul>li:last-child{color:indigo;}
        ul>li:first-child>a{color:pink;}
        ul a{color:olive;} /*자손 선택*/
        ul,a{color:violet;} /*다중 선택*/
        ul>li:nth-child(3){color:darkblue;}
        ul>li:nth-child(2n){color:red;} /*짝수 선택*/
        ul>li:nth-child(2n-1){color:blue;} /*홀수 선택*/
        ul>li:first-child{color:khaki}
        h1+h2+p+h2+p+ul+h2{color:teal;}
    </style>
</head>
<body>
    <h1>선택자</h1>
    <h2>h2</h2>
    <p>내용</p>
    <h2>h2</h2>
    <p>내용</p>
    <ul>
        <li>item1<a href="#">link</a></li>
        <li>item2<a href="#">link</a></li>
        <li>item3<a href="#">link</a></li>
        <li>item4<a href="#">link</a></li>
        <li>item5<a href="#">link</a></li>
    </ul>
    <h2>h2</h2>
    <p>내용</p>
    <h2>h2</h2>
    <p>내용</p>
    <ul>
        <li>item1</li>
        <li>item2</li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
    <style rel="stylesheet" type="text/css">
    input{background-color: rosybrown;}
    input[type="text"]{background-color: yellowgreen;}
    input[type="url"]{background-color: wheat;}
    input[type]{background-color: teal;} /* 모든 type 선택*/
    input[type^="t"]{background-color: yellow;} /* "t"로 끝나는 type 선택 */
    input[type$="t"]{background-color: yellow;} /* "t"로 시작하는 type 선택 */
</style>

    기타 속성들

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        ul>li:nth-child(1){color:red;
            background-color: blue;
        }
        ul>li:nth-child(2){color:#ff0000;}
        ul>li:nth-child(3){color:rgb(255, 0, 0);
            /*
            border-color: red;
            border-width: 1px; // 단위: px, pt, %, em, ...
            border-style: solid;*/
            /* 
            border-top: 1px solid red;
            border-bottom: 1px solid blue;
            border-left: 10px solid blue;
            border-right: 10px solid red; */
            border: 1px solid blue;
            border-radius: 5px;

        }
        ul>li:nth-child(4){color:rgba(255, 0, 0, 0.237);}
        ul>li:nth-child(5){color:#f00;}
    </style>
</head>
<body>
    <h1>속성</h1>
    <ul>
        <li>item1<a href="#">link</a></li>
        <li>item2<span>span</span></li>
        <li>item3</li>
        <li>item4</li>
        <li>item5</li>
    </ul>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        h1{
            background-color: skyblue;
            margin: 0px;
            padding: 50px;
        }
       /*  body>h1:first-child+h1{
            width: 300px;
            height: 100px;
        } */
        body>h1+h1{
            width: 300px;
            height: 100px;
            display: inline-block;
        }
        p{
            background-color: sandybrown;
            margin-top: 0px;
        }
        div{
            background-color: cornflowerblue;
            margin: 50px
        }
        span{
            background-color: lemonchiffon;
            margin: 0px 50px;
        }
    </style>
</head>
<body>
    <h1>h1</h1>
    <h1>h1</h1>
    <h1>h1</h1>
    <p>p</p>
    <p>p</p>
    <p>p</p>
    <div>div</div>
    <div>div</div>
    <div>div</div>
    <span>item1</span>
    <span>item2</span>
    <span>item3</span> 
</body>
</html>

    text

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        h1{
            text-align: right;
        }
        p{
            font-family: '맑은고딕', '궁서체', monospace;
            font-size: 20px;/* em:*배, pt:픽셀, *%: 퍼센트*/
            font-weight: bold;
            font-style: italic;
            text-decoration: underline;
            text-decoration: overline;
            text-decoration: line-through;
            text-align: center;
        }
        a{
            text-decoration: none;
            color: black;
        }
        #p1{
            text-decoration: none;
            font-weight: normal;
            font-style: normal;
            font-size: 15px;
            text-align: justify;
            text-indent: 50px;
            text-transform: uppercase;
            text-transform: capitalize;
            letter-spacing: 2pt;
            font-family: 'Courier New', Courier, monospace;
        }
    </style>
</head>
<body>
    <h1>text</h1>
    <p>abcdefgh<a href="#">link</a></p>
    <p>한글</p>
    <p id="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque elit non eleifend efficitur. Cras elementum tristique euismod. Morbi congue pharetra malesuada. Aliquam vitae imperdiet elit, et rhoncus nunc. Donec egestas ornare urna a porttitor. Nullam tincidunt nisl nisl, et molestie enim rutrum vel. Nullam ante enim, tristique sed efficitur sed, imperdiet ac magna. Mauris nisl dui, placerat eget dui et, blandit tempor urna. Quisque elementum neque at euismod porta. Curabitur porta velit nibh, sed aliquam sem sodales non. Pellentesque mollis velit vel magna efficitur, et aliquam orci auctor. Ut hendrerit tortor quam, at semper justo eleifend non. Vestibulum id posuere nunc. Pellentesque lobortis accumsan tellus, ut porttitor nisi semper quis. Sed ut nibh nisi. In hac habitasse platea dictumst.</p>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        nav, footer{
            background-color: gray;
            text-align: center;
        }
        nav>a{
            color: white;
            font-size: 20pt;
            text-decoration: none;
            text-transform: uppercase;
            padding: 50px, 0px;
        }
        nav>a:visited,nav>a:link{
            color: white;
        }
        nav>a:active,nav>a:hover{
            color: yellow;
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <header><h1>logo</h1></header>
    <nav>
        <a href="#">menu1</a>
        <a href="#">menu2</a>
        <a href="#">menu3</a>
        <a href="#">menu4</a>
    </nav>
    <section>
        <h1>link tag</h1>
        <p>설명</p>
    </section>
    <footer>
        &copy; 2024
    </footer>
</body>
</html>

    table

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        table, th, td{
            border: 1px solid gray;
        }
        table{
            width:500px;
            border-collapse: collapse;
        }
        tr>th:first-child{
            width:80px;
        }
        tr>th:first-child+th+th{
            width:80px;
        }
        tr>th:last-child{
            width:80px;
        }
        table tr:first-child>th{
            background-color: gray;
        }
        table>tbody>tr:nth-child(2n){
            background-color: darkgray;
        }
        table>tbody>tr>td:nth-child(2n-1){
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <h1>list page</h1>
    <table>
        <thead>
        <tr>
            <th>글번호</th>
            <th>제목</th>
            <th>글쓴이</th>
            <th>날짜</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>00</td>
            <td>테스트</td>
            <td>테스터</td>
            <td>00/00</td>
        </tr>
        <tr>
            <td>00</td>
            <td>테스트</td>
            <td>테스터</td>
            <td>00/00</td>
        </tr>
        <tr>
            <td>00</td>
            <td>테스트</td>
            <td>테스터</td>
            <td>00/00</td>
        </tr>
        <tr>
            <td>00</td>
            <td>테스트</td>
            <td>테스터</td>
            <td>00/00</td>
        </tr>
        <tr>
            <td>00</td>
            <td>테스트</td>
            <td>테스터</td>
            <td>00/00</td>
        </tr>
      </tbody>
    </table>
</body>
</html>

    display

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        div{
            border: 1px solid gray;
            width: 100px;
            height: 100px;
        }
        div:nth-child(2), div:nth-child(3){
            background-color: aqua;
            display:inline-block;
        }
        div:nth-child(4){
            /* display:none; */
            /* color: rgba(0,0,0,0); */
            /* opacity: 0; */

            visibility: hidden;
        }
        div:nth-child(5){
            background-color: brown;
            color: rgba(0,0,0,0);
        }
    </style>
</head>
<body>
    <div>box1</div>
    <div>box2</div>
    <div>box3</div>
    <div>box4</div>
    <div>box5</div>
</body>
</html>

    overflow

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        div:first-child{
            background-color: aqua;
            width: 300px;
            height: 200px;
            /* overflow-y: scroll; */
            /* overflow: auto; */
            overflow: hidden;
        }
        div+div{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>국회의원은 그 지위를 남용하여 국가·공공단체 또는 기업체와의 계약이나 그 처분에 의하여 재산상의 권리·이익 또는 직위를 취득하거나 타인을 위하여 그 취득을 알선할 수 없다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 국회의원은 법률이 정하는 직을 겸할 수 없다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 군사재판을 관할하기 위하여 특별법원으로서 군사법원을 둘 수 있다.
    </div>
    <div>box</div>
</body>
</html>

    flow

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        div:first-child{
            background-color: aqua;
            width: 300px;
            height: 200px;
            /* overflow-y: scroll; */
            /* overflow: auto; */
            overflow: hidden;
        }
        div+div{
            background-color: brown;
        }
    </style>
</head>
<body>
    <div>국회의원은 그 지위를 남용하여 국가·공공단체 또는 기업체와의 계약이나 그 처분에 의하여 재산상의 권리·이익 또는 직위를 취득하거나 타인을 위하여 그 취득을 알선할 수 없다. 국가안전보장에 관련되는 대외정책·군사정책과 국내정책의 수립에 관하여 국무회의의 심의에 앞서 대통령의 자문에 응하기 위하여 국가안전보장회의를 둔다. 국회의원은 법률이 정하는 직을 겸할 수 없다. 외국인은 국제법과 조약이 정하는 바에 의하여 그 지위가 보장된다. 대통령이 궐위된 때 또는 대통령 당선자가 사망하거나 판결 기타의 사유로 그 자격을 상실한 때에는 60일 이내에 후임자를 선거한다. 군사재판을 관할하기 위하여 특별법원으로서 군사법원을 둘 수 있다.
    </div>
    <div>box</div>
</body>
</html>

    position

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        body{
            margin: 100px;
        }
        div{
            width: 100px;
            height: 100px;
            position: static;
        }
        #box1{background-color:red;
            position: static;
            text-align: center;
        }
        #box2{background-color:orange;
            position: absolute;
            top: 0px;
            left: 0px;
        }
        #box3{background-color:yellow;
            position: absolute;
            left: 200px;
        }
        #box4{background-color:green;
            position: relative;
            left: 200px;
            top:30px;
        }
        #box5{background-color:blue;
            position:fixed; /* 화면을 기준으로 위치가 고정된다. */
            left: 0px;
            top: 100px;
            opacity: 0.5;
        }
    </style>
</head>
<body>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <div id="box4">box4</div>
    <div id="box5">box5</div>
</body>
</html>
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: aquamarine;
        }
        div>div{
            width: 100px;
            height: 100px;
            background-color: blanchedalmond;
            position: absolute;
            top: 0px;
            left: 100px;
        }
        #outer{
            position: absolute;
            top: 100px;
            left: 100px;
            z-index: -1;
        }
        #box1{background-color:coral;
        }
        #box2{background-color:darkseagreen;
            position: absolute;
            top: 200px;
            left: 0px;
            z-index: -2;
        }
        #box3{background-color:lightgreen;
            position: absolute;
            top: 350px;
            left: 50px;}
        ul{
            list-style:lower-alpha;
        }
    </style>
</head>
<body>
    <div id="outer">outer
        <div>inner</div>
    </div>
    <div id="box1">box1</div>
    <div id="box2">box2</div>
    <div id="box3">box3</div>
    <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
    </ul>
</body>
</html>

    images

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        img{
            width: 141px;
        }
        h1{
            background-image: url("imgs/logo.png");
            background-repeat: no-repeat;
            text-indent: -999px;
        }
    </style>
</head>
<body>
    <h1>Image</h1>
    <img src="imgs/logo.png" />
</body>
</html>

    간단한 웹사이트 만들기

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style rel="stylesheet" type="text/css">
        header>h1{
            text-indent: -9999px;
            width: 141px;
            height: 41px;
            background-image: url(https://www.inje.ac.kr/kor/assets/images/common/main_logo_M.png);
        }
        nav{
            background-color: gray;
            /* height: 50px; */
            overflow: hidden;
        } 
        nav>ul{
            list-style: none;
            padding: 0px;
            width: 400px;
            margin: 0px auto;
        }
        nav li{
            float: left;
            border-left: 1px solid gray;
            border-right: 1px solid gray;
        }
        nav li>a{
            display: block;
            width: 98px;
            height: 50px;
            background-color: darkgray;
            text-align: center;
            line-height: 50px;
            text-transform: uppercase;
            color: aliceblue;
            text-decoration: none;
        }
        /* section{
            clear: left;
        } */
        footer{
            background-color: gray;
            text-align: center;
        }
    </style>
</head>
<body>
    <header><h1>인제대학교</h1></header>
    <nav>
        <ul>
            <li><a href="#">menu1</a></li>
            <li><a href="#">menu2</a></li>
            <li><a href="#">menu3</a></li>
            <li><a href="#">menu4</a></li>
        </ul>
    </nav>
    <section>
        <h2>환영합니다</h2>
    </section>
    <footer>
        &copy; 2024
    </footer>
</body>
</html>

    '100일 챌린지 > 빅데이터기반 인공지능 융합 서비스 개발자' 카테고리의 다른 글

    Day 26 - js 속성 이어서, js로 브라우저 제어하기  (0) 2024.08.28
    Day 25 - css 애니메이션, js의 속성들  (0) 2024.08.27
    Day 23 - SQL 문법 pt.2 (제약 조건) 그리고 JAVA web 페이지 작성  (0) 2024.08.23
    Day 22 - Java sql 서버를 배포하기 / SQL 함수 정리  (1) 2024.08.22
    Day21 - java에서 sql 사용하기  (0) 2024.08.21

    '100일 챌린지/빅데이터기반 인공지능 융합 서비스 개발자'의 다른글

    • 현재글Day 24 - html5, css

    관련글

    티스토리툴바