HTML5 기초 실습4

CSS(Cascading Style Sheet) Version3

형식	선택자 {     속성1 : 값1;     속성2 : 값2;     ... }

    ▶ html의 <style> 태그에 작성

<h1>Lorem Ipsum</h1>
<p>
    What is Lorem Ipsum?<br>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
    when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
    It has survived not only five centuries, but also the leap into electronic typesetting,<br>
    remaining essentially unchanged.<br>
    It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br>
    and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
</p>
<h1>Lorem Ipsum2</h1>
<h2>소제목</h2>

<style>
    h1{
        color: rgba(126, 91, 255, 0.788);
        padding: 20px;
    }
    h2{
        color: rgba(157, 130, 252, 0.788);
        padding: 20px;
    }
    p{
        color: rgba(208, 195, 255, 0.918);
        padding: 20px;
    }
    h1,h2,p{
        background-color: rgb(29, 0, 56);
    }
</style>

스타일(Style) 적용 방법

    1. 인라인 스타일 : 각 태그에서 style 속성 설정.

    2. 내부 스타일 : style 태그에 설정

    3. 외부 스타일 : css 파일을 생성하여 설정.

 

    스타일 적용 우선순위

        ▶ 인라인 스타일 > 내부 스타일 > 외부 스타일 > 브라우저 기본 스타일

<!-- 1. 인라인 스타일 -->
<p1 style="color : rgb(255, 101, 132)">인라인 스타일 적용</p1><br>
<!-- 2. 내부 스타일  -->
<p2>내부 스타일 적용</p2> <br>
<!-- 3. 외부 스타일 -->
<p3>외부 스타일 적용</p3> <br>
<p4>또 다른 외부 스타일 적용</p4>

- 인라인 스타일 -

- 내부 스타일 -

<style type="text/css">
    /* 2. 내부 스타일 */
    p2{
        color: rgb(100, 82, 255);
    }

    p1{
        color: #fcc889;
    }
</style>

 

- 외부 스타일 - 

@charset "utf-8";

p3{
    color: rgb(163, 255, 224);
    background-color: rgb(97, 194, 0);
}

p1{
    color: rgb(204, 204, 10);
    background-color: rgba(206, 255, 71, 0.952);
}

 

기본 선택자(Selector)

전체 선택자(*)	모든 태그(요소)를 선택
태그 선택자	지정한 태그를 선택
클래스 선택자(.)	태그의 class 속성을 선택
아이디 선택자(#)	태그의 id 속성을 선택
속성 선택자	태그의 특정 속성과 속성의 값으로 선택.

<h2>클래스 선택자</h2>
<h3 class="c1">class가 c1인 h3요소</h3>
<p class="c1">
    class가 c1인 p요소
</p>
    
<h3 class="c2">class가 c2인 h3요소</h3>
<p class="c2">
    class가 c2인 p요소
</p>

<h2 class="c1">class가 c1인 h2요소</h2>
<h2>그냥 h2 요소</h2>
<p>그냥 p인 요소</p>

<style type="text/css">
    /* 3. 클래스 선택자 스타일 */
    .c1{
        color: #d8ff49;
        background-color: darkseagreen;
    }
    .c2{
        color: #81eff7fa;
        background-color: rgb(91, 138, 226);
    }
</style>

<!-- 4. 아이디 선택자 -->
<h2>아이디 선택자</h2>
<h3 id="id1">id가 id1인 h3 요소</h3>
<p id="id1">
    id가 id1인 p 요소
</p>
<h3 id="id2">id가 id2인 h3 요소</h3>
<p id="id2">
    id가 id2인 p 요소
</p>
<h2 id="id1">id가 id1인 h2요소</h2>
<h2>그냥 h2 요소</h2>

<style type="text/css">
    /* 4. 아이디 선택자 스타일 */
    #id1{
        color: #fef7ff;
        background-color: rgb(255, 129, 56);
    }
    #id2{
        color: rgb(253, 211, 216);
        background-color: rgb(118, 48, 197);
    }
    h2#id1{
        color: rgb(9, 110, 226);
        background-color: rgb(217, 250, 246);
    }
</style>

<!-- 5. 속성 선택자 -->
<h3 text="attr1">text 속성(attr1)이 부여된 h3요소</h3>
<h3 text="attr2">text 속성(attr2)이 부여된 h3요소</h3>
<p text="attr3">text 속성(attr3)이 부여된 p요소</p>
<h3 text="attr3">text 속성(attr3)이 부여된 h3요소</h3>

<style type="text/css">
    /* 5. 속성 선택자 스타일 */
    h3[text]{
        color: deepskyblue;
        background-color: rgb(54, 54, 54);
    }
    p[text]{
        color : rgb(54, 54, 54);
        background-color: deepskyblue;
    }
    h3[text="attr3"]{
        color: rgb(109, 182, 0);
        background-color: rgb(255, 242, 123);
    }
</style>

<p>속성 없는 요소</p>
<fieldset>
    <legend>로그인</legend>
    <form action="">
        ID : 
        <input type="text" name="id" id=""> <br>
        Password :
        <input type="password" name="pw" id=""><br>
        <input type="submit" name="" value="로그인" id="">

    </form>
</fieldset>

