学院55日目-CSS


2021.06.14


ex13_text.html


テキスト

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 구글 폰트 -->
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
    
    <style>
        /* 눈누 */
        @font-face {
            font-family: '국립박물관문화재단클래식B';
            src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/국립박물관문화재단클래식B.woff') format('woff');
            font-weight: normal;
          
        #text2 {
            
             /*
                글꼴(서체)
                - 폰트
                - 공백 주의 > '폰트명', "폰트명"
                - 웹페이지에 사용되는 폰트는 서버측 컴퓨터의 폰트를 사용하는 것이 아니라 페이지를 실행하는 클라이언트측 폰트를 사용한다.
                - 브라우저가 실행되는 컴퓨터의 폰트를 사용 -> 원하는 폰트를 이미지로 생성해서 사용
                - 웹 폰트 사용 : 폰트를 스트리밍 방식으로 서버로부터 다운로드 받아서 사용(일시적. 접속중일 때만 사용 가능) -> 웹 폰트 제공 사이트 다수.. -> HTML: 5px
                - ex) 구글 폰트, 눈누
                - 웹 폰트는 꼭 필요할 때만 사용 -> 무거워짐. 다운로드 비용 발생
                - 폰트는 사람들마다 보기 좋은 호불호가 있음. 

             */

             /* font-family: 궁서체; */ /* 유니코드 지원 -> 한글서체 사용 가능 */
             /* font-family: '맑은 고딕'; */

             /* font-family: 'Jua', sans-serif; */
             /* font-family: '국립박물관문화재단클래식B'; */

             /* 우선 순위 */
             font-family: 'Courier New', Courier, monospace;
             /* font-family: cursive; */

            /* 
            폰트의 생김새에 따른 폰트의 카테고리
            monospace -> 현재 pc에 monospace종류에 해당하는 기본 글꼴
            serif, cursive ..등
             */

             /* 스타일(normal, Italic) */
             font-style: normal;

             /* 두께(normal, bold) */
             /* 100~400 : 글자 두께 -> 잘 안쓰임 */
             font-weight: normal;

            
            /* 꾸미기(none, underline, line-through) */
            text-decoration: none;
            /* text-decoration: overline; */ /* 윗줄 */
            /* text-decoration: line-through; */ /* 취소선 */

        }

        /* 문단 들여쓰기(px, em) */
        p {
            text-indent: 2em; /* 2글자 크기만큼 들여쓰기 */
        }

        h1{
            font-variant: small-caps; 
            /* 모든 글자가 대문자가 되고 크기는 소문자 대문자 구분됨(디자인적인 요소) */
        }
        
        #text1 {
            /* 보편적인 텍스트 서식 */
            font-family: '맑은 고딕';
            color: #444;
            font-size: 15px;
            line-height: 1.5em;
            /* letter-spacing: -1px; */ /* 쓰기도 하고 안쓰기도 함 */
        }
        
        
        
    </style>
</head>
<body>
    <h1>Text CSS</h1>

    <p id="text1" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>

    <p id="text2" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.<!-- <img src="images/catty01.png"> -->권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>

    <p id="text3" class="txt">방역당국이 코로나19 백신을 국내에서 개발·생산하고 적기에 접종할 수 있는 능력인 이 른바 ‘백신주권’을 확보하기 위해 노력하고 있다고 밝혔습니다.권준욱 중앙방역대책본부 제2부본부장은 오늘(11일) 오후 정례 브리핑에서 “연구개발과 관련해서 ‘백신주권’에 한 걸음씩 다가서고 있다”고 말했습니다. 권 부본부장에 따르면 백신주권은 백신 연구개발 및 제조·기술, 임상시험을 통한 백신 효능 확인, 원부자재 확보·백신 대량생산 및 적기 접종 등 세 가지 능력을 포함하는 개념입니다.권 부본부장은 “이미 확보한 것도 있고 확보를 진행 중이거나 확보하기 위해 노력하고 있는 것도 있다”고 설명했습니다. 이어 “백신 주권과 거리두기, 접종에 대한 호응 등 세 가지는 코로나19 이후 ‘안전한 내일’, ‘미래 의료’로 가는 길”이라며 “당국도 이 세 분야에서 최선을 다하겠다”고 강조했습니다.권 부본부장은 본인과 가족, 이웃의 안전을 위한 최선의 길이 코로나19 백신 접종이라며, 재차 접종을 권고했습니다.감염 재생산지수가 지금처럼 1 이하를 유지하는 상황이라면 예상보다 이른 시점에 코로나19 유행 관리가 가능하게 될 것이라고 예상했습니다.</p>
    
