CSS를 사용하여 HTML 스타일 지정
CSS (Cascading Style Sheet)를 사용하여 페이지의 모양을 지정할 수 있다. 기본적인 개념은 HTML 페이지 내에서 사용하는 요소에 대한 스타일을 정의하는 것이다. 예를 들어 상자를 선택하고 둥근 모서리를 적용하거나 상자의 배경에 그라데이션 효과를 지정할 수 있다. 또는 CSS를 사용하여 상호 작용할 때 하이퍼링크가 표시되고 응답하는 방식을 지정할 수 있다(HTML 코드에서 하이퍼링크의 대상 주소를 정의). 특정 요소 또는 특정 형식의 모든 요소에 스타일을 적용하거나, 클래스를 사용하여 여러 요소에 적용할 수 있는 스타일을 지정할 수 있다. CSS3에서는 정교한 애니메이션 효과를 수행할 수도 있다.
외부 CSS
... #HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Task Timeline</title>
<link rel="stylesheet" href="main.css">
...외부 CSS의 한 가지 이점은 여러 HTML 페이지가 동일한 CSS 파일에 연결될 수 있다는 것이다. CSS를 변경하면 각 페이지에 대한 스타일 지정이 업데이트된다. 페이지의 구조에는 HTML 파일, 스타일 지정에는 CSS 파일 및 상호 작용 또는 이벤트에는 JavaScript 파일을 지정하는 것을 중요한 부분의 분리라고 한다.
앞서 설명한 것처럼 내부 CSS라고 하는 CSS를 HTML에서 직접 작성할 수도 있다. 기본 웹 사이트일지라도 HTML 페이지를 매우 빠르게 어지럽힐 수 있는 CSS 규칙이 상당히 많이 있다. 둘 이상의 페이지에서 동일한 CSS가 자주 반복되어 관리하기가 어렵다.
CSS 규칙
body {
font-family: monospace;
}
ul {
font-family: helvetica;
}CSS 규칙을 사용하여 HTML 스타일을 지정할 수 있다. ul {}(순서가 지정되지 않은 목록 요소)은 스타일을 지정할 <ul> HTML 요소를 선택하는 ‘선택기’이다. ‘선언’은 font-family: helvetica이며 어떤 스타일이어야 하는지 결정한다. 속성 이름 은 font-family이고 값 은 helvetica이다. 속성과 값이 함께 키-값 쌍을 만든다.
선택하는 요소는 이전에 HTML(<body> 및 <ul>)에서 정의한 기존 요소이다. 다음에 살펴보겠지만 요소에 대한 사용자 지정 이름을 정의할 수 있다.
선택기
li {
list-style: circle;
}
.list {
list-style: square;
}
#msg {
font-family: monospace;
}사용자 지정 특성을 .list 및 #msg라고 한다. .list의 마침표 접두사는 클래스 선택기임을 나타낸다.
"list"로 설정된 class 특성이 포함된 각 HTML 요소는 이 선택기에서 정의된 스타일을 상속한다.
#msg 의 파운드 기호 접두사는 ID 선택기임을 나타낸다. "msg"로 설정된 id 특성이 포함된 각 HTML 요소는 이 선택기에서 정의된 스타일을 상속한다.
선택기에 사용하는 이름은 HTML에서 정의한 이름과 일치하는 한 임의로 지정할 수 있다.
밝은 테마 추가
.light-theme {
color: #000000;
background: #00FF00;
} # #000000은 글꼴 색에 검은색을 지정하고 #00FF00은 배경색에 녹색을 지정
# HTML
<body class="light-theme">
어두운 테마 추가
:root {
--green: #00FF00;
--white: #ffffff;
--black: #000000;
}
:root 선택기는 HTML 페이지의 <html> 요소를 나타낸다. 이러한 종류의 태스크에서는 :root 요소에 전역 CSS 변수 집합을 정의하는 것이 가장 좋다. 이 예제에서는 페이지 루트에 연결된 세 가지 색 변수를 정의한다.
.light-theme {
--bg: var(--green);
--fontColor: var(--black);
}
.dark-theme {
--bg: var(--black);
--fontColor: var(--green);
}
위의 코드에서는 새 변수 bg 및 fontColor를 정의하여 배경색과 글꼴 색을 지정한다. var 키워드를 사용하여 속성 값으로 사용할 변수를 지정한다. 앞서 :root 선택기에서 값을 설정한다.
* {
color: var(--fontColor);
font-family: helvetica;
}
body {
background: var(--bg);
}
* 선택기는 모든 페이지 요소에 적용되는 범용 선택기이다. 단, 보다 구체적인 요소 선택기가 이를 재정의할 수 있다. 이 예제에서는 * 선택기를 사용하여 모든 페이지 요소에 대한 기본 color 속성을 설정한다. color 및 background 속성의 경우 밝은 테마 선택기와 어두운 테마 선택기에 정의된 변수를 지정한다.
CSS 파일에서 모든 요소에 동일한 글꼴을 적용할 수 있도록 #msg 선택기를 제거한다.
https://docs.microsoft.com/ko-kr/learn/modules/build-simple-website/
HTML, CSS 및 JavaScript를 사용하여 간단한 웹 사이트 빌드 - Learn
Visual Studio Code를 사용하여 HTML, CSS, JavaScript로 웹 사이트를 빌드하고, 브라우저에서 개발자 도구를 사용하여 작업을 확인함으로써 웹 개발을 시작합니다.
docs.microsoft.com
'Programming > Website' 카테고리의 다른 글
| [Website] HTML for Webscraping (0) | 2022.05.11 |
|---|---|
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹 사이트 빌드 (3) (0) | 2022.02.06 |
| [Website] HTML, CSS 및 JavaScript를 사용하여 간단한 웹사이트 빌드 (1) (0) | 2022.02.06 |
| [Website] 구조화 질의 언어 (SQL ; STRUCTURED QUERY LANGUAGE) (0) | 2022.02.06 |
| [Website] 웹 개발 언어 (PHP / PYTHON / RUBY) (2) (0) | 2022.02.06 |
