[Front-End] CSS 기본, 용어정리
CSS에 대한 설명
CSS(Cascading Style Sheets)는 HTML로 작성된 웹 페이지의 스타일을 정의하는 언어이다. CSS를 사용하면 웹 페이지의 레이아웃, 색상, 글꼴, 간격, 크기 등을 제어하여 페이지를 더욱 미적으로 꾸밀 수 있다. HTML이 웹 페이지의 구조를 담당한다면, CSS는 해당 구조를 꾸미고 디자인하는 역할을 한다.
CSS의 주요 특징
- 스타일 분리
- CSS는 콘텐츠와 스타일을 분리하여, HTML 문서의 구조와 디자인을 독립적으로 관리할 수 있게 한다. 이를 통해 유지보수가 쉬워지고, 여러 페이지에 공통된 스타일을 적용할 수 있다.
- 선택자와 선언
- CSS는 선택자(selector)와 선언(declaration)으로 구성된다. 선택자는 스타일을 적용할 HTML 요소를 지정하며, 선언은 특정 스타일 속성과 그 값을 정의한다.
- 예를 들어, 다음 코드에서
h1은 선택자이고,{ color: blue; }는 선언이다.h1 { color: blue; }
- 다양한 스타일 적용 방식
- CSS는 인라인(inline), 내부(internal), 외부(external) 스타일시트를 통해 스타일을 적용할 수 있다.
- 인라인 스타일: HTML 요소에 직접 스타일을 적용 (
<h1 style="color: blue;">Hello</h1>) - 내부 스타일시트: HTML 문서의
<head>태그 안에<style>요소를 사용해 스타일을 정의 - 외부 스타일시트: 별도의
.css파일을 사용해 스타일을 정의하고,<link>태그를 통해 HTML 문서에 연결
- 인라인 스타일: HTML 요소에 직접 스타일을 적용 (
- CSS는 인라인(inline), 내부(internal), 외부(external) 스타일시트를 통해 스타일을 적용할 수 있다.
- 계단식(Cascading) 우선순위
- CSS는 여러 개의 스타일 규칙이 동일한 요소에 적용될 때, 계단식 우선순위(cascading priority)를 따르게 된다. 우선순위는 인라인 스타일 > 내부 스타일시트 > 외부 스타일시트 순서로 적용되며, 특정성을 따져 가장 구체적인 규칙이 우선 적용된다.
주요 CSS 속성
- 텍스트 관련 속성
color: 글자 색상을 지정font-size: 글자 크기를 지정font-weight: 글자의 굵기를 지정text-align: 텍스트 정렬 방식 지정 (왼쪽, 오른쪽, 가운데 등)
p { color: red; font-size: 16px; font-weight: bold; text-align: center; } - 박스 모델(Box Model)
- 모든 HTML 요소는 박스 모델로 구성되며, 이는
content,padding,border,margin으로 이루어져 있다.padding: 콘텐츠와 테두리 사이의 내부 여백border: 요소의 테두리margin: 테두리 바깥쪽의 외부 여백div { width: 200px; height: 100px; padding: 10px; border: 2px solid black; margin: 20px; }
- 모든 HTML 요소는 박스 모델로 구성되며, 이는
- 레이아웃 관련 속성
display: 요소의 표시 방식 설정 (block,inline,flex,grid등)position: 요소의 위치를 제어 (static,relative,absolute,fixed,sticky)float: 요소를 왼쪽 또는 오른쪽으로 띄움 ```css .container { display: flex; justify-content: space-between; align-items: center; }
.box { position: absolute; top: 50px; left: 100px; } ```
- 배경 관련 속성
background-color: 배경 색상 지정background-image: 배경 이미지 설정background-size: 배경 이미지 크기 조절body { background-color: #f0f0f0; background-image: url('background.jpg'); background-size: cover; }
- 애니메이션과 전환 효과
- CSS 애니메이션 및 전환 효과를 통해 웹 페이지에 동적인 요소를 추가할 수 있다.
- 버튼을 클릭 또는 hover 될 때 부드러운 애니메이션 효과 ```css .button { background-color: blue; transition: background-color 0.3s; }
.button:hover { background-color:green; } ```
- 반응형 웹 디자인
- 미디어 쿼리(Media Query)를 사용하여 다양한 화면 크기에 따라 레이아웃을 조정할 수 있다. 이를 통해 데스크톱, 태블릿, 모바일 등 다양한 장치에서 일관된 사용자 경험을 제공한다.
@media (max-width: 600px) { .container { flex-direction: column; } }
- 미디어 쿼리(Media Query)를 사용하여 다양한 화면 크기에 따라 레이아웃을 조정할 수 있다. 이를 통해 데스크톱, 태블릿, 모바일 등 다양한 장치에서 일관된 사용자 경험을 제공한다.
CSS 수업 내용
<styletype="text/css">
/* 이곳은 주석입니다, Ctrl + Shift + C로 자동 주석 가능. 그러나 푸는 것은 안된다.
선택자 {스타일 항목 : 스타일 값;...}
기본 선택자 : a - a tag, .a - a라는 클래스(여러개), #a - a라는 아이디(한개)
다수 선택자 : ","로 선택. a, #a : a tag와 a라는 아이디
상태 선택자 : ":". ":hover" - 마우스가 올라갔을 때. "a:hover" - 앵커 태그 위에 마우스가 올라갔을 때.
선택의 상속 : a .data - a tag 안에 data class의 태그를 찾는다.
*/
/* box 속성의 객체를 가운데 정렬 시키기 - table */
table {
/* table의 여백 주기 - 데이터를 반복적으로 사용 : 시작이 맨 위에서 부터 시계 방향으로(상우하좌)
길이나 크기를 지정할 때 0 이 아니면 단위를 꼭 써야 한다. (px, pt, cm, mm, m, inch, em ...)*/
margin: 0 auto;
width: 800px; /* 테이블의 너비 지정*/
}
/* 테이블 테두리 */
th, td {
/* border=with : 1px; border-type : solid; border-color : #888
- 데이터 특성에 따라서 항목에 찾아 들어간다.
- 색상 : #888
-- 색상 이름 : red, blue, black, white, ...
-- rgb : 16진수 #FFFFFF - #RGB : R - 0~FF : 256 등급으로 나눔
#FFF - #RGB : R - 0~F : 16등급으로 나눔
- 선 타입 : solid - 실선, dotted - 점선, dashed - 긴 점선, double - 이중선
*/
border: 2px hidden #888; /* 테두리 */
padding: 5px; /* 테두리와 데이터의 공백 */
}
th {
background: #50586C; /* 배경색 */
color: #DCE2F0;
}
td {
background: #DCE2F0; /* 배경색 */
color: #50586C;
}
</style>