</body>
</html>

ex13_box.html


箱型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            1. 테두리, border
            - 모든 태그는 출력시 자신의 영역을 가진다.(독점)
            - 순수 HTML에서 테두리를 가지는 태그는 일부(테이블, 이미지, 폼 컨트롤)
            - CSS는 모든 태그에 테두리 표현 가능
         */

         #box2 {
            /*
            1px : 테두리 선 두께 -> 보통 px사용, 0px일땐 안적음.
            solid, dashed(점선),, : 선 타입
            */
            /* 속성 그룹화 -> 가장 많이 쓰이는 방법 */
            /* border: 50px solid black; */

            /* 케밥 표기법(HTML, CSS)을 많이 사용 */
            /* border-color: blue; */
            /* border-style: solid; */ /* solid, dashed, dotte를 많이 사용 */
            /* border-width: 2px; */

            /* 방향 지정 */
            /* 
            border-top: 1px solid black;
            border-right: 5px solid blue;
            border-left: 3px dashed blueviolet;
            border-bottom: 15px solid red; 
            */

            /* 따로 통제 가능 */
            border-top-color: red;
            border-top-style: solid;
            border-top-width: 2px;

            border-right: tomato;
            border-right-style: solid;
            border-right-width: 5px;

            border-left: yellow;
            border-left-style: solid;
            border-left-width: 6px;

            border-bottom: deepskyblue;
            border-bottom-style: dashed;
            border-bottom-width: 15px;

         }

         h1 {
            border-bottom: 1px dashed black; /* 밑줄 */
         }

         /* 폼 태그 특징 : 1개 이상의 CSS속성을 적용하면 나머지 속성들이 브라우저 설정을 따르지 않고 기본값으로 출력된다. */
         .txt, .btn {
            background-color: yellow;   
            border: 1px solid grey;
         }

         body {
             border: 30px solid violet; /* 이 부분이 실제 <body>의 영역이다. */
             background-color: aquamarine;
         }

         html {
             border: 30px solid blue;

         }

         #box3 {
             border: 1px soild black;
             background-color: goldenrod;
         }

    </style>
</head>
<body>
    <!-- 
        1. Selector
        2. Box Model

        박스 모델, Box Model
        - HTML의 모든 태그는 화면에 출력될 때 직사각형 형태로 출력된다. -> 이 규칙을 기반으로 적용되는 CSS의 속성(+규칙)들을 박스 모델이라고 한다.
        1. 테두리, border
        2. 너비, 높이, width, height
        3. 여백, padding, margin

     -->

     <h1>CSS 박스 모델</h1>

     <div>
         데이터: <input type="text" class="txt">
         <input type="button" value="보내기" class="btn">
     </div>

     <div id="box1" class="box">상자1</div>
     <div id="box2" class="box">상자2</div>
     <div id="box3" class="box">상자3</div>

</body>
</html>

ex14_box.html


箱型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 
            박스 모델

            2. 너비, 높이 (객체의 크기)
            - width, height
            - 모든 태그의 영역 크기를 지정한다.
            - width(px, %)
            - height(px, %)
         */

         .box {
             border: 1px solid black;
         }

         #box2 {
             background-color: yellow;
             /* width: auto; */ /* 100% */
             /* height: auto; */ /* auto : 내용물 크기 만큼 */
             
             /* width: 300px; */ /* 고정값. 부모의 영역이 커지든 상관 없음. 절대값*/
             /* height: 300px; */    

             width: 30%; /* % : 부모영역에 따른 상대값 */
             height: 30%; 
         }

         .txt, .btn {
            border: 1px solid #CCC;
            /* height: 23px; */
         }

         .txt {
             height: 180px;
         }

         .btn {
             width: 100px;
             height: 100px;
         }

         .etc {
             width: 100px;
             height: 100px;
         }

    </style>
