written by yechoi

[html/css] html에 css 적용하기 본문

Born 2 Code/Web

[html/css] html에 css 적용하기

yechoi 2020. 7. 3. 14:13
반응형

html에 css 파일 적용

css 파일을 html에 적용하려면, html 헤드에 관련 링크를 삽입해야 한다.

<head> 
	<link 
    href="style.css" 
    type="text/css" 
    rel="stylesheet"> 
    <title>Vacation World</title> 
 </head>

 

태그별 스타일 적용

p { 
  font-family: Arial;
}

모든 문단의 폰트가 arial이 됨

클래스별 스타일 적용

css파일에서는 클래스 별로 스타일을 적용할 수 있다. 형식은

.CLASS_NAME {
  STYLE : CONTENT;
}

신기한 점은 클래스 안에서 공백으로 구분하면 서로 다른 스타일을 적용할 수 있다.

예컨대 index.html에서에

<h1 class="title uppercase">Top Vacation Spots</h1>

이런 요소가 있다고 하면, css의 title과 uppercase의 스타일이 모두 적용된다.

.title {
  color: teal; 
}

.uppercase {
  text-transform: uppercase;
}

 

ID 별 스타일 적용

html 요소가 클래스과 관계없이 독자적으로 스타일을 적용받고 싶다면, 요소에 아이디를 부여한 뒤 스타일을 적용할 수 있다.

형식은 #를 사용해서 구분한다.

#ID_NAME{
  STYLE : CONTENT;
}

만약 아래 경우처럼 class와 id 모두 지닌 상태에서, 두 가지의 스타일이 다른 경우라면(uppercase의 uppercase와 article-title의 captalize가 상충됨) ID 스타일이 우선순위를 차지한다.

<h1 class="title uppercase" id="article-title">Top Vacation Spots</h1> 
.title {
  color: teal;
 } 
 
.uppercase {
  text-transform: uppercase;
}

#article-title {
  font-family: cursive;
  text-transform: capitalize;
}

h1은 "TOP VACATION SPOTS"가 아니라 "Top Vacation Spots"가 된다는 것.

p.s 스타일 적용 우선 순위

Id > Class > Tag 순으로 우선순위가 매겨진다.

스타일을 편집하기 쉽게 만드려면, 가능하면 우선순위가 낮은 요소에 스타일을 적용하는 게 좋다. Class에 적용하면 될 것을 Id에 적용하지 말라는 뜻.

 

한 태그의 특정 클래스에만 적용하기

한 태그의 특정한 클래스에만 스타일을 적용하려면, 이런 식으로 쓰면 된다.

TAG_NAME.CLASS_NAME {
  STYLE : CONTENT;
}

 

한 클래스의 스타일을 특정 태그에 적용하기

한 클래스의 스타일을 특정한 태그에 적용하려면 이런 식으로 쓰면 된다.

.CLASS_NAME TAG_NAME{
  STYLE : CONTENT;
}

이때 태그별로 이미 적용된 스타일이 있다면, 클래스 내 태그에 적용한 스타일이 우선순위가 된다. 아래 코드에서 h5의 색상은 teal이 되는 것.

h5 {
  color: rebeccapurple;
}

.description h5 {
  color: teal;
}


한 스타일을 태그, 클래스에 동시 적용하기

서로 다른 태그와 클래스에 같은 스타일을 적용한다고 하면, 이를 두번이나 나눠 쓰는 일은 비효율적. 아래와 같은 방식으로 같은 스타일을 동시 적용할 수 있다.

TAG_NAME, .CLASS_NAME {
  STYLE : CONTENT;
}


스타일 적용 최우선 순위 !important

ID보다 구체적으로 스타일을 적용하는 방법은 !important를 쓰는 것. !important로 적용된 것 외에 다른 스타일들은 모두 무시하기 때문에, 한번 !important가 사용되면 덮어쓰기가 쉽지 않다. 그러므로 가급적 사용하지 않는 게 좋다.

p 
{ 
  color: blue !important; 
} 

.main p { 
  color: red;
}

원래는 p보다 .main p가 우선순위여서 문단의 색상은 빨강색이어야 하지만, p의 color에 !important가 붙어있으므로 파란색으로 보여진다.

반응형
저작자표시 비영리 변경금지
'Born 2 Code/Web' Related Articles more