[ 스타일의 상속 관계 ]


웹 문서에서 사용하는 태그들은 상속의 개념이 적용된다. 그래서 부모 요소와 자식 요소가 존재한다.

예를 들어 <ul><li>목록1</li><li>목록2</li></ul> 형태가 있을 때 ul은 li의 부모 요소이고 li는 ul의 자식요소이다.

그리고 부모 요소에 있는 속성들이 자식 요소로 이어지는데 이것이 바로 '상속'이다.


상속의 예로는 body에 배경색을 넣으면 자식 요소인 <h2>와 <p> 등에도 같은 배경색이 적용된다.


그리고 스타일은 단계적으로 적용되기 때문에


p{color:red;}

p{color:blue;}


처럼 같은 태그에 다른 스타일이 적용되면 마지막으로 정의된 스타일을 적용한다. 위 소스에서는 글자색에 'blue' 가 적용된다.


선택자는 여러가지가 있다. 선택자(selector)란, 속성이 어디에 적용되는지 표시하는 것이다.


 명칭

 선택자

 설명

 전체 선택자

 * {속성:속성 값;}

 페이지에 있는 모든 요소를 대상으로 스타일을 적용한다. 

 태그 선택자

 태그 {속성:속성 값;}

 특정 태그에 스타일을 적용한다.

 클래스 선택자

 .클래스이름 {속성:속성 값;} 

 특정 클래스에 스타일을 적용한다.

 id선택자 

 #id이름 {속성:속성 값;}

 특정 id에 스타일을 적용한다.

 하위 선택자 

 상위요소 하위요소 {속성:속성 값;} 

 모든 하위 요소에 스타일을 적용한다. 

 자식 선택자

 부모요소 > 자식요소 {속성:속성 값;} 

 자식 요소에만 스타일을 적용한다. 

 인접 형제 선택자 

 요소1 + 요소2 {속성:속성 값;} 

 첫 번째 동생 요소에 스타일을 적용한다. 

 형제 선택자  

 요소1 ~ 요소2 {속성:속성 값;} 

 형제 요소에 스타일을 적용한다. 

 그룹 선택자 

 요소1,요소2 {속성:속성 값;} 

 여러 요소들에 한번에 묶어서 스타일을 적용한다. 

[ 선택자(selector) ]



 하위 선택자 

  자식 선택자  

 인접 형제 선택자

 형제 선택자 

 section ul {속성:속성 값;} 

 section > ul {속성:속성 값;}

 h1 + p {속성:속성 값;}

 h1 ~ p {속성:속성 값;}

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<p></p>

<ul>

<li>

<ul></ul>

</li>

<li>

<ul></ul>

</li>

</ul>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

<body>

<section>

<h1></h1>

<p></p>

<p></p>

<p></p>

</section>

</body>

[ 헷갈리기 쉬운 선택자들 ]




저작자표시

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

11가지 한글 구글 폰트  (0) 2017.09.30
CSS 속성 선택자, 가상 클래스 종류,정리,요약하기  (0) 2017.08.12
CSS 정의 및 특징  (0) 2017.07.22
HTML5 태그 미지원 브라우저  (0) 2017.07.19
HTML 이미지 맵 만들기(usemap)  (0) 2017.07.18


위 사진의 왼쪽은 HTML 만으로 구성된 모습이며 오른쪽은 CSS를 이용하여 디자인을 한 모습이다.


CSS 는 Cascading Style Sheet 의 줄임말이다.


html을 이용해서 텍스트와 이미지, 표 등을 웹 문서에 넣는 것을 물고기에 비유하자면 '뼈'에 해당한다.


그럼 CSS 는 무엇일까? CSS는 텍스트에 크기와 색상을 주고 이미지의 크기와 위치, 표의 색상, 배치 등 웹 문서에 디자인을 추가한다.


비유하자면 물고기의 '살'에 해당한다.


CSS가 없다면 웹 문서는 매우 투박하고 볼품없어질 것이다.

  • 목록1
  • 목록2
  • 목록3
위의 목록은 <ul> 태그와 <li>  태그를 이용해서 만든 것이다. 이것에 css 효과를 주면

  • 목록1
  • 목록2
  • 목록3


이렇게 만들 수 있다. 세로로 나열되있던 목록을 가로로 만들고 글자에 색을 입히고 크기를 키웠으며 배경색을 주는 등 웹 문서에 여러가지 효과를 줄 수 있다. 웹 페이지의 디자인은 css로 하는 것이다. 그리도 모바일, 태블릿 등 웹 문서에 접근 가능한 다양한 기기들이 나온 지금 css의 중요성은 더욱 커져가고 있다. 사실 html을 이용해도 간단한 디자인 효과를 주는 것도 가능하긴하다.



HTML


위의 글자는 html로 글자색을 준 것이며 소스는 <font color="red">HTML</font> 이다.


이것을 css 로 한다면


CSS


이며 소스는 아래와 같다.


<style>

.cssfont{color:red;}

</style>


<p class="cssfont">CSS</p>


이렇게만 보면 html로 효과 주는 것이 더 짧은데 왜 css를 사용하냐는 의문이 생길 수 있다. 하지만 같은 효과를 여러곳에 줄때 html은 하나하나 지정해줘야하지만 css는 한번에 지정해 줄 수 있는 등 소스가 길어질 수록 css의 중요성은 커진다.


다시 말하면 웹 문서에서 내용과 디자인을 html 과 css 로 분리 할 수 있다. 이것은 웹 표준에 필요한 것이기도 하며 사이트의 수정에 도움을 줄 수 있다.


html은 그대로 두고 css만 바꿔 주면 전혀 다른 디자인을 만들 수 있다. 인쇄용 문서, 모바일용 페이지, 태블릿용 페이지, TV용 페이지 등 CSS만 바꾸면 여러 매체에 사용할 수 있게 된다.


CSS는 <style>태그 사이에 넣는다. 보통 <style>태그는 <head>태그 사이에 넣는다.


html문서 안에 css를 넣는것을 간단하게 표현하면 이렇다. (내부 스타일시트)


<html>

<head>

<style></style>

</head>

<body>

</body>

</html>


또는 css를 넣는 다른 방법도 있다(외부 스타일 시트)


<html>

<head>

<link href="외부 css 파일 경로" rel="stylesheet" type="text/css">

</head>

<body>

</body>

</html>


그리고 html과 다른점이 있다면 html에서는 주석을 넣을 때 <!-- 주석 --> 이랫다면 

css에서는 /* 주석 */ 를 사용한다.


css를 사용하면 한번에 문서에 디자인을 바꿀 수 있다.


p{

color:red;

}


위 소스를 사용하면 <p> 태그안의 모든 글자 색상은 red가 된다. 여기서 p 부분을 선택자(select)라고 한다.


선택자에 { 와 } 사이에 들어간 속성들을 주는 것이다. 


간단하게 css에 대해 알아봤다. css는 웹 문서에 없어서는 안되는 필수 요소이다. html을 배운다면 css도 꼭 알아두도록 하자.

저작자표시

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

CSS 속성 선택자, 가상 클래스 종류,정리,요약하기  (0) 2017.08.12
CSS 선택자(selector) 종류 정리 요약  (0) 2017.07.26
HTML5 태그 미지원 브라우저  (0) 2017.07.19
HTML 이미지 맵 만들기(usemap)  (0) 2017.07.18
CSS 초기화 파일(초기화 코드)  (0) 2017.07.15

+ Recent posts

티스토리툴바