Kim Youngjae

Publisher and Developer

안녕하세요. Kim.YJ 입니다.

이번 포스팅은 CSS의 구조와 기본개념에 대해 먼저 알아보는 시간을 가져보겠습니다.

기초적인 순서부터 자세히 설명 드릴테니,
천천히 이해하며 진행해 주시면 감사하겠습니다.

[ CSS 란? ]

https://images.velog.io/images/kyj0206/post/2589e241-10be-41bd-9662-77f399759e6a/123123.png

CSS(Cascading Style Sheets)는 기본적인 개념은
documents가 사용자에게 어떻게 보여질까를 기술하는 언어입니다.

CSS는 쉽게 말해서 사용자에게 문서를 표시하는 방법을 지정하는 언어입니다.

HTML이 정보를 표현한다면, CSS는 HTML문서를 시각적으로 꾸며주는 역할을 합니다.

[ CSS 문법 ]

선택자 {
  속성: 속성값;
}

선택자는 스타일이 필요한 HTML요소, 부여된 ID,Class를 넣어줍니다. 선언부에는 다중 속성:속성값이 있을때에는 끝나는 지점에 ; 으로 구분지어 줍니다.

1. CSS 선택자의 종류

1-1) 전체 선택자

전체 선택자는 html에서 모든 element(태그)에 같은 css 속성을 적용합니다.

* {
  margin: 0;
  padding: 0;
}
1-2) 태그 선택자

태그 선택자는 html 요소를 직접적으로 기술하는 선택자 입니다.

선택자 {
  div {
    margin: 0;
    padding: 0;
  }
}
1-3) 아이디 선택자

아이디 선택자는 .className이 아닌 #을 붙인 #idName 으로 사용됩니다.

#idName{margin:0; padding:0}
div#idName{margin:0; padding:0}

<div id="idName">아이디 선택자 사용법</div>
1-4) 클래스 선택자

클래스 선택자는 위와같이 #대신 .을붙여 .className 으로 사용됩니다.

.className{margin:0; padding:0}
div.className2{color:red}

<div class="className className2">클래스 선택자 사용법</div>
1-5) 복합 선택자

선택자가 복합적으로 사용될때 사용됩니다.

div + p {
  background: #c8c8c8;
} //div태그의 직계자식중 p태그만 스타일 지정
div ~ p {
  color: green;
} //div와 형제관계(같은레벨)의 모든 p태그에 스타일 지정
1-6) 속성 선택자

태그 안의 속성에 따라 스타일을 지정하는 선택자 방식입니다.
조건에 따라 다양한 스타일을 지정할 수 있기 때문에 활용도가 높습니다.

<input type="text" value="check01" class="default red">

<input type="text" value="check02" class="default blue">

<input type="text" value="check03" class="default red">

<input type="text" value="check04" class="check red">

<input type="text" value="check05" class="check-test">


/* text 형식의 input태그 선택 */

input[type="text"] {
  width: 200px;
  padding: 5px;
}

/* red 클래스를 포함한 input태그 선택 */

input[class~="red"] {
  border: 1px solid red;
}

/* check로 시작하는 class명을 가진 input 선택 */

input[class^="check"] {
  color: green;
}

/* blue로 끝나는 class명을 가진 input 선택 */

input[class$="blue"] {
  border: 1px solid blue;
}

/* check라는 값이 포함된 value를 가진 input 선택 */

input[value*="check"] {
  text-align: right;
}

/* check로 시작하거나, check를 class명으로 포함하는 input 선택 */

input[class|="check"] {
  color: red;
}

2. CSS의 장점

  • HTML과 CSS를 분리하여 관리할 수 있다.

  • 검색엔진이 HTML을 해석 가능하도록 하기 때문에 더 많은 방문자들이 방문할 수 있도록 유도할 수 있다.

    시각장애인을 위한 스크린리더 프로그램이 HTML문서를 해석하도록 할 수 있다.(웹접근성)

  • HTML을 수정하지 않고 CSS만 변경할 수 있다.

    태그마다 style 속성으로 주게 되면 소스코드가 복잡해지고, 지저분해 집니다.
    이를 CSS로 분리하여 관리하게 되면 유지보수 및 가독성이 좋아집니다.

