HTML - 색 배경 링크

색

HTML에서 색을 표현하는 방법에는 3가지가 있다. 

1. 색상 이름으로 표현
2. RGB 색상값으로 표현
3. 16진수 색상 값으로 표현

 

색상 이름으로 표현 할 때는 W3C에서 정의한 16개의 HTML 표준 색상 이름을 사용한다.

-> aqua , blue, gray, lime, navy, purple, silver, white, black, fuchsia, green, maroon, olive, red, teal, yellow 

 

HTML에서 색상을 사용하는 방법에는 여러 가지가 있다. 스타일 속성을 사용하여 특정 요소에 색상을 적용하거나, CSS 파일에서 클래스 또는 ID 선택자와 함께 색상을 지정할 수 있다다. 또한, 색상 선택기(Color Picker) 도구를 사용하여 원하는 색상을 선택할 수도 있다다.

 

더 많은 HTML 색상 코드에 대한 정보를 알고 싶다면, https://html-color.codes와 https://htmlcolorcodes.com 를 참조하기를 바란다. 또한, https://www.w3schools.com/colors/colors_picker.asp 에서는 W3Schools의 HTML 색상 선택기를 확인할 수 있다.

 

코드 예시를 보자면

 

<h1 style="background-color: DodgerBlue;">Hello World</h1> 

위 방식은 미리 정의된 색상 이름을 이용한 방식이다.

 

<div style="color: rgb(255, 0, 0);">빨간색</div>

 

위 방식은 RGB 값을 이용한 방식

 

<div style="color: #FF0000;">빨간색</div>

 

위 방식은 HEX 값을 이용한 방식이다.

 

배경(BackGround)

HTML 문서의 기본 배경은 흰색으로 설정되어 있다. 또한 요소들도 각자 자신만의 배경을 가지고 있는데 이 배경을 변경할 수 있는 방법에는 2가지가 있다.

 

1. 다른 색으로 변경
2. 다른 이미지로 변경

 

배경색을 다른 색으로 변경하는 방법에는 CSS을 이용하는 방법이 있다. CSS를 이용하는 방법은 추후에 다시 다루겠다.

 

배경을 다른 이미지로 변경 하는 방법은 background 속성을 이용하는 방법이다.

 

1.  HTML 요소에 배경 이미지 추가하기

<p style="background-image: url('img_girl.jpg');">

1. <style> 요소에서 배경 이미지 지정하기

<style>

  p {

    background-image: url('img_girl.jpg');

  }

</style>

1. 전체 페이지에 배경 이미지 추가하기

 

<style>

  body {

    background-image: url('img_girl.jpg');

  }

</style>

 

img_girl.jpg에는 파일이 들어있는 경로가 들어간다.

링크(Link)

HTML에서 링크는 하이퍼 링크를 뜻하며 <a> 태그로 표현한다.

 

<a href="URL">링크 텍스트</a>

 

<a> 태그는 위 처럼 사용하고 ‘href’ 속성은 링크의 대상을 나타낸다. 링크 텍스트 부분은 해당 링크의 URL이 보이는게 아니라 해당 링크를 보는 사람에게 이 링크에대한 명칭을 정하는 부분이다. W3Schools.com으로 링크를 만들면 다음과 같이 나온다

W3Schools.com 방문하기!

링크의 상태는 4가지로 구분할 수 있다

• link : 아직 한 번도 방문한 적이 없는 상태(기본)
• visted : 한 번이라도 방문한 적이 있는 상태
• hover : 링크 위에 마우스를 올려놓은 상태
• active : 링크를 마우스로 누르고 있는 상태태

또한 기본적으로, 모든 브라우저에서 링크는 다음과 같이 표기한다.

• 방문하지 않은 링크는 밑줄이 있는 파란색이다
• 방문한 링크는 밑줄이 있는 보라색이다
• 활성 링크는 밑줄이 있는 빨간색이다.

 

링크의 대상을 변경하려면 ‘target’ 속성을 지정해 주어야 한다. ‘target’ 속성에는 다음과 같은 값이 들어갈 수  있다.

• _self : 기본값으로 , 클릭한 창 또는 탭에서 문서가 열린다.
• _blank : 새 창이나 탭에서 문서가 열린다
• _parent : 부모 프레임에서 문서가 열린다
• _top : 창의 전체 본문에서 문서가 열린다

 

예시는 다음과 같다

W3Schools 방문하기!

 

링크의 대상 주소는 절대 URL 과 상대 URL을 지정할 수 있다. 

 

절대 URL

W3C

Google

상대 URL

<p><a href="html_images.asp">HTML 이미지</a></p>

<p><a href="/css/default.asp">CSS 튜토리얼</a></p>

 

또한 링크에 이메일 주소를 넣을 수 있는데 다음과 같이 하면 된다.

 

<a href="mailto:someone@example.com">이메일 보내기</a>

몇몇 링크 예시가 폰트로 들어가지 않아서 캡쳐로 가져왔다.