2022.12.07 Wep3일차 HTML,CSS

2022. 12. 7. 17:06ㆍWep

class 선택자
class 속성은 일련의 태그를 그룹핑해서 하나처럼 제어하기 위해서 사용
class 속성에는 공백으로 구분된 여러개의 class가 표시될 수 있음
css선택자에서는 '.'을 사용해서 class 임을 표시

예제)class선택자 활용

<!DOCTYPE html>
<html>
  <head>
    <title>1207</title>
    <style>div {
        font-size: 70px;
        color: blue;
      }
      #a1 {
        color: red;
      }
      .red {
        font-size: 50px;
        color: yellow;
      }
      .intro {
        font-size: 70px;
        color: cornflowerblue;
      }
      </style>
  </head>
  <body>
    <!-- class 선택자 -->
    <div id="a1">11111</div>
    <div>22222</div>
    <div class="red">Hello Html</div>
    <p class="red intro">Hello Html</p>
    <br />
     </body>
</html>

출력

 

하위 선택자
특정 엘리먼트 하위에 나오는 엘리먼트를 사용하는데 사용
부모가 먼저 나오고 자식이 나중에 나옴
공백을 통해서 부모와 자식을 구분

예제)하위선택자 활용

<!DOCTYPE html>
<html>
  <head>
    <title>1207</title>
    <style>
    #navigation li a {
        color: gold;
        font-size: 30px;
      }
          </style>
  </head>
       <!-- 하위 선택자 -->
    <div id="navigation">
      <ul>
        <li>홈</li>
        <li><a href="http://www.icia.co.kr" target="_blank">제품소개</a></li>
        <li>고객센터</li>
      </ul>
    </div>
    <ul>
      <li>홈</li>
      <li>제품소개</li>
      <li>고객센터</li>
    </ul>
  </body>
</html>

출력


하나의 CSS선언을 여러 개의 선택자에 적용
하나의 css선언을 여러 엘리먼트 셀렉터에 적용하고 싶을 때 사용
선택자와 선택자를, (콤마)로 구분

예제) 다수선택자 활용

<!DOCTYPE html>
<html>
  <head>
    <title>1207_2</title>
    <style>
      h1,
      #link {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>하나의 CSS선언을 여러개의 선택자에 적용</h1>
    <a id="link" href="http://www/daum.net">잘됩니다</a>
  </body>
</html>

출력


스타일링 링크꾸미기

링크는 4가지의 상태를 가지고있고, 각 상태에 따라서 시각적으로 다른 모양을 가질수 있음

- 방문하지 않은 링크 : a:link{}
- 방문했던 링크 : a:visited{}
- 마우스를 오버한 링크 : a:hover{}            a:link 와 a:visited 뒤에 와야 함
- 마우스를 누른 상태의 링크 : a:active{}        a:hover 뒤에 와야함

예제)링크꾸미기 활용

<!DOCTYPE html>
<html>
  <head>
    <title>1207_3</title>
    <style>
      a:link {
        color: red;
      }
      a:visited {
        color: blue;
      }
      a:hover {
        color: green;
      }
      a:active {
        color: orange;
      }
    </style>
  </head>

  <body>
    <h1>
      <a href="http://www.imbc.co.kr" target="_blank" title="MBC"
        >모두 링크상태 체크</a
      >
    </h1>
  </body>
</html>

출력)

링크접속 전

링크접속 후

링크 마우스오버

링크 클릭

 

 

iframe


웹 페이지 안에서 다른 웹 페이지를 표시하고자 할 때 사용됨

 

예제)iframe활용

<!DOCTYPE html>
<html>
  <head>
    <title>iframe</title>
  </head>
  <body>
    <h1>iframe페이지적용</h1>
    <iframe src="http://www.daum.net" width="400" height="200"></iframe>
    <br />
  </body>
</html>

출력

'Wep' 카테고리의 다른 글

2022.12.14 Wep 6일차 JS(JS기초)  (0) 2022.12.14
2022.12.09 Wep5일차 HTML(text속성 선택자),CSS(box-shadow)  (0) 2022.12.09
2022.12.08 Wep4일차 HTML,CSS(input 추가요소)  (1) 2022.12.08
2022.12.06 Wep2일차 HTML,CSS  (0) 2022.12.06
2022.12.05 Wep1일차 비주얼 스튜디오 코드 설치,HTML  (1) 2022.12.05

관련글

티스토리툴바