CSS - ① 기본

kongmi 2023. 3. 13. 19:22

CSS?

CSS는 HTML과 함께 웹 표준의 기본 개념 입니다.

HTML이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다면..

CSS는 텍스트, 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당 합니다.

초창기 HTML은 style이라는 속성으로 태그를 꾸밀 수 있게 했습니다. 하지만 웹이 발전하면서 하나의 웹 문서 안에 구조를 설계하는 태그와 디자인을 담당하는 스타일을 같이 묶어 두는 것이 문제가 되기 시작했습니다. 그래서 W3C는 웹 문서에서 구조와 디자인을 분리하기로 했고, 그 방법의 하나로 CSS라는 언어가 탄생했습니다.

CSS 기본 형식

CSS 문법은 크게 선택자와 선언부로 구분 합니다.

선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 입니다.
선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영억으로, 중괄호{}를 넣습니다.

p {
  color: red;
  padding: 5px;
}

CSS 적용

스타일 시트?

웹 문서 안에는 다양한 스타일 규칙이 적용 됩니다.

이런 스타일 규칙을 한 눈에 확인하고, 필요할 때마다 수정하기가 쉽도록 한군데 묶어 놓은 것을 '스타일 시트'라고 합니다.

스타일 시트는 크게 웹 브라우저에 기본으로 만들어져 있는 브라우저 기본 스타일과 사용자 스타일 시트로 나눌 수 있습니다.

💡 브라우저 기본 스타일은.. margin을 안줬는데도 불구하고 h1태그 사용시 창과 조금 떨어져서 나타나는 것을 확인할 수 있습니다.

인라인 스타일

HTML 태그에서 사용할 수 있는 style 속성에 CSS 코드를 작성하는 방법 입니다.
태그에 직접 CSS 코드를 작성하는 방식이라서 CSS 의 기본 문법 형식에서 선택자 부분이 필요 없습니다.

<!DOCTYPE html>
<html>
<head>
  <title>인라인 스타일</title>
</head>
<body>
  <h1 style="color: #333;">인라인 스타일 예제</h1>
  <p style="font-family: Arial, sans-serif;">인라인 스타일은 HTML 태그의 
  style 속성을 사용하여 스타일을 지정합니다.</p>
</body>
</html>

내부 스타일 시트

HTML 파일 내부에 CSS 코드를 작성하는 방법 입니다.
style 태그를 사용하는 위치는 정해진 기준이 없지만, 보통 head 태그안에 사용 합니다.
head 태그에 CSS를 작성하면 body 태그에 작성된 내용이 사용자에게 노출되기 전에 CSS를 불러와 빠르게 디자인을 적용할 수 있는 장점이 있습니다.
그러나 웹 브라우저에서 HTML 문서를 해설 할 때 마다 CSS 코드를 매번 다시 읽기 때문에 성능상으로는 좋지 못하다는 단점이 존재 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <style>
    h1 {      
      padding:10px;
      background-color:#222;
      color:#fff;
    }
  </style>
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

외부 스타일 시트

CSS 코드를 작성하는 별도 파일을 만들어 HTML 문서와 CSS를 연결하는 방법 입니다.
파일의 확장자는 CSS 여야 합니다.
별도로 작성한 CSS 파일을 HTML 문서에서 연결할 때는 link 태그를 사용 합니다.

h1 {      
  padding:10px;
  background-color:#222;
  color:#fff;
}

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>상품 소개 페이지</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <h1>레드향</h1>
  <p>껍질에 붉은 빛이 돌아 레드향이라 불린다.</p>
  <p>레드향은 한라봉과 귤을 교배한 것으로 일반 귤보다 2~3배 크고, 과육이 붉고 통통하다.</p>
  <p>비타민 C와 비타민 P가 풍부해 혈액순환, 감기예방 등에 좋은 것으로 알려져 있다.</p>
</body>
</html>

CSS 주요 문법 요약

CSS 주요 속성

1. 색상(color)

font-color: 텍스트 색상 지정
background-color: 배경 색상 지정

2. 폰트(font)

font-size: 글자 크기 조절
font-family: 폰트 지정
font-weight: 폰트 굵기 조절
font-style: 글자 기울기 조절

3. 레이아웃(layout)

