css란?
html구조에 글꼴이나 색상, 정렬, 요소의 배치 등 겉모습 디자인을 입히는 언어를 말한다.
Cascading Style Sheets의 약자로 '위에서 아래로 흐르는 디자인 시트' 라는 의미이다. css는 '위에서 아래로 속성을 하나씩 적용'하는 속성을 가지고 있는데, 아래에 있는 속성 부터 먼저 적용된다는 것이 가장 큰 특징이다.
ex. 두개가 겹치는 경우 아래에 있는 코드를 적용한다.
선택자{
color : red;
color : blue;}
css 맨 처음 문장에는 @charset "utf-8"; 이라는 언어 인코딩 모듈을 쓴다.
@ = at ( = css module )으로 시작하여, ;(세미콜론)으로 마침표를 찍는다.
css 에서의 주석은 /* */ 으로 vs code와 같이 ctrl + / 라는 단축키로 쓸 수 있다.
css에서는 html에서 불러오는 것을 선택자라고 부른다. 태그의 이름을 그대로 가져오는 것은 태그명 선택자라고 한다.
스타일 시트
스타일시트에는 '브라우저 스타일 시트', '인라인 스타일 시트', '외부 스타일 시트', '내부 스타일 시트' 총 4가지가 있다.
1. '내부 스타일 시트'
: 내부 스타일 시트는 html 문서 내부에 <style> 태그를 이용해 적용하는 방법을 말한다.
외부 스타일 시트보다 적용 우선 순위가 높지만, css 속성의 글로 인해 파일의 길이가 길어짐으로 인해 유지보수가 어려워 지는 특징으로 잘 사용하지 않는다.
2. '외부 스타일 시트'
: 외부 스타일 시트는 css 폴더를 만들어 파일을 따로 관리하는 것을 말한다.
외부 스타일 시트로 관리하면 관련된 파일을 찾기 편하고, 유지보수에 용이하다는 장점이 있다.
대신, 내부 스타일 시트에 비해 우선순위가 낮다.
3. '인라인 스타일 시트'
: 태그에 style 이라는 속성으로 직접적으로 적용하는 방식을 말한다.
내부 스타일 시트보다 우선순위가 높아 태그에 직접 적용한 스타일이 절대적으로 적용된다.
인라인 시트는 가독성이 떨어지고 우선순위가 높아서 수정하기가 어려우므로 잘 사용되지 않는다.
4. '브라우저 기본 스타일 시트'
: 브라우저 기본 스타일 시트는 브라우저에 기본적으로 내장되어있는 스타일 시트를 말한다.
태그를 출력했을 때 보이는 이 특징들은 모두 브라우저 안에 있는 기본 스타일이 적용되어 보이는 디자인이다.
보통 웹페이지를 만들때에는 브라우저 기본 스타일 시트를 '초기화'하여 사용한다.
5. !important
: 특정 속성의 속성값 뒤에 선언하여 사용한다. 어떤 스타일시트 또는 어떤 선택자보다도 우선 순위가 가장 높다.
important가 적용된 속성은 다시 수정할 수 없으며, 강제로 해당 속성을 적용한다.
즉, 유지보수가 어렵기 때문에 조심히 사용해야 한다.
<기본형> 선택자{속성명: 속성값 !important;}
css 선택자의 우선순위
태그를 선택해서 디자인을 적용한다고 해서 '선택자'라고 부른다.
같은 태그인데 다른 디자인을 적용하고 싶은 경우 각각 이름을 정해주어 스타일을 적용하면 된다.
브라우저에는 기본 스타일시트가 있기 때문에 새로운 디자인을 할 때 초기화 후 하는 것이 좋다.
css 선택자의 종류로는 'id 선택자(#)', 'class 선택자(.)', '태그명 선택자', '전체 선택자(*)', 그룹선택자(,)' 등으로 나누어진다.
높은 우선순위를 기준으로 스타일이 적용되기 때문에, 낮은 우선순위를 가진 것들부터 적용하는 것이 좋다.
- 선택자의 우선순위
id(#) > class(.) > tag > 전체(*)
id는 html 한 폴더가 아니라 모든 전체 문서에서 1개만 가질 수 있다. (웹표준)
class 는 여러개를 가질 수 있다.
내부 스타일 시트
html 내부에서 스타일 시트를 적용하는 방법이다. 주로 <head> 안에 <style>을 적용시키는 방식이다.
<style>
선택자{ 속성명 : 속성값; }
좌측과 같이 table, tr, th,td 를 작성하고
아래와 같이 <style>을 주면 각각 테두리와 색상값이 들어간다.
tr은 스타일을 넣어도 차이가 없다.
외부 스타일 시트, css
css 파일을 따로 따로 만들어 스타일을 작성하고, html 파일에서 link로 연결시키면 적용된다.
<link rel="stylesheet" href="링크">
rel 이라는 속성은 내가 연결하고자 하는 것의 속성이 무엇인지 선언하는 역할이다.
href 는 연결하고자 하는 위치를 알려주는 것.
예시1) class로 이름을 부여하고 태그명과 클레스로 스타일을 동시에 부여한 다음 우선순위를 보는 모습
예시2) class와 id를 동시에 부여후 우선순위를 보는 모습
전체선택자(*)는 보통 @바로 밑에 적는다.
html은 문서작성을 위해 만들어진 프로그램이라 여백이 존재한다.
그래서 이 여백을 없애줄 때 전체선택자를 사용한다.
예시3) 전체선택자를 넣은 모습.
예시4) 전체선택자로 여백을 초기화 시킨 모습
예시5) 다양한 태그나 class,id를 한번에 불러와 스타일을 적용하고 싶다면, '그룹선택자(,)'를 사용한다.
그룹선택자는 우선순위가 높은 편은 아니다.
기호 넣는 방법 : window + .
'html, 스타일시트(css, scss)' 카테고리의 다른 글
| [html/css] 글자 스타일 적용하기 (0) | 2024.05.30 |
|---|---|
| html 기본 css 초기화 소스 (0) | 2024.05.30 |
| [html/css] 테이블 태그 <table>,<th>,<tr> ,<td>와 표를 꾸며주는 속성 colspan, rowspan, border-collapse (0) | 2024.05.29 |
| [html] a 태그, 절대경로와 상대경로, 이미지 태그 (0) | 2024.05.28 |
| Visual Studio Code 확장프로그램 설치 방법, html 속성과 태그 (0) | 2024.05.27 |
