CSS - 기본 문법 및 적용 & 선택자

프론트엔드(Web)/CSS

CSS - 기본 문법 및 적용 & 선택자

만능 엔터테이너 2024. 7. 10. 18:42

728x90

SMALL

CSS 문법은 선택자와 선언부로 구분합니다.

선택자 : CSS 스타일을 적용할 HTML(요소)를 선택하는 영역

선언부 : 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역, 중괄호({}) 내부에 작성합니다!

h1 { color: red;}
선택자 { 속성: 값;}

줄 바꿈과 들여쓰기
css 코드를 작성할 때 필수는 아니지만 글의 가독성을 위해 작성하는 것이 좋습니다!

주석 - 코드에 설명을 남기는 것 / ctrl + /

/* 주석 내용 */

css 적용하기 - css 문서를 html 문서에 적용시키는 방법

1) 내부 스타일 시트 사용하기

<style>
  /* CSS 코드 */
</style>

<head>

<style>

h1{

font-size:24px;

color:red;

}

</style>

</head>

<body>

<h1>css basic</h1>

</body>

</html>

이때, style 태그를 사용하는 위치는 자유롭지만, head 태그 내부에 사용합니다. 하지만 잘 사용하지 않는 방식입니다.

2) 외부 스타일 시트 사용하기

<link rel="stylesheet" href="css 파일 경로">

css 문서를 따라 생성하여 스타일을 지정하고 그 문서를 html 문서에 아래와 같은 명령어로 연결시켜 줍니다. 이때, css 파일을 html 문서에 연결할 때는 link 태그를 사용합니다. (가장 많이 사용합니다!)

3) 인라인 스타일 사용하기

<태그 style="CSS 코드"></태그>

HTML 태그에서 사용가능한 style 속성 내부에 css 코드를 작성하는 바업이다. 따라서 css 기본 문법 형식에서 선택자 부분이 필요가 없습니다. 특별한 경우가 아니면 사용하지 않는 방식입니다.

<body>

</body>

CSS 선택자

전체 선택자 : HTML에서 사용가능한 모든 요소를 한 번에 선택자로 지정

*기호를 사용해 표시

*{/* CSS 코드 */}

<body>

</body>

<style>

color:red;

}

</style>

이때, 전체 선택자는 단순히 사용된 h1과 p 태그를 비롯하여 html,head,title,style,body 태그 등 모든 요소가 선택된 것입니다.

태그 선택자 : HTML 태그명으로 선택자를 지정하는 방법입니다.

태그명 {CSS 코드 }

태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한 번에 선택

<body>

<p>태그 선택자는 태그명과 일치하는 태그를 모두 선택합니다.</p>

</body>

<style>

color:blue;

}

</style>

아이디 선택자 : HTML 태그에서 사용가능한 id 속성값을 이용해 선택자를 지정속성값 앞에는 # 기호를 붙여 구분합니다.

#id속성값 { css 코드 }

<body>

<p>아이디 선택자는 id 속성값을 이용해서 선택자를 지정하는 방법입니다.</p>

</body>

style>

#title{

color:green;

}

</style>

※ id 속성값은 고유해야 합니다. Only 하나의 html 문서에는 하나의 id 속성값만 가능합니다.

클래스 선택자 - class 속성값을 이용해 선택자를 지정

가장 많이 사용하는 선택자 지정 방법

.class속성값{ css코드 }

<body>

<p class="blue">class 속성값으로 선택자를 지정합니다.</p>

<p class="blue">class 속성은 id 속성과는 다르게 속성값을 중복해서 사용할 수 있습니다.</p>

</body>

<style>

.red{

color:red;

}

.blue{

color:blue;

}

</style>

※ class 속성은 id 속성과 달리 속성값을 중복해서 사용할 수 있어 하나의 클래스 스타일을 잘 정의하면 여러 곳에서 사용가능합니다.

기본 속성 선택자 - html 태그의 속성과 값을 사용해 선택자를 지정

