프론트엔드 CSS 프로그래밍 기초

1. CSS 개념이해


이번 강의에서는 CSS의 기본 개념과 구조, 문법등을 배우게 됩니다. CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술로 잘 설계된 css 는 재활용이 가능하며 나아가 테마, 템플릿의 형태로 확장할 수 있습니다. 또한 자바스크립트와 연계해 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용됩니다.

이 강의를 통해 왜 CSS를 사용하는지 이해하고 HTML에서 CSS를 사용하기 위한 세가지 포함 구조를 자유롭게 활용할 수 있습니다.


01: CSS(Cascading Style Sheet) 개요

CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소 입니다. HTML이 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 뼈대를 만드는 것이라면 CSS는 색상이나 크기, 이미지 크기나 위치, 배치 방법 등 웹 문서의 디자인 요소를 담당 합니다.

CSS적용 예시
[CSS 적용 예시 - 네이버 메인]

CSS를 사용해야만 하는 이유


2. 기본 문법

CSS는 선택자선언부로 구성됩니다. 선택자는 스타일을 지정할 HTML 요소(태그,아이디 등)를 가리킵니다. 선언부에는 CSS 속성 이름과 값이 포함됩니다. 속성이 여러 개일 경우, 한 줄로 나열해도 상관없지만 여러 줄에 걸쳐 작성하는 것이 좋습니다.

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

예)
/* h1태그의 색상을 빨간색으로 크기는 15px로 지정합니다.*/
h1 {color:red; font-size:15px;}
선택자의 중요성
CSS의 핵심은 적절한 선택자를 사용하는 것이며 복잡한 문서 구조에서 특정 부분을 선택하기 위한 선택자 지정은 어려울 수 있으며 html 구조를 처음부터 잘 설계하는 것이 중요함.

03: CSS 적용 방법

HTML 문서에 CSS를 적용하는 방법에는 내부 스타일시트, 외부 스타일시트, 인라인 스타일 등 총 3가지 방법이 있습니다.

CSS적용방법

1) 내부 스타일시트

html 파일에 스타일을 기술하는 방법으로 <head></head> 태그 사이에 <style></style> 태그 부분에 작성합니다. html 과 css 가 한 파일에 있으므로 작업이 쉽고 간편하지만 css의 재활용이 안되는 문제가 있어 특별한 경우가 아니면 외부 스타일시트가 권장 됩니다.

<head>
<style>
body {
    background-color: red;
}

h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
<body>
    ...
</body>

2) 외부 스타일시트

css 를 작성하는 가장 기본적인 방법 입니다. 별도의 파일에 CSS 문서를 작성하고 해당 CSS를 필요로 하는 html 문서에서 불러와 사용하는 형식 입니다. 이때 css는 동일한 서버에 있어도 되고 url을 통해 다른 서버의 css를 불러오는 것도 가능 합니다.

<link rel="stylesheet" type="text/css" href="mystyle.css">
<link rel="stylesheet" type="text/css" href="http://cdn.site.com/css/mystyle.css">

3) 인라인 스타일

html 태그에 필요한 디자인 속성을 직접 작성하는 형식 입니다. 그때 그때 필요한 디자인을 바로 적용할 수 있다는 편리함이 있지만 일관된 디자인 체계를 유지하는 데에는 방해가 되기 때문에 꼭 필요한 경우가 아니라면 사용하지 않도록 합니다.

<h1 style="color:blue; margin-left:30px;">This is a heading</h1>

04 : 캐스케이딩과 우선순위

1) 캐스케이딩 의미

css 에서 Cascading 은 사전적 의미로 폭포처럼 떨어져 내리는 과 같은 의미를 가지고 있습니다. css 에서는 디자인 속성이 html 문서의 구조 즉 DOM(Document Object Model) Tree 구조에서 상위 요소에서 정의한 디자인 속성이 하위 요소로 전달되는(상속 개념) 의미에서 유래 되었다고 할 수 있습니다.

<!-- body 태그 안에 있는 모든 태그 요소들은 빨간색 글자로 표시됨 -->
<body style="font-color:red">
    <h1>Hello</h1>
</body>

2) 우선 순위

동일한 디자인 속성이 외부 스타일시트, 내부 스타일시트, 인라인 스타일시트에 적용 되어 있는 경우 우선순위는 가장 나중에 정의되는 스타일에 있습니다. 따라서 인라인 스타일시트가 가장 높은 우선순위로 적용되고 외부 스타일시트와 내부 스타일시트는 문서상 정의된 순서에 따라 우선순위가 결정되는 형식입니다.

웹 브라우저 자체도 html 구성요소에 대한 내부적인 css 를 가지고 있다고 볼 수 있습니다. 브라우저에 따라 사용자 정의 css를 사용할 수 있는것도 그 때문입니다. 일반적인 우선순위(낮은순 -> 높은순)는 다음과 같습니다.

브라우저 디자인 정의 -> 외부 스타일시트 -> 내부 스타일시트 -> 인라인 스타일시트

참고 자료