학원 54일차 - CSS

·2021년 7월 11일
0
post-thumbnail

2021.06.11

CSS

ex01.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>
        /*
         CSS를 위해 만들어진 태그 
         - 이 영역은 CSS 언어를 이해하고 실행하는 영역
         - 이 영역에서는 HTML 언어를 이해 못한다.
         */
         div { color: blue; }
    </style>
    <link rel="stylesheet" href="css/ex02.css">
</head>
<body>
    <!-- CSS -->
    <!-- 
        HTML
        1. 출력의 골격을 생성(큰 레이아웃 구성)
        2. 출력의 내용물 생성(텍스트, 이미지, 영상 등..)
        3. 출력의 서식 지정(크기, 색상, 위치, 여백 등..) -> 사용 안함(CSS기능과 겹친다.)

        CSS
        1. HTML 문서의 서식을 지정

        CSS, Cascading Style sheet
        - 스타일 시트
        - HTML 서식 기능 구현 + HTML 서식 기능 확장
        - 디자인 담당 언어
        - CSS는 독립 실행이 불가능하다. > 반드시 HTML문서를 기반으로 동작한다.
        - CSS1, CSS2, CSS3(HTML5)

        CSS 장점
        - 서식 기능 많음(현 시점에서 전 세계의 모든 웹 페이지의 디자인을 구현)
        - 생산성 높다.(코드 재사용성이 높다.)
        - 코드 분리도가 높다.(HTML <-> CSS 분리)

    -->

    <!-- 
        요구사항) 안녕하세요 5번 출력
        추가사항) 글자색 > 빨간색
        추가사항) 글자색 > 파란색
     -->
    <h1>HTML 구현</h1>
    
    <p><font color="blue">안녕하세요</font></p>
    <p><font color="blue">안녕하세요</font></p>
    <p><font color="blue">안녕하세요</font></p>
    <p><font color="blue">안녕하세요</font></p>
    <p><font color="blue">안녕하세요</font></p>
    <p><font color="blue">안녕하세요</font></p>
    
    <h1>CSS 구현</h1>

    <div>안녕하세요.</div>
    <div>안녕하세요.</div>
    <div>안녕하세요.</div>
    <div>안녕하세요.</div>
    <div>안녕하세요.</div>

</body>
</html>

ex02.html

Css를 적용하는 방법
<!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>
	/* 내부 스타일 시트 */
        div { color: red; }
    </style>
    <link rel="stylesheet" href="css/ex02.css"> <!-- 외부 스타일 시트 -->
</head>
<body>
    <!--  
        
        HTML에 CSS를 적용하는 방법

        1. 인라인 스타일 시트, Inline Style Sheet
            - 서식을 적용하고 싶은 태그에 직접 style 속성을 명시한다.
            - 적용 범위: 해당 태그만
            - style="CSS 구문"
            - 장점: 가독성이 높다.(해당 태그에 직접 CSS를 작성하기 때문에)
            - 단점: 재사용이 낮다.(재사용 불가!!)
            - 특정 태그 디자인 처리. C

        2. 내부 스타일 시트, Embeded Style Sheet
            - 페이지 상단 <head>내에 <style>를 명시한다.
            - 적용 범위: 현재 페이지내의 모든 태그
            - 장점: 재사용이 높다.
            - 단점: 가독성이 낮다.(해당 태그와 떨어져서 CSS를 작성하기 때문에)
            - 한페이지내에서 반복되는 디자인 처리. B

        3. 외부 스타일 시트, External Style Sheet
            - 별도의 CSS 파일(*.css)을 만들어서 적용한다.
            - 적용 범위: 사이트 전체내의 모든 페이지
            - 장점: 재사용이 가장 높다.
            - 단점: 가독성이 가장 낮다.(물리적 파일이 분리되어 있어서..)
            - 커다랗고 굵은 디자인 먼저 처리. A

    -->

   <!-- <p style="CSS 영역"> : 인라인 스타일 시트 -->
    <p style="color: red;">안녕하세요. 홍길동입니다.</p>
    <p>안녕하세요. 홍길동입니다.</p>
    <p style="color: blue;">안녕하세요. 홍길동입니다.</p>
    <p>안녕하세요. 홍길동입니다.</p>
    <p>안녕하세요. 홍길동입니다.</p>

    <hr>

    <div>반갑습니다. 아무개입니다.</div>
    <div>반갑습니다. 아무개입니다.</div>
    <div>반갑습니다. 아무개입니다.</div>
    <div>반갑습니다. 아무개입니다.</div>
    <div>반갑습니다. 아무개입니다.</div>

    <hr>

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