</head>
<body>

    <h1>CSS 박스 모델</h1>

    <div>
        데이터: <input type="text" class="txt">
        <input type="button" value="보내기" class="btn">
    </div>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2</div>
    <div id="box3" class="box">상자3</div> 
    
    <hr>

    <input type="checkbox" class="etc">
    <input type="radio" class="etc">

</body>
</html>

ex15_box.html


width, height

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*
            교재 대용
            1. w3shcools
                - 자습서 or 레퍼런스
            2. MDN
                - 레퍼런스
         */

        /* 
            박스 모델

            모든 태그
            1. 블럭 태그
            2. 인라인 태그
                a. 대체 불가능한 요소, Non-replaced Element
                    - 거의 대부분의 인라인 태그
                    - 태그 자체가 화면에 출력되는 태그
                b. 대체 가능한 요소, Replaced Element
                    - 폼태그, 이미지태그
                    - 태그 자체가 화면에 출력되지 않고 다른 무언가로 교체되어 출력되는 태그

        
            <블럭태그와 인라인 태그의 너비/높이 정책>
        
        	블럭 태그 정책
            1. 기본 정책
                - 명시적으로 width, height를 지정하지 않았을 때
                a. width: auto(부모 영역을 채운다.)
                b. height: 내용물의 높이가 영역의 높이가 된다.

            2. 명시적 기재
                - 내용물의 크기와 상관없이 지정한 크기로 출력된다.
                - 내용물이 상자의 면적보다 많아지면(overflow) 상자 밖으로 빠져나간다.
                - 내용물의 크기에 따라 width, height를 고정을 할지 말지 잘 선택해야 한다.
                a. width: 지정한 크기
                b. height: 지정한 크기


            인라인 태그 정책
            1. 기본 정책
                - 명시적으로 width, height를 지정하지 않았을때
                a. width : 내용물의 너비가 영역의 너비가 된다.
                b. height : 내용물의 높이가 영역의 높이가 된다.

            2. 명시적 기재
                1. 대체 불가능한 요소
                - 인라인의 성질에 반하는 행동이라서..
                - ex) <span>
                a. 너비 : 지정 불가능
                b. 높이 : 지정 불가능

                2. 대체 가능한 요소
                - ex) 폼태그, 이미지태그
                a. 너비 : 지정 가능
                b. 높이 : 지정 가능   
         */
        
         .box {
             border: 1px solid black;
         } 

         #box2 {
             /* 명시적 기재 */
             width:300px;
             height: 250px;
             /* height: auto; */
         }

         /* 어떤 태그가 영역이 얼마나 되는지? 1. 배경색을 준다. 2. 테두리를 준다. */
         span {
             /* border: 1px solid red; */
             background-color: yellow;

             /* 인라인 태그는 width와 height 지정 불가능 */
             /* width: 200px;
             height: 200px; */
         }

        img {
            /* 원래너비:원래높이 = 수정너비:수정높이 */
            /* 95:140 = 300:X 종횡비 유지*/
            width: 300px;
            /* height: 442px; */
            height: auto; /* 원본비율을 유지하면서 자동으로 맞춰진다. */
        }

    </style>
</head>
<body>
    <h1>CSS 박스 모델</h1>

    <div id="box1" class="box">상자1</div>
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자<span>홍길동</span>2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자</div>
    <div id="box3" class="box">상자3</div> 

    <hr>

    <span>홍길동</span> /* 대체 불가능한 요소 */

    <!-- Replaced Element-> 다시 서버로 가서 다운받아와서 이미지태그랑 바꿔치기한다. -->
    <img src="images/0.png"> /* 대체 가능한 요소 */
    
