📕 CSS란
: Cascading (계단식) Style (멋을 내다) Sheets ((종이) 한장) = 계단식으로 스타일을 정의하는 문서
CSS는 HTML 문서에 스타일을 더해줌
HTML 문서는 태그가 태그를 포함하는 계단식 구조 지님
(HTML 문서(코드) + CSS 문서(코드) => 문서열기 => 코드해석)
📙 CSS 기본 문법
📖 스타일 정의의 기본 문법
선택자{
속성명: 속성값;
}- 선택자: 어떤 요소에 스타일을 적용할지에 대한 정보
- {중괄호}: 선택한 요소에 적용할 스타일을 정의하는 영역
- 속성명: 어떤 스타일을 정의하고 싶은지에 대한 정보(색상,크기 등)
- 속성값: 어떻게 정의하고 싶은지에 대한 정보
ex.
p{
color: red;
}- 선택자: p태그에다가 스타일을 적용
- {중괄호}: 이 안에 p태그에 대한 스타일을 정의
- 속성명: color를 정의, 이건 글자색을 의미함
- 속성값: red로 정의, 빨간색 글자를 원함
✏️ 주석
: 사람에게는 보이지만, 컴퓨터(웹브라우저)에게는 보이지 않는 코드, 주로 코드에 대한 메모를 남기기 위한 용도로 사용
p{
/*
이 안에 작성하면
주석으로 처리된다
*/
/* color: red; */
}📖 HTML에 CSS를 더하는 방법
: HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식 사용 가능
- 인라인 스타일: 태그에 직접 기술
- 스타일 태그: 스타일시트를 위한 태그를 추가해 기술
- 문서 간의 연결: 스타일시트 문서를 따로 작성해 HTML 문서와 연결
✏️ 인라인 스타일
: 태그에 style 속성을 추가해 요소에 직접적으로 스타일을 정의하는 방식, 선택자 필요 x
빠르고 간단하지만 웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋음
(서로 역할이 다른 코드들을 서로 분리해서 관리해야 코드를 유지/보수하기 편하기 때문)
<p style="color: blue;">
글자를 파랗게 만들어줘
</p>✏️ 스타일 태그
: HTML 문서에 <style></style>태그를 추가해 그 안에 CSS 코드를 작성 가능
스타일 태그는 html 태그이지만 그 안에 들어가는 코드는 css코드
스타일 관련 코드는 html 문서에 대한 정보로 취급하므로 일반적으로 html의 헤드 태그 안에 주로 위치
<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>내부에서 사용해야함
실습방법
- 인라인 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
</head>
<body>
<p style="color: blue;"">
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</form>
</body>
</html><실습결과>
2. 스타일 태그
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
p{
color: red;
<!--세미콜론은 스타일 하나에 대한 정의가 끝났음을 의미 따라서 세미콜론 뒤에 이어서 또 다른 스타일 정의 가능>
} <!--css코드에서는 html코드와 마찬가지로 공백(가독성위함) 무시-->
</style>
</head>
<body>
<p>
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</form>
</body>
</html><실습결과>
3. 문서 간의 연결
1. */style.css 코드
p{
color: red;
}- html 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<link href="./style.css" rel="stylesheet">
</head>
<body>
<p>
HTML 문서를 준비하고, 에디터로 여신 다음, 내용을 작성하고 브라우저로 확인해주세요.
</p>
</form>
</body>
</html><실습결과>
📗 CSS 선택자 (1)
: 어떤 요소에 스타일을 적용할 것인지에 대한 정보
선택자{
속성명: 속성값;
}📖 선택자의 종류
- 기본 선택자
- 그룹 선택자
- 특성 선택자
- 결합 선택자
- 의사 클래스
- 의사 요소
✏️ 기본 선택자
- 전체 선택자
: 모든 요소를 선택
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호
*{
color: blue;
}=> 문서 내 모든 요소의 글자 색을 파란색으로 지정
- 태그 선택자
: 주어진 이름을 가진 요소
'유형 선택자라고도 함
주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택
p{
color: blue;
}=> 문서 내 모든 p태그 요소의 글자 색을 파란색으로 지정
- 클래스 선택자
: 주어진 class 속성값을 가진 요소를 선택
주어진 class 속성값을 가진 요소가 다수일 경우, 해당 요소 모두 선택
.text{
color: blue;
}=> 문서 내 class가 "text"인 모든 요소의 글자 색을 파란색으로 지정
- 아이디 선택자
: 주어진 id 속성값을 가진 요소를 선택
id는 고유한(unique) 식별자 역할을 하는 전역 속성 (클래스의 경우 동일한 클래스 속성값을 가진 요소가 여러개 있을 수 있으나, id같은 경우는 문서 내에서 고유한 값을 가짐)
단 하나의 요소를 선택하고 싶을때 사용
#topic{
color: blue;
}=> 문서 내 id가 "topic"인 요소의 글자 색을 파란색으로 지정
- 그룹 선택자
: 다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용
쉼표(,)를 이용해 선택자를 그룹화
h1, p, div{
color: blue;
}=> 문서 내 모든 h1, p, div 태그 요소의 글자 색을 파란색으로 지정
- 선택자가 겹치는 경우
: 선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용
선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정- 선택자 우선순위?_
: 선택한 요소가 겹치는 경우 어떤 것이 우선적으로 적용될 것인가를 정의한 순위
아이디 선택자 > 클래스 선택자 > 태그 선택자
- 선택자 우선순위?_
실습방법
- 전체 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
*{ color: red; }
</style>
</head>
<body>
<h1>제목을 나타낸다!</h1>
<p>문단을 표시한다 가가가</p>
<p>문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
2. 태그 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
h1{ color: red; }
</style>
</head>
<body>
<h1>제목을 나타낸다!</h1>
<p>문단을 표시한다 가가가</p>
<p>문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
3. 클래스 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.text{ color: green; }
</style>
</head>
<body>
<h1 class="text">제목을 나타낸다!</h1>
<p>문단을 표시한다 가가가</p>
<p class="text">문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
4. id 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.text{ color: green; }
#gagaga{ color: orange; }
</style>
</head>
<body>
<h1 class="text">제목을 나타낸다!</h1>
<p id="gagaga">문단을 표시한다 가가가</p>
<p class="text">문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
5. 그룹 선택자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
h1, p{
color: purple;
}
</style>
</head>
<body>
<h1 class="text">제목을 나타낸다!</h1>
<p id="gagaga">문단을 표시한다 가가가</p>
<p class="text">문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
6. 우선순위
(1) 뒤에 적은 거 우선순위
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
h1{color: red;}
h1{ color: blue; }
</style>
</head>
<body>
<h1 class="text">제목을 나타낸다!</h1>
<p id="gagaga">문단을 표시한다 가가가</p>
<p class="text">문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
(2) .text 우선순위
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
.text{color: red;}
h1{ color: blue; }
</style>
</head>
<body>
<h1 class="text">제목을 나타낸다!</h1>
<p id="gagaga">문단을 표시한다 가가가</p>
<p class="text">문단을 표시한다 나나나</p>
<p>문단을 표시한다 다다다</p>
</body>
</html><실습결과>
📘 display 속성 & border 속성
🗒️ 블록 레벨 요소 vs 인라인 요소
- 블록 레벨 요소: 자기가 속한 영역의 너비를 모두 차지해 블록 형성(div, p, h1 등)
- 인라인 요소: 자기에게 필요한만큼의 공간만 차지(span, a 등)
? ) a요소가 블록을 형성하게 만드는 방법이 있을까?
📖 display 속성
: 선택된 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의함
/*
블록 레벨 요소인 div 요소를
인라인으로 처리하고 싶다면
*/
div{ display: inline; }
/*
인라인 요소인 a 요소를
블록 레벨로 초리하고 싶다면
*/
a{ disply: block; }✏️ display 속성 값
: display에는 미리 정의되어 있는 키워드를 속성값으로 지정
- inline: 인라인으로 처리
- block: 블록레벨로 처리
- inline-block: 인라인으로 배치하되 블록 레벨 요소의 속성을 추가할 수 있도록 처리
- none: 디스플레이(표시)하지 x
=> 이 외에도 다양한 속성값 존재
📖 border 속성
: 요소가 차지하고 있는 영역에 테두리를 그림
border 속성에는 속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데, 이러한 속성을 '단축속성'이라고 함
span{ border: 2px solid green; } : 두께가 2px인 직선 모양(solid)의 초록(green) 테두리를 만들어줘
✏️ border 속성의 하위 속성
: 단축속성은 여러가지 속성을 함께 지정해 줄 수 있는 속성
border 속성에 지정하는 값들을 따로따로 지정할 수도 있음. 각 속성은 다음과 같음
- border-color: color 정의 방식과 동일
- border-width: thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위
- border-style: none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등
실습방법
(1) 인라인 블록 알아보고 바꿔보기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<!--차지하고 있는 영역 보기 위함, div를 인라인으로 바꾸면 필요한만큼의 영역만 차지하므로 블록 형성 x->아래 있던 span태그가 위로 올라옴(인라인이 블록이 아닐때)-->
<style>
div{
border: 1px solid red;
display: inline;
}
span{
border-width: 5ps;
border-style: dashed;
border-color: rgb(100%, 50%, 0%);
display: block;
}
</style>
</head>
<body>
<div>나는야 블록 레벨</div>
<span>나는야 인라인</span>
</body>
</html><실습결과>
(2) none과 inline-block
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<!--차지하고 있는 영역 보기 위함, div를 인라인으로 바꾸면 필요한만큼의 영역만 차지하므로 블록 형성 x->아래 있던 span태그가 위로 올라옴(인라인이 블록이 아닐때)-->
<!--none은 display 안한다 = 요소 자체가 아예 사라진 것이 아니라 보이지 않게 한 것 (존재하지만 보여주지 않는다) -->
<!--인라인 블록은 인라인처럼 배치하되, 블록의 속성(width, height)을 가질 수 있다 (인라인요소는 기본적으로 필요한 영역만 차지하므로 높이와 너비를 임의로 조절 x, 블록은 가능)-->
<!--인라인 요소의 너비와 높이를 임의로 조절할 수 있게 하고 싶으면 인라인 블럭 사용-->
<!--디스플레이는 여러가지 속성 값을 추가해서 다양한 디스플레이 특성들을 가질 수 있다.( 대표적: 디스플레이 요소 안에 들어가는 자식 요소의 배치를 바꾸는 레이아웃 관련 속성도 존재) -->
<style>
div{
border: 1px solid red;
display: none;
}
span{
border-width: 5ps;
border-style: dashed;
border-color: rgb(100%, 50%, 0%);
display: inline-block;
}
</style>
</head>
<body>
<div>나는야 블록 레벨</div>
<span>나는야 인라인</span>
</body>
</html><실습결과>
📕 박스모델 (1)
: 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형 형태로 영역을 차지하게 되는데 이 영역을 '박스'라 표현함
CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정 가능
- 하나의 박스는 다음 네 개의 영역으로 구성됨
- 콘텐츠 영역: 콘텐츠 표현/표시하는 영역, 박스의 중심부에 위치, 콘텐츠는 너비와 높이를 가짐, 이 컨텐츠는 언제나 테두리로 감싸져 있음
- 안쪽 여백: 필요한 경우 테두리를 중심으로 박스에 안쪽에다가 여백을 추가해서 콘텐츠와 테두리 사이의 공간을 마련할 수 있음
- 경계선(테두리): 보더 속성을 통해 색상이나 두께, 모양 등을 정의할 수 있는 영역
- 바깥쪽 여백: 테두리 바깥쪽에 여백을 두어서 다른 요소와 거리를 필요한만큼 벌릴 수 있음
- 박스 각 영역의 크기를 정의할 수 있는 속성
- 콘텐츠 영역: width(너비), height(높이)
- 안쪽 여백: padding(두께)
- 바깥쪽 여백: margin(두께)
- 테두리: border-width(테두리의 두께)
실습방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
/*테두리 표시하기 위해 border 속성활용*/
div{
border: 3px solid red;
padding: 10px;
/*padding은 요소를 감싸고 있는 테두리 안쪽에 여백 추가 속성*/
/*컨텐츠 영역을 넘어 상하좌우로 연두색으로 하이라이팅 되는 영역 추가됨*/
margin: 20px;
/*margin 바깥쪽의 여백 나타내주는 속성*/
/*주황색으로 표시되는 여백 추가 확인 가능*/
/*여백이 추가됐으므로 이 div요소 외의 다른 요소를 웹묺서에 추가하면 이만큼의 여백을 두고 거리를 떨어뜨리게 됨*/
width: 90px; height: 35px;
/*콘텐츠 영역은 두가지 값으로 크기 조절 width와 height*/
}
span{
width: 100px; height:100px;
/*인라인요소는 border,margin,padding 다 가질 수 있지만 width와 height는 가질 수 없음*/
/*span 태그에 width와 height 지정하려면 display를 인라인 블록으로 바꿔주면 가능*/
display: inline-block;
}
</style>
</head>
<body>
<div>요소의 콘텐츠</div>
<!--body 부분의 위의 코드만 있을떄 개발자도구에서 마우스 갖다대서 하늘색 영역 표시 확인 -> 콘텐츠 영역-->
<span>check</span>
<!--span태그와 div차이 : span 태그가 인라인 요소(인라인 요소에는 width와 height가 지정되지 않는다!) -->
</body>
</html><실습결과>
📙 박스모델 (2)
📖 다양한 경우의 수
: 여백은 상하좌우 네 개의 면에 존재하는 영역
작성자는 각 면에 개별적으로 두께를 정의 가능
이를 위해 다음 두 가지 방법을 사용
- 하위 속성 정의
- 여러 값을 한 번에 정의
✏️ 하위 속성 정의
: 여백은 네 면에 모두 존재하므로 여백에는 네 개의 하위 속성이 존재함
- padding-top
- padding-right
- padding-left
- padding-bottom
=> margin에도 동일한 접미사를 붙여 개별 정의 가능
실습방법
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
div{
width: 100px; height: 100px;
padding: 10px;
border: 5px solid red;
margin: 20px;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;
margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;
/* 서로 겹침 => 마지막에 쓴 것 반영*/
}
</style>
</head>
<body>
<div></div>
</body>
</html><실습결과>
✏️ 여러 값을 한 번에 정의
: 4개의 면에 대한 하위 속성을 포함하는 패딩과 마진은 단축 속성으로서 4개의 면을 한꺼번에 정의하는 역할도 수행 가능
ex.
span{
display: inline-block;
width: 100px; height: 100px;
margin: 10px 20px 30px 40px;
} /* span 태그의 마진 정의를 네개의 수치를 연달아 정의 = 위에는 10px, 오른쪽 20px, 아래 30px, 왼쪽 40px의 마진을 주겠다라는 뜻실습방법
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML 문서</title>
<style>
div{
width: 100px; height: 100px;
border: 5px solid red;
margin: 10px; /*4개의 면에 모두 10픽셀의 margin 생김*/
margin: 10px 30px; /*10 px는 상하 여백, 30px은 좌우 여백을 의미*/
margin: 10px 30px 20px; /*10픽셀은 맨위의 마진탑의 경우, 30 픽셀은 좌우, 20픽셀은 마진 바텀*/
margin: 10px 30px 20px 40px; /* 맨위부터 시계방향으로 지정, 위, 오른쪽, 아래, 왼쪽 순*/
}
</style>
</head>
<body>
<div></div>
</body>
</html><실습결과>