</body>
</html>

ex03_selector.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>
        /* 선택자 { 속성명: 값; } */

        h1 { color: red; }
        div { color: blue; }
        input { color: gold; }

        h2 { color: red; }
        p { color: gray; }

    </style>
</head>
<body>
    <!-- 
        CSS 구문(문법)
        - 선택자{ 속성명: 값; } -> h1 { color: red; }
        - 선택자{ 속성명: 값; 속성명: 값; 속성명: 값; }

        ★ Selector, 선택자 ★
        - ************************** 완전 중요
        - HTML 소스에서 특정 태그(******)를 검색하는 도구
        - 왜? > 태그를 찾아서 서식을 적용하려고..
            - a와 b는 속성에 따라 다르다.
            a. 태그 자체의 서식 적용
            b. 태그의 내용물에 서식 적용
    

            CSS 선택자
            1. 태그 선택자
                - 태그 이름을 사용해서 원하는 태그를 검색한다.
                - 장점 : 검색된 태그가 1개 이상이면 모두 적용된다.(일괄 적용 -> 생산성)
                - 단점 : 태그명으로만 검색하기 때문에 원치않는 동일한 태그를 걸러낼 방법이 없다.

     -->
    
     <h1>h1입니다.</h1>
     <p>p입니다.</p>
     <div>div입니다.</div>
     <blockquote>blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

     <h1>h1입니다.</h1>
     <p>p입니다.</p>
     <div>div입니다.</div>
     <blockquote>blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

     <h1>h1입니다.</h1>
     <p>p입니다.</p>
     <div>div입니다.</div>
     <blockquote>blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

     <hr>

     <h2>회사 소개</h2>

     <p>회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.</p>

     <hr>

     <h2>광고</h2>

     <p>광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.</p>
</body>
</html>

ex04_selector.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>
        /* 
            *
            - 모든 태그
            
            ID 선택자 
            - 태그명#ID {}
            - #ID {} -> *#ID {}

        */

        h2#title { color: red; }

        /* h2#adv { color: blue; } */
        
        #adv { color: blue; }

        /* 
            클래스 선택자
            - 태그명.클래스명 {}
            - .클래스명{} -> *.클래스명 {]}
        */

        /* p.content {  color:coral; } */

        .content {  color:coral; }

    </style>
</head>
<body>
    <!-- 

        CSS선택자
        1. 태그 선택자 < ID 선택자 < class 선택자

        1. 태그 선택자

        2. ID 선택자
            - 원하는 태그에 개발자가 id속성을 정의한다. > css에서 그 id를 검색해서 태그를 찾는 방식
            - ID : 영문자 + 숫자 + 특수문자(_, -), 한굴(X), 공백(X), 특수문자(X)
            - ID : identity, 문서내에 유일해야 한다.(id 중복 X)
            - 원하는 태그를 검색하기 용이 + id를 작성하는 추가 비용 발생 


        3. class 선택자
            - 원하는 태그에 개발자가 clss속성을 정의한다. > css에서 그 class를 검색해서 태그를 찾는 방식
            - class : 영문자 + 숫자 + 특수문자(_, -), 한굴(X), 공백(X), 특수문자(X)
            - 문서 내에 여러개 존재해도 된다.
            - 원하는 태그를 검색하기 용이 + class를 작성하는 추가 비용 발생

            ----------------------------------------- 선택자 끝

            나머지 선택자(수십개)
            - 1~3 조합
            - 1~3 약간의 기능 추가

     -->

    <h2 id="title">회사 소개</h2>

    <p class="content">회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.회사에 대한 소개입니다.</p>

    <hr>

    <h2 id="adv">사내 광고</h2>

    <p class="content">광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.광고 내용입니다.</p>

    <hr>
    
    <h2>외부 광고</h2>

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

    <hr>

    <div id="area">영역입니다.</div>
    <div class="content">영역입니다.</div>
    <div>영역입니다.</div>

</body>
</html>

