[css] css란 무엇일까?

1. css

웹페이지에서 구조를 담당하고 있는 html의 색, 크기 등의 시각화를 담당한다.

주로 속성과 값으로 이루어져 있다.

 

- 단일 속성 지정 : 1개의 속성과 값의 쌍을 의미한다.

- 다중 속성 지정 : 2개 이상의 속성과 값의 쌍을 의미한다.

선택자{
	속성: 값; // 종료를 의미하기 때문에 반드시 적어주기
}

css 지정 후 반드시 종료를 표기해야 한다. 아니면 문법적 오류가 뜬다.

 

css 나타내는 방법 3가지
1. html 태그에 css 직접 입력하기	inline style 방식으로 style = "속성 : 값" 으로 표기하기. 유지 보수에 유리하지 않고, 관심사 분리가 안 된다.  즉 같은 언어끼리 묶이지 않고 있다는 의미이다.
2. head 태그 안에 style 태그 입력하기	style tag 방식으로 head 태그 아래에 style 태그를 넣어준다. 유지 보수에 유리하나, 관심사 분리가 안 된다.
3. css file을 만들어서 불러오기	파일을 분리하여 관리하기. 유지 보수에도 유리하고, 관심사 분리가 잘 되어 있다. link 태그를 불러와서 잘 연결시키기.

 

css 사용 시에 선택자가 필요하다. 선택자에는 4가지가 있다.

css 선택자
1. 전체 선택하기 (전체 선택자)	*
2. tag 선택하기 (태그 선택자)	tag 적어주기.
3. class 선택하기 (class 선택자)	.class 이름 적어주기. 중복 가능하다.
4. id 선택하기 (id 선택자)	#id 이름 적어주기. 중복 불가능하다. 즉, 유일해야 한다.

2. css의 기본 원칙

- html은 모두 박스 모델로 이루어져 있다.

- content-box에서 border-box로 변경시키는 것이 css의 최종 목표이다.

- content-box : 내용물 기준을 의미한다. 무슨 일을 벌여도 내용의 크기가 변하지 않는다. 컨텐츠를 고정한다. 

- border-box : 경계 기준을 의미한다. 무슨 일을 벌여도 경계의 크기가 변하지 않는다. 웹사이트를 고정한다.padding 이용하여 content 크기를 줄일 수 있다.

margin // 밖 여백
border // 기준
padding // 안 여백
content // 기준

 

즉, css 설정 시에 모든 선택자를 border-box로 설정하면 웹사이트를 고정시켜서 내용물의 크기가 웹사이트 크기에 의존하게 된다. 

* {
	box-sizing : border-box;
}

3. flex

block 그리고 inline 태그를 원하는 대로 배치 및 꾸미는 것이 목적이다. 하지만 css는 대각선 이동이 불가능하다. 고로 가로 또는 세로로만 이동이 가능하다. flex는 여러 태그를 1개로 묶어서 정렬한다. 즉 부모 태그가 필요하다. 부모 박스가 기준이 되는 것이다.

 

- 부모 박스 : flex 정렬 시에 기준이 된다.

- 자식 박스 : 수직인지 수평인지에 따라서 가로, 세로 이동이 달라진다. 자식 박스와 justify-content는 방향이 동일하다.

 

display : flex;

flex 정렬하기
자식 박스  flex-direction	수평	수직
가로	justify-content	align-items
세로	align-items	justify-content

가로, 세로 이동을 하기 위하여 justify-content와 item-aligns를 이용한다.

4. position

position은 박스 위치를 조정한다. position을 비활성화한 경우에는 static이다.

absolute	박스 기준 절대 위치
relative	부모 박스 기준 상대 위치
fixed	화면 기준 절대 위치  앱에서 네비게이션 바 등을 의미한다. 스크롤 시에도 내려가지 않는 경우이다.

5. figma

- ctrl + 마우스 휠 : zoom in 또는 zoom out 가능하다.

- space + 마우스 : 위치 조정 가능하다.