[속성]{ css코드 }
[속성=값]{ css코드 }

<body>

</body>

<style>

a[href]{

color:red;

display:block; /* a 태그를 block-level 요소로 지정 */

}

</style>

a 태그의 href 속성이 사용된 요소만을 선택해 텍스트 색상을 빨간색으로 지정합니다.

<body>

</body>

<style>

a[target="_blank"]{

color:red;

display:block; /* a 태그를 block-level 요소로 지정 */

}

</style>

만약, 속성과 속성값까지 정확하게 일치하는 요소에 스타일을 적용하고 싶다면 a 태그의 target 속성값이 _blank인 요소를 선택합니다.

이때, 클래스 와 아이디 선택자도 다음과 같이 기본 속성 선택자로 작성하여도 됩니다.

[class="red"]{ 기본 속성 선택자 방법으로 class 속성값이 red인 요소 선택}
[id="title"]{ 기본 속성 선택자 방법으로 id 속성값이 title인 요소 선택}

속성 선택자는 다른 선택자와 함께 사용 가능합니다.
1) 태그 선택자 & 속성 선택자
a[href] {}
2) 아이디 선택자 & 속성 선택자
#title[href]{}
3) 클래스 선택자 & 속성 선택자
.title[href]{}
4) href 속성의 모든 종류 선택
[href] {}

문자열 속성 선택자

태그가 가진 속성값이 특정 문자열과 일치하는 요소를 선택자로 지정하는 방법 / 자주 사용하지 않고 이런게 있구나 정도만 알고 넘어갑니다.

[속성~=문자열] : 속성값에 문자열이 포함되어 있으면 선택합니다.(단어 기준)

[속성 := 문자열] : 속성값이 문자열과 같거나 문자열-(하이픈)으로 시작하면 선택합니다.

[속성^=문자열] : 속성값이 문자열로 시작하면 선택합니다.

[속성$=문자열] : 속성값이 문자열로 끝나면 선택합니다.

[속성*=문자열] : 속성값에 문자열이 포함되면 선택합니다. (전체 값 기준)

조합 선택자

그룹 선택자 - 여러 선택자를 하나로 그룹 지울 때 사용합니다.

선택자와 선택자의 기호는 ,(쉼표)로 구분합니다.

선택자1, 선택자2, ... 선택자n { CSS코드 }

<body>

<p class="blueredgreen">blueredgreen</p>

</body>

<style>

p, #title, .red {

color:red;

}

</style>

다음과 같이 선택자는 다르지만, 선언부는 동일한 코드에 사용합니다.

자식 선택자 - 부모 요소의 하위에 있는 자식 요소에 스타일을 적용할 때 사용합니다.

2개 이상의 선택자가 사용되며, 선택자와 선택자는 > 기호로 구분합니다.

부모 선택자 > 자식 선택자 { CSS 코드 }

<body>

<p>lorem 1</p>

<div>

<p>lorem 2</p>

</div>

<p>lorem 3</p>

</div>

</body>

<style>

.box > p{

color:red;

}

</style>

하위 선택자 - 선택자의 범위를 특정 부모 요소의 하위 요소로 한정하는 방법

2개 이상의 선택자를 사용하고 선택자와 선택자는 공백으로 구분합니다.

선택자1 선택자2 선택자3 ... { CSS 코드 }

<body>

<div>

<p>lorem 1</p>

<ul>

<li>

<p>lorem 2</p>

</li>

<li>

<p>lorem 3</p>

</li>

</ul>

</div>

<p>lorem 4</p>

</body>

<style>

div p{

color:red;

}

</style>

다음 코드는 div 태그의 하위에 있는 p태그로 작성된 요소만 선택해 텍스트 색상을 빨간색으로 적용합니다.

인접 형제 선택자 - 앞에서 지정한 선택자 요소 바로 다음에 있는 형제 관계 요소를 선택자로 지정합니다.

2개 이상의 선택자를 사용하며 선택자와 선택자는 + 기호로 구분합니다.

이전 선택자 + 대상 선택자 { css 코드}

