CSS 기초

오구오구·2022년 11월 9일

스파르타코딩

목록 보기

3/8

CSS란?

Cascading Style Sheets

HTML 입문 강의에서 HTML을 웹 사이트에서 화면에 표시되는 정보를 약속 한 것이라고 했는데요,
CSS는 구체적으로 어떤 스타일로 요소가 표시 되는지를 정하는 규격이라고 할 수 있습니다.

초기의 웹은 HTML 하나로 문서의 뼈대도 만들고 꾸미기도 함께 하였지만,
공통적인 디자인을 갖는 문서가 여럿 존재 할 경우 하나의 디자인이 변경되면 모든 파일을 수정해야 하는 등의 번거로움이 존재했죠.

CSS는 이런 문제를 해결함과 동시 웹페이지의 내용과 스타일(표현)을 분리해주어, 역할 분담도 되는 효과를 가지고 있습니다.

사용법

CSS 내부적으로 사용되는 문법은 동일하며, 어디에 기술하느냐의
차이가 존재합니다.
기술하는 방법은 아래의 3가지가 있습니다.

HTML 태그의 style 속성을 이용 (인라인 스타일시트)
<style> 태그를 통해 HTML 문서 내부에 기술 (내부 스타일시트)
(<style> 태그는 주로 <head> 태그 내부에 사용합니다)
.css 파일로 분리하여 HTML 문서에 연결 (외부 스타일시트)

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" href="파일이름.css">

3) 인라인 스타일

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

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

캐스케이딩과 우선순위

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

상위 태그에서 정의된 디자인 속성은 하위 태그로 상속.
하위 태그에서 상위 태그에 정의된 디자인 속성을 변경할 수 있음.

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

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

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

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

주석

/*로 시작하여 */로 끝납니다.

#my-box{
	/* color: red; */
	color: blue;
}

👉 배경관련 속성
background-color
background-image
background-size

사이즈
width
height

폰트
font-size
font-weight
font-family
color

간격
margin
padding

💡 margin과 padding ( → 헷갈리지 말기!)

margin은 바깥 여백을, padding은 내 안쪽 여백을
div에 색깔을 넣고, 직접 사용해서 차이를 비교해보기!

셀렉터란?

스타일은 적용 대상이 있어야 하는데 셀렉터가 바로 그 대상입니다. 기본적으로 태그, 아이디, 클래스를 셀렉터로 사용하며 이들을 조합해서 특정 조건에 맞는 셀렉터를 정의해 사용하게 됩니다.

html 문서에서 스타일의 적용 대상을 지칭.
디자인이 적용되기를 원하는 특정 부분의 선택이 용이하도록 적절한 태그 구조를 사용.
html 문서의 기본 구성요소인 태그는 가장 기본이 되는 셀렉터.
태그에 사용할 수 있는 id 속성은 문서내 유일한 값으로 셀렉터로 사용할 수 있음.
스타일 정의에 클래스를 사용하고 html 태그에 class 속성으로 스타일 지정.
셀렉터 사용예 사용예 설명
.class .intro html 태그에서 class=”intro”로 된 모든 태그 영역 선택
#id #banner html 태그에서 id=”banner”로 된 태그 영역 선택

 *        : 문서내 모든 요소를 선택
태그      : p	문서내 모든 <p> 태그 영역 선택
태그, 태그 : div, p	모든 <div> 와 <p> 태그 영역 선택
태그 태그  : div p	<div> 태그 안에 있는 모든 <p> 태그 영역 선택

기본 셀렉터

기본 셀렉터에는 태그, 아이디, 클래스 3가지가 있습니다.

1) 태그 셀렉터

태그 셀렉터는 태그 이름으로 요소를 선택.
문서내 임의의 태그를 선택자로 사용.
같은 디자인 속성을 가지는 여러 태그는 ,로 나열해 일괄적용.

p {
  text-align: center;
  color: red;
}
h1,h2,h3,h4 { color: blue; }

경우에 따라서는 태그의 특정 속성에 대해 셀렉터를 지정하는 것이 가능 합니다. 예를 들면 <input> 태그는 type 속성에 따라 다양한 입력양식을 제공하게 되어 있습니다. 이경우 특정 type 에만 배경색이나 크기를 지정하기 위해서는 다음과 같이 태그 셀렉터에 속성을 함께 사용합니다.

input[type=text] {
  background-color: blue;
  color: white;
}

2) id 셀렉터

HTML 요소의 id 속성을 사용해 특정 요소를 선택.
id는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택하는 데 사용.

#id_name { color: blue; }

<div id="id_name">
...
</div>

3) class 셀렉터
클래스 셀렉터는 특정 클래스 속성이 있는 요소를 선택.
.class name 형식으로 사용.
class로 디자인을 먼저 정해놓고 필요한 곳에서 해당 class를 지정해 사용하는 방식임.

.class_name1 { color: blue; }
p.class_name2 { color: red; }

<div class="class_name1">
...
</div>

기본 셀렉터 조합

기본 셀렉터인 태그, 클래스, 아이디의 조합에 따라 다양한 셀렉터 정의가 가능합니다. 예를 들어 하나의 태그에 대해 어떤 경우에는 적용이되고 어떤 경우에는 적용이 되지 않는 상황을 셀렉터 정의에 따라 만들 수 있습니다.

1) 동시 지정

,를 이용해 셀렉터를 나열하면 해당 셀렉터에 동일한 속성을 부여할 수 있습니다.

h1, h2 {...}
.box, .note {...}
h1,h2 에 동일 속성 지정
box, note 클래스에 동일 속성 지정

2) 태그와 클래스 결합

태그와 클래스를 ,을 이용해 결합할 수 있습니다. 예를 들면 같은 클래스를 사용 하더라도 h1 과 h2 에 각각 다르게 적용하고 싶은 경우에 사용할 수 있습니다. 다음 예제서는 .header 에 공통된 여러 속성을 적용해 두고 h1, h2에서는 각각 특정 속성만 변경하는 형식으로 많이 사용합니다.

.header { color: red; }
h1.header { color: blue;}
h2.header { color: green;}
header클래스를 사용하는 모든 태그의 텍스트는 붉은색으로 출력 됩니다.
h1에서 사용할 경우 파란색, h2의 경우 녹색이 적용 됩니다.
3) 기본 셀렉터 조합 사용 예
CSS 가 다음과 같이 작성되었다고 가정 합니다.

.header { color: red; }
div.header { color: blue;}
h1,h2 {color: green}
html 파일은 다음과 같이 작성되어 있을때 각각의 코드는 셀렉터 조합에 따라 스타일이 적용 됩니다.

<p class="header">hello</p>   -> 붉은색 출력
<div>hello</div>    -> 기본색 출력
<div class="header">world</div>   -> 파란색 출력
<div><h1>hello</h1></div>   -> 녹색 출력
<div class="header"><h1>world</h1></div>   -> 녹색 출력
<h2>hello world</h2>   -> 녹색 출력