입문자를 위한 CSS 기초 강의 (유노코딩)
CSS란? CSS의 역할 알아보기!
• CSS : Cascading Style Sheets
Cascading : 계단식
Style : 멋을 내다
Sheets : (종이) 한 장
→ 계단식으로 스타일을 정의하는 문서!
CSS는 HTML 문서에 스타일을 더해줌.
HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있음.
• CSS가 일하려면
- CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없음.
- HTML : 웹 문서의 콘텐츠를 구성하는 언어
- CSS : 웹 문서의 콘텐츠에 스타일을 추가하는 언어 (색상, 크기, 위치 등)
HTML과 함께 사용되지 않는 CSS는 단순 텍스트일 뿐이며,
웹브라우저를 통해 결과물을 확인하기 위해서는 반드시 HTML 문서 작성이 선행되어야 함.
기본 문법 및 사용 방법
CSS 기본 문법
선택자{
속성명: 속성값;
}
• 선택자 : 어떤 요소에 스타일을 적용할 지에 대한 정보
• {중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
• 속셩명 : 어떤 스타일을 정의하고 싶은지에 대한 정보 (색상, 크기 등)
• 속성값 : 어떻게 정의하고 싶은지에 대한 정보
CSS 기본 문법 사용 예
p{
color: red;
}
→ 그러면 p 태그가 이렇게 됩니다
• 선택자 : p태그에 스타일을 적용하겠다.
• {중괄호} : 이 안에 p태그에 대한 스타일을 정의하겠다.
• 속성명 : color를 정의하겠다. 이건 글자색을 의미한다.
• 속성값 : red로 정의하겠다. 빨간색 글자를 원한다.
주석
p{
/*
이 안에 작성하면
주석으로 처리된다
*/
/* color: red; */
}
• 주석은 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드임.
• 주로 코드에 대한 메모를 남기기 위한 용도로 사용됨.
HTML에 CSS를 더하려면
HTML 문서에 CSS문서(코드)를 적용하는 방식
• 인라인 스타일 : 태그에 직접 기술하기
• 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기
• 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기
인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식, 선택자가 필요 없음.
웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋음.
(코드 유지보수가 어려움)
<p style="color: blue;">
글자를 파랗게 만들어줘
</p>
스타일 태그
HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있음.
<style>
/* style 태그 안에는 CSS 코드를 작성해야 한다 */
p{ color: red; }
</style>
문서 간의 연결
확장자가 *.css인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고,
HTML문서에 이를 연결해줄 수 있음. 이때는 <link> 태그를 사용함.
<link href="./style.css" rel="stylesheet">
• href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
• rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
→ <link> 태그는 HTML 문서의 <head></head> 내부에서 사용해야 함.
선택자 1편
선택자
선택자{
속성명: 속성값;
}
선택자 : 어떤 요소에 스타일을 적용할 것인지에 대한 정보
• 기본 선택자
• 그룹 선택자
• 특성 선택자
• 결합 선택자
• 의사 클래스
• 의사 요소
기본선택자
1. 전체 선택자
모든 요소를 선택한다.
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호
*{
color: blue;
}
→ 문서 내 모든 요소의 글자 색을 파란색으로 지정함.
2. 태그 선택자
주어진 이름을 가진 요소를 선택함. (유형 선택자)
주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택함.
p{
color: blue;
}
→ 문서 내 모든 p태그 요소의 글자 색을 파란색으로 지정함.
3. 클래스 선택자
주어진 class 속성값을 가진 요소를 선택함.
주어진 class속성값을 가진 요소가 다수일 경우, 해당 요소를 모두 선택함.
.text{
color: blue;
}
→ 문서 내 class가 'text'인 모든 요소의 글자 색을 파란색으로 지정함.
4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택함.
id는 고유한(unique) 식별자 역할을 하는 전역 속성
(class는 동일한 속성값을 가진 요소가 여러 개 있을 수 있지만, id는 문서 내에서 고유한 값을 가짐.)
#topic{
color: blue;
}
→ 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정함.
그룹 선택자
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용함.
쉼표(,)를 이용해 선택자를 그룹화함.
h1, p, div{
color: blue;
}
→ 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란 색으로 지정함.
※ 선택자가 겹치는 경우
- 기본적으로 나중에 작성된 스타일이 적용됨.
- 선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정됨.
아이디 선택자 > 클래스 선택자 > 태그 선택자
아이디 선택자가 더 우선순위이므로,
p선택자에 지정된 red가 아닌 id 선택자에 지정된 green이 표시됨.
텍스트 꾸미기 속성
font-family : 글꼴을 정의한다.
font-size : 글자 크기를 정의한다.
text-align : 정렬 방식을 정의한다.
color : 글자 색상을 정의한다.
font-family
요소를 구성하는 텍스트의 글꼴을 정의함.
글꼴명을 속성값으로 지정함.
여러 개의 글꼴을 연달아 기입하여 우선순위를 지정할 수 있음.
*{
font-family: times, monospace, serif;
}
→ Times를 우선 지정하되, 지원되지 않을 경우 monospace를 지정한다.
산돌마니또가 우선 적용되어야 하는데, 컴퓨터에 없기 때문에 그 다음 폰트인 serif가 적용됨.
font-size
수치와 단위를 지정해 글자의 크기를 정의할 수 있음.
• px : 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기
• rem : <html> 태그의 font-size에 대응하는 상대적인 크기
html태그는 html문서의 최상위요소임. 거기의 몇 배의 폰트 사이즈인지 지정함.
• em : 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기
사용 예)
span{ font-size: 16px; }
span{ font-size: 2rem; }
span{ font-size: 1.5rem; }
text-align
블록 내에서 텍스트의 정렬 방식을 정의함. 미리 정의된 키워드 값을 지정함.
left / right : 왼쪽 또는 오른쪽 정렬한다.
center : 가운데 정렬한다.
justify : 양끝 정렬한다(마지막 줄 제외)
사용 예)
p{ text-align: right; }
Color
텍스트의 색상을 정의함. 다양한 방법으로 색상을 지정할 수 있음.
• 키워드 : 미리 정의된 색상별 키워드를 사용함(ex. red, blue 등)
• RGB 색상 코드 : # + 여섯자리 16진수 값 형태로 지정함.
• RGB 함수 : Red, Green, Blue의 수준을 각각 정의해 지정함.
사용 예)
span{ color: red; }
span{ color: #FF0000; }
span{ color: rgb(100%, 0%, 0%); }
※ RGB :
빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식
모든 수치가 가장 높을 때 흰색이 됨.
/* R: 00, G: 00, B: 00 */
span{ color: #000000; }
/* R: 70%, G: 10%, B: 20% */
span{ color: rgb(70%, 10%, 20%); }
display 속성 & border 속성
블록 레벨 요소 vs 인라인 요소
블록 레벨 요소 :
자기가 속한 영역의 너비를 모두 차지하여 블록을 형성함.
(ex. div, p, h1 등)
인라인 요소 :
자기에게 필요한 만큼의 공간만 차지한다.
(ex. span, a 등)
display 속성
요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의함.
/*
블록 레벨 요소인 div 요소를 인라인으로 처리하고 싶다면
*/
div{ display: inline; }
/*
인라인 요소인 a 요소를 블록 레벨로 처리하고 싶다면
*/
a{ display: block; }
display에는 미리 정의되어 있는 키워드를 속성값으로 지정함.
• inline : 인라인으로 처리함.
• block : 블록 레벨로 처리함.
• inline-block : 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리함.
• none : 디스플레이(표시)하지 않음.
border 속성
border 속성을 사용하면 요소가 차지하고 있는 영역에 테두리를 그릴 수 있음,
단축속성 : border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있음.
span{ border: 2px solid green; }
→ 두께가 2px인 직선 모양(solid)의 초록(green) 테두리를 만들어줘!
border속성의 하위 속성
border-color : color 정의 방식과 동일
border-width : thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
border-style : none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
display: inline 지정으로 필요한 영역에만 블록이 생김.
display: none 지정시 보이지는 않지만, 요소에서 사라진 것이 아님.
display: inline-block;
inline처럼 배치하되 블록의 속성은 가질 수 있음.
inline요소는 기본적으로 자기가 필요한 영역만 차지하기 때문에, 높이와 너비를 임의로 조정할 수 없음.
그러나 block은 조정 가능함.
박스모델 1편, 박스모델 소개
박스모델 (Box-Model)
브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 됨.
이 영역을 '박스'라 표현하며, CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있음.
하나의 박스는 다음 네 개의 영역으로 구성됨.
• 콘텐츠 영역
• 안쪽 여백
• 경계선 (테두리)
• 바깥쪽 여백
박스 각 영역의 크기
콘텐츠 영역 : width, height
안쪽 여백 : padding
바깥쪽 여백 : margin
테두리 : border-width
박스모델 2편, margin padding 다루기
다양한 경우의 수
여백은 상하좌우 네 개의 면에 존재하는 영역이다.
각 면에 개별적으로 두께를 정의하는 방법 2개
• 하위 속성 정의하기
• 여러 값을 한 번에 정의하기
padding과 margin에 동일한 접미사를 붙여서 개별 정의할 수 있음.
padding: 10px;, margin: 20px; 있어도 밑에 있는 속성값들이 적용됨.
여러 값을 한 번에 정의하기
padding과 margin은 네 면의 여백에 대한 단축속성
span{
display: inline-block;
width: 100px; height: 100px;
margin: 10px 20px 30px 40px; ---> 위/오른쪽/아래/왼쪽
}
margin: 10px 30px 20px 40px
2개인 경우 : 1) 위/아래, 2) 좌/우
3개인 경우 : 1) 위, 2) 좌/우, 3) 아래
4개인 경우 : 1) 위, 2) 좌, 3) 우, 4) 아래 [시계방향]
박스모델 3편, box-sizing
박스모델(Box model)
콘텐츠 영역 : 개발자가 태그 안에 표시해주는 너비, 높이 수치를 지정해 주어서 그 크기를 조절할 수 있음.
안쪽 여백 : padding 속성을 통해 정함. 테두리 안쪽에 여백을 두어서 테두리와 콘텐츠 사이의 공간 확보.
경계선(테두리) : 콘텐츠를 감싸주어 요소와 요소가 아닌 공간 사이에 경계선을 그어주는 역할을 함. 이는 border속성을 활용하면 그 두께를 조절할 수 있음.
바깥쪽 여백 : 해당 요소와 다른 요소 사이에 여백을 두어서 요소와 요소 사이의 공간을 확보하는 역할을 함.
콘텐츠 영역, 안쪽 여백, 경계선(테두리) → 실제 요소의 크기로서 역할
바깥쪽 여백 → 요소간 거리를 벌려주는 역할
box-sizing
box-sizing 속성은 요소의 너비(witdth)와 높이(height)를 계산하는 방법을 지정함.
• content-box : 기본값. 너비와 높이가 콘텐츠 영역만을 포함함.
• border-box : 너비와 높이가 안쪽 여백과 테두리까지 포함함.
→ 너비와 높이가 같더라도, box-sizing 속성값에 따라 크기가 달라질 수 있음.
박스모델 4편, background
background
배경(background)은 콘텐츠의 배경을 정의함.
단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의할 수 있음.
background-color : 배경 색을 정의함.
background-image : 배경 이미지를 정의함.
background-position : 배경 이미지의 초기 위치를 정의함.
background-size : 배경 이미지의 크기를 정의함.
background-repeat : 배경 이미지의 반복 방법을 정의함.
사용하는 이미지 소스 크기가 요소의 크기보다 작은 경우
→ 바둑판으로 반복해서 채움
내가 사용한 이미지 소스는 지정한 픽셀값보다 큼
background-position으로 위치 지정해주면 콘텐츠 영역 안에서 움직임.
박스 크기가 500x500이므로 이미지가 안에 꽉 차게 됨.
background-size: cover;
이미지의 비율이 깨지지 않는 선에서최대 사이즈로 나옴
background-size: contain;
이미지가 찌그러지거나 잘리지 않은 한도에서 최대 사이즈로 나옴
background: no-repeat url
background: url no-repeat
순서 바꿔써도 상관없음.
→ 하위 속성을 한 번에 정의할 경우, 정의할 속성과 정의를 생략할 속성을 다양하게 선택할 수 있어서 여러 경우의 수가 존재함.
float 그리고 clear
float
요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의 왼쪽이나 오른쪽에 배치되게 하는 속성.
• none : 기본값, 원래 상태
• left : 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함.
• right : 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함.
→ 문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지함.
clear
clear 속성은 float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있음.
• none : 기본값, 아래로 이동되지 않음을 나타내는 키워드
• left : float이 left인 요소의 아래로 내려가겠다
• right : float이 right인 요소의 아래로 내려가겠다
• both : float이 left 및 right인 요소의 아래로 내려가겠다
→ clear : both;를 사용하면 한방에 해결
position 2편, fixed sticky
fixed
요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킴.
.pos{
width: 200px; height: 200px;
background: peru;
position: fixed;
top: 50px; left: 50px;
}
→ 위에서부터 50px, 왼쪽에서부터 50px 떨어진 자리에서 움직이지 않음.
sticky;
요소를 일반적인 문서 흐름에 따라 배치하고, 스크롤(scroll) 되는 가장장 가까운 상위 요소에 대해 오프셋을 적용함.
.pos{
width: 200px; height: 200px;
background: peru;
position: sticky;
bottom: 0px;
}
→ 스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지함.
스크롤 쭈욱 내려서 첫번째 요소(첫번째로 도배된 글자들) 끝나고부터
위에서 100px, 오른쪽에서 130px 떨어진 곳에 쭈욱 고정됨.
flexbox 1편, 정의 및 사용 방법
flexbox
박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델
flexbox를 1차원 모델이라 부르는 이유 : 레이아웃을 다룰 때 한번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문임.
<div>
<div class="item">하나</div>
<div class="item">둘</div>
<div class="item">셋</div>
</div>
flexbox를 flex 컨테이너라고도 함(요소들을 포함하기 때문).
flex 컨테이너를 만들기 위해서는 컨테이너에 display:flex;를 적용해야 함.
<div style="display: flex;">
<div class="item">하나</div>
<div class="item">둘</div>
<div class="item">셋</div>
</div>
flex 컨테이너는 기본적으로 요소를 행(가로)방향으로 요소를 배치함.
flexbox에는 주축(main-axis)과 교차축(cross-axis)이 있음.
사용자는 목적에 따라 주축과 교차축을 바꿔가며 레이아웃을 결정할 수 있음.
세로방향=주축 ---> 가로방향=교차축
flex-direction
flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정함.
row : 기본값. 주축은 행, 방향은 콘텐츠의 방향과 동일.
row-reverse : 주축은 행, 방향은 콘텐츠의 방향과 반대.
column : 주축은 열, 방향은 콘텐츠 방향과 동일.
column-reverse : 주축은 열, 방향은 콘텐츠 방향과 반대.
flex-direction: row; -> 행
flex-direction: row; -> 열
flex-direction: row-reverse; -> row와 데칼로마니 해놓은 것처럼 대칭으로 반대방향
flexbox 2편, 몇 가지 관련 속성
flexbox 다루기
flexbox를 다루기 위해 사용할 수 있는 속성들
• 주축 배치 방법 : justify-content
• 교차축 배치 방법 : align-items
• 교차축 개별요소 배치 방법 : align-self
• 줄 바꿈 여부 : flex-wrap
justify-content: flex-start (요소를 앞쪽에 몰아넣기)
justify-content: flex-end (요소를 끝쪽에 몰아넣기)
justify-content: space-around; (주축에서 요소들간의 여백을 동일하게 맞춤)
justify-content: space-between; (주축에서 양끝 요소들 끝에 고정시킨 후 사이 여백을 동일하게 맞춤)
align-items: flex-end; (교차축 맨 끝에 정렬함)
align-items: center; (교차축 가운데에 정렬함)
align-self: flex-start; (self 클래스 요소만 교차축 가장 앞쪽에 정렬)
flex 컨테이너에서 자식요소가 자기보다 크면 자식요소의 크기를 줄인다. 안 삐져 나옴.
wrap-reverse는 반대로 함.
선택자 2편, 특성 선택자와 결합자
선택자{
속성명: 속성값;
}
선택자 : 어떤 요소에 스타일을 적용할 것인지에 대한 정보
특성 선택자 1. 컨셉
특성 선택자(속성 선택자) :
- 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택함.
- 기본형태는 [] 대괄호로 묶어주는 것.
[class]{
background-color: tomato;
}
-> 클래스 속성을 가지고 있는 요소를 선택하기
[class="item"]{
background-color: tomato;
}
-> 클래스가 "item"인 요소를 선택하기
특성 선택자 2. 값 확인
기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있음.
[class *= "it"]{ color: white; } ---> 클래스 값에 "it"이 포함되는 요소 선택하기
[class ^= "it"]{ color: white; } ---> 클래스 값이 "it"로 시작하는 요소 선택하기
[class $= "it"]{ color: white; } ---> 클래스 값이 "it"으로 끝나는 요소 선택하기
결합 선택자
1. 컨셉
결합 선택자(결합자) : 두 개 이상의 선택자를 결합시켜서 결합된 조건을 만족하는 요소를 선택함.
• 자손 결합자
• 형제 결합자
2. 자손 결합자
두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있음.
div p{ color: white; } ---> div 요소 안에 위치하는 모든 p요소를 선택하기
div > p{ color: white; } ----> div 요소의 바로 아래에 위치하는 모든 p요소를 선택하기
3. 형제 결합자
두 개의 선택자 중 첫 번째 선택자 요소의 형제(동일선상 요소)를 선택할 수 있음.
h1 ~ p{ color: red; } ----> h1 요소의 뒤에 오는 형제 중 모든 p요소를 선택하기
h1 + p{ color: red; } ----> h1 요소의 바로 뒤에 오는 형제 p요소를 선택하기
의사클래스(가상클래스)
의사클래스(가상클래스)
- 선택자에 추가하는 키워드
- 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미임.
선택자: 의사클래스{
속성명: 속성값;
}
h1:hover{
color: red;
}
-> h1 요소에 마우스 커서가 올라오면(hover) 글자를 빨간색으로 하겠다.
hover : 마우스 포인터가 요소에 올라가 있다.
active : 사용자가 요소를 활성화했다. (예를 들면, 마우스로 누르기와 같은)
focus : 요소가 포커스를 받고 있다.
disabled : 비활성 상태의 요소이다.
nth-child() : 형제 사이에서의 순서에 따라 요소를 선택한다.
의사요소
의사요소(pseudo-elements) :
선택자에 추가하는 키워드로, 이를 이용하면 선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있음.
선택자::의사요소{
속성명: 속성값;
}
li::first-letter{
font-size: 20px;
}
-> li 요소의 첫 번째 글자만 크기를 20px로 하겠다(기본값은 16px)
after : 요소의 앞에 의사 요소를 생성 및 추가
before : 요소의 뒤에 의사 요소를 생성 및 추가
first-line : 블록 레벨 요소의 첫 번째 선에 스타일을 적용
marker : 목록 기호의 스타일을 적용
placeholder : 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용
inherit, initial, unset
상속(Inheritance)
하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미함.
ul{
color: tomato;
}
-> li 요소를 선택하지 않아도도 상위요소 ul의 색깔이 반영됨.
상속이 되는 속성 vs 그렇지 않은 속성
상속 되는 속성 : color, font-family, font-size, font-weight, text-align, cursor 등
상속 안 되는 속성 : background-color, background-image, background-repeat, border, display 등
공용 키워드
모든 CSS 속성에 사용 가능한 키워드로, 전역 값이라 표현하기도 함.
inherit : 상위 요소로부터 해당 속성의 값을 받아 사용한다.
initial : (브라우저에 지정되어 있는) 해당 속성의 기본값을 요소에 적용함.
unset : 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용된다.
z-index
z-index 속성 : 요소의 쌓임 순서(stack order)을 정의할 수 있음.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며, 위치 지정 요소에 대해 적용할 수 있는 속성임.
정수 값은 상대적인 값 (반드시 순차적일 필요가 없음)
위치 지정 요소(positioned element) : position 속성이 정의되어 있는 요소
z-index 값은 정수로
z-index 기본값은 auto이다.
auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태이다.
'겹'이라고 써있는 first class 요소가 더 위에 쌓임
-> 두번째 요소인 '쳐'는 아예 보이지 않음.
'쳐'가 '겹'보다 더 위에 쌓임.
'있'이 깔림. ('있'이 auto 상태이기 떄문임)
z-index가 같으면 나중에 생성된 요소가 더 위에 쌓이게 됨.