CSS 개념
CSS는 Cascading Style Sheets의 약자로 HTML이나 XML같은 마크업 언어로 작성된 문서가 어떻게 표현되어야 하는지를 나타내는 스타일 시트(Style Sheets) 언어이다. HTML이 웹 페이지의 전체적인 구조와 내용을 나타내는 반면에, CSS는 각 HTML의 요소를 꾸미는 역할을 담당한다.
1. CSS 기본 문법과 구조
CSS 는 규칙 기반 언어이다. 웹 페이지의 특정 요소나 요소 그룹에 적용할 스타일 그룹을 지정하는 규칙을 정의할 수 있다.
ex) " h1 요소의 텍스트 색상은 빨간색으로 하고 글자 크기는 크게 표시하고 싶은 경우, 다음과 같은 코드로 나타낼 수 있다.
먼저 스타일을 지정할 HTML 요소를 선택한 뒤에 중괄호 { }를 사용해서 그 안에 속성과 값 쌍의 형태를 취하는 선언을 한다. 각 쌍은 내가 선택한 요소의 속성을 지정하고 속성에 부여할 값을 지정하는 것을 의미한다. 콜론(;) 앞에는 속성이 있고 콜론 뒤에는 값이 있다. 위의 예시에서는 color와 font-size라는 속성이 사용되었다.
2. CSS 를 문서에 적용하는 3가지 방법
2.1 외부(external) 스타일 시트를 페이지에 연결하는 방법
외부 스타일 시트는 CSS 확장자가 .css 인 별도의 파일로 작성되고, HTML <link> 요소에서 참조하는 경우이다. CSS 를 여러 페이지에 연결할 수 있기때문에, CSS 를 문서에 첨부하는 가장 일반적이고 유용한 방법이다. <link> 라는 빈 태그에 속성값로 rel = "stylesheet" 와 href = "주소명.css" 주소를 적어야 한다.
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>외부 스타일 시트 삽입 예시</h1>
</body>h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
2.2 내부(internal) 스타일 시트
내부 스타일 시트는 외부 CSS 파일이 없는 대신, CSS 선택자를 HTML <head> 안에 포함된 <style> 요소 내부에 CSS를 배치한다. <head> 태그에 삽입된 대신, 대량 수정 기능에 유리하다는 장점이 있다.
<head>
<style>
h1 {
color: blue;
background-color: yellow;
border: 1px solid black;
}
p {
color: red;
}
</style>
</head>
2.3 인라인 스타일(Inline)
인라인 스타일은 CSS 효과를 <body> 태그에 위치한 HTML 태그 뒤에 style 속성과 속성값을 직접 삽입하는 방법이다. 개별적으로 태그에 CSS 효과를 줘야할 때 사용할 수 있다. 이 방법은 나중에 대량 수정에 불리하기 때문에 권하는 권장하는 방법은 아니다. 그러나 다른 위치에 비해서 적용 우선순위가 높다.
<body>
<h1 style="color: blue;background-color: yellow;border: 1px solid black;">인라인 스타일</h1>
<p style="color:red;">인라인 스타일 예시</p>
</body>
3. Selector(셀렉터) = 선택자
CSS 에서 셀렉터는 스타일을 지정할 웹 페이지의 HTML 요소를 대상으로 선택하는데 사용된다. CSS 선택자는 CSS 규칙의 첫 부분이며, 규칙 내의 CSS 속성값을 적용하기 위해 어떤 HTML 요소를 선택해야 하는지 브라우저에 알려주는 역할을 한다.
전체 선택자: HTML 문서 내부의 모든 요소를 선택하고 똑같은 CSS 속성을 적용한다. 보통 margin, padding 값 같은 기본값을 정해둘 때 사용한다. *를 사용해서 작성한다.
/*CSS*/
* {margin: 0; background-color: grey;}
태그 선택자(Type Selector): HTML 요소를 직접 지정하는 간단한 선택자이다. HTML 태그에서 <>를 제거하고 작성한다.
/*CSS*/
p {background: black; color: white;}
/*HTML*/
<p>태그 선택자 예시</p>
클래스 (class) 선택자: 주어진 값을 class 속성값으로 가진 모든 HTML 요소를 선택한다. 속성값 앞에 .(마침표)를 추가해서 작성한다. 한 페이지 내에서 여러 번 반복될 필요가 있는 스타일은 클래스 선택자를 사용한다. 특정 분류 안에 포함된 요소의 특성을 정의하는데 사용된다.
/*CSS*/
.content01 {background: black; color: white;}
/*HTML*/
<p class="content01">클래스 선택자 예시</p>
<div class="content02">클래스 선택자 예시</div>
ID 선택자: HTML 문서 내에서 어떤 요소에 대해 유일한 특성을 정의한다. HTML 문서 내에는 주어진 ID 속성값은 오직 하나만 존재해야 한다. 속성값 앞에 #를 추가해서 작성한다.
/*CSS*/
#userinfo {background: black; color: white;}
/*HTML*/
<div id="userinfo">ID 선택자 예시</div>
<div id="itemInfo">ID 선택자 예시</div>
하위 선택자(자손 선택자) & 자식 선택자
태그들 간에 포함 관계를 가질 때, 포함하는 요소를 부모 요소, 포함되는 요소를 자식 요소라고 한다. 위의 그림에서 하위 선택자는 부모 요소(section)에 포함된 모든 하위 요소에 스타일 을 적용한다. 그러나 자식 선택자는 부모(section)의 바로 아래 자식 요소(ul)에만 적용한다.
'개발공부 > Front-end' 카테고리의 다른 글
| [HTML, CSS] CSS 페이지 레이아웃 - Flexbox (0) | 2022.04.30 |
|---|---|
| [HTML, CSS] CSS 텍스트 꾸미기, 박스 모델 (0) | 2022.04.28 |
| [HTML, CSS] HTML 기본 (0) | 2022.04.27 |