ex05_selector.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>
        /* 
            선택자  -- header
            { -- body
                 속성명: 값; 
                 속성명: 값; 
                 속성명: 값; 
            }

            그룹 선택자
            - 여러개의 선택자가 body를 공유한다.
            - 여러개의 선택자로 검색된 태그들이 공통된 서식을 적용받는다.
        */

        /* 
        p { color: red; }
        div { color: red; } 
        */

        /* p, div { color: red; } -- 가능 */

        /* 동시에 적용 가능 -> 코드 재사용성 높음 */
        #item1, #item2, h1, .item { color: red; }

    </style>
</head>
<body>
    <!-- 
        CSS선택자
        1. 태그 선택자
        2. ID 선택자
        3. class 선택자
        4. 그룹 선택자

        그룹 선택자
        - 기존의 선택자들을 그룹 지어서 선언부를 공유하는 선택자
     -->

     <h1>h1입니다.</h1>
     <p class="item">p입니다.</p>
     <div id="item1">div입니다.</div>
     <blockquote>blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

     <h1>h1입니다.</h1>
     <p id="item2">p입니다.</p>
     <blockquote class="item">blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

     <h1 id="item3">h1입니다.</h1>
     <p>p입니다.</p>
     <div class="item">div입니다.</div>
     <blockquote>blockquote입니다.</blockquote>
     <input type="text" value="홍길동입니다.">

</body>
</html>

ex06_selector.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>
        
        /* 태그 식별자
        b { color: red; } 
        */

        /* 아이디 식별자
        #a { color: red;}
        #b { color: red;} 
        */

        /* 그룹선택자
        #a, #b { color: red; }
        */

        /* 클래스 선택자 
        .c { color: orange; }
        */

        /* 
            자식 선택자, Child Selector
            - 부모를 조건으로 자식 태그(**목표)를 검색
            - 부모 > 자식 {}
            - 자식을 조건으로 사용불가
        */
        
        /* li > b { color: green; } 부모로 <li>가 있는 <b>만 스타일 적용 */
        /* div > b { color: blueviolet;} */
        /* p > b { color: blue; } */

        /* div > b { color: coral; } */

        /* html > body > h1 > div > b { color: coral; } */

        /* ol > li > b { color: crimson; } */

        /* 
            자손 선택자, Descendant Selector
            - 조상을 조건은로 자식 태그를 검색
            - 직계 조상을 조건으로 검색
            - 조상 자식 {}
        */
        
        /* blockquote > div > div > ul > li > b { color: greenyellow; } -> 자식선택자 너무 복잡함 */

        /* blockquote b { color: cadetblue; }  */

        /* blockquote#my b { color: cornflowerblue; } */
        
        #my b { color: cornflowerblue; }
        
    </style>
</head>
<body>
    <!-- 
        ** id와 class는 최소한으로 지정해서 사용하자. > 잘 안됨;;

        CSS 선택자
        1. 태그 선택자
        2. ID 선택자
        3. class 선택자
        4. 그룹 선택자
        5. 자식 선택자
            - 구체적인 검색
        6. 자손 선택자
            - 넓은 범위의 검색
     -->

     <!-- <ol>
         <li>자바, <b id="a" class="c">Java</b></li>
         <li>오라클, <b id="b" class="c">Oracle</b></li>
         <li>HTML</li>
     </ol>

     <hr>

     <div>저는 지금 <b>CSS</b>를 공부하고 있습니다.</div> -->


     <ol>
        <li>자바, <b>Java</b></li>
        <li>오라클, <b>Oracle</b></li>
        <li>HTML</li>
    </ol>

    
    <div>
        <div>
            <div>
                <ul>
                    <li>자바, <b>Java</b></li>
                    <li>오라클, <b>Oracle</b></li>
                    <li>HTML</li>
                </ul>
            </div>
        </div>
    </div>

    <blockquote>
        <div>
            <div>
                <ul>
                    <li>자바, <b>Java</b></li>
                    <li>오라클, <b>Oracle</b></li>
                    <li>HTML</li>
                </ul>
            </div>
        </div>
    </blockquote>

    <blockquote id="my">
        <div>
            <div>
                <ul>
                    <li>자바, <b>Java</b></li>
                    <li>오라클, <b>Oracle</b></li>
                    <li>HTML</li>
                </ul>
            </div>
        </div>
    </blockquote>

    <hr>

    <div><div>저는 지금 <b>CSS</b>를 공부하고 있습니다.</div></div>

    <h1><div>저는 지금 <b>CSS</b>를 공부하고 있습니다.</div></h1>

