1. CSS
CSS는 Cascading Style Sheets로, HTML로 만든 웹 페이지에 디자인(스타일)을 입히는 것이다. HTML로 뼈대를 만든다면, CSS는 그 위에 옷을 입히는 것이다.
Cascade는 '폭포처럼 쏟아지는 물'이라는 의미가 있다. 결국 계속 이어진 두 가지 이상의 스타일이 있을 때, 어떤 우선 순위에 따라 CSS가 어떻게 적용될지 알고 있는 것이 중요하다.
1-1. 선택자 활용 스타일링
선택자에는 태그, 클래스, #아이디 등이 있다.
선택자 {
속성1: "속성값1";
속성2: "속성값2";
} <style>
/** 1. 태그 선택자 */
p {
color: red;
}
/** 2. ID 선택자 */
#matthew {
color: red;
}
/** 3. class 선택자 */
.yongmin {
color: red;
}
</style>1-2. 인라인 스타일링
인라인 스타일링은 태그 안에 바로 적용하는 방식이다.
<태그 style="값: 속성'">컨텐츠 내용</태그>1-3. CSS-Origin 우선 순위
사용자 Style
-
사용자 에이전트나 브라우저에 기본적으로 내장된 스타일 시트를 말한다.
-
브라우저마다 기본 스타일이 조금씩 다르기 때문에, 퍼블리싱할 때 공통 속성을 재정의하는 CSS를 작성하기도 한다.
-
<h1>태그가 기본적으로 폰트가 커지고 진하게 표시되는 이유이다.
코드 Style
-
가장 일반적인 CSS이다.
-
프론트엔드 개발자가 화면을 꾸미기 위해 작성한 스타일 시트 코드를 말한다.
User Style
-
개발자가 아닌 웹 사이트의 사용자가 설정하는 스타일 시트를 의미한다.
-
일부 사용자는 시각적 불편을 줄이기 위해 자신만의 스타일 시트를 적용하기도 한다.
태그에 대해 구체적으로 설명할 경우 우선 순위가 높다는 것이다. 동일한 레벨에서는 나중에 작성한 스타일이 우선 순위가 높다.
태그 < .클래스 < #아이디 < 인라인 스타일링 < !important-
태그 : 그냥 태그 이름으로 스타일을 적용한다.
-
클래스 : 특정 그룹(Class)을 지정해서 스타일을 적용한다.
-
아이디 선택자 : 특정 하나(ID)에만 적용한다.
-
인라인 스타일 : HTML 태그 안에 직접 스타일을 작성한다.
-
!important : 우선 순위를 무시하고 무조건 적용한다.
2. Border VS Outline
Border는 박스 내부에 포함되어 있고, 요소 크기에 영향이 있다. 모서리 조정(Border-Radius)가 가능하며, 레이아웃의 영향 또한 있다. 레이아웃과 디자인 요소적인 측면이 강하다. 개별 방향(Top, Bottom, Right, Left) 역시 설정 가능하다.
+---------------------------+ ← border (테두리)
| 콘텐츠 내용 | ← padding (내부 여백)
+---------------------------+Outline은 요소 경계 외부에 있으며, 요소 크기와 완련이 없다. 모서리 조정이 불가능하며, 레이아웃의 영향이 없다. 포커스 강조 및 접근성 요소적인 측면이 강하다. 개별 방향 설정이 불가능하다.
(outline) --------------
+---------------------------+ ← border나 실제 박스
| 콘텐츠 내용 |
+---------------------------+
(outline) -------------- 3. Relative VS Absolute
Relative는 문서 흐름에 따라 원래 본인이 있어야 할 곳을 기준으로, 좌표 프로퍼티(Top, Bottom, Right, Left) CSS Style을 통해 위치를 이동시키는 속성이다.
Absolute는 문서 흐름에서 제외되며, 위치가 Relative, Absolute, Fixed인 부모 요소 중에서 선택해서 해당 요소를 기준으로 좌표 프로퍼티를 사용해 위치를 이동한다.
4. Fixed VS Sticky
Fixed는 부모 요소와 관계 없이 Viewport를 기준으로, 화면상의 특정한 위치에 고정되는 것이다.
Sticky는 Relative와 Fixed의 속성이 혼합된 것이라 생각하면 된다. 일반적으로는 Relative처럼 동작하지만, 특정 스크롤 위치에 도달하면 Fixed처럼 화면에 고정되어 움직이지 않는다.
5. 다양한 정렬 방법
- Text-Align : 인라인 요소나 텍스트를 수평 가운데 정렬할 때 사용한다. Block 요소 자체를 정렬하는 것이 아닌, 안쪽 텍스트나 인라인 요소에 적용한다.
<div style="text-align: center;">
<span>텍스트 가운데 정렬!</span>
<img src="image.jpg" alt="img">
</div> 
- Margin : 요소 바깥 여백을 의미한다. 요소와 요소 사이의 간격을 띄우는 역할을 하며, 박스 바깥 공간이기 때문에 레이아웃에 큰 영향을 준다. Top, Right, Bottom, Left 총 네 방향으로 각각 설정할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Margin 실습</title>
<style>
.box {
width: 200px;
height: 100px;
background-color: lightblue;
margin: 20px; /* 모든 방향에 20px */
}
.center-box {
width: 300px;
background-color: lightcoral;
margin: 0 auto; /* 수평 가운데 정렬 */
padding: 20px;
}
.collapse-box {
margin-bottom: 40px;
margin-top: 20px;
background-color: lightgreen;
}
.collapse-box2 {
margin-top: 30px;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="box">기본 margin</div>
<div class="center-box">가운데 정렬 (margin: auto)</div>
<div class="collapse-box">첫 박스 (margin-top: 20px, margin-bottom: 40px)</div>
<div class="collapse-box2">두 번째 박스 (margin-top: 30px)</div>
</body>
</html>
- Flex : 부모 요소에 적용해서 자식 요소를 유연하게 배치하고 정렬할 수 있는 역할을 수행한다. Justify-Content는 가로축 정렬을, Align-Items는 세로축 정렬을 수행한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Flex 가운데 정렬</title>
<style>
.flex-container {
display: flex;
justify-content: center; /* 가로축 가운데 정렬 */
align-items: center; /* 세로축 가운데 정렬 */
height: 300px;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: skyblue;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="box">Flex</div>
</div>
</body>
</html>
- Translate : 요소를 이동시키는 Transform 함수이다. 요소의 원래 위치를 기준으로 X축이나 Y축으로 이동할 수 있다. Relative나 Absolute처럼 레이아웃을 깨지 않고 이동할 수도 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Translate 가운데 정렬</title>
<style>
.translate-container {
position: relative;
height: 300px;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: lightcoral;
color: white;
text-align: center;
line-height: 100px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="translate-container">
<div class="box">Translate</div>
</div>
</body>
</html>
- Grid : HTML 요소를 표처럼 행과 열에 배치할 수 있다. Grid-Template-Columns를 통해 열 개수 및 너비를 정의할 수 있고, Grid-Template-Rows를 통해 행 개수 및 높이를 정의할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Grid 가운데 정렬</title>
<style>
.grid-container {
display: grid;
place-items: center; /* 가로/세로 가운데 정렬 */
height: 300px;
background-color: #f0f0f0;
}
.box {
width: 100px;
height: 100px;
background-color: mediumseagreen;
color: white;
text-align: center;
line-height: 100px;
}
</style>
</head>
<body>
<div class="grid-container">
<div class="box">Grid</div>
</div>
</body>
</html>
6. 반응형 Background
6-1. Background-Image
Background-Image를 사용해서 HTML 요소의 배경에 이미지를 삽입할 수 있다. 기본적으로 요소의 배경에 이미지를 넣고 다른 속성과 함께 사용해서 크기나 위치 등을 조정할 수 있다.
selector {
background-image: url('이미지 경로');
}6-2. Background-Repeat
Background-Repeat은 Background-Image로 설정한 배경을 어떻게 반복할 것인지를 결정하는 속성이다. 기본 값이 Repeat이라 따로 설정하지 않으면 배경 이미지가 요소의 가로 및 세로 방향으로 계속 반복된다.
selector {
background-repeat: 값;
}6-3. Background-Position
Background-Position은 배경 이미지가 요소 안에서 어디에 위치할 것인지를 정하는 속성이다. 배경 이미지를 좌우로, 위아래로 얼만큼 이동시킬 것인지를 정한다.
selector {
background-position: x축위치 y축위치;
}6-4. Background-Size
Background-Size는 배경 이미지의 크기를 조절하는 역할을 한다. 둘 중 값 하나만 작성하면, 나머지 하나는 기본 값 center로 동작한다.
selector {
background-size: 값;
}left: 왼쪽 정렬center: 가운데 정렬right: 오른쪽 정렬top: 위쪽 정렬bottom: 아래쪽 정렬
background-position: 50% 50%;처럼 픽셀이나 퍼센트를 사용해서 세밀하게 위치를 지정할 수도 있다. 퍼센트의 경우, 화면 크기가 달라져도 상대적 위치이기 때문에 반응형 디자인에 유용하다.
6-5. 축약형
CSS에서 반응형 Background를 다룰 때 Background 축약형을 자주 사용한다. 개별 속성들을 한 줄에 다 합쳐서 쓸 수 있는 것이 축약형이다.
background-color: #fff;
background-image: url('bg.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;위의 코드를 아래와 같이 한 줄로 줄일 수 있다.
background: #fff url('bg.jpg') no-repeat center center / cover fixed;축약형은 다음과 같은 구성 순서를 따른다.
background: [배경색] [배경 이미지] [반복] [위치] / [크기] [스크롤 방식];7. Transform
Transform을 통해 요소에 회전 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
7-1. Translate
translate를 통해 요소를 이동 시킬 수 있다. 요소의 기존 위치를 기준으로 X축과 Y축 방향으로 이동한다.
-
translateX(거리): X축으로 이동 -
translateY(거리): Y축으로 이동 -
translate(X, Y): X축과 Y축을 동시에 이동
translate는 기존 위치에서 이동하는 것 뿐이고, 다른 요소에 영향을 안 준다. 레이아웃을 바꾸지 않고 이동하기 때문에 애니메이션이나 동적 효과에 많이 사용된다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>translate 실습</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: steelblue;
color: white;
display: flex;
justify-content: center;
align-items: center;
transition: transform 0.3s ease; /* 애니메이션 효과 */
}
.box:hover {
transform: translate(50px, 50px);
}
</style>
</head>
<body>
<h2>마우스를 박스에 올려보세요!</h2>
<div class="box">Box</div>
</body>
</html>위의 코드를 입력하고 마우스를 박스에 올리면 박스가 움직인다.
7-2. Scale
scale은 요소의 크기를 확대하거나 축소할 때 사용한다. 원래 공간을 기준으로 크기를 바꾸기 때문에, 레이아웃에 영향을 주지 않고 다른 요소는 그대로 유지된다.
-
scale(1): 원래 크기 -
scale(2): 2배 확대 -
scale(0.5): 절반 크기로 축소 -
scale(값): X축과 Y축 동시에 확대/축소 -
scale(X, Y): X축은 x 비율, Y축은 y 비율로 각각 조정 -
scaleX(값): X축만 확대/축소 -
scaleY(값): Y축만 확대/축소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS transform scale 예제</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: mediumseagreen;
color: white;
display: flex;
justify-content: center;
align-items: center;
margin: 50px;
transition: transform 0.3s ease;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<h2>마우스를 박스 위에 올려보세요!</h2>
<div class="box">Box</div>
</body>
</html>
7-3. Rotate
rotate는 요소를 중심으로 회전시키는 기능이다. 2D 평면에서 시계 방향 또는 반시계 방향으로 돌릴 수 있다.
transform: rotate(각도);각도의 단위는 Degree이며, 양수 값을 입력하면 시계 방향으로 회전하고, 음수 값을 입력하면 반시계 방향으로 회전한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Rotate 실습</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: skyblue;
margin: 50px;
transition: transform 0.5s; /* 부드럽게 회전 */
}
/* 마우스를 올리면 회전 */
.box:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>마우스를 박스 위에 올리면 상자가 시계 방향으로 45도 회전한다.
7-4. Skew
Skew는 요소를 비스듬하게 기울이는 효과를 준다. Rotate는 회전하는 것이었지만 Skew는 삐딱하게 만드는 것이라 생각하면 된다.
css
transform: skew(x각도, y각도);X축과 Y축 방향으로 몇 도 기울일 것인지 결정하면 된다. 단위는 역시 Degree이다. 한쪽 방향만 설정하거나 양쪽 방향 모두 설정 가능하다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Skew 실습</title>
<style>
.box {
width: 150px;
height: 150px;
background-color: lightcoral;
margin: 50px;
transition: transform 0.5s;
}
.box:hover {
transform: skew(20deg, 10deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>상자에 마우스가 닿으면 아래 사진처럼 상자가 삐딱하게 변한다.
7-5. Matrix
Matrix는 여러가지 변형(이동, 회전, 확대, 축소, 기울이기)를 한 번에 수학적 방식으로 지정하는 방식이다.
위에서 배웠던 translate, scale, rotate, skew와 같은 효과를 하나로 묶어서 설정할 수 있다.
transform: matrix(X 축 확대 및 축소, Y축으로 기울이기, X축으로 기울이기, Y축 확대 및 축소, X축 이동, Y축 이동);<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Matrix Transform 실습</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightseagreen;
margin: 50px;
transition: transform 0.5s;
}
.box:hover {
/* x축 1배, y축 0.5 기울기 / x축 0.5 기울기, y축 1배 / 이동 없음 */
transform: matrix(1, 0.5, 0.5, 1, 0, 0);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
