CSS란?
css: 웹에 표현되는 방법을 정해주는 마크업 언어
CSS의 적용 방법
1.인라인 스타일: HTML 태그 내부에 스타일 속성을 사용하여 스타일을 적용하는 방법
2.내부 스타일: <head> 태그 내부에 <style> 태그를 사용하여 스타일을 정의하는 방법
3.외부 스타일: 스타일 시트를 별도의 파일로 작성하고, HTML 문서에서 링크를 통해 불러와서 스타일을 적용하는 방법
CSS주석:
/* (주석) */
CSS 출처
브라우저 기본 스타일, 브라우저 사용자 스타일, 제작자 스타일로 분류 가능
1.제작자 스타일: 우리가 작성한 스타일 시트
2.사용자 스타일: 사이트를 방문하는 일반 사용자들이 구성한 스타일 시트를 의미함
3.브라우저 스타일: 브라우저가 기본으로 가지고 있는 스타일
*CSS출처 적용 우선순위: 사용자 !important > 제작자 !important > 제작자 > 사용자 > 브라우저
(주의: !important는 우선순위를 깰 수 있으니 주의)
Cascading: 폭포가 흐르듯 스타일이 우선순위에 맞게 연속적으로 적용됨
CSS 선택자
css선택자: css규칙을 적용할 요소를 정의
1. 기본 선택자
| 선택자 | 전체 선택자 | 타입 선택자 | 클래스 선택자 | ID 선택자 | 속성 선택자 |
| 문법 | * | 이름 | .(이름) | #(이름) | [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] |
| 용도 | 모든 요소 선택 | 특정 태그 이름을 가진 모든 요소 선택 | 주어진 class명을 가진 모든 요소 선택 | id속성에 맞는 요소 선택(웹 문서에서 고유한 하나의 태그에만 사용) | 속성으로 선택할 때 |
2.그룹 선택자
복수의 선택자를 쉼표로 구분해 나열
3.결합자
| 선택자 | 자손 결합자 | 자식 결합자 | 일반 형제 결합자 | 인접 형제 결합자 |
| 문법 | A B (사이에 공백으로 표현) |
A>B | A~B | A+B |
| 용도 | A태그 하위의 모든 B 요소 | A태그 바로 아래 자식인 모든 B 요소 | A태그 뒤에 나오는 모든 B요소 | A태그 바로 뒤에 있는 B요소 |
3.의사 클래스: HTML요소의 특별한 상태를 명시할 때 사용
-문법:
선택자:의사클래스 이름
{
속성:속성값;
}
4.의사 요소: HTML요소의 특정 부분만 선택할 때 사용
-문법:
선택자::의사요소이름
{
속성: 속성값;
}CSS적용 우선순위: !important>인라인 스타일>ID스타일>class스타일>Tag스타일
CSS속성-폰트
글꼴 관련 속성 MDN
| font-family | font-size | font-style | font-weight | font-variant |
| 글꼴 종류 지정 | 글자 크기 지정 | 이텔릭체 표시 지정 | 굵기 지정 | 소문자 -> 작은 대문자 |
웹폰트: 온라인 특정 서버의 폰트를 다운로드하여 사용
<style>
@import url('폰트 주소');
/*
다운로드 실패하면 '바탕'글꼴
*/
h1 {
font-family: '다운로드한 폰트', 바탕;
}
</style>
단위 em,rem
| px | rem | em | vw | vh | .... |
| 픽셀 단위 | 루트 요소의 글꼴 크기 | 요소의 글꼴 크기 | viewport 너비의 1% | viwport 높이의 1% |
글자 색상
color속성으로 지정하며 16진수(Ex: #ff0000),rgb(rgb(0,0,0),hsl,색상이름(black) 사용 가능
...
위에 것들 외에 매우 다양한 글자 관련 속성이 있음
필요할 때 마다 찾아서 사용!
CSS Box Model
Box Model: 웹 페이지에서 HTML요소가 차지하는 일정 공간
| content | padding | border | margin |
| HTML의 실질적인 내용 | 안쪽 여백 | content의 테두리 | 바깥쪽 여백 |
CSS속성
1.content
| width | height |
| 가로 너비 | 세로 너비 |
2.Padding
padding으로 조절하여 여백 지정
(padding-{방향} 으로 각각 지정 가능)
3.Border
border을 이용해 테두리 설정
4.Margin
margin을 사용해 바깥쪽 여백 지정
(margin-{방향} 으로 각각 지정 가능)
5.Box sizing
요소의 넓이,높이를 결정하는 방식을 변경 가능
-content-box: 콘텐츠 영역의 크기만 고려
-border-box:콘텐츠 영역과 패딩, 그리고 테두리의 크기를 모두 포함하여 요소의 크기가 결정
/* 기본값인 content-box로 설정된 경우 */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
}
/* border-box로 설정된 경우 */
.box {
width: 200px;
height: 100px;
padding: 20px;
border: 1px solid black;
margin: 10px;
box-sizing: border-box;
}
테두리 border
| border-style | border-width | border-color | border | border-radius |
| 테두리 스타일 지정 | 테두리 두께 지정 | 테두리 색상 지정 | 모든 속성 한번에 표기 | 꼭짓점 둥글게 |
바깥 여백 Margin
HTML요소의 바깥 여백 지정
(margin-{방향} 으로 각각 지정 가능)
안쪽 여백 padding
HTML요소의 안쪽 여백 지정
(padding-{방향} 으로 각각 지정 가능)
Display 속성
HTML요소를 어떻게 표시할지 결정
기본값
| none | block | inline | inline-block |
| 요소를 보이지 않게 설정 | 가로 영역 모두 채우기 | 컨텐츠만큼 영역 차지 |
HTM
'WINK-(Web & App) > HTML & CSS & JS 스터디' 카테고리의 다른 글
| [2023 신입부원 심화 스터디] 박지민 #2주차 - 기초문법 part. 2, 3 (0) | 2023.04.13 |
|---|---|
| [2023 신입부원 심화 스터디] 신진욱 #2주차 - 반복문,조건문,함수 (0) | 2023.04.13 |
| [2023 신입부원 기초 스터디] 박민규 #1주차 - 기초부터 확실히! (태그정리) (0) | 2023.04.07 |
| [2023 신입부원 기초 스터디] 도승준 #1주차 - 레전드가 어쩌구.. 필드셋이 저쩌구.. (0) | 2023.04.06 |
| [2023 신입부원 기초 스터디] 최종은 #1주차 - HTML알아가기 (0) | 2023.04.06 |