width: 요소의 가로 크기 조절
height: 요소의 세로 크기 조절
margin: 요소의 바깥쪽 여백 조절
padding: 요소의 안쪽 여백 조절
border: 요소의 테두리 스타일 조절
box-shadow: 요소에 그림자 효과 추가

4. 배경(background)

background-color: 배경 색상 지정
background-image: 배경 이미지 지정
background-size: 배경 이미지 크기 조절
background-position: 배경 이미지 위치 조절

5. 애니메이션(animation)과 전환(transition)

animation: 요소에 애니메이션 효과 추가
transition: 요소의 상태 변화에 따른 전환 효과 추가

6. 반응형 디자인(responsive design)

media query: 미디어 쿼리를 사용하여 화면 크기에 따른 스타일 조절
flexbox: 요소의 배치를 유연하게 조절하는 레이아웃 방식
grid: 그리드 레이아웃을 사용하여 요소의 위치를 조절

너비

CSS에서 요소의 너비는 다양한 방법으로 지정할 수 있습니다.

1. 고정 너비(fixed width)

고정 너비는 픽셀(px) 단위로 값을 지정하여 요소의 너비를 고정합니다. 이 경우 요소의 너비는 항상 동일하게 유지됩니다.

2. 퍼센트 너비(percent width)

퍼센트 너비는 요소의 부모 요소에 대한 상대적인 비율로 값을 지정합니다. 이 경우 요소의 너비는 부모 요소의 크기에 따라 자동으로 조절됩니다. 예를 들어, 부모 요소의 너비가 800px이고, 자식 요소의 너비를 50%로 지정한 경우 자식 요소의 너비는 400px가 됩니다.

3. 자동 너비(auto width)

자동 너비는 내용(content) 영역에 맞게 요소의 너비를 자동으로 조절합니다. 이 경우 요소의 너비는 내용(content) 영역의 크기에 따라 자동으로 조절됩니다.

4. 최대/최소 너비(max/min width)

최대/최소 너비는 요소의 최대/최소 너비 값을 지정합니다. 이 경우 요소의 너비는 지정된 값보다 크거나 작아지지 않습니다.

단위

px : 하나의 점을 의미 (가장 많이 사용)
% : 상대적 백분율 (많이 사용) - 반응형 웹을 위해서 사용해야 함.
em : 요소의 글꼴 크기 : 반응형 웹을 구현하기 위해 자주 사용되며, 단위는 부모 요소의 폰트 크기를 기준으로 결정 됩니다. 일반적으로 1em은 부모 요소의 폰트 크기가 16px을 의미 합니다.
💡부모 요소에서 폰트 크기를 지정 하지 않았을 경우
rem : 루트 요소의 글꼴 크기 - 반응형 웹을 위해서 사용해야 함
vw : 뷰포트의 가로 너비 백분율 (뷰포트는 브라우저에 표시되는 화면 전체 영역을 의미)
vh : 뷰포트의 세로 너비 백분율

마진(margin)

요소의 외부 여백을 지정하는 속성이며 음수값을 지정 할 수 있음
auto 속성이 기본이며, 가운데 정렬을 의미 함.
단위는 px, em, vw
값을 1개 입력하면 전부 적용
2개 입력하면 위/아래, 좌/우
3개 입력하면 위, 좌/우, 아래
4개 입력하면 시계뱡향으로 적용

패딩(padding)

내부의 여백 지정
px, em, % 등의 단위로 지정 가능
마진과 적용 방식은 동일 함.

border

단축 속성(서로 다른 여러 가지 CSS 속성의 값을 지정할 수 있음)
border: border-width border-style border-color
테두리의 굵기로 기본값은 medium
테두리의 스타일로 기본값은 none
테두리의 색상으로 기본값은 currentcolor
테두리의 두께 만큼 요소가 커짐
border-style : 기본값은 none (선의 종류를 의미, none, hidden, dotted, dashed, solid......)
border-radius: 라운드 처리
solid는 실선, dashed 파선
컬러는 rgb(255, 255, 255)로 입력 가능, #32a1ce로도 입력 가능, 지정된 컬러 이름으로도 사용 가능

/* 스타일 */
border: solid;

/* 너비 | 스타일 */
border: 2px dotted;

/* 스타일 | 색 */
border: outset #f33;

/* 너비 | 스타일 | 색 */
border: medium dashed green;

border: 1px solid #000;

저작자표시 비영리 변경금지 (새창열림)