1 CSS란?
- Cascading Style Sheets, 종속형 스타일 시트
- 브라우저에서 웹페이지의 외형을 결정하는 선언형 언어
- 태그에 어떤 장식을 할지, 어떤 크기와 폰트로 할지를 지정
1) css 기본 문법
h1{
font-size: 20px;
}- 셀렉터: CSS를 적용할 HTML 태그 지정 _ h1
- 속성: 셀렉터가 지정한 위치에 무엇을 바꿀지 결정 _ font-size
- 값: 속성으로 지정한 것을 얼마나 바뀌게 할지 결정 _ 20px
2) CSS 선택자
- 스타일 적용 영역을 선택하는 지시자.클래스명 { css 속성 : value; } _ 여러개 영역에 적용 가능함
- #아이디{ css 속성 : value; } _ 하나의 영역에만 적용해야 함
- 적용 우선순위 id > class > tag _ 동일한 우선순위일 경우 나중에 정의한게 우선적용
- ! important 를 value에 붙이면 우선순위 무시하고 우선 적용되나 되도록 쓰지말기
- id는 하나의 선택 영역에만 사용해야함
- :hover
- 사용자가 포인팅 장치를 올려 놓았을 때 적용되는 것
- id 선택자보다 우선순위가 낮으므로 id에도 적용하려면 _ #green:hover
- :active
- 사용자가 활성화한 요소(버튼 등)를 나타냄
- "활성"이란 보통 마우스 버튼을 누르는 순간부터 떼는 시점까지를 의미
- :focus
- 양식의 입력 칸 등 포커스를 받은 요소를 나타냄
- 포커스를 받은 요소 자체에만 해당하므로 자손을 선택하려면_:focus-within
div:hover { /* hover: 마우스를 가져다 놨을 때 색상 변하도록, id에는 적용X */
background-color: grey;
}
#green:hover { /* id 선택자에도 hover를 적용하기 위한 방법 */
background-color: grey;
}
div:active { /* active: 클릭 상태일 때 적용되는 디자인 */
background-color: purple;
}
input:focus { /* focus: 클릭 후 상태가 유지되는 디자인 */
background-color: blue;
}3) CSS 속성
- width, height
- margin, padding
- color
- font
- text-align
- background
- border
- visibility
- display
- float
- clear
- position
- cursor
- inline : 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치 → span, a, img, button
- block: 줄을 개행하여 앞 엘리먼트 다음줄에 배치 → p, div, ul, li, h1-h6
- display: inline과 block을 반대로 쓰고싶을 때 사용 → none, inline, block, inlineblock
- 여백
- margin: 바깥쪽 여백을 의미 → 위 오른쪽 아래 왼쪽 순서로 설정
- padding: 안쪽 여백을 의미 → 위 오른쪽 아래 왼쪽 순서로 설정
- em&rem
- rem: 문서 최상위 요소인 html을 기준으로 하여 크기를 지정
- em: 상위 요소를 기준으로 하여 크기를 지정
- user agent stylesheet: 브라우저마다 설정해놓은 기본 스타일링
- reset css: 브라우저 기본 스타일링을 초기화 (or * 안에 margin과 padding을 0으로 설정)
4) CSS 레이아웃
1. Display
- Block과 Linline 요소 중 어느 쪽으로 처리할지와 함께 자식 요소를 배치할 때 사용할 레이아웃을 설정
- 외부 디스플레이 유형은 플로우 레이아웃에 요소가 참여하는 방법을 나타냄
- 내부 디스플레이 유형은 자식의 레이아웃 방식을 설정함
- 속성
- none: 화면에서 사라짐, 크기 차지 X
- block: 가로 한 줄 차지, 일반적 div가 가지는 값
- inline: 개행 없이 컨텐츠를 감쌀 정도의 크기만 차지
- inline-block: 기본적으로 inline의 속성 가지고 있지만 임의로 크기 변경 가능
2. FlexBox
- 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것
- 부모 요소인 div.container → Flex Container(플렉스 컨테이너)
- 자식 요소인 div.item → Flex Item(플렉스 아이템)
- 속성
- display: flex; : 메인축 방향으로 배치되고 자신이 가진 내용물만큼 너비 차지
- flex-direction: 메인축의 방향을 결정 → row column row-reverse column-reverse
- flex-wrap: 한 줄이 꽉 차서 줄바꿈이 필요할 때를 설정 → nowrap wrap _개행
- justify-content: 메인축 방향으로 아이템을들 정렬하는 속성→ flex-end: 아이템을 끝점으로 정렬→ space-between: 아이템들 사이에 균일한 간격을 생성하여 정렬→ space-evenly: 아이템들 사이와 양 끝에 균일한 간격을 만들어 정렬
- → space-around: 아이템들의 둘레에 균일한 간격을 생성하여 정렬
- → center: 아이템들을 가운데로 정렬
- → flex-start : 기본값, 아이템을 시작점으로 정렬
3. Position
- 문서 상에 요소를 배치하는 방법을 지정
- 속성
- static : 기본값, 원래 HTML 문서 상에서 있어야 할 위치에 배치됨
- → 작성된 순 서 그대로 브라우저 화면에 표시되면 top, left, bottom, right 속성 무시됨
- relative: 요소의 원래 위치에 벗어나게 배치가 가능함
- → top, bottom, left, right 속성으로 여백을 지정할 수 있음
- absolute : relative의 반대 개념으로 <body> 요소가 배치의 기준이 됨
- fixed : 스크롤과 관계없이 항상 문서의 상단에 고정됨
