CSS
CSS는 Cascading Style Sheets를 의미함.
- Cascading : 계단식
- Style : 멋을 내다
- Sheets : (종이) 한 장
= 계단식으로 스타일을 정의하는 문서!
CSS는 HTML 문서에 스타일을 더해 줌!
HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있음!
- CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의
- 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.
- HTML : 웹 문서의 콘텐츠를 구성하는 언어
- CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어(색상, 크기, 위치 등)
CSS 기본 문법
선택자{
속성명: 속성값;
}
선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상,크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보
p{
color: red;
}
선택자 : p 태그에 스타일을 적용하겠다.
{중괄호} : 이 안에 p 태그에 대한 스타일을 정의하겠다.
속성명 : color를 정의하겠다. 글자색
속성값 : red로 정의하겠다 빨간색
주석
p{
/*
이 안에 작성하면
주석으로 처리된다
*/
/* color: red; */
}
HTML에 CSS를 더하려면
HTML문서에 CSS문서(코드)를 적용하고자 할 때는
다음과 같은 방식들을 사용할 수 있음.
- 인라인 스타일 : 태그에 직접 기술
- 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술
- 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
1. 인라인 스타일
- 태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의
- 따라서 선택자는 필요 없다.
- 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다!
2. 스타일 태그
HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드 작성 가능!
3. 문서 간의 연결
확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고,
HTML문서에 이를 연결해 줄 수 있음. 이 때는 <Link> 태그를 사용함!
<link href="./style.css" rel="stylesheet">
- href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
- rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
→ <Link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 함!
4줄 요약
- CSS 코드는 선택자 / 중괄호 / 속성명 / 속성값 등으로 구성
- CSS 코드에도 주석 사용 가능. /* 주석 */
- CSS 코드를 HTML 문서에 적용하기 위해서는 인라인 스타일 / 스타일 태그 / 외부 문서 연결 등의 방식 사용
CSS 선택자
선택자{
속성명: 속성값;
}
선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
1. 전체 선택자
모든 요소를 선택
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호.
*{
color: blue;
}
→ 문서 내 모든 요소의 글자 색을 파란색으로 지정
2. 태그 선택자
주어진 이름을 가진 요소를 선택
"유형 선택자" 라고도 함
주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택
p{
color: blue;
}
→ 문서 내 모든 p 태그 요소의 글자색을 파란색으로 지정
3. 클래스 선택자
주어진 class 속성값을 가진 요소를 선택
주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택
.text{
color: blue;
}
→ 문서 내 class가 "text"인 모든 요소의 글자 색을 파란 색으로 지정!
4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택
id는 고유한(unique) 식별자 역할을 하는 전역 속성
#topic{
color: blue;
}
→ 문서 내 id가 "topic"인 요소의 글자 색을 파란 색으로 지정!
5. 그룹 선택자
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
쉼표(,)를 이용해 선택자를 그룹화 함.
h1, p, div{
color: blue;
}
→ 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란 색으로 지정!
6. 선택자가 겹치는 경우
선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용.
선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정.
★ 선택자 우선순위?
아이디 선택자 > 클래스 선택자 > 태그 선택자
5줄요약
- 선택자는 어떤 요소에 대한 스타일을 정의할 것인지에 대한 정보
- 기본 선택자로는 전체 선택자, 태그 선택자, 클래스 선택자, 아이디 선택자 등이 있음.
- 그룹 선택자는 여러 개의 선택자를 그룹화할 수 있는 선택자
- 문서 내에 동일한 선택자가 존재하는 경우 뒤에 작성 스타일이 적용!
- 서로 다른 선택자가 동일한 요소를 선택한 경우, 우선순위(아이디>클래스>태그) 고려!
텍스트 관련 속성
1. font-family
글꼴을 정의한다
글꼴명을 속성값으로 지정
여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정
*{
font-family: Times, monospace, serif;
}
→ Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정!
2. font-size
수치와 단위를 지정해 글자의 크기를 정의
px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
rem : <html> 태그의 font-size에 대응하는 상대적인 크기
em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
ex)
span{ font-size: 16px; }
span{ font-size: 2rem; }
span{ font-size: 1.5em; }
*h1은 기본 설정이 32px
p 태그는 기본 설정이 16px
3. txt-align
블록 내에서 텍스트의 정렬 방식
미리 정의된 키워드 값을 지정
left/right : 왼쪽 또는 오른쪽 정렬
center : 가운데 정렬
justify : 양끝 정렬 (마지막 줄 제외)
ex)
p{ text-align: right; }
4. color
텍스트의 색상
다양한 방법으로 색상 지정 가능
키워드 : 미리 정의된 색상별 키워드 사용 (ex= red, blue)
RGB 색상 코드 : # + 여섯자리 16진수 값 형태로 지정
RGB 함수 : Red, Green, Blue 의 수준을 각각 정의해 지정 (00red 00green 00blue)
ex)
span{ color: red; }
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
→ 모두 같은 색!
RGB란?
RGB 색상은 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의 모든 수치가 가장 높을 때 흰색이 됨!
4줄요약
font-famly는 글꼴을 지정하는 속성, 여러 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있음.
font-size는 글자 크기를 지정하는 속성, px, rem, em 등의 단위를 사용
text-align은 블록 내에서 텍스트의 정렬 방식을 정의
color는 다양한 방식으로 텍스트의 색상 방식을 정의
인라인이냐 블록이냐
블록레벨요소 vs 인라인 요소
블록 레벨 요소
자기가 속한 영역의 너비를 모두 차지하여 블록 형성
ex) div, p, h1 등
인라인 요소
자기에게 필요한 만큼의 공간만 차지
기본적으로 자기가 필요한 영역만 차지하기 때문에 높이와 너비를 임의로 조정 할 수 없음!!
단, inline-block으로 바꿔주면 변경 가능!! ★
ex) span, a 등
display 속성
display 속성은 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의
미리 정의되어 있는 키워드를 속성값으로 지정
inline : 인라인으로 처리
block : 블록레벨로 처리
inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리
none : 디스플레이(표시)하지 않음. (요소에서 사라지진 않음!!)
border 속성
border속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있음.
속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데 이를 "단축속성"이라고 함.
지정하는 값들을 따로따로 지정할 수도 있음!
border-color : color 정의 방식과 동일
border-width : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
border-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
ex)
span{ border: 2px solid green; }
→ 두께가 2px인 직선 모양(solid)의 초록(green) 테두리를 만들어줘!
5줄요약
display 속성은 요소의 블록 레벨, 인라인 여부를 변경 처리 할 수 있음!
display 속성은 요소를 배치할 레이아웃을 결정할 때 사용될 수 잇음
border 속성은 요소가 차지하는 영역에 테두리를 그릴 수 있음!
border는 여러가지 속성을 함께 정의할 수 있는 "단축속성"
border의 하위 속성은 border-style, border-width. border-color가 있음!
박스모델 #1
박스모델(Box-Model)
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 됨
이 영역을 "박스"라고 표현함
CSS는 이러한 박스의 크기, 위치, 속성을 결정할 수 잇음!
※ 렌더링이란?
- 서버로부터 HTML 파일을 받아 browser에 뿌려주는 과정
- 브라우저는 서버로부터 HTML 문서를 다운받고
- 렌더링 엔진은 HTML 문서를 파싱해서 DOM 트리를 만듬.
- 그 다음 외부 css 파일과 함께 포함된 스타일 요소를 파싱하여 CSSOM 트리를 만듬.
- 스타일은 브라우저의 자체 스타일, 사용자 정의 스타일, html 태그에 걸려있는 스타일 순서로 처리
- 나중에 처리되는 스타일을 따르게 됨.
- ==→ 인라인으로 들어가있는 스타일 속성이 우선순위를 가지게 됨!
하나의 박스는 4개의 영역으로 구성
콘텐츠영역 : width, height, 콘텐츠높이 / 콘텐츠너비 , 박스의 중심부, 언제나 테두리(border)로 감싸짐!
안쪽여백 : padding
경계선(테두리) : margin
바깥쪽 여백 : border-width
4줄요약
브라우저는 요소를 렌더링할 때 박스 모델에 따라 사각형으로 표현
하나의 박스는 네 개의 영역으로 구성
콘텐츠 영역, 안쪽 여백, 경계선, 바깥쪽 여백
각 영역의 크기를 정의하는 속성이 존재
박스모델 #2
다양한 경우의 수
- 여백은 상하좌우 네 개의 면에 존재하는 영역
- 작성자는 각 면에 개별적으로 두께를 정의할 수 있음.
- 이를 위해 두가지 방법을 사용
두가지 방법
1. 하위 속성 정의하기
상하좌우 여백을 정의할 수 있는 개별 속성들이 있다?
2. 여러 값을 한 번에 정의하기
padding과 margin은 네 면의 여백에 대한 단축 속성!
ex)
span{
display: inline-block;
width: 100px; height: 100px;
margin: 10px 20px 30px 40px;
}
4줄요약
여백은 상하좌우 네 면에 존재하는 영역
상하좌우 개별 속성을 사용하면 여백 두께를 개별 정의할 수 있음
padding과 margin 속성에 여러 면의 여백을 함께 정의할 수 있음
어떤 방법을 사용할지는 사용자(개발자) 마음이다.
박스모델 #3
box-sizing
- padding이나 테두리때문에 요소의 크기가 덩달아 커지는 경우 불편한 경우에 이를 대처하기위해 사용
- box-sizing 속성은 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정
- content-box : 기본값, 너비와 높이가 콘텐츠 영역만을 포함
- border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함
- = 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있음!
4줄 요약
- 박스 모델에 너비와 높이를 지정하면, 콘텐츠 영역의 크기가 결정됨
- box-sizing 속성은 너비와 높이가 포함할 영역을 변경함으로써 너비와 높이의 계산 방법을 결정할 수 있음.
- box-sizing의 기본값은 content-box이다.
- box-sizing을 border-box로 지정하면 테두리까지 너비와 높이에 포함 됨.
박스모델 #4
background
- 배경은 콘텐츠의 배경을 정의
- 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있음.
- background-color : 배경색을 정의
- background-image : 배경 이미지를 정의
- background- position : 배경 이미지의 초기 위치를 정의
- background-size : 크기를 정의
- ◆cover = 이미지에 따라서 비율 조정(깨지지않게)
- ◆contain = 이미지가 찌그러지거나 짤리지 않는 한도 내에서 최대 사이즈
- background-repeat : 반복 방법을 정의
4줄요약
- background는 콘텐츠의 배경을 정의함
- 단축 속성으로써, 다양한 하위 속성을 포함
- 하위 속성을 한 번에 정의할 경우, 정의할 속성과 정의를 생략할 속성을
- 다양하게 선택할 수 있어 여러 경우의 수가 존재한다.
- ★정의 시 여러 경우의 수가 존재하는 속성을 학습할 때는 외우려고 하기 보다는
- 경험을 통해 체득하는 방향으로 공부!!
부동요소 (float)
= 떠있는 요소
float
- 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 함
- none : 기본값, 원래 상태
- left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함
- right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함
- = 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지함!
clear
- float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있음!
- none : 기본값, 아래로 이동되지 않음을 나타내는 키워드
- left : float이 left인 요소의 아래로 내려가겠다.
- right : float이 right인 요소의 아래로 내려감
- both : float이 left 및 right인 요소의 아래로 내려감
- = clear: both; 를 사용하면 한방에 해결!
3줄 요약
- float 속성은 요소가 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 함
- 이 때 요소는 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지함.
- clear 속성은 float 요소 이후에 표시되는 요소가 float 요소의 아래로 내려가게 할 수 있음!
position #1
- 문서 상에 요소를 배치하는 방법을 정의
- position이 요소의 배치 방법을 결정하면,
- top/bottom/right/left 가 최종 위치를 결정하는 방식
- position: 난 이렇게 배치할거야;
- top: 윗면에서부터 얼만큼 떨어뜨릴거야;
- right: 오른쪽면에서부터 얼만큼 떨어뜨릴거야;
- left: 왼쪽면에서부터 얼만큼 떨어뜨릴거야;
- bottom: 아랫면에서부터 얼만큼 떨어뜨릴거야;
- = 상화좌우 위치 지정은 필요에 따라 선택적으로 사용!
- static : 기본값, 요소를 일반적인 문서 흐름에 따라 배치
- relative : 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용
- absolute : 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋 적용!
- fixed : 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정
- sticky : 일반적인 문서 흐름에서 제거하고, 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋 적용!
1. relative;
요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋 적용
오프셋(보충)이란?
= 위치를 얼마간 이동시키는 것을 의미!
2. absolute;
요소를 일반적인 문서 흐름에서 제거하고, 상위 요소 중 가장 가까운 position 지정 요소에 대해
상대적으로 오프셋을 적용함!
position 지정 요소란?
= position 속성에 속성값이 정의되어 있는 요소!
3. fixed;
요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킴!
4. sticky;
요소를 일반적인 문서 흐름에 따라 배치하고,
스크롤(scroll)되는 가장 가까운 상위 요소에 대해 오프셋을 적용!
스크롤 이동으로 요소가 움직여도 sticky 요소는 고정된 상태를 유지함!
'기초 물방울 > CSS' 카테고리의 다른 글
| CSS 공부 기록 핵심 정리 #2 (0) | 2022.04.12 |
|---|---|
| 생활코딩 CSS 복습용 메모 (0) | 2022.03.11 |