-
[TIL] CSS의 개요 및 특징Develope/HTML&CSS 2020. 3. 21. 01:04
1. CSS 란
CSS(Cascading Style Sheets)는 마크업 언어(HTML)가 실제 표시되는 방법(색상, 크기, 폰트 등)을 지정하여
콘텐츠 구조를 꾸며주는 정적 언어로 웹의 시각적인 표현을 담당한다.
2. CSS 특징
-
적당한 크기와 아름다운 색상, 원하는 위치를 지정하는데 집중할 수 있다.
-
예쁘게 만드는 것만 집중할 수 있다.
-
선택자를 사용하여 원하는 작업을 할 수 있다.
-
다양한 방식으로 CSS를 적용할 수 있다.
3. CSS 문법
선택자 { 속성: 속성값; 속성: 속성값; }선택자 { 속성: 속성값; 속성: 속성값; }위의 두가지 방법의 문법이 있다.
차이점이 있다면 옆으로 길게 쓰는 것과 아래로 길게 쓰는 차이이다.
개인의 취향대로 사용하면 되지만 옆으로 길게 하면 가독성이 떨어진다고 하여 아래로 쓰는 습관을 만들 것이다.
선택자에 속성과 속성 값이 하나만 있다면 옆으로 써도 상관없지만 코드의 균일성을 위해 하나여도 아래로 쓸 것이다.
3-1. 속성(property)과 값(value)의 역할
◎ 검색된 대상에 지정될 CSS 명
속성과 값의 관계 4. CSS 선언 방식
◎ CSS 선언 방식은 크게 인라인 방식, 내장방식, 링크 방식으로 나눠진다.
4-1. 인라인 방식
-
HTML요소의 style 속성에 직접 장석하는 방식.
-
인라인 방식은 선택자가 필요하지 않는다.
-
유지보수하기에는 힘들다.
-
문제가 되지는 않지만 인라인 방식은 피하는 게 좋다.
CSS 인라인 방식 4-2. 내장 방식
-
HTML 문서에 <style> 태그를 작성하는 방식.
-
<head>와 </head> 태그 사이에 작성.
-
CSS내용이 길어지면 HTML 코드 줄을 많이 차지하므로 유지보수하기에는 힘들다.
CSS 내장 방식 4-3. 링크 방식
-
HTML 문서에 <link> 태그를 이용하여 외부 문서로 CSS를 불러와서 작성하는 방식
-
<head>와 </head> 태그 사이에 작성.
-
알맞은 경로를 잘 적용해주어야 한다.
-
유지보수 하기에 용이하고 HTML 문서에 필요한 CSS를 알맞게 적용할 수 있는 장점이 있어서 링크 방식을 선호한다
CSS 링크 방식 
CSS 링크 방식 'Develope > HTML&CSS' 카테고리의 다른 글
[TIL] float 속성 (0) 2020.04.21 [TIL] position 속성 (0) 2020.04.20 [TIL] CSS의 Flex(Flexible Box)의 특징과 속성 (0) 2020.03.23 [TIL] CSS의 선택자 (0) 2020.03.21 [TIL] HTML의 특징과 요소. (0) 2020.03.19 -