</body>
</html>

ex07_selector.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>
        /* 
            인접 형제 선택자, Adjacent Sibling Selector
            - 바로 위의 형제를 조건으로 검색
            - 형제 + 선택자 {}
            - 동생은 조건으로 사용 불가
            - 자식 선택자와 유사
        */

        /* div + p { color: red; } */
        /* p + p { color: blue; } */

        /* span + div + p { color: orange; } */
        /* p + div + p { color: blue; }  */


        /* 
            형제 선택자, Sibling Selector
            - 형제로 조건으로 검색
            - 형제 ~ 선택자 {}
            - 조건인 형제와 대상인 선택자 사이에 또 다른 중간 형제가 와도 좋다.
            - 자손 선택자와 유사
        */

        span ~ p { color: red; }

        p ~ p { color: royalblue; }
        
         /* 
            자식/자손, 형제/인접형제
            - 부모 조건(O)
            - (윗)형제 조건(O)
            - 자식 조건(X)
            - (아랫)형제 조건(X)
        */

    </style>
</head>
<body>
    <!-- 
        CSS 선택자
        1. 태그 선택자
        2. ID 선택자
        3. class 선택자
        4. 그룹 선택자
        5. 자식 선택자
        6. 자손 선택자
        7. 인점 형제 선택자
        8. 형제 선택자
     -->

     <p>p 태그</p>
     <div>div 태그</div>
     <p>p 태그</p>
     <p>p 태그</p>
     <span>span 태그</span>
     <div>div 태그</div>
     <p>p 태그</p>
     <p>p 태그</p>
</body>
</html>

ex08_selector.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>
        /* 
            의사 클래스, Pseudo Class
            - 실제 태그에는 class 속성이 없는데.. 선택자에서는 존재하는 class처럼 사용
            - 원래 <a>태그에만 제공 -> 다른 태그들에게도 제공
        */

        
        /* a:link { color: black; }*/ 	  /* 한번도 방문 한 적 없는 상태의 링크 */
        /* a:visited { color: orange; }*/ /* 방문 기록이 있는 상태의 링크 */
        /* a:active { color: red; }*/ 	  /* 활성화된 상태의 링크 */
        /* a:hover { color: teal; }*/ 	  /*마우스 커서가 올라가 있는 상태의 링크*/


        /* 가장 보편적인 <a>의 Css적용 모습 */
        a{
            color: black;
            text-decoration: none; /* 밑줄 제거 */
        }    

        a:hover {
            color: orange;
            text-decoration: underline;
        }

    </style>
</head>
<body>
    <!-- 
        CSS 선택자
        - 공부우선순위 : (태그 > 클래스 > ID > 그룹 > 자손) > (자식 > 의사클래스 > 형제 > 인접형제) 

        1. 태그 선택자
        2. ID 선택자
        3. class 선택자
        4. 그룹 선택자
        5. 자식 선택자
        6. 자손 선택자
        7. 인점 형제 선택자
        8. 형제 선택자
        9. 의사 클래스

     -->
     <h1>링크</h1>

     <a href="http://google.com">구글</a><br>
     <a href="https://getbootstrap.com">부트스트랩</a>
    
</body>
</html>