</body>
</html>

ex16_box.html


padding

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            박스 모델
            1. border
            2. width, height
            3. padding, margin
                - padding
                    - 가독성 여백 조절, 내부 요소의 배치(위치 조정)
         */
         .box {
             border: 10px solid black;
             width: 200px;
             height: 200px;
         }

         #box2 {
             border-color: red;

             /* height: auto; */
             /* 
                padding 방향(위, 오른쪽, 아래, 왼쪽) > 따로 통제 가능
             */

             /* padding: 20px; -> 네방향 모두 */

             /* padding-top: 20px;
             padding-right: 20px;
             padding-bottom: 20px;
             padding-left: 20px; */

             /* top -> right -> bottom -> left (시계방향) */
             /* padding: 10px 20px 30px 40px; */

             /* top -> (right + left) -> bottom */
             /* padding: 10px 20px 30px; */

             /* top(bottom) -> right(left) -> 많이 사용하는 방법 */
             /* padding: 10px 30px; */

             /* top(right, left, bottom) -> 가장 많이 사용하는 방법 */
             /* padding: 20px; */

             /* 가독성 좋음 */
             /* padding: 5px; */ /* 일괄 적용 */
             /* padding-top: 20px; */ /* 덮어쓰기 */


             /* 
                테두리 기준
                - padding : 안쪽 여백
                - margin : 바깥쪽 여백

                padding
                - 테두리와 안쪽 컨텐츠 사이의 거리

                margin
                - 해당 요소(테두리)와 외부 요소간의 거리
                - 태그 사이의 간격이 조절된다 -> 거리 조절 -> 요소 배치 작업
                - 세밀한 거리 조정 가능
              */
             
             margin-top: 19px;
             margin-bottom: 21px;

         }

         .txt {
             /* padding: 10px; */
             /* padding: 2px 15px */
             outline: none;
             border: 0px; /* 테두리 안보이게 가능 */
             border-radius: 0;
             border-bottom: 1px dashed gray;
             padding-bottom: 15px 10px;
         }

         h1 {
             /* 글자 밑줄 */
             border-bottom: 1px solid black;
             padding-bottom: 50px;
             /* text-decoration: underline; 제어 불가능*/
         }

         

    </style>
</head>
<body>
    <h1>CSS 박스 모델</h1>

    <!-- 
        블럭요소의 수직 거리는 절대로 <br>로 조절하면 안된다!!! > margin 사용
        1. <br> 용도 : 인라인 태그의 개행을 목적으로 한다.
        2. 세밀한 거리 조절 불편하다.
     -->
    <div id="box1" class="box">상자1</div>
    <!-- <br><br> --> 
    <div id="box2" class="box">상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2상자2</div>
    <!-- <br> -->
    <div id="box3" class="box">상자3</div> 

    <hr>

    <input type="text" class="txt">
    
</body>
</html>


ex17_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .list {
            border: 1px solid #999;

            /* 인접한 border끼리의 상태(separate, collapse(병합)) */
            border-collapse: collapse;
            width: 700px;
        }

        .list th,
        .list td { /* 부모선택자 */
            border: 1px solid #999;
            padding: 5px;
        }
