본문 바로가기
HTML & CSS/CSS3

[CSS] TIL9 : 유사 선택자의 이용 / 내비게이션 바와 사이드 메뉴의 기본 스타일링

by charlie-lyc 2021. 5. 2.
728x90
반응형

▣ 유사 선택자(Pseudo selector)

CSS에서 선택 대상의 상태를 특정할 때 이용하는 일종의 키워드입니다. HTML 요소의 이름을 대상(유사 요소; Pseudo elements)으로 활용할 수 있고, 클래스 이름을 대상(유사 클래스; Pseudo classes)으로 할 수도 있습니다.

 

□ 앵커 태그(Anchor tag)와 유사 선택자

임의로 작성한 앵커 태그를 예시로 들어 관련된 속성과 유사 선택자들을 살펴보도록 하겠습니다.

 

<!DOCTYPE html>
<html lang="en">
<head>

  <title>Pseudo Selector / Anchor &amp; Button Styling</title>
  <style>
  
  </style>
  
</head>
<body>

  <br>
  <a class="btn" href="#">My Link</a>
  
</body>
</html>

 

 

▷ Text-decoration

 

<style>

  /* Anchor Tag Styling */
  a {
    text-decoration: none;
    color: #999;
  }

</style>

 

앵커 태그의 밑줄 설정은 'text-decoration' 속성과 관련이 있으며, 이 속성의 단축 문법을 이용하여 선의 색깔, 스타일, 두께 등을 설정할 수도 있습니다. 자세한 사항은 링크를 참조하기 바랍니다. 예시에서는 밑줄을 표시하지 않기 위해 'none'으로 설정하였습니다.

그리고 텍스트의 색깔이 파란색인 이유는 앵커 태그의 초기 설정 색상이기 때문이며, 예시에서는 색상 코드 '#999'를 이용하여 회색으로 설정하였습니다.

 

 

 

▷ 유사 선택자 이용

 

<style>

  /* Anchor Tag Styling */
  a {
    text-decoration: none;
    color: #999;
  }

  /* Using pseudo selectors */
  a:hover {
    color: orange;
    text-decoration: underline;
    cursor: progress;
  }

</style>

 

유사 선택자 ':hover'를 이용하여 앵커 태그 위에 마우스 포인터가 위치했을 때의 스타일을 별도로 설정할 수 있습니다. 위의 코드와 같이 설정하면, 마우스 포인터가 'My Link' 텍스트 위에 위치했을 때 텍스트의 색깔이 오렌지색으로  바뀌고 텍스트 아래에 밑줄이 생성되는 것을 확인할 수 있습니다.

그리고 스크린 샷에 찍히지는 않았지만 원래 마우스 포인터가 호버(Hover)인 상태에서 손가락으로 가리키는 모양으로 바뀌는데 이 것은 'cursor' 속성의 값이 'pointer'로 초기 설정되어 있기 때문이며, 예시에서는 'progress'로 설정하였습니다.

 

 

':hover' 이외에도 다양한 유사 선택자가 있으며 그중에 하나인 ':visited'는 방문했던 링크를 표시할 수 있습니다. 하지만 개인 정보 보호의 이유로 권장하지는 않습니다. 자세한 사항은 관련 링크를 참조하기 바랍니다. 

 

<style>

  /* Using pseudo selectors */
  a:visited {
    color: red;
  }

</style>

 

반응형

 

▣ 앵커 태그(Anchor tag)와 버튼 태그(Button tag)의 스타일링 실습

수 많은수많은 참조의 관계로 연결된 문서들의 집합체가 소위 말하는 웹에서의 하이퍼 링크(Hyper link)로 연결된 하이퍼 텍스트(Hyper text)입니다. 그리고 마우스 클릭을 통해 작동시키는 수많은 버튼들 중 대부분은 링크와 유사합니다.

이제까지 배운 내용들을 모두 이용해서 아래의 예시로 주어진 앵커 태그와 버튼 태그를 동일한 요소처럼 보이도록 스타일링을 해 보겠습니다.

 

 

아래는 예시로 작성한 스타일을 적용해 본 결과입니다.

 

예시를 참조로 활용하고 자신의 스타일로 완성해 보길 바랍니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Pseudo Selector / Anchor &amp; Button Styling</title>
  <style>
    /* Anchor and Button Styling */
    * {

      }
    .btn {

    }
    .btn:hover {

    }
  </style>
</head>
<body>
  <br>
  <a class="btn" href="#">My Link</a>
  <br>
  <br>
  <button class="btn">My Button</button>
</body>
</html>​

 

 

 

▣ 내비게이션 바(Navigation bar)와 사이드 메뉴(Side Menu)의 스타일링 실습

이제까지 배운 내용들을 모두 이용해서 아래의 예시로 주어진 내비게이션 바와 사이드 메뉴의 기본 스타일링을 해 보도록 하겠습니다. 

 

 

아래는 예시로 작성한 스타일을 적용해 본 결과입니다.

 

 

참고로, 주어진 내용이 정해진 박스의 크기 보다 많을 경우 스크롤을 활성화시키는 속성은 'overflow'입니다. 예시를 참조로 활용하고 자신의 스타일로 완성해 보길 바랍니다.

 

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Navigation Bar &amp; Side Menu</title>
  <style>
    * {

    }
    body {

    }
    /* Navigation Bar & Side Menu Styling */
    li {

    }
    a {

    }
    a:hover {

    }
    #navbar {

    }
    #navbar li {

    }
    #side-menu {

    }
    .block {

    }
  </style>
</head>
<body>
  <ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Technologies</a></li>
    <li><a href="#">Documents</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
    <ul id="side-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Technologies</a></li>
    <li><a href="#">Documents</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
  <div class="block">
    <h3>First Heading</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
  </div>
  <div class="block">
    <h3>Second Heading</h3>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. 
    Maiores, facere, minima reprehenderit est vitae tempora 
    aliquam ullam in rem quam ducimus, praesentium blanditiis 
    laudantium natus corrupti aspernatur nostrum animi similique.</p>
  </div>
</body>
</html>

 

 

 

728x90
반응형

'HTML & CSS > CSS3' 카테고리의 다른 글

[CSS] TIL8 : 위치(포지션) 설정 / 상대 위치와 절대 위치 설정  (1) 2021.05.02
[CSS] TIL7 : 박스의 최대폭과 텍스트 정렬 설정 / 부동(플로트) 요소와 클리어 설정  (0) 2021.05.01
[CSS] TIL6 : 테두리(보더)와 내부 여백(패딩) 및 외부 여백(마진) / 박스의 폭과 높이 그리고 박스 사이징  (0) 2021.04.30
[CSS] TIL5 : 배경(백그라운드) 설정  (0) 2021.04.29
[CSS] TIL4 : 박스 모델 / 크롬 웹 브라우저의 개발자 도구 이용 / 박스의 유형 및 설정  (0) 2021.04.29

관련글

댓글

티스토리툴바