ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • day37_1 - JavaScript(CSS 선택자, tag, id, class, border, padding, margin)
      KIC/JavaScript,CSS 2021. 8. 5. 12:26
      반응형

       

       

      [CSS 선택자]

       

      [태그 선택자]

      -> 태그의 영역을 선택하고 이후에 오는 CSS 명령을 해당 영역에 적용한다.

          -> p

       

      [id 선택자]

      -> 웹 페이지에서 유일무이한 단 하나의 특정 영역을 지정하여 CSS 명령을 적용시킨다.

       

      -> id명 앞에 #을 붙인다.

       

      [클래스 선택자]

      -> 두 군데 이상의 특정 영역을 지정하여 동일한 CSS 를 적용할 수 있다.

       

      -> 클래스 명 앞에 . 을 붙여야 한다.

       

       

       

       

       

      [selector 우선 순위]

      -> id selector와 class selector가 같은 태그에 동시에 선언되었다면 id를 적용시킨다.  (class 는 적용되지 않는다.)

       

      -> selector의 우선순위는 id > class > 태그 > * 이다.

       

       

       

       

      [ex]

      (저는 vscode 환경에서 수행하다 보니 <meta charset='utf-8'>를 생략하였습니다.)

      <!DOCTYPE html>
<html>

<head>
    <style>
        p {
            font-size: 14px;
            line-height: 180%;
        }

        #fly {
            color: red;
            font-weight: bold;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <h3>잠자리란?</h3>
    <p><span class="blue" , id='fly'>잠자리</span>는 잠자리목에 속하는 곤충으로 전 세계적으로 분포하는 포식성 곤충이며 여러 가지 해충을 잡아먹는 유익한 곤충입니다.</p>

    <p>앞머리에 커다란 <span class='blue'>한 쌍의 겹눈</span>을 가지고 있습니다. 또한 <span class='blue'>날카로운 턱</span>을 가지고 있으며 이빨이 튼튼합니다. 파리,
        모기, 나비 등의 살아있는 곤충을 잡아먹고 삽니다.</p>
    <p class="blue"> test1</p>
    <p id="fly"> test2</p>
</body>

</html>

      [결과]

       

       

       

      [tag-selector  ex]

      <!DOCTYPE html>
<html>

<head>
    <style>
        body {
            font-family: '돋움';
        }

        h3 {
            font-family: '맑은고딕';
            color: blue;
        }

        p {
            font-size: 14px;
            line-height: 150%;
        }

        li {
            list-style-type: square;
            font-size: 16px;
        }

        span {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h3> - 배낭여행이란?</h3>
    <p>여권, 항공권 등 여행 시 필요한 것만을 준비하고 현지에서 숙박, 식사 등을 해결하는 자유여행을 말합니다.</p>

    <h3>- 배낭여행의 종류</h3>
    <p>배낭여행에는 모든 일정을 자신이 정하는 자유 배낭, 여러 명이 같이 출발 전 숙소와 교통편 등을 미리 예약하고 여행하는 단체 배낭, 자유 배낭과 단체 배낭의 중간 형태인 패키지 배낭여행 등이 있습니다.
    </p>

    <h3>- 배낭여행 준비</h3>
    <ul>
        <li><span>여권 준비</span> : 여권이 없으면 신청하고 여권 유효기간을 반드시 체크.</li>
        <li><span>비행기 예약</span> : 항공사의 예매 사이트나 예약 대행 사이트 이용.</li>
        <li><span>여행 스케줄</span> : 스케줄은 가능한 세부적으로 잘 짜야 함.</li>
        <li><span>짐싸기</span> : 꼭 필요한 물품만으로 최대한 간단하게 짐 준비.</li>
    </ul>
</body>

</html>

      [결과]

       

       

      [id-selector  ex]

      <!DOCTYPE html>
<html>

<head>
    <!-- <meta charset='utf-8'> -->
    <style>
        p {
            color: gray;
        }

        #p1 {
            color: blue;
        }

        #p2 {
            color: green;
        }
    </style>
</head>

<body>
    <p id='p1'>안녕하세요.</p>
    <p id='p2'>반갑습니다.</p>
    <p>또 만났군요.</p>
    <p>자주 만나네요!</p>
</body>

</html>

      [결과]

       

       

      [class-selector ex]

      <!DOCTYPE html>
<html>