<body>

<h1>lorem1</h1>

<h2>lorem2</h2>

<h2>lorem3</h2>

</body>

<style>

h1 + h2{

color:red

}

</style>

인접 형제 선택자 사용 시 주의점
인접 형제 선택자는 이전 요소 다음에 등장하는 형제 요소를 선택합니다. 따라서 이전 요소보다 먼저 등장한 요소는 선택 대상이 아닙니다. 예를 들어, 다음 코드에서 h1 태그와 인접한 h2 태그는 next라는 텍스트가 적힌 요소입니다.
<h2>prev</h2>
<h1>former</h1> --> h1 태그 설정
<h2>next</h2> --> 이전 요소 다음에 등장하는 요소에만 적용함

일반 형제 선택자 - 이전 선택자 뒤에 오는 형제 관계 요소를 모두 선택자로 지정합니다.

2개 이상의 선택자를 사용하며 선택자와 선택자는 ~기호로 구분합니다.

이전 선택자 ~ 대상 선택자 { css 코드 }

<body>

<h1>lorem1</h1>

<h2>lorem2</h2>

<h2>lorem3</h2>

</body>

<style>

h1 ~ h2{

color:red

}

</style>

가상 요소 선택자

명시적으로 작성된 구성 요소는 아니지만, 마치 존재하는 것처럼 취급하여 선택하는 선택자 지정방법을 말합니다.

앞에 ::(콜론 2개)를 붙여서 사용하며 기준 선택자와 함께 사용합니다.

기준 선택자::가상 요소 선택자 { css 코드 }

- ::before - 콘텐츠 앞의 공간을 선택합니다.

- ::after - 콘텐츠 뒤의 공간을 선택합니다.

<style>

p::before{

content:"<before>";

}

p::after{

content:"<after>";

}

</style>

</head>

<body>

<p>Lorem, ipsum dolor.</p>

</body>

p 태그의 콘텐츠 앞과 뒤에 새로운 텍스트를 추가합니다.

content 속성의 응용
content 속성은 css 속성으로 새로운 콘텐츠를 생성할 때 사용합니다. content 속성 내부에 추가된 콘텐츠는 다른 css 속성과 함께 사용이 가능합니다.
예를 들어, css 속성 내부에 다음과 같이 작성하면, 콘텐츠 생성과 동시에 스타일이 정해집니다.
p::before{
content:'<before>';
color:red;
}

가상 클래스 선택자 사용하기

기준 요소:가상 클래스 선택자{ css 코드 }

링크 가상 클래스 선택자 - a 태그에서 링크 상태를 이용하여 선택하는 방법

- :link : 한 번도 방문하지 않은 링크일 때 선택합니다.

- :visited : 한 번이라도 방문한 적이 있는 링크일 때 선택합니다.

동적 가상 클래스 선택자 - 사용자의 행동에 따라 동적으로 변하는 상태를 이용해 선택하는 방법

- :hover : 요소에 마우스를 올리면 해당 태그가 선택자로 지정됩니다.

- :active : 요소를 마우스로 클릭하고 있는 동안 해당 태그가 선택자로 지정됩니다.

<style>

p:hover{

color:red;

}

</style>

button:active{

color:red;

}

- button 태그를 클릭할 때마다 button 태그의 텍스트 색상에 빨간색이 적용됩니다.

입력 요소 가상 클래스 선택자 - 입력 요소의 특정 상태를 이용해 선택자로 지정하는 방법

- :focus : 입력 요소에 커서가 활성화되면 선택자로 지정합니다.

- :checked : 체크박스가 표시되어 있으면 선택자로 지정합니다.

- :disabled : 상호작용 요소가 비활성되면 선택자로 지정됩니다.

- :enalbed : 상호작용 요소가 활성화되면 선택자로 지정합니다.

:focus ( 요소를 마우스로 클릭하면 색상이 변경됨 )

input:focus{

color:red;

}

:checked ( 체크박스를 클릭하면 체크가 되면서 요소에 색상이 변경됨 )

