[FE기초]CSS 다루기

[FE기초]CSS 다루기

 css가 무엇인지 어떤 방법으로 사용하는지 대략적으로 이전 포스팅에서 알아보았다.

이번 포스팅에서는 CSS를 다루기 위한 방법들을 알아보고 정리해보려 한다.

[FE기초] CSS 기초

 

 

1. selector(선택자)

선택자란 CSS에서 말그래도 어떤 것에 스타일을 입힐지 선택하는 것이라고 생각하면 된다.

 

일반적인 CSS 구조를 한번 보자

아래 처럼 선택자를 선택하고 {} 중괄호를 통해 영역을 정하고 그 내부에 스타일에 대한 설정을 작성하는 방식이다.

선택자 {
	스타일 설정
}

 

선택자를 사용하는데 크게 3가지 방법이 존재한다.

◼ 선택자(Selector)

1. 태그 사용 방법

h1, p 와 같은 태그명에 스타일을 입히는 것이다.

이렇게 하면 스타일을 입힌 태그에 일괄적으로 해당 스타일이 적용될 것이다.

h2 {
    color: green;
    text-align: center;
}
p {
    color: grey;
    font-weight: 500;
    text-align: center;
}

2. 클래스명 사용방법

span class = "" 과 같이 태그의 class를 통해서 정해진 클래스에 원하는 스타일을 입힌다.

class의 스타일을 작성할때는 . 을 앞에 반드시 붙여준다.

.blue--text {
    color: blue;
}
  .red--text {
    color: red;
}

3. id 사용 방법

클래스가 아닌 태그의 id 속성값을 정하고 그 id에 맞게 디자인을 주는 것이다.

이때 id는 중복될 수 없다.(프로그램 언어에서 변수명 할당하는 거랑 비슷한 개념)

사용할때는 #을 반드시 앞에 명시해야한다.

#korea {
    font-weight: bold;
    font-size: 60px;
    background-color: aqua;
}

 

◼ 속성 선택자(Attribute selector)

주어진 속성을 가진 모든 요소를 검색하는 방법이다.

하나씩 문법을 알아보자

1. attr

해당 태그의 속성이 존재하는 모든 요소에 적용한다.

a[href] {
	스타일
}

2. attr=value

태그의 속성이 value와 일치하는 요소에만 적용

a[href="http://www.google.com"] {
	스타일
}

3. attr=*=value

태그의 속성이 value를 포함하는 요소

a[href*="google"] {
	스타일
}

4. attr^=value

태그의 속성이 value로 시작하는 요소

a[href="http"] {
	스타일
}

5.attr$=value

태그의 속성이 value로 끝나는 요소

a[href=".com"] {
	스타일
}

 

◼ 그룹 선택자(Group selector)

선택자를 쉼표로 구분해서 여러 선택자를 나열한다.

같은 스타일을 여러 선택자에 한번에 정의 가능

선택자1, 선택자 2{
	스타일 정의
}

/*예시*/
h1,h2 {
    text-align: center;
}

2. 결합자

결합자는 총 4가지의 종류가 존재하며 결합자를 사용해서 태그 내부의 태그에 지정이 가능하다.

즉 결합자를 통해서 원하는 태그 내부의 요소에만 특정한 스타일을 지정 가능하게 해준다.

 

1. 자손 결합자

자손(공백) 결헙자는 첫번째 요소의 자손인 태그를 선택한다.

사용 방법은 A B

즉 div 태그의 내부에 span태그가 있다면 모든 span태그를 선택해서 스타일을 지정하는 것이다.

div span{
	스타일 지정
}

 

2. 자식 결합자

자식 결합자는 현재 태그의 하위에 존재하는 태그만 선택

사용 문법은 A > B

div > span 이라고 해보자

그리고 div 내부에 div의 span이 있다고 가정하면 이 span은 적용이 될까?

 

정답은 ❌ 해당되지 않는다.

자식 결합자는 자식 즉 현재 태그의 자식 태그에만 적용되고 자손 태그 까지는 적용되지 않음

ul > li {
	스타일
}

 

3. 일반 형제 결합자

일반 형제 결합자는 형제, 즉 첫번째 요소를 뒤따르고 같은 부모를 공유하는 두번째 요소를 선택한다.

사용법은 A ~ B

현재 A로 시작하는 태그 뒤에 따라오는 동일 레벨에 존재하는 B태그에 대한 스타일 설정

p ~ span {
    color: red;
}

<span>이건 빨강이 아닙니다</span>
<p>여기 문단이 있습니다.</p>
<code>여기는 코드가 존재한다.</code>
<span>이제 빨강 시작</span>
<code>여기도 코드 존재</code>
<span>여기도 빨강</span>

이렇게 예시가 있으면 p 뒤에 있는 2개의 span에 대해서 스타일을 적용한다.

 

4. 인접형제 결합자

일반 형제와 다르게 말그대로 인접한 태그 하나만 적용된다.

사용법은 A + B

위에서 보여준 예시를 통해서 동일하게 하고 인접형제 결합자를 적용해보자

p + code 라고 한다면

p의 바로 뒤에 있는 code에만 해당 스타일 내용이 적용될 것이다.