<head>
    <!-- <meta charset='utf-8'> -->
    <style>
        .green {
            color: green;
            font-weight: bold;
        }

        .blue {
            color: blue;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>쇼핑뉴스</h2>
    <ul>
        <li><span class='green'>루바토</span> 봄맞이 세트상품 65%↓ 한정 판매!</li>
        <li><span class='green'>라리아네</span> 봄나들이 여성룩 최대 50% 할인!</li>
        <li><span class='green'>우리마트</span> 우수 농특산물 직거래 장터</li>
        <li><span class='blue'>우리몰</span> 소상공인과 함께하는 경제적인 아이템</li>
        <li><span class='blue'>골드스타</span> 14K 금값 폭락! 최대 35% 할인!</li>
    </ul>
</body>

</html>

      [결과]

       

       

       

       

      [박스 모델]

       

      [padding ex]

      <!DOCTYPE html>
<html>

<head>
	<!-- <meta charset='utf-8'> -->
	<style>
		p {
			width: 500px;
			border: solid 2px black;
		}

		#padding1 {
			padding: 20px;
		}

		#padding2 {
			padding-top: 20px;
			padding-right: 30px;
			padding-bottom: 40px;
			padding-left: 50px;
			/* padding: 20px 30px 40px 50px; */
		}
	</style>
</head>

<body>
	<h3>서울동물원 소개</h3>
	<p id='padding1'>서울동물원은 동·식물원 2,420천m² 내 29개 동물사 332종 2,700수를 통하여 동물원의 기능인 전시, 보전, 교육, 연구에 힘쓰고 있습니다.</p>
	<p id='padding2'>서울동물원은 동·식물원 2,420천m² 내 29개 동물사 332종 2,700수를 통하여 동물원의 기능인 전시, 보전, 교육, 연구에 힘쓰고 있습니다.</p>
</body>

</html>

      [결과]

       

       

      [schedule ex]

      <!DOCTYPE html>
<html>

<head>
    <!-- <meta charset='utf-8'> -->
    <style>
        body {
            font-family: '돋움';
            color: #444444;
        }

        h3 {
            border-left: solid 5px green;
            padding-left: 10px;
        }

        div {
            width: 610px;
            text-align: right;
        }

        table,
        td {
            border: solid 1px #aaaaaa;
        }

        table {
            border-collapse: collapse;
        }

        table {
            width: 610px;
            font-size: 12px;
            border-top: solid 2px #aaaaaa;
            margin-top: 15px;

        }

        tr {
            height: 60px;
            vertical-align: top;
        }

        td {
            width: 76px;
            padding: 5px;
        }

        #day {
            height: 20px;
            background-color: #f8f9f2;
            text-align: center;
            font-weight: bold;
        }

        .red {
            color: red;
        }

        .blue {
            color: blue;
        }
    </style>
</head>

<body>
    <h3>나의 일정</h3>
    <div>◀ 2020년 7월 ▶</div>
    <table>
        <tr id='day'>
            <td><span class='red'>일</span></td>
            <td>월</td>
            <td>화</td>
            <td>수</td>
            <td>목</td>
            <td>금</td>
            <td><span class='blue'>토</span></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
            <td><span class='blue'>5</span></td>
        </tr>
        <tr>
            <td><span class='red'>6</span></td>
            <td>7</td>
            <td>8</td>
            <td>9</td>
            <td>10</td>
            <td>11</td>
            <td><span class='blue'>12</span></td>
        </tr>
        <tr>
            <td><span class='red'>13</span></td>
            <td>14<br>기말고사</td>
            <td>15<br>기말고사</td>
            <td>16<br>기말고사</td>
            <td>17<br>기말고사</td>
            <td>18<br></td>
            <td><span class='blue'>19</span></td>
        </tr>
        <tr>
            <td><span class='red'>20</span></td>
            <td>21<br>하계방학</td>
            <td>22</td>
            <td>23</td>
            <td>24</td>
            <td>25</td>
            <td><span class='blue'>26</span></td>
        </tr>
        <tr>
            <td><span class='red'>27</span></td>
            <td>28</td>
            <td>29<br>연수</td>
            <td>30<br>연수</td>
            <td>31</td>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>

</html>
      300x250

      'KIC > JavaScript,CSS' 카테고리의 다른 글

      VScode - 급작스러운 JavaScrip 404 에러  (0) 2021.08.10
      day39 - JavaScript(function, scope, 객체)  (0) 2021.08.10
      day38 - JavaScript(prompt, for문, while, 이중 for문, function, array, parameter, callback)  (0) 2021.08.06
      day37_2 - JavaScript(alert, let, prompt, 자료 형변환, if문)  (0) 2021.08.05
      day36 - JavaScript(HTML, CSS, <!DOCTYPE html>, <h1>, image, <table> )  (0) 2021.08.04

      관련글 관련글 더보기

      댓글

    Designed by Tistory.

    티스토리툴바