<style type="text/css">
    /* 속성 없는 선택자 스타일 */
    input[type="text"]{
        color: rgb(63, 63, 253);
        background-color: rgb(232, 255, 255);
    }
    input[type="password"]{
        color: rgb(109, 153, 6);
        background-color: #f2ffe8;
    }
</style>

속성 선택자

[속성]	속성의 값과 상관없이 해당 속성 모두 선택
[속성="값"]	속성의 값에 해당하는 태그 선택
[속성~="값"]	공백으로 구분한 속성 값들 중 하나가 주어진 값과 동일한 태그
[속성|="값"]	속성 값이 해당 값과 동일하거나, 주어진 값으로 시작하고 '-'로 이어진 값을 갖는 태그
[속성^="값"]	속성 값이 주어진 값으로 시작하는 태그 선택
[속성$="값"]	속성 값이 주어진 값으로 끝나는 태그 선택
[속성*="값"]	속성 값이 주어진 값을 부분 문자열로 갖는 태그

<p text="hello">일반 속성 선택자</p>
<p text="red">속성값이 같은 태그 선택자</p>
<p text="aa bb cc">~에 해당하는 선택자</p>
<p text="a1-a2-a3">|에 해당하는 선택자</p>
<p text="img/pic.jpg">^에 해당하는 선택자</p>
<p text="img/pic.png">$에 해당하는 선택자</p>
<p text="HongGilDong">*에 해당하는 선택자</p>

<style type="text/css">
    p{
        padding: 10px;
    }
    /* 일반 속성 선택자 */
    p[text] {
        color: rgb(250, 118, 138);
    }
    p[text="red"] {
        color: lightseagreen;
        background-color: rgb(228, 240, 239);
    }
    p[text~="bb"]{
        color: rgb(157, 23, 247);
        background-color: rgb(197, 255, 197);
    }
    p[text|="a1"]{
        color: rgb(157, 23, 247);
        background-color: rgb(197, 222, 255);
    }
    p[text^="img"]{
        color: rgb(115, 245, 158);
        background-color: rgb(247, 84, 198);
    }
    p[text$="png"]{
        color: rgb(241, 238, 41);
        background-color: rgb(128, 142, 161);
    }
    p[text*="ong"]{
        color: rgb(47, 61, 255);
        background-color: rgb(247, 255, 139);
    }
</style>

반응 선택자

    - 이벤트에따라 적용되는 스타일

    - 마우스의 동작에따라 다른 스타일을 적용

<h1>클릭하세요</h1>

<div id="sp1">
    div 공간입니다.
</div>

<style type="text/css">
    h1:hover{
        color:rgb(255, 159, 255)
    }
    h1:active{
        color: rgb(8, 206, 206);
    }
    div#sp1{
        width: 100px;
        height: 100px;
        padding: 10px;
        border: 1px solid rgb(215, 255, 206);
    }
    div#sp1:hover{
        background-color: yellowgreen;
    }
    div#sp1:active{
        color: white;
        background-color: rgb(98, 143, 9);
    }
</style>

상태 선택자

    - 태그의 상태에따라 적용되는 스타일  

checked	체크 박스의 체크 상태에따라 스타일 적용
focus	입력 양식이 포커스를 가지게되면 스타일 적용
enabled	사용 가능한 입력 양식에 적용
disabled	사용 불가능한 입력 양싟에 적용

<input type="text" name="" id=""><br>
<input type="checkbox" name="" id="">보이기/숨기기
<div>
    <h2>Lorem Ipsum</h2>
    <p>
        What is Lorem Ipsum?<br>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
        when an unknown printer took a galley of type and scrambled it to make a type specimen book.<br>
        It has survived not only five centuries, but also the leap into electronic typesetting,<br>
        remaining essentially unchanged.<br>
        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,<br>
        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>
    </p>
</div>

<style type="text/css">
    /* 상태 선택자 스타일 */
    input:focus{
        color: rgb(255, 60, 109);
        background-color: #fff3ff;
    }
    input + div{
        /* overflow:hidden > 박스의 사이즈보다 내용물이 크면 숨긴다. */
        overflow :hidden;
        transition-duration: 1s;
        width: 300px;
        height: 300px;
    }
    input[type="checkbox"]:checked + div{
        height: 0;
    }    
</style>

구조 선택자

    - 특정한 위치에 있는 태그를 선택 할 때 사용.

frirst-child	첫 번재 자손을 선택한다.
last-child	마지막 자손을 선택한다.
nth-child(수열)	수열번째에 해당하는 자손을 선택한다.

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
    <li>Sixth</li>
    <li>Seventh</li>
</ul>

<style>
    ul{
        overflow: hidden;
    }
    ul li{
        color: rgb(72, 23, 209);
        list-style: none;
        float: left;
        padding: 20px;

    }
    li:first-child{
        border-radius: 10px 0 0 10px ;
    }
    li:last-child{
        border-radius: 0 10px 10px 0 ;
    }
    li:nth-child(2n){
        background-color: rgb(252, 255, 206);
    }
    li:nth-child(2n-1){
        background-color: rgb(216, 255, 206);
    }

    li:hover{
        font-weight: bold;
        cursor: pointer;
    }
</style>