[CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지)

CSS(Cascading Style Sheets)

HTML 요소들이 각종 미디어에서 어떻게 보일지를 정의하는데 사용되는 스타일 시트 언어입니다.

HTML만으로 웹 페이지를 제작할 경우 HTML 요소의 세부 스타일을 지정하는데 어려움이 있습니다. 따라서 매우 많은 시간이 걸리며 완성한 후에도 스타일의 변경 및 유지보수가 매우 힘들다. 이 문제를 해결하기 위해 W3C에서 만든 스타일 시트 언어가 CSS입니다.

CSS문법

* <head> 요소 안에 <style> ~ </style> CSS문법을 작성합니다.

선택자 { 속성명 : 속성값; 속성명 : 속성값; ... }
p { text-align : center; color : blue;}
--- ----------------------------------------
선택자 선언부

*CSS의 문법은 선택자와 선언부로 구성됩니다.
선택자는 CSS를 적용하고자 하는 HTML 요소를 가리킵니다.
선언부는 하나 이상의 선언들을 세미콜론( ; )으로 구분하여 포함할 수 있으며, 중괄호( { } )를 사용하여 전체를 둘러쌉니다.

CSS의 주석

/* */ 사이에 내용을 입력합니다.
p{ text-align : center; color : blue;} /* p요소를 가운데 정렬, 글자 색상을 파란색으로 적용 */

CSS를 적용하는 방법

1. 인라인 스타일
: HTML 요소 내부에 style 속성을 사용하여 CSS 스타일을 적용하는 방법입니다. 인라인 스타일은 해당 요소에만 스타일을 적용할 수 있습니다.

<p style="text-align: center; color: deepskyblue;">안녕하세요.</p>
<p>반갑습니다.</p> <-- 이곳에는 해당이 안된다.

2. 내부 스타일
: 내부 스타일을 이용하는 방법은 HTML 문서 내의 <head> 요소에 <style> 요소를 사용하여 CSS 스타일을 적용하는 방법입니다. 내부 스타일은 해당 HTML 문서에만 적용할 수 있습니다.

<head>    
    <style>        
    h2{ /* 일반 텍스트는 16px입니다. */            
    text-align: center;            
    font-size: 40px;        
    }        
    p{            
    	text-align: center;            
        color: deepskyblue;        
    }    
    </style>
</head>

3. 외부 스타일
: 웹 사이트 전체의 스타일을 하나의 파일에서 변경할 수 있도록 해줍니다.
외부에 작성된 스타일 시트 파일은 css확장명을 사용하여 저장합니다.
스타일을 적용할 페이지 <head> 요소에 <link> 요소를 사용하여 외부 스타일 시트를 포함해야만 스타일이 적용됩니다.

style.css

h2{ 
    /* 일반 텍스트는 16px입니다. */            
	text-align: center;            
	font-size: 40px;        
}        
p{            
    text-align: center;            
    color: deepskyblue;        
}
<head>
	<link href='style.css' rel='stylesheet' type='text/css'>
</head>

CSS 선택자

1. 전체 선택자 ( * )
스타일을 모두 요소에 적용할 때 사용한다. 전체 선택자는 한 번에 많은 요소를 선택하고 한꺼번에 스타일을 적용하기 위해 사용한다.

* { padding: 0; margin: 0; }

2. 요소 선택자
특정 요소가 쓰인 모든 요소에 스타일을 적용합니다.

h2{ color: orange; }

* 상속 : 부모 요소의 속성 값이 자식 요소에게 적용되는 속성 스타일입니다.
상속 여부를 알고싶다면, 아래 링크에서 참조하세요.
https://www.w3.org/TR/CSS22/propidx.html

