[CSS] 기초- 스타일시트, 선택자, 글자 속성

css란?
:
html구조에 디자인을 입히는 언어.
Cascading Style Sheets의 약자로 위에서 아래로 흐르는 디자인 시트 언어라는 의미. 
웹 문서에서 글꼴이나 색상, 정렬, 요소의 배치 등등 겉모습을 결정짓는 디자인 언어.
css의 가장 큰 특징은, 위에서 아래로 속성을 하나씩 적용하는데 동일한 속성이 있으면 아래에 있는 속성을 먼저 적용한다는 것이다. 
 
[ css 기본 문법 ]

<기본형>
선택자{
    속성명1 : 속성값1; 
    속성명2 : 속성값2; 
    속성명3 : 속성값3; 
}

 

내가 선택한 태그 - 선택자 

---

1. css폴더를 만들어 담아줘야한다.
2. css의 확장자 : css / ex) style.css
3. css의 기본 구조는 딱히 없고 첫줄엔 @charset "utf-8"; 를 적어준다. 

4. css에선 ; 가 마침표다
5. 주석은  /**/ 모양 , 단축키는 똑같이 ctrl + / 

 
*css에선 오픈위드라이브서버(미리보기) 못한다. 

---

<html에 css 연결하기>
 
css폴더에 만든 css파일을 html에 연결하기
 
1. html에 head 부분에 <link rel="" href="">를 써주고 상대경로로 경로를 입력해준다.

 
li 라고만 치면 아래에 link : css 를 엔터쳐서 열어준다. 

rel 과 href 속성이 들어간다.

head 부분에 작성하는 것 잊지말기.

위의 코딩으로 css파일을 html파일에 적용시켜주는 것이다
 
 

---

<스타일 시트>
 :css로 작성한 문서 전체를 말한다.

1. 브라우저 스타일 시트 ( 사용자 스타일 시트가 없을 때 기본적으로 보여줌)
 
2. 사용자 스타일 시트 
    →인라인 스타일 시트 (우선순위 1위)
    → 내부 스타일 시트 (우선순위 2위)
    →외부 스타일 시트 (우선순위 3위)
 
<스타일 우선순위>
누가 더 먼저 적용되느냐의 순위
 
인라인 스타일 시트 > 내부 스타일 시트 > 외부 스타일 시트 > 브라우저 시트
(*인라인 시트는 가독성이 낮아서 유지보수가 어려워 잘 안쓴다)
 
다만 *외부 스타일 시트를 가장 많이 쓴다. 우선순위가 낮지만 유지보수와 파일관리가 쉽기 때문이다 
= 그냥 css 파일을 만들어서 쓰자

---

▪ 브라우저 기본 스타일 시트
 
브라우저 기본 스타일 시트는 브라우저에 기본적으로 내장되어있는 스타일 시트를 말한다. 
h1이나 ul,li등등 태그를 출력했을 때 보이는 이 특징들은 모두 브라우저 안에 잇는 기본 스타일시트가 적용되어 
보이는 디자인이다. 보통 웹페이지를 만들때에는 브라우저 기본 스타일시트를 '초기화'하여 사용한다. 
 
 
▪ 내부 스타일 시트
 
내부 스타일 시트는 html 문서 안 head 부분에 <style>태그를 이용해 css를 문서 내부에 작성하는 방법을 말한다.
외부 스타일시트보다 우선순위가 높지만, html에 css속성들이 너무 많이 작성되어 파일 길이가 길어지면 유지보수가 더 어렵기 때문에 외부 스타일 시트를 주로 사용한다.

 
▪ 외부 스타일 시트
 
외부 스타일 시트는  css라는 폴더를 만들어 그 안에 css파일을 따로 관리하는 것을 말함.
외부 스타일 시트로 관리하면 관련된 파일을 찾기 편하고 유지보수가 훨씬 쉽다는 장점이 있다.

▪ 인라인 스타일 시트
 
인라인 시트는 태그에 style이라는 속성으로 직접적으로 스타일을 적용하는 방식을 말한다.
내부스타일 시트보다 우선순위가 높아 태그에 직접 적용한 스타일이 절대적으로 적용된다.
인라인 스타일은 가독성이 떨어지고 우선순위가 높아서 수정하기가 어려워 잘 사용되지 않는다.

 
 
▪ important 
 
