CSS란?
HTML로 작성한 기본 틀을 꾸밀 때 사용하는 스타일을 정리한 시트.
정리하자면 HTML은 웹 페이지의 뼈대를 만들고, CSS로 웹 페이지를 예쁘게 꾸미는 역할을 함.
CSS 구조
CSS 적용 방법
-인라인 스타일
- 스타일을 정의하고 싶은 HTML 요소에 스타일을 적용한다.
-내부 스타일
- <head> 태그 안에 <style> 태그를 사용하여 정의한다.
-외부 스타일
-외부 스타일은 CSS 파일을 외부에 정의해 놓고, 외부에 정의한 CSS를 HTML파일에 연결하여 사용하는 것을 말한다.
관리하기 용이하고 용량도 적기 때문에 이 방법이 주로 사용됨
CSS 출처 3가지
-제작자 스타일
- 말 그대로 제작자가 작성한 스타일
-사용자 스타일
- 사이트를 사용하는 사용자가 구성한 스타일
-브라우저 스타일
- 브라우저마다 기본적으로 지정하고 있는 스타일
CSS 출처 적용 우선순위
사용자 !important > 제작자!important > 제작자 > 사용자 > 브라우저
CSS 선택자
- 전체 선택자
- 타입 선택자
- 클래스 선택자
- ID 선택자
- 속성 선택자
- 그룹 선택자
선택자에는 이러한 종류들이 있는데 모두 외울 필요는 없고,
나중에 필요한 선택자를 사용할 때 한번씩 보면 자연스럽게 외워질 것 같다.
CSS 결합자
- 자손 결합자
- 자식 결합자
- 일반 형제 결합자
- 인접 형제 결합자
CSS 적용 우선순위
!important > 인라인 스타일 > ID 스타일 > class 스타일 > Tag 스타일
CSS 속성 폰트, 표
웹 폰트
- 사용자의 컴퓨터에 설치된 폰트와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여
화면에 표시해주는 웹 전용 폰트입니다.
- 폰트 단위는 em, rem 이 있고, 아래와 같이 사용한다.
글자 색상
-color 속성으로 지정하며 색상 값으로는 16진수 값 rgb 값 hsl 값 색상 이름이 사용된다
표 관련 속성
- 지난주차에 집중적으로 정리했으니 오늘은 간단하게 정리함.
CSS Box Model
여기서 헷갈렸던것은 padding과 margin의 차이점이 헷갈려서 구글링을 통해서 찾아보았다.
-padding은 요소의 내부 영역을 지정하는 속성으로, 요소의 콘텐츠와 테두리(border) 사이의 간격을 조절합니다. padding 값이 커지면 요소의 내용이 테두리에서 더 멀어지고, 작아지면 요소의 내용이 테두리에 가까워집니다.
-margin은 요소의 외부 영역을 지정하는 속성으로, 요소와 요소 사이의 간격을 조절합니다. margin 값이 커지면 요소와 주변 요소들 간의 간격이 커지고, 작아지면 요소와 주변 요소들 간의 간격이 작아집니다
CSS Display
display 속성
- none
- 요소를 보이지 않게 설정한다.
- block
- 기본적으로 가로 영역을 모두 채우며, block 요소 다음에 등장하는 태그는 줄바꿈이 된 것처럼 보인다.
- inline
- 컨텐츠만큼 영역을 차지한다.
- inline-block
- block과 inline의 중간 형태로 요소는 inline인데 내부는 block처럼 표시한다.
이번주는 시험때문에 저번주보다 조금 부족하지만 시험끝나고 부터는 다시 더 열심히 하는걸로 🫡
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 기초 스터디] 박승환 #2주차 - 새싹이 자랐다!! (0) | 2023.04.13 |
|---|---|
| [2023 신입부원 심화 스터디] 황현진 #2주차 - 기초문법 part.2, 3 (0) | 2023.04.13 |
| [2023 신입부원 기초스터디] 도승준 #2주차 Cascading 뭔가 단어가 멋있지 않나요 저만 그래요? (0) | 2023.04.13 |
| [2023 신입부원 기초 스터디] 조상혁 2주차 - CSS알아가기! (1) | 2023.04.13 |
| [2023 신입부원 심화 스터디] 박지민 #2주차 - 기초문법 part. 2, 3 (0) | 2023.04.13 |
