HTML 수강 완료!!
이번엔 CSS 가보자고💢
[무료] 입문자를 위한 CSS 기초 강의 - 인프런 | 강의
웹 사이트를 예쁘게 꾸미기 위해 반드시 필요한 언어, CSS의 주요 개념과 기본 문법을 소개합니다. 이제 막 HTML로 코딩 걸음마를 떼신 분들도 부담없이 소화하실 수 있습니다., - 강의 소개 | 인프
www.inflearn.com
① CSS란? CSS의 역할 알아보기!
CSS : Cascading Style Sheets의 약자로 계단식으로 스타일을 정의하는 문서이다.
CSS는 HTML 문서에 스타일을 더해준다.
HTML 문서는 태그가 태그를 포함하는 계단식 구조를 지니고 있다.
CSS 문서(코드) 자체는 독립적으로 존재할 수 있지만, 그 목적이 구조화된 HTML 문서의 스타일을 정의하는 데 있으므로 HTML 문서가 없는 CSS 문서는 사실상 의미가 없다.
② 기본 문법 및 사용 방법
< 기본 문법 >
| 선택자{ 속성명: 속성값; } |
선택자 : 어떤 요소에 스타일을 적용 할지에 대한 정보
{중괄호} : 선택한 요소에 적용할 스타일을 정의하는 영역
속성명 : 어떤 스타일을 정의하고 싶은지에 대한 정보(색상, 크기 등)
속성값 : 어떻게 정의하고 싶은지에 대한 정보
< 사용 예시 >
| p{ color : red; } |
선택자 : p 태그에 스타일을 적용하겠다
{중괄호} : 이 안에 p 태그에 대한 스타일을 정의하겠다
속성명 : color를 정의하겠다. 이건 글자색을 의미
속성값 : red로 정의하겠다. 빨간색 글자
주석 : /* */
| HTML 문서에 CSS 문서(코드)를 적용하고자 할 때는 다음과 같은 방식들을 사용 - 인라인 스타일 : 태그에 직접 기술하기 - 스타일 태그 : 스타일시트를 위한 태그를 추가하여 기술하기 - 문서 간의 연결 : 스타일시트 문서를 따로 작성하여 HTML 문서와 연결하기 |
- 인라인 스타일
태그에 style 속성을 추가하여 요소에 직접적으로 스타일을 정의하는 방식.
따라서 선택자는 필요없다.
웹 콘텐츠와 스타일시트를 분리하기 위해서는 사용하지 않는 편이 좋다.
<p style="color: blue;"></p>
- 스타일 태그
HTML 문서에 <style></style> 태그를 추가하여 그 안에 CSS 코드를 작성할 수 있다.
-문서 간의 연결
확장자가 *.css 인 스타일시트 파일을 생성해 그 안에 CSS 코드를 작성하고 HTML 문서에 이를 연결
이때는 <link> 태그를 사용한다.(HTML문서의 <head></head> 내부에서 사용)
<link href="./style.css" rel="stylesheet">
href : 연결하고자 하는 외부 소스의 url을 기술하는 속성
rel : 현재 문서(HTML)와 외부 소스의 연관 관계를 기술하는 속성
-실습-
인라인 스타일 적용. 속성명과 속성값만 필요
스타일 태그 적용. <head></head> 안에 <style></style>넣기
세미콜론은 스타일 하나에 대한 정의가 끝났다는 의미이므로 다른 스타일을 이어서 적용할 수 있다.
문서 간의 연결 적용
style.css 파일 생성하기.
HTML 문서에 link 추가
rel은 내가 연결하고자 하는 문서가 나와 어떤 관계인지를 표시
③ 선택자 1편
선택자 : 어떤 요소에 스타일을 적용 할 것인지에 대한 정보
| < 선택자의 종류> | |
| - 기본 선택자 - 그룹 선택자 - 특성 선택자 |
- 결합 선택자 - 의사 클래스 - 의사 요소 |
< 기본 선택자 >
1. 전체 선택자
모든 요소를 선택한다.
*(애스터리스크)는 '문서 내의 모든 요소'를 의미하는 기호
| *{ color : red; } |
2. 태그 선택자
주어진 이름을 가진 요소를 선택한다. '유형 선택자'라고도 한다.
주어진 이름을 가진 요소가 다수일 경우, 해당 요소들을 모두 선택한다.
| p{ color : red; } |
3. 클래스 선택자
주어진 class 속성값을 가진 요소를 선택한다.
주어진 class 속성값을 가진 요소가 다수일 경우 해당 요소를 모두 선택한다.
| .text{ color : red; } |
4. 아이디 선택자
주어진 id 속성값을 가진 요소를 선택한다.
id는 고유한(unique) 식별자 역할을 하는 전역 속성이다.
| #topic{ color : red; } |
< 그룹 선택자 >
다양한 유형의 요소를 한꺼번에 선택하고자 할 때 사용한다.
쉼표(,)를 이용해 선택자를 그룹화한다.
| h1, p, div{ color : red; } |
* 선택자가 겹치는 경우
선택자가 겹치는 경우, 기본적으로 나중에 작성된 스타일이 적용된다.
선택자가 다르지만 요소가 겹치는 경우, 선택자 우선순위에 의해 적용될 스타일이 결정된다.
| 선택자 우선순위? 아이디 선택자 > 클래스 선택자 > 태그 선택자 |
- 실습 -
전체 선택자 지정
태그 선택자 지정 (h1 태그)
클래스 선택자 지정
아이디 선택자 지정
그룹 선택자 지정
우선순위 - 선택자가 겹치는 경우
나중에 작성된 스타일 적용
우선순위 - 요소가 겹치는 경우
태그 선택자가 나중에 작성 되었지만 우선순위에 의해 클래스 선택자 스타일이 적용 된다.
④ 텍스트 꾸미기 속성
| font-family : 글꼴을 정의한다 font-size : 글자 크기를 정의한다 text-align : 정렬 방식을 정의한다 color : 글자 색상을 정의한다 |
font-family : 요소를 구성하는 텍스트의 글꼴을 정의한다.
글꼴명을 속성값으로 지정한다. 여러 개의 글꼴을 연달아 기입하여 우선 순위를 지정할 수 있다.
font-size : 수치와 단위를 지정해 글자의 크기를 정의할 수 있다.
| 단위 | 의미 |
| px | 모니터 상의 화소 하나 크기에 대응하는 절대적인 크기 |
| rem | <html> 태그의 font-size에 대응하는 상대적인 크기 |
| em | 부모태그(상위태그)의 font-size에 대응하는 상대적인 크기 |
h1 태그의 기본 크기 : 32px / p 태그의 기본 크기 : 16px
html 태그 크기의 각각 3배, 1배로 적용
span의 상위 태그인 p태그 크기의 5배로 적용
text-align : 블록 내에서 텍스트의 정렬 방식을 정의한다. 미리 정의된 키워드 값을 지정
| 속성값 | 의미 |
| left / right | 왼쪽 또는 오른쪽 정렬한다 |
| center | 가운데 정렬한다 |
| justify | 양끝 정렬한다(마지막 줄 제외) |
color : 텍스트의 색상을 정의한다. 다양한 방법으로 색상을 지정할 수 있다.
| 속성값 유형 | 방법 |
| 키워드 | 미리 정의된 색상별 키워드를 사용한다. (ex. red, blue) |
| RGB 색상 코드 | # + 여섯자리 16진수 값 형태로 지정한다. (#FF0000) |
| RGB 함수 | Red, Green, Blue의 수준을 각각 정의해 지정한다. rgb(100%, 0%, 0%) |
RGB 색상은 빛의 삼원색(Red, Green, Blue)을 혼합하여 색을 정의하는 방식. (가장 높을 때 흰색)
- 실습 -
오른쪽 정렬 / 가운데 정렬
양끝 정렬(justify)
색상 - 키워드
색상 - RGB 색상 코드
색상 - RGB 함수
⑤ display 속성 & border 속성
블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성한다. (div, p, h1, ...)
인라인 요소 : 자기에게 필요한 만큼의 공간만 차지한다. (span, a, ...)
display 속성 : 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지 정의한다
| 속성값 | 의미 |
| inline | 인라인으로 처리한다 |
| block | 블록 레벨로 처리한다 |
| inline-block | 인라인으로 배치하되, 블록 레벨 요소의 속성을 추가할 수 있도록 처리한다. |
| none | 디스플레이(표시)하지 않는다. |
border 속성 : 요소가 차지하고 있는 영역에 테두리를 그릴 수 있다.
속성값으로 테두리의 두께, 모양, 크기 등을 함께 지정할 수 있는데 이러한 속성을 '단축속성'이라 한다.
| 속성명 | 속성값 예 |
| border-color | color 정의 방식과 동일 |
| border-width | thin, medium, thick 등의 키워드 또는 px, em, rem 등의 단위 |
| border-style | none(기본값), solid(직선), dotted(점선), dashed(긴 점선) 등 |
-실습-
블록 레벨과 인라인 레벨 각각 border 주기
블록 레벨을 인라인으로, 인라인을 블록으로
none과 inline-block 적용
none은 요소 자체가 사라진 것은 아니고 보이지 않을 뿐이다.
inline-block은 인라인처럼 배치하되 블록의 속성값을 갖는다.(높이와 너비 임의 조정 가능)
⑥ - ⒜ 박스모델 1편, 박스모델 소개
박스 모델(Box-Model) : 브라우저가 요소를 렌더링 할 때, 각각의 요소는 기본적으로 사각형형태로 영역을 차지하게 된다.
이 영역을 '박스'라 표현하며 CSS는 박스의 크기, 위치, 속성(색, 배경, 테두리 모양 등)을 결정할 수 있다.
하나의 박스는 다음 네 개의 영역으로 구성된다.
- 콘텐츠 영역 - 안쪽 여백 - 경계선(테두리) - 바깥쪽 여백 |
- 콘텐츠 영역 : width, height - 안쪽 여백 : padding - 경계선(테두리) : border-width - 바깥쪽 여백 : margin |
-실습-
div요소의 콘텐츠 영역을 확인할 수 있다.
border 적용. div의 테두리가 만들어졌다.
padding값 적용. 초록색 여백이 생긴 것을 확인할 수 있다.
margin값 적용. 주황색 영역이 생긴 것을 확인할 수 있다.
마진은 다른 요소와의 거리를 벌려준다.
width와 height 적용
padding이 양쪽으로 10씩 있고 border도 3씩 있기 때문에 실제 width값은 146이라 표현됨
span태그와 div의 차이점 : span은 인라인 요소이다
*인라인 요소는 width와 height 지정 불가능 (padding, margin, border는 가능)
인라인 요소에 width와 height를 지정하려면 display 속성을 inline-block으로 바꿔준다.
⑥ - ⒝ 박스모델 2편, margin padding 다루기
여백은 상하좌우 네 개의 면에 존재하는 영역이다.
작성자는 각 면에 개별적으로 두께를 정의할 수 있다. (두 가지 방법 有)
- 하위 속성 정의하기
- 여러 값을 한 번에 정의하기
margin도 마찬가지로 동일한 접미사를 붙여 활용할 수 있다.
-실습-
크기 100*100의 div 정의
임의의 값으로 padding, border, margin 지정
padding에 하위 속성값 지정 (초록색 영역)
margin에 하위 속성값 지정 (주황색 영역)
*CSS는 겹치는 속성이 있을 때 마지막에 쓴 것이 반영되므로 위에서 지정했던
padding: 10px과 margin: 20px은 무시되었다
< 여러 값을 한 번에 정의하기 >
padding과 margin은 네 면의 여백에 대한 단축속성이다.
margin : top right bottom left; (시계방향)
-실습-
콘텐츠 영역 정의
두 개의 값만 지정할 경우 앞에 쓴 값은 상하, 뒤에 쓴 값은 좌우에 적용된다
(상하 / 좌우)
세 개의 값을 지정하면 첫 번째 값은 상단 여백, 두번째 값은 좌우, 세 번째 값은 하단 여백에 지정된다.
(상 / 좌우 / 하)
네 개의 값을 모두 지정하면 상단부터 시계방향으로 적용된다.
(상 / 우 / 하 / 좌)
⑥ - ⒞ 박스모델 3편, box-sizing
< 박스 크기를 계산하는 방법 >
너비와 높이가 100px인 div에 border를 추가하니 양쪽 테두리를 합한 사이즈가 나온다 (110*110)
padding값을 추가하니 그 값은 포함한 사이즈.
box-sizing : 요소의 너비(width)와 높이(height)를 계산하는 방법을 지정한다.
| 속성값 | 의미 |
| content-box | 기본값, 너비와 높이가 콘텐츠 영역만을 포함한다. |
| border-box | 너비와 높이가 안쪽 여백과 테두리까지 포함한다. |
너비와 높이가 같더라도 box-sizing 속성값에 따라 크기가 달라질 수 있다.
-실습-
border-box 속성 지정. width를 100px로 하면 요소의 너비는 무조건 100px
(테두리를 포함한 전체 영역이 100px)
padding이나 border값을 늘릴수록 콘텐츠 영역이 줄어든다
content-box로 설정할 경우 콘텐츠 영역만이 width와 height의 값을 갖게된다.
⑥ - ⒟ 박스모델 4편, background
배경(background) : 콘텐츠의 배경을 정의한다. 단축 속성으로써 색상, 이미지, 반복 등 다양한 하위 속성을 정의
| 하위 속성 | 역할 |
| background-color | 배경 색을 정의한다 |
| background-image | 배경 이미지를 정의한다 |
| background-position | 배경 이미지의 초기 위치를 정의한다 |
| background-size | 배경 이미지의 크기를 정의한다 |
| background-repeat | 배경 이미지의 반복 방법을 정의한다 |
-실습-
500*500 크기의 div 생성
background-color 지정. color 속성과 동일하다. (rgb코드 등)
배경이기 때문에 콘텐츠(헬로우)를 가리지 않는다.
background-image 지정.
url은 괄호 안에 url 넣을 수 있는 함수
이미지가 요소보다 작으면 부족한 공간에 이미지를 반복해서 채움.(바둑판 효과)
background-repeat 기본값은 repeat.
반복하지 않게 하고 싶다면 속성값으로 no-repeat
background-position 기본값은 left top
속성값은 left, right, bottom, top, center를 사용
background-size로 이미지의 크기를 지정할 수 있다. 너비와 높이값 지정.
속성으로 키워드값도 지정할 수 있다.
cover : 이미지의 비율이 깨지지 않는 선에서 최대 크기로 지정
contain : 이미지가 깨지거나 잘리지 않는 선에서 최대 크기
background에 필요한 속성값만 넣어서 지정할 수 있다.
색상값, 이미지 url, no-repeat 등 순서 상관없이 넣어서 지정 가능
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML 문서</title>
<style>
div{
box-sizing: border-box;
width: 500px; height: 500px;
border: 1px solid red;
background: no-repeat center url(./ku-resize.png) aqua;
}
</style>
</head>
<body>
<div>헬로우</div>
</body>
</html>
⑦ float 그리고 clear
float : 요소가 문서의 일반적인 흐름에서 제외되어 자신을 포함하고 있는 컨테이너의
왼쪽이나 오른쪽에 배치되게 한다.
문서의 흐름에선 제외되지만, 필요한 만큼의 공간은 차지한다.
| 속성값 | 의미 |
| none | 기본값, 원래 상태 (float을 사용하고 있지 않음) |
| left | 자신을 포함하고 있는 박스의 왼편에 떠 있어야 함 |
| right | 자신을 포함하고 있는 박스의 오른편에 떠 있어야 함 |
-실습-
원래 상태
a div에 float right 적용
기본적인 문서 흐름에서 제외되고 오른쪽으로 이동함
b div에 float left 적용
문서 흐름에서 벗어나 왼쪽으로 이동하고 아래에 있던 p태그가 위로 올라옴
p 태그들이 float이 차지하고 있는 자리를 제외하고 기본 문서 흐름대로 되어있다.
clear : float 요소 이후에 표시되는 요소가 float을 해제(clear)하여 float 요소의 아래로 내려가게 할 수 있다.
| 속성값 | 의미 |
| none | 기본값, 아래로 이동되지 않음을 나타내는 키워드 |
| left | float이 left인 요소의 아래로 내려가겠다 |
| right | float이 right인 요소의 아래로 내려가겠다 |
| both | float이 left 및 right인 요소의 아래로 내려가겠다 |
-실습-
left float 요소보다 아래에서 시작한다.
right 요소의 높이 아래에서 시작하는 것을 볼 수 있다.
both를 사용하면 둘 다 동시에 적용할 수 있음.
⑧ - ⒜ position 1편, relative absolute
position : 문서 상에 요소를 배치하는 방법을 정의한다.
position이 요소의 배치 방법을 결정하면 top, bottom, right, left가 최종 위치를 결정.
상하좌우 위치 지정은 필요에 따라 선택적으로 사용.
position 속성에는 다음 속성값들을 지정할 수 있다.
| 속성값 | 의미 |
| static | 기본값, 요소를 일반적인 문서 흐름에 따라 배치한다 |
| relative | 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다 |
| absolute | 일반적인 문서 흐름에서 제거하고, 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다. |
| fixed | 일반적인 문서 흐름에서 제거하고, 지정한 위치에 고정된다. |
| sticky | 일반적인 문서 흐름에서 제거하고 스크롤 동작이 존재하는 가장 가까운 요소에 대해 오프셋을 적용한다. |
relative : 요소를 일반적인 문서 흐름에 따라 배치하되, 상하좌우 위치 값에 따라 오프셋을 적용한다.
오프셋(보충)이란, 위치를 얼마간 이동시키는 것을 의미한다.
-실습-
relative를 적용한 만큼 원래 위치에서 이동된다.
p 태그를 아래에 추가하면 div가 원래 있어야 하는 자리의 밑으로 위치한다.
absolute : 요소를 일반적인 문서 흐름에서 제거하고,
상위 요소 중 가장 가까운 position 지정 요소에 대해 상대적으로 오프셋을 적용한다.
position 지정 요소란 position 속성에 속성값이 정의되어 있는 요소
-실습-
div를 두개 만들고 두번째 div안에 또 다른 div를 생성
absolute로 속성값을 지정하게 되면 가장 가까운 상위 position에 상대적으로 움직이므로
노란 사각형은 두번째 핑크색 사각형을 기준으로 움직인다.
노란 네모는 문서의 흐름에서 제외되므로 아래에 추가된 p태그의 위치는 원래 노란네모의 위치 아래로 지정된다.
absolute 지정하면 문서의 흐름과 무관해지므로 p태그와 겹치는 것을 알 수 있다.
가까운 상위 요소 중에서 position 속성의 값이 지정된 요소가 하나도 없다면
absolute 요소는 브라우저 화면을 기준으로 잡는다.
⑧ - ⒝ position 2편, fixed sticky
fixed : 요소를 일반적인 문서 흐름에서 제거하고, 지정된 위치에 고정시킨다
-실습-
긴 문서 작성
fixed 속성을 지정하면 다른 문서 흐름과는 관계없이 지정한 위치에 고정된다.
sticky : 요소를 일반적인 문서 흐름에 따라 배치하고 스크롤(scroll) 되는 가장 가까운 상위 요소에 대해 오프셋을 적용
스크롤 이동으로 요소가 움직여도 스티키 요소는 고정된 상태를 유지한다.
-실습-
기본적으로는 문서 흐름대로 가지만 스크롤 할 때 정해진 위치가 있으면 거기에 달라붙는다
상위 요소가 스크롤 될 때 자기 오프셋 적용된 곳에만 달라붙고 평소에는 일반적인 흐름대로 움직인다.
⑨ - ⒜ flexbox 1편, 정의 및 사용 방법
flexbox : 박스 내 요소 간의 공간 배분과 정렬 기능을 제공하기 위한 1차원 레이아웃 모델이다.
flexbox를 1차원 모델이라 부르는 이유는 레이아웃을 다룰 때
한 번에 하나의 차원(행이나 열)만을 다룬다는 특성 때문인다.
flexbox 만들기 : flexbox를 flex 컨테이너라고도 한다(요소들을 포함하기 때문).
flex 컨테이너를 만들기 위해서는 컨테이너에 display: flex;를 적용해야 한다.
기본적으로는 행방향(→)으로 적용된다.
-실습-
컨테이너에 display 속성으로 flex를 지정한다
flex 컨테이너는 자식요소가 가지고 있는 기본 마진값을 무시하고 자기의 진행방향대로 요소를 배치함.
flexbox에는 '주축(main-axis)'과 '교차축(cross-axis)'이 있다.
flex-direction 속성은 flexbox 내 요소를 배치할 때 사용할 주축 및 방향(정방향, 역방향)을 지정한다.
| 속성값 | 의미 |
| row | 기본값, 주축은 행이고 방향은 콘텐츠의 방향과 동일 |
| row-reverse | 주축은 행이고 방향은 콘텐츠의 방향과 반대 |
| column | 주축은 열이고 방향은 콘텐츠의 방향과 동일 |
| column-reverse | 주축은 열이고 방향은 콘텐츠의 방향과 반대 |
-실습-
row는 기본값(행방향), column은 열방향으로 바뀐다.
row-reverse와 column-reverse는 진행방향이 뒤집힌다.
⑨ - ⒝ flexbox 2편, 몇 가지 관련 속성
flexbox를 다루기 위해 다음과 같은 속성을 사용할 수 있다.
- 주축 배치 방법 : justify-content - 교차축 배치 방법 : align-items - 교차축 개별요소 배치 방법 : align-self - 줄 바꿈 여부 : flex-wrap |
-실습-
justify-content 값을 center로 지정하면 주축에서 가운데 정렬
flex-start는 flex container 앞쪽에 배치 / flex-end는 컨테이너 끝에 배치
space-around는 주축에서 요소들간의 여백을 동일하게 맞춤
space-between은 첫 번째 요소와 마지막 요소를 양쪽 끝에 붙이고 나머지 요소 사이 공간을 동일하게.
align-items에 flex-end를 지정하면 교차축의 끝에 배치
flex-start는 교차축 앞에 배치
center는 교차축 가운데에 배치
align-self는 개별요소 하나에만 적용된다.
flex container에서 자식 요소가 자기자신보다 커지게 되면 컨테이너는 자식 요소의 크기를 줄여버린다.
flex-wrap을 사용하면 주축으로 진행되던 하위 요소들의 도합 크기가 컨테이너의 축 길이보다 커질 경우
이것을 두 행 이상으로 처리할 수 있도록 한다.
wrap-reverse는 wrap을 거꾸로 적용시킨다.
⑩ 선택자 2편, 특성 선택자와 결합자
특성 선택자(속성 선택자) : 주어진 속성의 존재 여부나 그 값에 따라 요소를 선택한다.
(클래스 속성을 가지고 있는 요소 선택 / 클래스가 item인 요소 선택)
| [class]{ background-color: tomato; } |
[class="item"]{ background-color: tomato; } |
기호를 추가하여 요소를 선택하는 방식을 다양화할 수 있다.
| [class *= "it"]{ color: white; } 클래스 값에 "it"가 포함되는 요소 선택 |
[class ^= "it"]{ color: white; } 클래스 값이 "it"로 시작하는 요소 선택 |
[class $= "it"]{ color: white; } 클래스 값이 "it"로 끝나는 요소 선택 |
-실습-
실습용 코드
클래스 / id를 가지고 있는 요소만 적용 됨
지정한 조건과 일치하는 요소만 적용 됨
* : te를 포함하는 요소
^ : uni로 시작하는 요소
$ : xt로 끝나는 요소
결합 선택자(결합자) : 두 개 이상의 선택자를 결합시켜 결합된 조건을 만족하는 요소를 선택
(자손 결합자 / 형제 결합자)
자손 결합자 : 두 개의 선택자 중 첫 번째 선택자 요소의 자손을 선택할 수 있다.
div p{ color: white; } : div 요소 안에 위치하는 모든 p 요소 선택
div > p{ color: white; } : div 요소의 바로 아래에 위치하는 모든 p 요소 선택
형제 결합자 : 두 선택자 중 첫 번째 선택자 요소의 형제를 선택할 수 있다.
h1 ~ p{ color: red; } : h1 요소의 뒤에 오는 형제(동일선상) 중 모든 p 요소 선택
h1 + p{ color: red; } : h1 요소의 바로 뒤에 오는 형제 p 요소 선택
-실습-
body 태그 안에 있는 모든 p 태그 선택
body 태그보다 한 단계 아래에 있는 span 태그 선택.
현재 span 태그가 두 단계 아래에 있기 때문에 선택되지 않음
(body를 p로 바꾸면 적용된다)
h1과 동일선상에 있는 p태그 모두 선택
h1의 바로 뒤에있는 p 태그만 선택된다
text 클래스 바로 뒤에 있는 p태그 선택
⑪ 의사클래스(가상클래스)
의사클래스(가상클래스) : 선택자에 추가하는 키워드로 요소가 어떤 특정한 상태가 되었을 때 요소를 선택하겠다는 의미
| h1:hover{ color: red; } |
h1 요소에 마우스 커서가 올라오면(hover) 글자를 빨간색으로 하겠다 |
| 의사클래스 | 의미 |
| hover | 마우스 포인터가 요소에 올라가 있다. |
| active | 사용자가 요소를 활성화했다. (ex 마우스로 누르기) |
| focus | 요소가 포커스를 받고 있다. |
| disabled | 비활성 상태의 요소이다. |
| nth-child() | 형제 사이에서의 순서에 따라 요소를 선택한다. |
-실습-
먼저 버튼 타입의 인풋을 만들어준다
선택자 뒤에 콜론과 의사클래스를 붙여준다
hover로 스타일을 지정해주니 버튼에 마우스를 올렸을 때 회색으로 바뀐다.
active는 활성화 됐을 때인데 버튼은 클릭했을 때가 활성화 상태이다
focus는 포커스 되었을 때의 스타일을 지정한다.
input이 disabled일 때의 스타일을 지정한다.
input이 disabled 상태가 아니면 무시 됨
nth-child()는 형제 요소 중 특정 요소에 대해서만 스타일을 지정한다.
괄호 안에 숫자를 넣으면 해당하는 형제만 바뀜
n은 양의 정수를 대입한다는 뜻.
n : 1~5
2n : 2, 4
2n-1 : 1, 3, 5
⑫ 의사요소
의사요소(pseudo-elements) : 선택자에 추가하는 키워드로 이를 이용하면
선택한 요소의 특정 부분에 대한 스타일을 정의할 수 있다.
| 의사요소 | 의미 |
| after | 요소의 앞에 의사 요소를 생성 및 추가한다. |
| before | 요소의 뒤에 의사 요소를 생성 및 추가한다. |
| first-line | 블록 레벨 요소의 첫 번째 선에 스타일을 적용한다. |
| marker | 목록 기호의 스타일을 적용한다. |
| placeholder | 입력 요소의 플레이스홀더(자리표시자) 스타일을 적용한다. |
-실습-
선택자 뒤에 콜론 두개, first-line과 first-letter를 적용
목록에 marker로 스타일 적용하기
인풋의 placeholder 스타일 적용
before와 after는 선택한 요소의 자식 요소를 추가해준다.
⑬ inherit, initial, unset
상속(Inheritance) : 하위 요소가 상위 요소의 스타일 속성값을 물려받는 것을 의미한다.
상위요소로부터 상속이 이루어지는 속성이 있는 반면, 그렇지 않은 속성도 있다.
| 상속 된다 | 상속 안 된다 |
| color, font-family, font-size, font-weight, text-align, cursor 등 |
background-color, background-image, background-repeat, border, display 등 |
-실습-
div에만 스타일을 지정했지만 p태그에 color, font-size가 상속되었다.
border는 상속되지 않았다.
상속된 값에 자기 값을 지정해주면 자기한테 지정된 값을 사용한다.
공용 키워드 : 모든 CSS 속성에 사용 가능한 키워드가 있다. 때문에 이를 '전역 값'이라 표현하기도 한다.
| 키워드 | 의미 |
| inherit | 상위 요소로부터 해당 속성의 값을 받아 사용한다. |
| initial | (브라우저에 지정되어 있는)해당 속성의 기본값을 요소에 적용한다. |
| unset | 상속 속성에 대해서는 inherit처럼, 상속되지 않는 속성에 대해서는 initial처럼 적용된다. |
-실습-
border는 원래 상속받지 않지만 inherit을 지정해주면 상속 받아 사용한다.
color의 초기값은 검정색이다. p 태그에 color를 initial로 지정해 검정색이 되었다
font-size의 initial값은 16px
원래 상속을 받는 color와 font-size는 div에서 상속받아 사용되었고
상속을 받지 않는 border는 initial값인 none이 되었다.
width - 상속x
⑭ z-index
z-index : 요소의 쌓임 순서(stack order)를 정의할 수 있다.
정수 값을 지정하여 쌓임 맥락(stacking context)에서의 레벨을 정의하는 방식으로 적용되며,
*위치 지정 요소에 대해 적용할 수 있는 속성이다.
*위치 지정 요소(positioned element) : position 속성이 정의되어 있는 요소
동일한 위치에 요소들이 배치되면 요소들은 z축에서 쌓이게 된다
z-index의 기본값은 auto이다. auto는 새로운 쌓임 맥락이 형성되지 않은 자연스러운 상태.
z-index 값을 정수로 지정해주면 값이 낮은 애들부터 높은 순서로 쌓아 올라가진다. (새로운 쌓임 맥락 발생)
-실습-
먼저 자기 위치보다 50px씩 위로 올라와 있어서 겹치는 네모를 쌓아준다.
이때 먼저 생성된 요소가 나중에 생성된 요소보다 밑에 깔린 것을 알 수 있다.
현재 z-index는 auto.
첫 번째 네모의 z-index를 1, 두 번째 네모의 z-index를 2로 설정하면
첫 번째 네모보다 두 번째 네모의 인덱스가 크므로 위로 올라간다.
이때 3번 네모는 z-index값이 없으므로 2번이 그 위로 올라감
z-index는 정해진 값을 써야하는 것이 아니라 상대적으로 높은 값을 쓰면 된다.
만약 같은 z-index를 주면 나중에 생성된 요소가 그 위로 올라간다.
'Study > Publishing' 카테고리의 다른 글
| [웹디자인기능사] 필기 06 재질감 빛과 운동 ~ 12 율동 (1) | 2024.01.03 |
|---|---|
| [웹디자인기능사] 필기 01 디자인 의미 개념 배경 ~ 05 형태 (2) | 2024.01.02 |
| [CSS] 눈누 웹 폰트 적용하기 / 굵기(font-weight) 적용하기 (2) | 2023.09.27 |
| 자바스크립트 Beginner (0) | 2023.05.03 |
| [HTML] 웹 개발 걸음마 떼기 - 1탄 (feat. 유노코딩, 인프런, HTML) (0) | 2022.07.29 |
