CSS 기초 _ 생활코딩

SW마에스트로 2차 코딩테스트에 웹 문제를 위해 웹 공부를 시작해본다. HTML은 저번에 졸업작품을 위해 생활코딩을 통해 배워봤으니 CSS와 JavaScript를 공부하기로 했다. 우선 CSS에 대한 내용을 여기에 정리해보도록 한다.

 

1. CSS란?

- HTML 언어의 한계를 보완하기 위해 등장(HTML을 좀 더 아름답게 만들기 위한 목적)

 

2. 배경

① 초기 배경 : HTML에 태그 추가(ex _ <font>) BUT 변경사항을 여러곳에 적용하기 어렵

② CSS라는 새로운 언어 도입 : 중복의 제거 가능(효율성) / html자체의 기능 보존(정보만을 유지)

 

3. 방식

① inline style 속성 이용 (selector 필요X)

<태그 style(속성) = "property:value"(declaration)>

② internal : <style>태그 내에 작성 _ html에게 css 작성을 알려줌(selector 필요O)

<style> 
 selector(선택자){
 	declaration(property:value);
 }
</style>

- 장점 : 별도의 css 파일 관리, 서버에 별도의 요청 필요 없음.

③ external : 외부 파일(.css)로 지정하기 (9번 참고)

 

** 각 delcaration의 구분 : ;(세미콜론) 이용

**우선순위 : inline > internal > external

 

4. Property

- 검색을 통해 원하는 property 찾아나가고 문제 해결하기!!

ex> css  + text size + property

 

5. Selector(선택자)

① class 선택자

- 그룹핑하여 적용할 수 있음 --> .클래스명 을 selector로 지정

- 여러개의 값이 들어갈 수 있고 띄어쓰기로 구분 가능

- 여러개의 선택자 태그로 제어 가능 --> 나중에 등장한 해당 선택자의 영향을 받음

② ID 선택자(id)

- #id명 을 selector로 지정

- class보다 우선적으로 적용(순서 상관X)

- 딱 한 번만 등장해야됨(중복 불가)

 

--> id 선택자 > class 선택자 > 태그 선택자 (같은 강도라면 뒤에 오는 것이 영향력이 큼)

**검색 : css selector를 통해 selector의 종류를 해석 가능

 

6. Box model

- block level element : 화면 전체를 쓰는 태그 (ex> h1)

- inline element : 자기 자신의 컨텐츠만큼을 쓰는 태그(ex> a)

**display:block, display:inline을 통해 차지하는 부피를 변경할 수 있음.

**display:none: 태그부분이 안보이게 하고 싶음

**선택자 여러개에 대해 한번에 작업 가능함 (ex> h1, a)

**전부 border- 를 쓴다면 ? border:5px red solid

 

- padding : 테두리(box내)의 여백

- margin : box간의 여백

- width : box의 너비

- heigth : box의 높이

 

- 검사 기능_styles : 어떤 css의 영향을 받고 있는지 보여줌!

 

7. 그리드(grid)

- <div> : 아무 의미가 없는, 디자인을 위한 태그 / block level

- <span> : 아무 의미가 없는, 디자인을 위한 태그 / inline

 

- 부모 태그가 필요 + 부모 태그에 id "grid"를 줌

<style>
    #grid{
        display:grid;
        grid-template-columns:150px 1fr;
    }
</style>

**fr : 화면의 얼만큼 비율을 차지할 것인가. (1fr 1fr --> 1:1)

 

- caniuse 사이트 : 어떤 기술에 대해 어떤 사이트에서 많이 이용되는가, 지원하고 있는지를 확인

https://caniuse.com/

Can I use... Support tables for HTML5, CSS3, etc

8. 반응형 디자인(Responsive Web)

: 화면의 크기에 따라 웹페이지의 요소들이 최적화되어 변화

- 미디어 쿼리(media query)

: 어떠한 조건을 만족할 때만 css의 내용이 동작하도록 할 수 있음

<style>
    @media(max-width:800px){
    	div{
        	display:none;
    	}
    }
</style>

9. CSS 코드의 재사용

- 여러가지 파일에 같은 내용의 style을 이용하는 경우 수정의 용이성을 위해!!

- "css파일을 빼놓기!!"(다운로드 받는 방식)

<link rel="stylesheet" href="style.css">

- 캐싱 : 한번 css파일을 다운로드 받았다면 파일이 바뀌기 전까지는 컴퓨터에 저장해놓고 다시 다운로드 받지 않음

   --> 트래픽(네트워크 사용료)을 감소시킬 수 있는 효과!!