이번에는 CSS를 이용한 링크 관련 설정에 대해서 알아보도록 하겠습니다.
:link Signifies unvisited hyperlinks.
:visited Signifies visited hyperlinks.
:hover Signifies an element that currently has the user's mouse pointer hovering over it.
:active Signifies an element on which the user is currently clicking.
이 링크관련 속성은 HTML문서의 헤더부분에 정의를 하시면 됩니다. 그리고 a:hover속성은 a:link 와 a:visited 다음에 와야 합니다. 그리고 a:active속성은 a:hover속성 다음에 와야 합니다.
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
# 참고로 아래 예제들은 네이버 블로그 특성상 스타일을 먹지 않고 있습니다. 개인적으로 html문서를 만들어서 테스트 해보시기를 권장합니다.
Following is the example which demonstrates how to set the link color. Possible value could be any color name in any valid format.
|
This will produce following black link:
| Black Link |
Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format.
|
This will produce following link. Once you will click this link, it will change its color to green.
| Click this link |
Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format.
|
This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow.
| Bring Mouse Here |
Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format.
|
This will produce following link. This will change it color to pink when user clicks it.
| Click This Link |
Reference : http://www.tutorialspoint.com/css/css_links.htm
| [CSS] 12. Borders ( 테두리, 보더 설정 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 11. Table ( 테이블 설정 ) (0) | 2016.06.12 |
| [CSS] 9. Image ( 이미지 관련 설정 ) (0) | 2016.06.12 |
| [CSS] 8. Text ( 텍스트 설정 ) (0) | 2016.06.12 |
| [CSS] 7. Fonts ( 폰트 설정 ) (0) | 2016.06.12 |
CSS를 HTML문서에서 사용하는 방법은 네가지가 있습니다. 그 중에서도 가장 많이 쓰이는 방법은 inline CSS와 External CSS.
<style> 요소를 이용해서 <head>...</head> 태그 내에 삽입하는 방법입니다.
|
<style> 태그 내의 속성과 값은 아래와 같습니다.
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This is required attribute. |
| media | screen tty tv projection handheld braille aural all |
Specifies the device the document will be displayed on. Default value is all. This is optional attribute. |
|
인라인 CSS는 그냥 html태그 안에다가 써넣는 것을 말합니다. 가장 일반적으로 이렇게 사용하죠. 그러다가 따로 분리해서 관리해야되는 스타일이 있다면 이 다음에 설명한 External CSS를 이용하시면 됩니다.
|
| Attribute | Value | Description |
|---|---|---|
| style | style rules | The value of style attribute is a combination of style declarations separated by semicolon (;). |
|
적용된 결과는 아래와 같습니다.
This is inline CSS |
<link> 요소를 이용하여 HTML 문서에 외부에서 정의된 CSS파일을 링크시킬 수가 있습니다.
간단한 문법을 한번 볼까요??
|
<link> 태그의 속성과 속성값들 입니다.
| Attribute | Value | Description |
|---|---|---|
| type | text/css | Specifies the style sheet language as a content-type (MIME type). This attribute is required. |
| href | URL | Specifies the style sheet file having Style rules. This attribute is a required. |
| media | screen tty tv projection handheld braille aural all |
Specifies the device the document will be displayed on. Default value is all. This is optional attribute. |
간단하게 mystyle.css 를 만들어 봅시다.
|
이제 mystyle.css파일을 HTML문서에 링크를 시켜볼까요??
|
@import 를 이용해서 <link> 요소처럼 스타일파일에 링크를 걸 수도 있습니다. 기본문법은 다음과 같습니다.
|
아래처럼 url()메소드를 이용할 수도 있습니다.
|
|
지금까지 CSS를 사용하는 네가지 방법에 대해서 알아보았습니다. 이 네가지 규칙이 동시에 적용이 된다면 어떤일이 벌어질까요??? 서로서로 오버라이딩을 하게 되는데 그 규칙을 한번 알아보도록 하겠습니다.
inline 스타일이 다른 방법보다 항상 최우선시 적용됩니다.
<style>...</style> 태그 내에 지정된 스타일들은 외부 CSS파일에 정의된 값들보다 우선권을 가집니다.
외부 CSS파일은 항상 최저우선권을 가집니다.
구버전 브라우저 중에는 CSS를 지원하지 않는 브라우저가 있고 이런 브라우저를 사용하는 사용자들이 있을 수도 있겠죠. 만약 그럴경우에는 CSS를 적용하지 않도록 할 수 있습니다. 아래처럼 <!-- 와 --> 로 감싸서 말이죠.
|
CSS에서 주석은 /* 주석처리 할 내용 */ 이렇게 쓰시면 됩니다. 여러 줄에 걸쳐도 관계 없습니다.
|
Reference : http://www.tutorialspoint.com/css/css_inclusion.htm
| [CSS] 6. Background ( 배경 설정 ) (0) | 2016.06.12 |
|---|---|
| [CSS] 5. Colors ( 색깔 ) (0) | 2016.06.12 |
| [CSS] 4. Units ( 단위 ) (0) | 2016.06.12 |
| [CSS] 2. Syntax ( 문법, 사용법 ) (0) | 2016.06.12 |
| [CSS] 1. CSS란 ? (0) | 2016.06.11 |
CentOS 6를 처음 설치하면 Open JDK가 기본적으로 설정되어있다. 하지만 개발자들이 쓰기에는 그닥 적합하지 않은것 같다. 이런저런 문제도 좀 있는것 같고. 그래서 찾아보다가 alternatives에 대해서 보게되었다.
[root@mycom ~]# alternatives 대체 버전 1.3.49.3 - Copyright (C) 2001 Red Hat, Inc. GNU Public License하에서 이 프로그램을 자유롭게 재배포 할 수 있습니다. 사용법: alternatives --install <링크> <이름> <경로> <우선순위> [--initscript <서비스>] [--slave <링크> <이름> <경로>]* alternatives --remove <이름> <경로> alternatives --auto <이름> alternatives --config <이름> alternatives --display <이름> alternatives --set <이름> <경로> 일반 옵션: --verbose --test --help --usage --version --altdir <디렉토리> --admindir <디렉토리> |
여기서 저 alternatives라는 실행파일의 실제경로는 /usr/sbin/alternatives 이다.
요놈이 무슨 일을 하느냐하면 링크를 생성하는데 이 링크의 대상이 되는 녀석들을 옵션으로 여러개를 저장을 해놓았다가 필요할 때 마다 바꿔가며 쓸 수 있다는 것이다.
그럼 지금 내 컴퓨터에는 java명령어와 연결되어있는 실행파일들이 몇개나 되는지 한번 볼까?
[root@mycom ~]$ /usr/sbin/alternatives --config java |
자, 이런식으로 선택할 수 있는 옵션이 나온다.
이제 선택옵션을 하나 더 추가해보자.
[root@Emerald ~]# alternatives --install /usr/bin/java java /usr/java/jdk1.6.0_45/bin/java 2 [root@Emerald ~]# alternatives --config java |
alternatives --install 명령을 이용하여 /usr/bin/java 링크에 /usr/java/jdk1.6.0_45/bin/java를 java라는 이름으로 연결을 시켰고 우선순위를 2로 주었다. 그리고 alternatives --config 명령을 이용해서 선택을 2번으로 변경했다.
이렇게 옵션으로 명령어의 링크를 관리할 수 있기 때문에 나름 유용한 팁이 아닐까 싶다.
더 자세한 내용은 구글링이나 man페이지를 읽어보시면 됩니다~~~
| [리눅스] 정규표현식을 이용한 파일 삭제 (0) | 2015.10.14 |
|---|---|
| TOP 명령어, 필드 정보 및 옵션 (0) | 2015.10.01 |
| 리눅스 서버의 플랫폼 확인하기 ( 32bit? 64bit ? ) (0) | 2015.06.09 |
| crond를 이용한 서버에서 원격지로 자동백업하기 (0) | 2015.04.20 |
| vim 명령어 ( vi commands ) (0) | 2015.04.20 |