웹페이지에 css 사용방법 (=css 범위 지정 방법)
- style 태그를 사용 (head 태그 안에서 사용하는 것)
- style 속성을 사용(바디 태그 안에서 속성을 추가하는 것)
css의 효과는 여러 값을 줄 수 있으며, 세미콜론(;)으로 각 값을 구분
CSS 속성을스스로 알아내는 방법
CCS 선택자의 기본
- 동일한 태그 내에서 그룹화 하고 싶을 때 class 속성을 사용 ( ex) class="saw" )
- style 태그에서 선택자로 class 속성을 선택할 때 .을 사용 ( ex) .saw )
- class 속성의 값은 여러 개를 할당할 수 있으며, 띄어쓰기로 구분 ( ex) class="saw active" )
- style 태그 내에서 마지막에 할당된 효과가 최종 선택됨 ( 중복되면 나중 값이 반영 )
- 선택자의 우선 순위
- id > class > tag ( 대상이 구체적일수록 우선 순위가 높음 )
- id 태그와 같은 경우 웹페이지 내에서 중복되지서는 안되는 유일한 값
박스 모델
- 공간 배치에 따른 element(=tag)
- block level element - 화면 전체를 쓰는 태그
- inline element - 컨텐츠의 내용만큼 공간을 차지하는 태그
- block은 css 값(display)사용해서 바꿀 수 있음 ( 기본값이 설정되어있을 뿐 고정된 속성 X )
- 같은 CSS 값을 사용하는 셀럭터는 쉼표로 중복 제거
- box model의 기본 구성
- 개발자도구의 style에서 해당 값을 확인 가능 ( 페이지 우클릭 -> 검사 -> styles )
- box의 크기를 실시간으로 조절해보고 싶다면 아래의 값을 더블클릭 후 화살표 위아래로 조절하여 확인 가능
(실제 값이 바뀌는 것은 아님 <- 원하는 값을 찾은 후 소스코드 상에 반영 필요)
Grid
- 페이지의 레이아웃을 설정하기 위해 diplay 속성에서 사용하는 css 속성값
- 레이아웃을 설정하기 위해서 같은 태그 아래에 공존해야함 ( 디자인 태그를 사용하기 위한 두가지 방법)
- grid-template-columns (grid-template-rows)의 속성으로 배치, 속성 값으로 크기를 사용
TIP
- caniuse - 웹브라우저들이 얼마나 기술들을 채택하여 사용 중인가를 보여주는 웹 페이지
반응형 웹(responsive web) / 반응형 디자인
- 화면에 크기에 따라서 웹 페이지의 각 요소들이 반응해서 동작하는 기술
- Media query 를 통해서 반응형 웹 구현 가능
- @media( [화면의 크기]) - max-width(최대값 설정) or min-width(최소값 설정) 를 사용
- 이후 style 태그 내의 효과를 변경하는 것과 같이 중괄호 안에 수정하면 됨
CSS 코드의 재사용
- 한 디자인을 적용하기 위해서 모든 html 파일에 메뉴얼하게 수정해주어야함
>> style 태그가 모든 웹페이지에 중복하여 들어가 있기 때문에 발생 - link 태그를 통해 css 가 담긴 파일을 적용 style 태그를 css 파일에서 통합하여 관리
- 1.html 파일을 웹서버에 가져올때, css 파일을 같이 다운로드함캐싱을 사용함으로써 css를 파일을 만드는 것이 훨씬 더 네트워크 측면에서 유리하게 됨
- 처음에는 html 내부에 css를 넣는 것이 네트워크 측면에서 유리하지만, 반복적인 재사용으로 캐시의 사용률이 높아지면 단일 css 파일을 사용하는 것이 더 유리해짐