CSS 기본문법과 연동

웹의 3가지 요소

내용을 담당하는 HTML

외형을 담당하는 CSS ◀

동작을 담당하는 JavaScript

CSS 란?

CSS(Cascading Style Sheets)는 HTML의 각 요소(Element)의 Style(design, layout, etc)을 정의하여 화면 등에 어떻게 렌더링하면 되는지 브라우저에게 설명하기 위한 언어이다.

HTML이 웹 사이트 화면에 표시되는 정보를 약속한 것이라면, CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있다
HTML과 CSS는 각자의 문법을 갖는 별개의 언어이다. HTML은 CSS를 포함할 수있지만, HTML없이 단독으로 존재하는 CSS는 의미가 없다.

CSS의 중요성

초기의 웹은 HTML 하나로도 문서의 뼈대와 꾸밈이 가능했지만, 공통적인 디자인을 갖는 문서가 여럿 존재할 경우, 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재했다. CSS는 이러한 문제를 해결함과 동시에 역할 분담이 되는 효과를 가지고 있다.

즉, 정보와 구조를 담당하는 HTML의 본연의 역할과 동떨어진 기능까지 추가됨으로써 복잡한 언어가 되지 않도록, 'HTML은 정보와 구조화', 'CSS는 styling의 정의'라는 본연의 임무에 충실한 명확한 구분이 이루어지게 되었다.

CSS 기본문법

웹페이지에 CSS를 넣는 방법
1) HTML 태그의 <style> 속성을 이용 (HTML과 CSS를 분리하는 장점이 사라진다.)
2) <style> 태그를 통해 HTML 문서 내부에 기술 (<style> 태그는 <head> 태그 내부에 사용)
3) .css 파일로 분리하여 HTML 문서에 연결

▲ 위와 같은 'CSS Rule Set'의 집합을 스타일시트(Style Sheet)라 한다.

1. 셀렉터 (Selector, 선택자)

CSS는 효과를 적용해 줄 대상을 정의하는 문법이 필요하다. 적용하고자 하는 HTML요소를 선택하는 것이 selector이다.

1-2. 선언 (Declaratin, 효과)

선언(Declaration)은 적용되어 나타나게 될 CSS효과를 CSS문법을 통해 표현한 것이다. 여러 개를 선언하고 지정해 넣어줄 수 있으며, 여러 개의 효과를 써준 경우 세미콜론(;)으로 각 효과를 구분해준다.

2. 프로퍼티 (Property, 속성)

셀렉터로 HTML 요소를 선택하고 { } 내에 프로퍼티와 값을 지정하는 것으로 다양한 style을 정의할 수 있다. 속성:값 의 형태로 사용되며, 여러 프로퍼티를 지정할 수 있고 세미콜론(;)으로 구분한다.

하나의 선택자의 속성들을 한 줄로 쓰거나 여러 줄로 나누어 써도 된다.
개발자 도구를 이용하여 특정 태그에 어떤 CSS 속성이 사용되었는지 알 수 있다.

3. 값 (Value, 속성값)

프로퍼티의 값은 해당 프로퍼티에 사용할 수 있는 값을 “키워드”나 “크기 단위” 또는 “색상 표현 단위” 등의 특정 단위로 지정하여야 한다.

프로퍼티 값의 단위로는 px, %, em, rem 등이 있다.
1) px : px은 픽셀(화소) 단위이다.
2) % : %는 백분률 단위의 상대 단위이다.
3) em : em은 배수(倍數) 단위로 상대 단위이다. 요소에 지정된 사이즈(상속된 사이즈나
디폴트 사이즈)에 상대적인 사이즈를 설정한다.
4) rem : rem은 최상위 요소(html)의 사이즈를 기준으로 삼는다. rem의 r은 root를 의미한다.

HTML과 CSS의 연동

HTML은 CSS를 포함할 수 있다. CSS를 가지고 있지 않은 HTML은 브라우저에서 기본으로 적용하는 CSS(user agent stylesheet)에 의해 렌더링된다.

1. Inline Style

: HTML 태그의 style 속성에 CSS 코드를 넣는 방법이다. 꾸미는 데 한계가 있고, 재사용이 불가능하다.
ex. <p style="color: blue">seul's velog.</p>

2. Embedding style

: HTML 문서 안의 <style>과 </style> 안에 CSS 코드를 넣는 방법이다. HTML문서 안의 여러 요소를 한번에 꾸밀 수 있지만 다른 HTML 문서에는 적용하기 어렵다.
ex. <style> h1 { color: yellow; } </style>

3. Link style

: 별도의 CSS파일을 만들고 HTML에서 외부에 있는 CSS 파일을 로드하는 방식이다. 가장 일반적으로 사용되며, 여러 HTML 문서에 적용 가능하다.(확장자명: css)
1-1) <link rel="stylesheet" href="style.css">
: HTML 파일과 CSS 파일이 같은 폴더에 있다고 가정했을 때의 코드.
1-2) <link rel="stylesheet" href="css/style.css">
: 'HTML 문서가 있는 폴더'에 'css 폴더'가 있고, 그 안에 'style.css 파일'이 있다고 가정했을 때의 코드.

CSS 적용 우선순위

head 요소 내의 style 요소

head 요소 내의 style 요소 내의 @import 문

<link> 로 연결된 CSS 파일

<link> 로 연결된 CSS 파일 내의 @import 문

브라우저 디폴트 스타일시트

❓ css를 연결해주기 위해서 link href="style.css"를 적는 것은 이해가 됐는데 rel="stylesheet"는 무엇인지 궁금했다.

<link> 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명하며, rel 속성은 <link> 요소에 반드시 명시되어야 하는 필수 속성이라고 한다.
문법은 <link rel="속성값(여기서는 stylesheet)"> 이다.
즉 stylesheet : 스타일 시트(stylesheet)로 사용할 외부 리소스를 불러온다는 의미이다. 😉

+) Reset CSS
모든 웹 브라우저는 설정 되어있는 기본 스타일이 다르기 때문에 Reset CSS로 기본적인 HTML요소의 CSS를 초기화 한다. 즉 브라우저 별로 제각각인 디폴트 스타일을 하나의 스타일로 통일시켜 주는 역할을 한다.

Eric Meyer’s “Reset CSS” 2.0
https://meyerweb.com/eric/tools/css/reset/

+) @import
인라인, 내부스타일, 외부스타일 적용 방법 외에 추가로 css를 적용하는 방법이 바로@import 이다.

<style type="text/css">
    @import url("css/style.css");
</style>

@import 직렬 로딩 방식으로 css를 불러온다.
link 병렬 로딩 방식으로 css를 불러온다. (빠르고 효율적이다.)

reference : https://developer.mozilla.org/ko/ https://poiemaweb.com/ https://opentutorials.org/course/1

Author And Source

이 문제에 관하여(CSS 기본문법과 연동), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@seul06/CSS-기초-1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)