링크 꾸미는 방법

1 선택자
2 예제

선택자

링크는 a 태그로 만듭니다. 따라서 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다.

a { color: red; }

가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다.

a:link - 방문하지 않은 링크
a:visited - 방문했던 링크
a:hover - 마우스가 올려진 링크
a:active - 클릭하는 순간 링크

주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 a:hover 뒤에 와야 한다는 것입니다. 따라서, 위 순서를 그대로 따르는 것이 좋습니다.

예제

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>CSS</title>
    <style>
      a:link { color: blue; text-decoration: none; }
      a:visited { color: purple; text-decoration: none; }
      a:hover { color: red; text-decoration: underline; }
      a:active { color: white; background-color: green; }
    </style>
  </head>
  <body>
    <h3>Navigation</h3>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </body>
</html>

방문하지 않은 링크의 색은 파란색이고 밑줄이 없습니다.

마우스 포인터를 링크 위에 올리면 글자색이 빨간색으로 변하고 밑줄이 생깁니다.

클릭하는 순간 글자색은 흰색으로, 배경은 녹색으로 변합니다.

클릭했던 링크는 보라색에 밑줄 없이 나옵니다.

CSS / Tutorial / 유튜브 동영상을 반응형으로 삽입하는 방법

유튜브 영상을 블로그나 홈페이지에 넣을 때 보통 iframe을 사용합니다. 코드는 유튜브 영상 공유에서 를 클릭하여 구할 수 있습니다. 아래와 같은 코드인데, 고정폭입니다. 즉 웹브라우저의 가로폭이 커지든 작아지든 가로폭이 일정합니다. <iframe width="560" height="315" src="https://www.youtube.com/embed/ybhXVSAdIRE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> 이를 반응형으로 만들고 싶다면 아래처럼 한다. 16:9 크기의 div로 감싸고, iframe에 style을 추가하여 ...

CSS / Tutorial / CSS를 HTML에 적용시키는 방법

HTML에 CSS를 적용시키는 방법은 세 가지가 있습니다. 각 방법은 장단점이 있으니 상황에 맞게 적절한 방법을 선택합니다. Inline Style Sheet HTML 태그의 style 속성에 CSS 코드를 넣습니다. Internal Style Sheet HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣습니다. Linking Style Sheet 별도의 CSS 파일을 만들고 HTML 문서와 연결합니다. 보통 여러 문서에 적용되는 스타일은 Linking Style Sheet으로 만들고, ...

CSS / Tutorial / 양쪽 배분(균등 분할) 정렬 방법

문단 정렬을 양끝으로 꽉차게 하는 경우가 있습니다. 한글에서는 배분 정렬, 워드에서는 균등 분할이라고 합니다. 일반적인 문단에서는 거의 사용하지 않고, 표에서 제목을 넣을 때 많이 사용합니다. 하지만 CSS에는 그러한 정렬이 없습니다. text-align 속성의 justify가 있지만, 그건 빈 공간을 늘려서 양 끝으로 맞추는 게 아닙니다. 간단한 예는 다음과 같습니다. <!doctype html> <html lang="ko"> <head> ...

CSS / Tutorial / 마름모 만드는 방법

CSS로 삼각형을 만들 수 있다면 마름모는 쉽게 만들 수 있습니다. 삼각형을 두 개 붙이면 마름모가 되기 때문입니다. 마름모는 네 변의 길이가 같은 사각형이므로, 이등변삼각형 두 개를 붙이며 됩니다. HTML 문서에 다음과 같이 내용이 없는 요소를 하나 넣습니다. <div class="rhombus"></div> 크기를 0으로 한 후, border 속성을 이용하여 이등변삼각형을 만듭니다. position: relative;는 나머지 반쪽의 위치를 잡기 ...

CSS / Tutorial / 구분선 만드는 방법

글의 완급 조절, 내용 전환 등을 위해 구분선을 사용하는 경우가 많습니다. 선은 여러 가지 방식으로 만들 수 있는데, 보기 좋게 꾸미는 것은 CSS로 합니다. 아래는 div 태그에 모양을 입혀서 구분선을 만드는 몇 가지 예제입니다. 예제 문서 <div class="jb-division-line"></div>를 꾸며서 구분선을 만들 것입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

CSS / Tutorial / 원 또는 타원 만드는 방법

CSS의 border-radius 속성으로 원 또는 타원을 만들 수 있습니다. 원 만들기 HTML 문서에 다음과 같이 내용이 없는 요소를 하나 만듭니다. <div class="circle"></div> 적절히 크기를 정하여 정사각형을 만들고, 배경색을 넣습니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>CSS</title> <style> .circle { ...

CSS / Tutorial / 문자열 자르는 방법

웹페이지에 출력하는 문자열의 길이는 서버단에서 조절하는 게 보통입니다. 하지만, 어떤 경우에는 그게 불가능할 수 있습니다. 이미 전송 받은 문자열을 잘라야 하는 상황이 생길 수 있습니다. CSS를 이용하여 문자열의 일부만 보여주는 방법을 소개해드립니다.

CSS / Tutorial / 링크 꾸미는 방법

선택자 링크는 a 태그로 만듭니다. 따라서 a 태그를 선택하여 꾸밉니다. 예를 들어 다음은 링크의 색을 빨간색으로 만듭니다. a { color: red; } 가상 클래스를 이용하면 좀 더 다양하게 꾸밀 수 있습니다. a:link - 방문하지 않은 링크 a:visited - 방문했던 링크 a:hover - 마우스가 올려진 링크 a:active - 클릭하는 순간 링크 주의할 점은 a:hover는 a:link와 a:visited 뒤에 와야 하고, a:active는 ...

CSS / Tutorial / 변수 사용하는 방법

CSS에 변수를 만들고 사용할 수 있습니다. 변수를 이용하면 여러 값을 한 번에 변경할 수 있습니다. 변수를 정의하면, 변수를 정의한 요소와 그 하위 요소에서 그 변수를 사용할 수 있습니다. 만약 어느 곳에서나 사용할 수 있게 하려면 :root에 정의합니다.

CSS / Tutorial / 상속(inheritance)

상속(inheritance) CSS 속성은 상속하는 속성과 상속하지 않는 속성이 있습니다. 상속하는 속성은 자식 요소에 영향을 미칩니다. 상속하지 않는 속성은 자식 요소에 영향을 미치지 않습니다. 예를 들어 color는 상속하는 속성입니다. 부모 요소에서 정한 색이 자식 요소에도 적용됩니다. 예를 들어 padding은 상속하지 않는 속성입니다. 부모 요소에서 padding을 정의해도 자식 요소에 적용되지 않습니다. 예제 color는 상속하는 속성이므로 자식 요소의 ...