3. HTML애 CSS로 디자인하는 방법

CSS를 HTML에 적용 시키는 방법은 3가지가 있습니다.

3-1) 외부 스타일 시트 (External Style Sheet)

아래 방법 중 가장 CSS의 장점을 모두 갖춘 방식입니다.
가장 많이 쓰이며, 유지/보수의 효율성이 가장 좋은 방법입니다.

<div>
  <link rel="stylesheet" type="text/css" href="파일경로">
</div>
3-2) 내부 스타일 시트 (Internal Style Sheet)

HTML 문서 내에서 < style > 태그로 지정하는 방식입니다.

보통 외부 스타일 시트 방식을 이용하지만,
상황에 따라 유일한 스타일 적용을 위해 유용하게 쓰일 수 있는 방법입니다.

<div>
 <style type="text/css">
    h1 {color:blue;}
 </style>
</div>
3-3) HTML 태그 내에 스타일 지정 (Inline Styles)

스타일을 지정하고싶은 태그에 직접적으로 주입 해 주는 방식입니다.

css의 장점인 내용과 스타일의 분리,스타일에 대한
일괄 변경이 불가능한 방법입니다.

<p style="color: red;"> 글씨는 빨간색이다. </p>

4. CSS의 우선순위

위에서 아래로 차례로 읽어들이는 HTML과는 달리, CSS에는 우선순위로 적용됩니다.
적용순서는 인라인스타일 > 내부스타일 > 외부스타일 순서로 적용됩니다.

스타일 우선순위 적용 순서

  1. !important; 가 붙은 속성 (강제 우선순위)
  2. 인라인 스타일 방식 (Tag에 직접적으로 style적용)
    내부 스타일 방식 (HTML문서에 style적용)
  3. #id를 지정받은 속성
  4. .class를 지정받은 속성
  5. 태그이름으로 지정된 속성
  6. 상위 객체에서 상속된 속성 (외부 스타일 방식)

최하위 우선순위가 적용된 style방식 이어도,
!important 가 style뒤에 적용되면 강제우선순위로 적용됩니다.

.first {
  color: yellow !important;
}

5. 스타일시트 함수 (function)

CSS에서 함수는 요소의 속성값을 제어하는 역할을 합니다.

5-1) CSS 함수의 속성값
함수 속성값 내용
attr() 해당요소의 HTML 속성값을 변환
calc() 해당요소의 속성값을 사칙연산
var() 해당요소의 사용자 정의 특성값을 삽입
linear-gradient() 선형 그라디언트 백터이미지화
radial-gradient() 타원형 그라디언트 백터이미지화
repeating-linear-gradient() 선형 그라디언트 반복
repeating-radial-gradient() 타원형 그라디언트 반복

6. 속기속성

CSS Shorthand, “줄여쓰기, 속기”는 스타일시트의 파일을 줄여줄 뿐만 아니라
가독성을 높여주고 수정할때에도 빠르게 할 수 있습니다.

6-1) Font

font 속성을 속기로 사용할때 선언하지 않은 값은 기본 값이됩니다.
font의 기본 속성은 아래와 같습니다.

  • font-style (글씨체)
  • font-family (글꼴 집합/ 여러글꼴 사용가능)
  • font-variant (소문자 > 작은대문자)
  • font-weight (글자 굵기)
  • font-size (글자 크기)
  • line-height (줄 높이)
// 줄임 없는 CSS
.font {
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  font-size: inherit;
  line-height: normal;
  font-family: inherit;
}

// 속기 CSS
.font {
  font: normal normal normal inherit/normal inherit;
}
6-2) Background

Background 속성 은 배경디자인이 필요할때 선언합니다.

  • background-color (배경색)
  • background-image (배경 이미지)
  • background-repeat (배경 이미지 반복)
  • background-position (배경 이미지 위치)
  • background-attachment (배경 이미지 스크롤 여부)