input:checked + label{

color:red;

}

:disabled ( input 요소가 비활성화 되어 있으므로 배경색상이 변경됨)

input:disabled,

button:disabled {

background-color: #ccc;

}

:enabled ( 요소가 활성화 되어 있으면 스타일을 적용함 )

input:enabled,

button:enabled {

background-color:#ccc;

}

구조적 가상 클래스 선택자 - HTML 태그의 사용 위치, 다른 태그와의 관계에 따라 요소를 선택하는 방법

A:first-child : A 요소의 첫 번째 자식 요소를 선택자로 지정합니다.

A:last-child : A 요소의 마지막 자식 요소를 선택자로 지정합니다.

A:nth-child(n) : A 요소가 부모 요소의 자식 요소 중 n번째 순서가 맞으면 선택합니다.

A:nth-last-child(n) : A 요소가 부모 요소의 자식 요소 중 마지막에서 n번째 순서가 맞으면 선택합니다.

A:nth-of-type(n) : 부모 요소의 자식 요소 중 n번째로 등장하는 A요소를 선택합니다.

A:nth-last-of-type(n) : 부모 요소의 자식 요소 중 마지막에서 n번째로 등장하는 A요소를 선택합니다.

A:first-of-type : 부모 요소의 자식 요소 중 첫 번째로 등장하는 A 요소를 선택합니다.

A:last-of-type : 부모 요소의 자식 요소 중 마지막으로 등장하는 A 요소를 선택합니다.

:first-child 와 :last-child ( 각각 요소의 첫 번째 자식 요소와 마지막 자식 요소를 선택합니다. )

li:first-child{

color:red;

}

li:last-child{

color:red;

}

:nth-child(n) 과 :nth-last-child(n) ( 각각 요소의 n번째 자식 요소와 끝에서 n번째 자식 요소를 선택합니다. )

p:nth-child(1){

color:red;

}

p:nth-last-child(2){

color:red;

}

:nth-of-type 과 :nth-last-of-type(n) ( 각각 부모 요소의 자식 요소로 n번째로 나오는 요소 선택 / 부모 요소의 자식 요소 중 끝에서부터 n번째 요소 선택)

p:nth-of-type(2){

color:red;

}

p:nth-last-of-type(1){

color:red;

}

:first-of-type 과 :last-of-type ( 각각 부모의 자식 중 첫 번째로 등장하는 요소 선택 / 부모의 자식 요소 중 마지막 요소 선택)

p:first-of-type{

color:red;

}

p:last-of-type{

color:red;

}

다양한 선택자 조합하기

선택자의 목적은 지정할 대상 요소를 선택하는 것이고, 선택자를 지정하는 방법은 많습니다.

선택자를 서로 조합해서 사용이 가능합니다.

div.box {}  class 속성값이 box인 div 태그
section#main id 속성값이 main인 section 태그
#main.box {} id 속성값이 main이고, class 속성값이 box인 요소

가상 클래스, 하위 선택자, 자식 선택자를 조합한 형태 가능
div::hover button {} div 태그에 마우스를 올린(hover) 상태일 때, 해당 div 태그 하위에 있는 button 태그 선택
div:hover > button {} div 태그에 마우스를 올린(hover) 상태일 때, 해당 div 태그와 자식 관계에 있는 button 태그 선택

728x90

LIST

'프론트엔드(Web) > CSS' 카테고리의 다른 글

CSS 레이아웃 (0)	2024.07.13
CSS 배경 및 애니메이션 속성 (1)	2024.07.11
CSS 언어의 특징, 텍스트 속성, 박스 모델 및 인라인 속성 특징 및 성격 (0)	2024.07.10

현재글CSS - 기본 문법 및 적용 & 선택자

250x250

yh-jeon Full stack

기획부터 디자인, 프론트, 백 개발까지 모든 거를 다 해보고 싶은 개발자 입니다~!

Today :
Yesterday :

일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30	31

yh-jeon Full stack