3. id 선택자( # )
아이디 선택자는 웹 문서 안의 특정 부분에 스타일을 지정할 때 사용합니다. #기호를 사용하여 id 속성을 가진 요소에 사용합니다.

<h2 id="hello"> 안녕하세요.</h2>
#hello { color: red; } /* 요소에 관계없이 id 가 hello 인 요소를 선택합니다. */
h2#hello { color: red; } /* h2 요소에 id가 hello인 요소를 선택합니다. */

4. class 선택자 ( . )
클래스 선택자는 특정 집단의 여러 요소를 한 번에 선택할 때 사용합니다. 특정 집단을 클래스 (class)라고 하며 .(점)기호를 사용하여 같은 클래스 이름을 가지는 요소들을 모두 선택해준다.

<h2 class="hello">안녕하세요.</h2>
...
<p class="hello">반갑습니다.</p>
.hello{color: red;} /* 요소에 관계없이 class가 hello인 요소를 사용합니다. */
p.hello {color: red;} /* p 요소에 class가 hello인 요소를 선택합니다. */
.hi { text-align: center; } /* 요소에 관계없이 class가 hi인 요소를 선택합니다. */
** <h2 class="hello hi">안녕하세요.</h2> /* hello class와 hi class 모두 적용 */
/* css에서 hello 해도 적용되고 .hi 해도 적용이 된다. */

id : 특정 태그가 색깔 변경, 사라지게 할때. css/javascript 효과를 부여할 때.

class : 집합을 만들어 주는 것. 그때 그때 마다 사용할때.

name : 보통 form 태그에 많이 사용된다. 입력한 데이터를 서버로 값을 전달시킬 때 백엔드 쪽에서 name 값으로 구분하여 value값을 찾아내기 때문에 form에는 name이 꼭 있어야 한다. ( 서버쪽에 값을 전달하기 위함 )

5. 그룹 선택자
그룹 선택자는 여러 개의 요소를 나열하고 콤마( , ) 로 구분해 스타일을 한번에 정의해줍니다.

<head>
    <style>
        h2, p { text-align: center; }
    </style>
</head>
<body>
    <h2>선택자</h2>
    <ul>
        <a href="https://www.naver.com">네이버</a>
        <li>
            <a href="https://www.google.com">구글</a>
        </li>
        <li>
            <p>다음</p>
        </li>
        <li>
            <a href="http://www.nate.com">네이트</a>
        </li>
    </ul>
</body>

6. 하위 선택자( 자손 선택자 )
조상의 요소 하위의 모든 요소를 선택하는 선택자입니다.

ul a { text-decoration: none; } /* ul 요소의 자손 요소 a 요소의 밑줄을 제거 */

7. 자식 선택자
부모의 요소 하위의 모든 자식을 선택하는 선택자입니다.

ul > a { text-decoration: none; } /* ul 요소의 자식 요소 a 요소의 밑줄을 제거 */

8. 인접 형제 선택자
동일한 부모의 요소를 갖는 자식 요소들의 관계입니다.
선후 관계는 형-동생의 관계이고 이는 "먼저 나온 요소 - 나중 나온 요소"를 의미합니다.

a + li { color: red; } /* a 요소의 형제 중 바로 다음에 위치한 동생 요소가 li 요소인 경우 선택 */

9. 일반 형제 선택자
형제 관계를 갖는 요소 중에서 형 요소 다음에 나오는 모든 동생 요소를 선택하겠다라는 의미입니다.

a ~ li { color: red; } /* a 요소의 형제 중 다음에 위치한 동생 li 요소를 모두 선택 */

10. 속성 선택자
HTML 요소에서 src, href, style, type.. 과 같은 속성을 선택자로 지정할 수 있습니다.
= 기호를 중심으로 *, ~ 등의 특수문자를 조합하여 종류가 나눠집니다.

[src] {border: 3px solid red;}  /* src를 찾아서 테두리를 적용시켜준다. */
[src="apple.png"] {border: 3px solid red;} /* apple.png 를 가지고 있는 것에만 테두리를 적용 */

[속성명 ~= "속성값"] : 속성값이 완벽히 일치하는 문자를 가지는 요소를 선택합니다.
[속성명 *= "속성값"] : 속성값이 포함된 모든 문자를 가지는 요소를 선택합니다.
[속성명 ^= "속성값"] : 속성값이 접두사로 시작되는 모든 문자를 가지는 요소를 선택합니다.
[속성명 |= "속성값"] : 속성값이 접두사로 시작되는 문자 중에서 완벽히 일치하는 문자 또는 '-' 으로 연결된 문자를 가지는 요소를 선택합니다.
[속성명 $= " 속성값"] : 속성값이 접미사로 끝나는 모든 문자를 가지는 요소를 선택합니다.

11. 앵커 가상 클래스 선택자
앵커의 요소에 특정 디자인을 입혀주는 동적인 스타일을 만들어줍니다.

:hover 사용자가 해당 요소에 커서를 올렸을 때 스타일을 적용합니다.
:active 요소가 활성화 되었거나 클릭했을 때 스타일을 적용합니다.
:focus 해당 요소에 키보드 포커스가 맞춰졌을 때 스타일을 적용합니다. ( 문자를 입력 할수 있게끔 키보드커서가 깜빡일 때) <==input type="text"에 사용될 수 있다.
:visited 사용자가 해당 링크를 다녀왔을 때 스타일을 적용합니다.
:link 해당 요소에 하이퍼링크가 적용됐을 때 스타일을 적용합니다.

'Front-End > HTML + CSS' 카테고리의 다른 글

[CSS] 박스 모델(box model), 테두리(border), 마진(margin), 박스사이징(box-sizing), 디스플레이(display), 폼(form) (0)	2020.12.05
[CSS] 가상클래스, 컬러, 텍스트 속성, 배경 (0)	2020.12.05
[HTML] HTML 마무리를 지어보자. a 태그, iframe, div, span, form, type 속성, (0)	2020.11.21
[HTML] HTML 이미지와 테이블 (0)	2020.11.21
[HTML] HTML의 시작. 근데 이거 맞아? 짧고 굵게 배우자. (0)	2020.11.01

[CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지)

CSS(Cascading Style Sheets)

CSS문법

CSS의 주석

CSS를 적용하는 방법

CSS 선택자

'Front-End > HTML + CSS' 카테고리의 다른 글

댓글

티스토리툴바

[CSS] CSS의 시작(CSS의 정의부터 앵커 가상 클래스 선택자까지)

CSS(Cascading Style Sheets)

CSS문법

CSS의 주석

CSS를 적용하는 방법

CSS 선택자

'Front-End > HTML + CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바