`
        .list td {
            text-align: center;
        }

        .list .col1 { width: 50px; }
        .list .col2 { width: 80px; }
        .list .col3 { width: 50px; }
        .list .col4 { width: 70px; }
        .list .col5 { width: 450px; }

        .list th {
            background-color: #DDD;
        }

        /* 주소 왼쪽 정렬 */
        .list .cell5 { 
            text-align: left; 
        }

        /* 마우스 올렸을때 색상표시 */
        .list tr:hover {
            background-color: gold;
        }



    </style>
</head>
<body>
    <!-- 
        HTML : 뼈대 + 데이터
        CSS : 서식
     -->

    <h1>주소록</h1>

    <table class="list">
     <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .list {
            border: 1px solid #999;

            /* 인접한 border끼리의 상태(separate, collapse(병합)) */
            border-collapse: collapse;
            width: 700px;
        }

        .list th,
        .list td { /* 부모선택자 */
            border: 1px solid #999;
            padding: 5px;
        }
        
        .list td {
            text-align: center;
        }

        .list .col1 { width: 50px; }
        .list .col2 { width: 80px; }
        .list .col3 { width: 50px; }
        .list .col4 { width: 70px; }
        .list .col5 { width: 450px; }

        .list th {
            background-color: #DDD;
        }

        /* 주소 왼쪽 정렬 */
        .list .cell5 { 
            text-align: left; 
        }

        /* 마우스 올렸을때 색상표시 */
        .list tr:hover {
            background-color: gold;
        }


    </style>
</head>
<body>
    <!-- 
        HTML : 뼈대 + 데이터
        CSS : 서식
     -->

    <h1>주소록</h1>

    <table class="list">
        <tr>
            <th class="col1">번호</th>
            <th class="col2">이름</th>
            <th class="col3">나이</th>
            <th class="col4">성별</th>
            <th class="col5">주소</th>
        </tr>  
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>

        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>
    </table>

    <h2>비고</h2>
    
    <table>
        <tr>
            <td>비고 : 위의 데이터는 연습용입니다.</td>
        </tr>
    </table>
</body>
</html>   <tr>
            <th class="col1">번호</th>
            <th class="col2">이름</th>
            <th class="col3">나이</th>
            <th class="col4">성별</th>
            <th class="col5">주소</th>
        </tr>  
        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>

        <tr>
            <td>1</td>
            <td>홍길동</td>
            <td>20</td>
            <td>남자</td>
            <td class="cell5">서울시 강남구 역삼동 123-45</td>
        </tr>

        <tr>
            <td>2</td>
            <td>아무개</td>
            <td>21</td>
            <td>여자</td>
            <td class="cell5">서울시 영등포구 대림동 123-45</td>
        </tr>

        <tr>
            <td>3</td>
            <td>김흥부</td>
            <td>22</td>
            <td>남자</td>
            <td class="cell5">서울시 서대문구 홍제동 123-45</td>
        </tr>
    </table>

    <h2>비고</h2>
    
    <table>
        <tr>
            <td>비고 : 위의 데이터는 연습용입니다.</td>
        </tr>
    </table>
</body>
</html>
ctrl+h:置換

ex18_box.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            /* 태그를 통제하기 위해 0으로 시작 */
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: #ffcc29;
        }

        .menu {
            border: 0px solid black;
            width: 100%;
            border-spacing: 0;
        }

        .menu td {
            border: 0px solid red;
            width: 20%;
            height: 60px;
            text-align: center;
            font-family: Arial;
            font-size: 1.5em;
            background-color: #206a5d; /* 간격여백지우기 */
            color: white;
            font-variant: small-caps;
            cursor: pointer; /* 커서 모양 (pointer: 손가락 모양)*/
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent;
        }

        .menu td:hover {
            background-color: #81b213;
            border-top-color: #c84b31;
            border-bottom-color: #c84b31;
        }

        main {
            width: 1000px;
            /* 중앙 정렬 */
            margin-left: auto;
            margin-right: auto;
        }

        section {
            padding: 25px;
            margin-bottom: 200px;
        }

        section > article > h1 {
            border-bottom: 1px dashed #206a5d;
            padding-bottom: 5px;
            margin-bottom: 15px;
        }

        section > article > p {
            line-height: 1.6em;
        }

        section > article {
            margin-bottom: 25px;
        }

    </style>
</head>
<body>
    <!-- 
        페이지 상단 메뉴 + 컨텐츠

        1. 화면 스케치(프로토타이핑, 목업, 와이어프레임)
            - Adobe XD
            - Figma
            - 발사믹 목업
            - 카카오톡 오븐
            - Visio(MS Office)

        2. 색상표 구성
            - #206a5d
            - #81b213
            - #ffcc29
            - #f58634

        3. 최적 해상도 설정
            - 다양한 환경의 고객들이 사이트 접근 > 중간정도 해상도를 선택(1000px ~ 1200px) (시대마다 다름) > 화면을 거기에 맞춰서 구현
     -->

     <main>
        <header>
            <nav>
                <table class="menu"> <!-- borderspacing="0" -->
                    <tr>
                        <td>Home</td>
                        <td>Employee</td>
                        <td>Department</td>
                        <td>Manager</td>
                        <td>Location</td>
                    </tr>
                </table>
            </nav>
        </header>

        <section>
            <article>
                <h1>제목입니다.</h1>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
            <article>
                <h1>제목입니다.</h1>
                
                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>

                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
            <article>
                <h1>제목입니다.</h1>
                
                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
    
                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
    
                <p>내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.내용입니다.</p>
            </article>
        </section>
    </main>
</body>
</html>

ex19_align.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            정렬, Alignment
            - 인라인 태그와 블럭 태그의 수평 정렬

            1. 인라인 태그
                - 내용물의 수평 정렬은 지정할 수 없다. 
                - 내용물의 크기와 공간의 크기가 동일하기 때문.. 움직일 여백이 없어서..
                - text-align 속성 사용 안함
                - 인라인 태그는 스스로 수평정렬을 할 수 없다. > 부모인 블럭 태그의 text-align을 통해서 수평 정렬이 가능하다.

            2. 블럭 태그    
                - 내용물을 정렬할 수 있다. 
                - 내용물의 너비와 무관하게 블럭 태그는 항상 너비가 100% > 움직일 여백이 있어서..
                - 블럭 태그의 스스로 수평 정렬 > 관련된 CSS 속성 없음. > margin을 사용해서 수평 정렬을 대신한다.
                
         */
        #box1 {
            background-color: yellow;
            text-align: center; 
            width: 200px;
            /* margin-left: 300px; */ 
            /*
            블럭태그 수평정렬하는 법 
            1.width가 고정이여야한다. 
            고정값이라 창 크기에 따라서 유동적이지 않음 -> 2. 왼쪽 마진과 오른쪽 마진을 똑같이 설정
            */
            margin-left: auto;
            margin-right: auto;

        }

        #span1 {
            background-color: red;
            /* text-align: center; */
        }

    </style>
</head>
<body>

    <h1>인라인 태그</h1>
    <div id="box1">
        <span id="span1">인라인 태그</span>
    </div>

    <h1>블럭 태그</h1>
    <div id="box2">
        <div id="box3">블럭 태그</div>
    </div>

</body>
</html>

ex20_overflow.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin-bottom: 200px;
        }
        #box1 {
            border: 1px solid black;
            width: 200px;
            /* height: auto; */
            height: 200px;

            /*
             visible : 오버플로우가 되든 안되든 다 보여준다. 
             hidden: 감추기
             scroll : 스크롤바를 생성
             auto: 오버플로우가 생겨야 스크롤바를 제공
             */
            /* overflow: visible; */
            overflow: hidden;
            /* overflow: scroll; */
            /* overflow: auto; */
        }

        #box2 {
            margin-top: 20px;
            border: 5px solid black;
            width: 128px;
            height: 128px;
            overflow: hidden;
        }

        /*
            각각의 이미지 파일을 만들지 않고, 커다란 덩어리 이미지로 만드는 이유?
            1. 디자이너 <-> 개발자 협업이 쉽다.
                a. 이미지 100개 주고 받기 > 파일명 정하기..
                b. 이미지 1개 주고 받기 > 파일명 1개
                    - 개별 파트의 크기 + 위치(좌표값) > 디자이너가 개발자에게 알려준다.

            2. 네트워크 트래픽 감소 + 서버 운용 비용 감소

        */
        #naver {
            border: 0px solid black;
            width: 445px;
            height: 110px;
            background-image: url(images/sp_main_4efc7a.png);
            background-position: 0 -315px;
        }

        #naver2 {
            border: 0px solid black;
            width: 136px;
            height: 53px;
            background-image: url(images/sp_main_4efc7a.png);
            background-size: 440px 408px;
            background-position: -270px -110px;
            cursor: pointer;
        }

        #naver2:hover {
            background-position: -270px -55px;
        }

    </style>
</head>
<body>
    <div id="box1">상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.상자입니다.</div>

    <div id="box2">
        <img src="images/catty01.png">
        <img src="images/catty02.png">
        <img src="images/catty03.png">
        <img src="images/catty04.png">
        <img src="images/catty05.png">
        <img src="images/catty06.png">
        <img src="images/catty07.png">
        <img src="images/catty08.png">
        <img src="images/catty09.png">
        <img src="images/catty10.png">
    </div>

    <hr>
	
    <img src="images/sp_main_4efc7a.png">

    <hr>

    <div id="naver"></div>

    <hr>

    <div id="naver2"></div>

</body>
</html>
  • ブラウザがページを要求し、要求に応答してページを表示するプロセス

  • Apache:Webサーバ
    Tomcat: WAS (Web Application Server)
    http://test.com->相手のコンピュータアドレス(pc検索)
    :5500->Webサーバのポート番号の参照(Webアプリケーションの参照->サイト)
    /css/->リソースのパス
    ex20_overflow.html->リソース名

  • Web(http://t)->リアルタイムはサポートされていません.接続が中断されています->変更をリフレッシュする必要があります.

  • 接続をガイドとして(1:1、リアルタイム接続-トラフィック、サーバ負担)<>非接続をガイドとして(大量のデータ転送、解釈、実行の責任をブラウザに任せる)、サーバ負担は軽く、ファイルが変更されていない場合はキャッシュの読み取り(コストが低い)、ネットワーク速度が速く、トラフィックが低い).
  • ex21_visibility.html


    可視性

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 
                visibility, 가시성
    
                visibility
                    - visible, hidden
                    - 요소를 화면에 출력하는 역할
                    - 요소의 영역이 그대로 유지된다. (객체는 존재한다. 안보일뿐)
    
                Rendering, 출력 방식 
    
                display
                    - block, inline, none 등..
                    - 요소를 화면에 안보이게 하는 역할(none)
                    - none : 출력 결과를 생성하지 않는다. 객체가 없음.
                    - 요소의 영역도 같이 사라진다.
             */
    
             #cat2 {
                 /* visibility: hidden; */
                 /* display: none; */
             }
    
             /* 인접형제 선택자 */
             /* #cat1:hover + #cat2 { */
                #cat1:hover ~ img {
                 /* border: 1px solid black; */
                 visibility: hidden;
             }
    
             /* body {
                border: 10px solid red;
             }  -- body 영역을 정확이 파악할 것 */
    
             body:hover * {
                 visibility: hidden;
             }
    
        </style>
    </head>
    <body>
        <img src="images/catty01.png" id="cat1">
        <img src="images/catty02.png" id="cat2">
        <img src="images/catty03.png" id="cat3">
    </body>
    </html>

    ex22_opacity.html


    不透明度(Opacity)

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .box {
                border: 1px solid black;
                width: 200px;
                height: 200px;
                background-color: yellow;
    
                /* 
                    opacity, 불투명도
                    - 0~1
                    - 0: 투명, 1: 불투명
                 */
                 opacity: 0; /* 눈에만 안보일뿐 자리는 차지함 */
            }
    
            #list {
                border: 0px solid black;
                width: 680px; /* enter -> 사이 간격 엔터 크기까지 생각해야함. */
            }
    
            #list > img {
                border: 0px solid blue;
                opacity: 0.3;
                cursor: pointer;
            }
    
            #list > img:hover {
                opacity: 1;
            }
    
        </style>
    </head>
    <body>
        문자열
        <div id="box1" class="box">상자1</div>
        문자열
    
        <h1>고양이</h1>
        <div id="list">
            <img src="images/catty01.png">
            <img src="images/catty02.png">
            <img src="images/catty03.png">
            <img src="images/catty04.png">
            <img src="images/catty05.png">
        </div>
    </body>
    </html>