CSS3
CSS란?
- CSS는 Cascading Style Sheets의 약자입니다.
- CSS는 HTML 요소가 화면에 표시되는 방식을 설명합니다.
- CSS는 많은 작업을 절약합니다. 여러 웹 페이지의 레이아웃을 한 번에 제어할 수 있습니다.
- 외부 스타일 시트는 CSS 파일에 저장됩니다.
CSS 구문
p {
text-align: center;
color: white;
}- selector : 스타일을 지정하려는 HTML 요소를 가리키는데 코드에서는 p 가 selector입니다.
- Declaration : 여러 개의 CSS Declaration 은 세미콜론으로 구분하고, Declaration 블록은 중괄호로 묶습니다.
- properties, value : Declaration 에는 프로퍼티와 값으로 구성되면 콜론으로 구분됩니다.
SELECTOR
CSS 선택기는 스타일을 지정하려는 HTML 요소를 찾는데 사용됩니다.
요소 selector
p {
text-align: center;
color: dark;
}
요소 선택기는 요소 이름을 기준으로 HTML 요소를 선택합니다.
ID selector
#para1 {
text-align: center;
color: yellow;
}id 선택기는 HTML 요소의 id 속성을 사용하여 특정 요소를 선택합니다.
요소의 ID는 페이지 내에서 고유하므로 ID 선택자는 하나의 고유한 요소를 선택하는 데 사용됩니다.
특정 ID를 가진 요소를 선택하려면 해시(#) 문자 뒤에 요소의 ID를 입력합니다.
CLASS selector
.center {
text-align: center;
color: violet;
}
/* 특정 HTML 요소만 클래스에 의해 영향을 받도록 지정할 수도 있습니다. */
p.center {
text-align: center;
color: violet;
}클래스 선택기는 특정 클래스 속성을 가진 HTML 요소를 선택합니다.
특정 클래스의 요소를 선택하려면 마침표(.) 문자 뒤에 클래스 이름을 입력합니다.
ASTERISK(*) selector
* {
text-align: center;
color: red;
}(*)는 페이지의 모든 HTML 요소를 선택합니다.
Grouping Selector
h1, h2, p {
text-align: center;
color: blue;
}동일한 스타일 정의를 가진 모든 HTML 요소를 선택합니다.
CSS 삽입하기
<!DOCTYPE html>
<html>
<head>
/* 외부 CSS 파일 불러오기 */
<link rel="stylesheet" href="mystyle.css">
/* 내부 CSS 정의 */
<style>
h1 {
background-color: skyblue;
color: white;
}
</style>
</head>
<body>
<h1>머릿글</h1>
/* 태그 안에 정의 */
<p style="color: green;">문장</p>
</body>
</html>
외부 css 파일
body {
background-color: lightblue;
}CSS 삽입하는 방법에는 3가지가 있습니다.
- 외부 CSS파일 불러오기
- head 태그에 style태그로 CSS 정의하기
- 태그에 직접 CSS 정의하기
외부 CSS 파일 불러오기
외부 스타일 시트를 사용하면 파일 하나만 변경해도 전체 웹사이트의 모양을 바꿀 수 있습니다!
각 HTML 페이지에는 <link> 요소 내의 head 섹션에 외부 스타일 시트 파일에 대한 참조가 포함되어야 합니다.
head 태그에 style 태그로 CSS 정의하기
하나의 HTML 페이지에 고유한 스타일이 있는 경우 내부 스타일 시트를 사용할 수 있습니다.
내부 스타일은 head 섹션 내부의 <style> 요소 안에서 정의됩니다.
태그에 직접 CSS 정의하기
단일 요소에 고유한 스타일을 적용할 수 있습니다.
요소에 style 속성을 추가합니다. style 속성은 모든 CSS 속성을 포함할 수 있습니다.
만약 CSS 를 여러개 적용한다면?
외부 파일에서 p를 color: red;라고 정의하였고 <style>에서는 p를 color: blue;라고 했을 경우 위치에 따라 적용되는 CSS가 달라집니다.
<link rel="stylesheet" href="mystyle.css">
<style>
p {
color: blue;
}
</style>이런식으로 정의가 되어있다면 p의 color는 blue가 됩니다. 하지만
<style>
p {
color: blue;
}
</style>
<link rel="stylesheet" href="mystyle.css">역으로 외부 파일이 아래에 위치한다면 p는 color가 red가 됩니다.이렇게 되는 이유는 읽을 때 순서대로 읽기 때문에 마지막에 나온 부분이 적용되기 때문에 이전에 정의한 내용이 덮어씌였기 때문입니다.
출처
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
'Programming > CSS3' 카테고리의 다른 글
| CSS 배경 (0) | 2024.08.04 |
|---|---|
| CSS 색상 (0) | 2024.08.04 |