! important : 특정 속성의 속성값 뒤에 선언하여 사용한다.
어떤 스타일 시트 또는 어떤 선택자보다도 우선순위가 가장 높다. important가 적용된 속성은 다시 수정할 수 없으며, 
강제로 해당 속성을 적용한다. 
즉 유지보수가 어렵기 때문에 조심히 사용해야하는 속성이다.
important 여러 번 쓰면 안된다. 수정하면 와르르 무너진다.
그냥 안쓰는 게 좋다. 
**인라인을 이길 수 있는 건 ! important 인데 이건 수정도, 유지보수가 안되니깐 절대 주의해서 사용해야한다 
 
예시) 선택자{ 속성명 : 속성값 !important;}

 
 

---

<선택자> 

css의 선택자란?
태그를 선택해서 디자인을 적용한다
 
 
1. id(#) : 특정한 한 부분에만 다르게 적용하고 싶을 때 사용한다. 

하나의 요소에 하나의 id만 부여가능 (class는 같은 이름으로 여러 요소에 지정가능하다. 구분)

html에서 두번째 h2에 id를 적용해 이름을 logo라고 지어주었고 css에서 #logo 로 불러와주었다.
 
2. class(.) : 레이아웃이 똑같은 애들을 묶어서, 동일한 디자인을 적용해준다. (주로 많이 사용)

h2 class이름을 title로 정해주고, css파일에서 title로 불어와준다.

*class중에서도 하나만 다른 이름으로 지어서 다른 디자인을 적용시켜줄 수 있다.

그럼 페이지에서 위 사진처럼 표기된다. id가 우선순위가 더 높기때문에 가운데 글씨는 id 명령을 따라 보라색으로 표현된 것을 볼 수 있다. 
 
* id나 class 이름 지을 때 영어로, 영문다음숫자 / 숫자만이나 공백은 안된다. / 직관적으로 지어야한다. 
* id와 class의 이름이 같으면 구별이 안된다. 
 
 
3. 태그명 선택자 : 태그명을 그대로 가져와 디자인을 적용해준다

결과

 
 
4. 전체 선택자(*) : 전체선택자는 주로 페이지의 여백을 설정할 때 사용

-margin :  바깥쪽 여백
-pandding : 안쪽 여백
 
 
5. 그룹선택자(,) : 다양한 태그나 class,id등을 한꺼번에 불러와 스타일을 적용
한번에 태그를 여러개 부를 때 사용. 우선순위를 따지기 어렵다.

결과값

 

---

***<선택자 우선순위>
누가 더 먼저 적용되느냐의 순위
 
id(#) >  class(.)  >  태그tag 선택자  >  전체 선택자(*)
 
 
 
*css파일에서 불러올 때
id - (#)로 
class - (.) 으로 
태그명 - 태그명으로
전체 선택자 -  (*)로 
그룹선택자 - (,)
표기해서 불러온다. 

---

페이지의 기본 글자 색깔은
css에서 body를 불러와서 색을 설정해준다. 

 

---

<글자에 관한 속성들>
 
• 글자 종류
 
- 산세리프 Sans-serif :

획의 삐침이 없는 글씨체
한글의 돋움체(고딕체)에 해당된다.

- 세리프(serif) :

글자와 기호를 이루는 획의 일부 끝이 돌출된 형태

 

1. color : 글자 색상

html

css

#색상코드, 색상명, rgb(색상값)...으로 값을 줄 수 있다.
-마지막에 적용한 색으로 적용된다. 

적용된 결과

 
 
 
2.  font-family : 글꼴

글꼴은 ' ' 안에 쓰는 것이 기본이다. 

아래 바탕체 적용된 결과

 
 
3.  font-size : 글자 크기

- px : Font size를 지정할 때 가장 많이 사용되는 단위로, 크기를 지정하지 않으면 16px로 표시
- em : Font의 대문자 M을 기준으로 Parenet 요소에서 지정한 Font의 대문자 M의 너비를 1em으로
놓고 상대적 Value을 계산하는 방식으로, 지정하지 않으면 16px이 1em으로 지정된다.
- vw : 뷰포트 기준 / 브라우저를 줄이거나 늘리면 같이 유동적으로 사이즈가 변한다 - 반응형 만들 때 많이 쓴다.
 
 
4. font-style : 글자 스타일 

italic과 obliqe 는 별 차이 없다 

결과