ex09_selector.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>
        
        /*  
            동일한 선택자 사용
            -> 허용(O), 관리 -> 되도록 지양

            동일한 선택자 + 동일한 속성 + 다른 값을 지정
            -> 마지막에 적용된 값 -> 반영
        */

        /*
        div { color: blue; }
        div { color: red; }
        */

        /* 
            속성 충돌
            - 다른 선택자 + 동일한 속성 
        */
        
        /* 100점 */
        /* #box1 { color: orange; } */

        /* 100점 */
        /* #box1 { color: green; } */

        /* 10점 */
        /* .box { color: red; } */
        
        /* 1점 */
        /* div { color: blue; } */


        /* 클래스 선택자는 하나의 태그에 1개 이상의 클래스를 동시에 적용할 수 있다. */

        /* 이 방법을 더 선호함
        .box { color: red; }
        .aaa { font-style: italic; }
        .bbb { text-decoration: underline; }
        .ccc { font-weight: bold; } 
        */


        /* 
        .box { 
            color: red; 
            font-style: italic; 
            text-decoration: underline; 
            font-weight: bold; 
        } 
        */


        /* 속성 충돌 발생 > 점수에 따라서 */
        /* 동일한 점수일 때 우선이고 싶은 속성의 우선순위 점수(구체적으로)를 높인다. */
        /* 10점 -> 11점 -> 21점 -> 22점 -> 23점 */
        /* html > body > div.box.aaa { color: red; } */

        /* 10점 -> 11점 -> 21점 -> 22점 */
        /* body > div.aaa.box { color: blue; } */


        /* .box { color: yellow; } */

        /* 
        태그의 점수를 많이 모아도 클래스를 이길 수 없고 클래스는 아이디를 이길 수 없음
        -> 동일한 선택자가 동일한 점수 일때만 우선순위를 높이는 방법 사용
        */
        /* 100점 */
        #box1 { color: red; }

        /* 10점 -> 110점? -> 클래스선택자는 id선택자를 이길 수 없음 */
        .box.aaa.bbb.ccc.ddd.eee.fff.ggg.hhh.iii.jjj { color: blue; }


    </style>
</head>
<body>
    <!-- ex09_selector.html -->

    <!--  

        선택자 우선 순위
        - 서로 다른 선택자가 하나의 태그를 선택 했을 때 > 동일한 속성 적용 > 속성 충돌 발생 > 어떤 선택자를 적용할지?
        - 점수 계산: 선택자를 구성하는 요소들의 점수 총합을 계산해서 가장 높은 선택자가 적용된다.
        - 선택자가 디테일할 수록 점수가 높고, 범위가 넓을 수록 점수가 낮다.

        - 태그 선택자: 개당 1점
        - 클래스 선택자: 개당 10점
        - 아이디 선택자: 개당 100점

        - 선택자 우선 순위를 결정하는 점수의 의미 -> 개념적인 표현..

    -->

    <!-- 넣고 싶은 기능은 넣고 빼고 싶은 기능은 뺄 수 있다.-->
    <div id="box1" class="box aaa bbb ccc ddd eee fff ggg hhh iii jjj">상자입니다.</div>
    <!-- <div class="box aaa">상자입니다.</div> -->

</body>
</html>

ex10_background.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>

        /* 
            HTML의 속성은 선택적이지만 (일부 태그가 일부 속성을 소유)
            CSS의 속성은 모든 태그에 적용이 가능하다. ***
        */
        /* body {
            background-color: yellow;
        } */

        #box {
            /* background-color: rgba(252,0,0,0.1); -- 불투명도*/
            /* background-color: rgb(255, 0, 0); */

            background-image: url(images/catty02.png);
            /* background-image: url("images/catty02.png");
            background-image: url('images/catty02.png'); */

            background-repeat: no-repeat;

            /* background-position: 50px 0px;
            background-position: 25% 75%; */
            background-position: center center;

            /* background-attachment: fixed; */
        }

        body {
            background-image: url(images/catty03.png);
            background-attachment: fixed;
        }

    </style>
</head>
<body>
    <!-- 

        background 속성
        1. background-color
            - 배경색
        2. background-image
            - 배경 이미지
        3. background-repeat
            - 배경 이미지의 반복
            - repeat, repeat-x, repeat-y, no-repeat
        4. background-position
            - 배경 이미지의 위치
            - 수평 : left, center, right, 수치
            - 수직 : top, center, bottom, 수치      
        5. background-attachment
            - 배경 고정 유무
            - scroll, fixed


        CSS 색상 표현법    
        1. Color Name : red, blue, yellow..
        2. RGB Color(HEX) : #000000 ~ #FFFFFF
        3. RGB Color(DEC) : rgb(0,0,0) ~ rgb(255,255,255)
        4. RGB Color(DEC) : rgba(255,255,255,1), Alpha Channel(투명도: 0~1)

     -->

     <!-- HTML 태그는 각자 소유하고 있는 속성이 다르다. bgcolor : <body>, <table>, <tr>, <td>, <mqrqyee> -->
     <div id="box">안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.안녕하세요.</div>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

     <p>문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.문단입니다.</p>

</body>
</html>


