-
CSS(Cascading Style Sheets) 개요Front-end/CSS 2019. 12. 18. 23:54
191218 수업 내용 정리
CSS란?
- Cascading Style Sheets의 약자로, HTML의 제약을 뛰어넘어, 문서를 보다 효율적이고 아름답게 꾸밀 수 있도록 도와주는 언어
CSS사용 방식
1. 인라인 방식(in-line style) : 해당 태그에 직접 쓰는 방식, style="속성명:값;속성명2:값2~"
동일한 태그에 스타일이 적용될 경우 -> 우선순위가 높음
(일반적으로는 동일한 태그에 서로 다른 스타일이 적용되면 마지막 것이 적용됨)
2. 임베디드 방식(embedded style) : 웹문서에서 공통으로 사용하는 색깔, 이미지, 글꼴 등을<head> 영역에 선언해서 사용하는 방식
형식) 스타일 적용시킬 태그(또는 선택자, 동시에 여러 개 적용 가능) {속성명:값;~}
3. 링크 방식(link style) : 파일로 따로 만들어서 불러오는 방법, <head>안에 다음과 같이 선언하면 됨
< link rel="stylesheet" type="text/css" href="test.css">
▷속성 rel : 현재문서와 불러오는 문서 간의 관계를 나타냄
type : 불러오는 파일의 형식
href : 파일의 경로를 나타냄 (<a>태그에서의 링크 속성과 동일)※ 가장 많이 사용되는 방식, 많은 양의 스타일 코드를 효율적으로 관리할 수 있게 해주며
문서의 로딩 속도를 향상시켜 줌
class 란?
- 임의로 부여 가능하며, 다수의 서로 다른 태그에 동일한 스타일을 적용할 때
또는 다수의 동일한 태그에 서로 다른 스타일을 적용할 때 사용하면 유용함
형식) 태그명.클래스명{속성명:속성값;~}
→ 태그명을 생략하면 모든 클래스에 적용하라는 뜻
간단한 CSS 속성 몇 가지
▷ font-style: 글꼴(italic~)
text-decoration: 글꼴장식(강조) - underline(밑줄), overline(윗줄), line-through(취소선)
text-align: 수평정렬(left, center, right)
vertical-align: 수직정렬(top, middle, bottom)
CSS의 사용법, 간단한 속성 몇 가지를 알아보았습니다.
'Front-end > CSS' 카테고리의 다른 글
CSS3 속성 몇 가지, Animation (0) 2019.12.21 CSS Position, Float, Pre, Vendor Prefix (0) 2019.12.19 CSS 배경(Background), 문단 속성, 단위 (0) 2019.12.19 CSS Box Model - 여백, 테두리 (0) 2019.12.19 CSS 선택자(Selector), DIV, SPAN 태그 (0) 2019.12.19