CSS
Cascading Style Sheets의 약자로 HTML을 꾸며주는 언어이다.
문서를 꾸미는 즉시 User가 바로 확인할 수 있는 UI요소라서 되게 중요하다.
기본구조
selector: {properties}selector은 시멘틱 테그나 개발자가 지정한
id나class이름을 적는 란이다.
properties은 선택한 태그에 여러 속성값을 지정할 수 있는 부분이다.
CSS 작성방법
1. 내부 스타일 시트(Internal Style Sheet)
HTML파일
head부분에<style>태그를 사용하는 방법
간단한 구조를 가진 웹사이트에는 따로CSS파일을 만들지 않고 간단하게 사용하기 편하다.
ex)<haed> <style> ul { text-decoration: none; } ul > li { display: inline-block; } </style> <head>
2. 외부 스타일 시트(External Style Sheet)
HTML파일
head부분에CSS파일을link태그로 연결하는 방법
ex)<haed> <link rel="stylesheet" type="text/css" href="./css/style.css"">본격적으로 만들 때는 이 방법으로 많은 양인
CSS파일을 적절히 개발자가 나눠서 여러개 파일을 링크를 걸어 사용한다.
3. HTML 내에 스타일 지정(Inline Styles)
세 가지 방법 중 가장 간단한 방법으로
style속성을 태그안에 바로 넣는 방법
ex)<h1 style="display: none">이것은 없는 문구입니다.</h1>
style속성으로, 다른 속성들처럼=을 붙인 다음property: value의 값을 넣는다.
CSS 우선순위
- !important
- Inline Styles attribute
- id
- class, 다른 attribute, 수도 클래스(:first-child)
- tag element, 수도 엘리먼트(::before)
기본적으로
CSS는 뒤에 나오는 값이 더 우선순위가 높다.
!important는 css 값 뒤에 붙여진 키워드를 의미한다.div: {font-size: 20px !important}인라인 스타일 속성은 태그에 주어진 style 속성 내용을 뜻한다.
!important와 inline style attribute은 실무에서 사용을 제한하는 경우가 많기에 최대한 사용하지 않는 습관을 가지도록 한다. (정 필요할 때는 써도 가능하다)
그리고 중요한 부분은id,class,일반 태그인데id보다class의 css 속성 갯수가 아무리 많다라고 해도id가 우선적으로 적용된다.
만약 개수가 똑같으면 뒤에 나오는 것이 높은CSS의 우선순위 기본적인 특성을 가진다.
