Learn the basics(CSS)

Oh Joon·2020년 12월 14일

CSS roadmap

Roadmap CSS

목록 보기

2/10

🎈 CSS(Cascading Style Sheet)란?

웹 콘텐츠의 스타일을 지정하는 코드
프로그래밍 언어 X, 마크 업 언어 X, 스타일 시트 언어 O
HTML 요소의 스타일을 선택적으로 지정하는 데 사용

CSS 예

h1태그 내용에 빨간색 글꼴을 적용한 것처럼 HTML 요소를 가져와 스타일을 지정할 수 있다.

📝 HTML - CSS 연결 방법

스타일 코드가 작동하도록 하기 위해서는 CSS를 HTML 문서에 적용해야 한다. 그렇지 않으면 스타일이 HTML의 모양을 변경하지 않는다. HTML - CSS 연결 방법에는 3가지가 존재한다.

📃 외부 CSS

위 그림과 같이 index.html 파일에 <head> 태그 사이에 밑 줄을 붙여넣는다.

📃 내부 CSS

내부 스타일은 <head> 태그 내부의 <style> 요소를 추가한다.

📃 인라인 CSS

스타일을 적용하고 싶은 요소 바로 옆에 스타일 속성을 추가한다.

HTML 요소에 대해 둘 이상의 CSS 스타일이 지정된 경우는 어떤 스타일이 우선적으로 사용될까?

인라인 스타일

외부, 내부 스타일

브라우저 기본값

인라인 스타일이 가장 높은 우선 순위를 가진다.

📝 CSS 구문 규칙

Selector : HTML 요소 이름이다. 스타일링 할 요소를 정의한다.
Declaration : 스타일을 지정할 요소의 속성을 지정한다.
Property : HTML 요소의 스타일을 지정할 수 있는 방법이다. (여러가지가 존재한다.)
Property value : 속성 값이라 불리며, 주어진 속성에 대해 값을 적용한다.

구문에는 지켜야 할 규칙이 존재한다.

1) Selector와 별도로 선언된 모든 것은 중괄호({})로 묶어야 한다.
2) 각 선언 내에서 콜론(:)을 사용하여 속성을 해당 값과 구분해야 한다.
3) 각 선언 내에서 세미콜론(;)을 사용하여 각 선언을 다음 선언과 구분해야 한다.

📝 CSS 선택자

CSS 선택자는 스타일을 지정할 HTML 요소를 찾거나 선택하는 데 사용된다.

다양한 유형은 선택자가 있는데 5가지로 나타내보자.

1. CSS ID 선택자

id 선택자는 HTML 요쇼의 id 속성을 사용하여 특정 요소를 선택한다.
특정 ID를 가진 요소를 선택하려면 해시 (#) 문자와 요소의 ID를 차례로 작성하여 사용한다.

2. CSS Class 선택자

class 선택자는 특정 클래스 속성이있는 HTML 요소를 선택한다.
특정 class 요소를 선택하려면 마침표 (.) 문자와 class 이름을 차례로 작성하여 사용한다.

특정 HTML 요소만 class의 영향을 받도록 지정도 가능하며 둘 이상의 class도 참조할 수 있다.

3. CSS 범용 선택자

범용 선택자(*)는 페이지의 모든 HTML 요소를 선택한다.

4. CSS 그룹 선택자

요소의 스타일 정의가 동일할 때 코드를 최소화하기 위해 선택자를 그룹화할 수 있다.
선택자를 그룹화하려면 각 선택자를 쉼표(,)로 구분하면 된다.

5. 의사 클래스 선택자(Pseudo-class)

지정된 요소에 지정된 상태에 있을 때 사용이 가능하다. (예를 들어, 커서가 링크 위에 있을 때)

a태그 요소를 불러오지만 마우스 포인터가 링크 위에있을 때만 해당된다.

참조

Front-end developer

roadmap CSS

다음 포스트