// 줄임 없는 CSS
.background {
  background-color: transparent;
  background-image: none;
  background-repeat: repeat;
  background-position: top left;
  background-attachment: scroll;
}

// 속기 CSS
.background {
  background: transparent none repeat top left scroll;
}
6-3) List

목록속성은 아래와 같습니다.

  • list-style-type (목록 마커 모양)
  • list-style-position (목록 마커 위치)
  • list-image (목록 마커 이미지)
// 줄임 없는 CSS
.list {
  list-style-type: square;
  list-style-position: inside;
  list-style-image: url(image.png);
}

// 속기 CSS
.list {
  list-style: square inside url(image.png);
}
6-4) border

Border는 상하좌우의 속성을 지닙니다.
상세 속성은 다양하지만, 일반적으로 쓰이는 부분만 설명드리겠습니다.

상세한 속성에 대한 설명은 따로 포스팅으로 진행하겠습니다.

  • border-width (테두리 두께)
  • border-style (테두리 모양)
  • border-color (테두리 색상)
// 줄임 없는 CSS
.border {
  border-width: 5px;
  border-style: dotted;
  border-color: #000;
}

// 속기 CSS
.border {
  border: 5px solid #000;
}
6-5) Margin & Padding

Margin과 Padding은 속성이 동일합니다.

  • margin-top (마진의 위)
  • margin-right (마진의 오른쪽)
  • margin-bottom (마진의 아래)

  • margin-left (마진의 왼쪽)

  • padding-top (패딩의 위)
  • padding-right (패딩의 오른쪽)
  • padding-bottom (패딩의 아래)
  • padding-left (패딩의 왼쪽)
// 줄임 없는 CSS
.margin {
  margin-top: 5px;
  margin-right: 7px;
  margin-bottom: 5px;
  margin-left: 7px;
}

// 속기 CSS (위,오른쪽,아래,왼쪽)
.margin {
  margin: 5px 7px 5px 7px;
}
6-6) outline

외곽선 의 디자인 속성입니다.

  • outline-width (외곽선의 두께)
  • outline-style (외곽선의 스타일)
  • outline-color (외곽선의 색상)
// 줄임 없는 CSS
.outline {
  outline-width: 3px;
  outline-style: dotted;
  outline-color: #000;
}

// 속기 CSS
.outline {
  outline: 3px dotted #000;
}
6-7) Transition

Transition은 마우스 이벤트에 의한 동적인 요소를 표현하고자 할 때 주로 사용됩니다.

  • transition-property (속성 적용이될 속성명시)
  • transition-duration (속성의 지속시간)
  • transition-timing-function (속성의 중간값)
  • transition-delay (속성 전환의 대기시간)
// 줄임 없는 CSS
.Transition {
  transition-property: all;
  transition-duration: 3s;
  transition-timing-function: ease-in;
  transition-delay: 2s;
}
// 크로스브라우징 적용을 위해 보여줄 브라우징에 맞추어 앞에 붙여 줍니다.
/* 파이어폭스 4 */
-moz-
/* 크롬과 사파리 */
-webkit-
/* 오페라 */
-o-

// 속기 CSS
.Transition {
  transition: all 3s ease-in2s;
}

// 크로스브라우징 적용을 위해 보여줄 브라우징에 맞추어 앞에 붙여 줍니다.
/* 파이어폭스 4 */
-moz-
/* 크롬과 사파리 */
-webkit-
/* 오페라 */
-o-

8. 주석

CSS 파일의 내용이 많아지면 이를 관리하기 위해서 주석을 활용하면 좋습니다.

<style type="text/css">
  <!--
/*강조하고 싶은 문단에 red 클래스를 적용한다.*/
.red {
    color: red;
  }
  //-->
</style>
<h1 class="red">이 문단의 class는 red입니다.</h1>
<p>문단입니다.</p>



지금까지 CSS의 기본 구문,구조 포스팅을 하였습니다.

도움이 되는 포스팅이었길 바랍니다.

다음 포스팅은 더 유익한 정보로 찾아뵙겠습니다.
감사합니다!

태그:

카테고리:

업데이트:

참고