ex11_background.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>
        /* 검색창에 광고 넣기 */
        #txtSearch {
            /* background-color: yellow; */
            /* background-image: url(images/catty04.png); */
            
            background-image: url(images/hangame.png);
            background-repeat: no-repeat;
            background-position: center center;
        }
        
        /* 의사 클래스 */
        #txtSearch:focus {
            /* background-color: yellow; */
            background-image: url();
        }

        #btnSearch {
            background-image: url(images/bullet02.png);
            background-repeat: no-repeat;
            background-position: left center;
        }

        /* 인디케이터 구현 */
        .data{
            /* background-color: white; */
        }

        .data:focus {
            /* background-color: gold; */
            color:red;
        }

    </style>
</head>
<body>

     <h1>검색 사이트</h1>

     <form>
         <input type="text" id="txtSearch" size="30">
         <input type="submit" id="btnSearch" value="   검색하기">
         <button><img src="images/bullet02.png">검색하기</button>
     </form>


     <h1>데이터 입력하기</h1>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
     <div><label>데이터: </label><input type="text" class="data"></div>
</body>
</html>

ex12_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>
    <style>
        #text2 {
            /* 텍스트 색상, 전경색(Fore Color) */
            /* 보통 글자색 #333333 ~ #666666  -> 눈의 피로도 고려*/
            color: #555555;

            /* 
                텍스트 정렬
                - 수평 정렬
                - left, center, right, justify
                - 내용물 수평정렬(내용물: 모든 인라인 태그 (+ 문자열))
             */
             text-align: left;


            /* 
                CSS 수치 표현법
                - CSS에서 수치값은 반드시 단위를 붙여야한다.(필수!!) -> 단위가 많아서
                - HTML에서 수치에 단위를 안붙이면 자동으로 px이 적용된다.

                1. pt
                    - 포인트 
                    - 글꼴의 크기에 사용
                    - 1pt = 1/72인치
                    - 절대값
                    - 기본 글꼴 크기(12pt)

                2. px
                    - 픽셀
                    - 크기, 글꼴 크기(12pt)
                    - 절대값

                3. em(rem)
                    - 상대값
                    - %와 유사
                    - 주로 글꼴 적용, 크기, 위치, 여백 등..
                    - 현재 사용 중인 폰트의 대문자 M의 높이를 기준(1)으로 삼는 상대 표현 단위

                4. %
                    - 백분율
                    - 크기, 여백, 위치, 정렬 등..
                    - 상대값
                    - 글꼴(x)

                -------------------------------------------
                5. ex
                    - em 유사
                    - 현재 사용중인 폰트의 소문자 x의 높이를 1로 한다.
                6. mm
                    - 밀리미터
                7. cm
                    - 센치미터
                8. in
                    - 인치
                9. pc
                    - 파이카(12pt)

            */


             /* 텍스트 크기 */
             /* 
                보통 사용하는 크기
                font-size: 10~14pt;
                font-size: 12~16px; -- px이 더 세밀함
              */
             font-size: 14px ;
            
             /* font-size: 12px; */ /* 폰트: 백터 기반(확대/축소에 품질 변화 없음) -> 타이포그래피 */
             /* font-size: 0.784em; */


             /* 
                줄간격 : pt, px, %, em 
                1.3em ~ 1.6em
             */
             line-height: 140%;
             line-height: 1.4em;


             /* 
                단어 간격 : 단어와 단어 사이의 간격
             */
             word-spacing: 0em;

             /* 
                자간 : 문자와 문자 사이의 간격 
                일반적으로 letter-spacing: -1em; 사용
             */
             letter-spacing: -1em; 
             letter-spacing: -.25px;

        }
    </style>
</head>
<body>
    <!-- 
        텍스트 관련 속성
     -->

     <h1>Text CSS</h1>

     <p id="text1" class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!</p>

    <!-- 
        선택된 영역만 주석
        : Alt + Shift + A
    -->
     <p id="text2" class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!<!-- <img src="images/catty01.png"> -->Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!</p>

     <p id="text3" class="txt">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi, assumenda veniam voluptas quaerat vel repellat et, molestias esse pariatur ab saepe blanditiis! Dolore harum quibusdam, placeat exercitationem accusamus earum obcaecati!</p>
</body>
</html>

profile
모르면 괴롭고 알면 즐겁다.

0개의 댓글