CSS에서 가장 많이 사용하는 속성 중 하나가 바로
글자 색상을 지정하는 것입니다. 다양한 글자 색상은 웹페이지의 필수요소 중 하나입니다.
하기와 같은 글자 색상은 어떻게 나타내는 것일까요?
위 예제를 위해서, HTML 웹 문서를 H3 요소와 P 요소로 구성합니다.
<body>
<h3 >Hello World</h3>
<p id="p1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p id="p2">Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</body>
이제 스타일을 적용해 볼 건데요.
첫 번째는 Internal CSS 방식입니다.
HTML 문서 안에서 style을 정의하기 위해서는 <style> 태그를 사용하고 그 안에 스타일을 정의하면 됩니다.
P태그들이 p1, p2라는 id 값을 가지므로 아이디 선택자(#)를 사용해서 색상을 지정합니다.
이런 방식을 Internal CSS이라고 합니다. 한국어로 번역하자면, 내부 CSS입니다.
참고로, <style> 은 <head> 섹션에 위치해야 됩니다. 섹션이라 함은 구역이므로 <head></head> 사이라는 의미이죠.
두 번째는, Inline CSS 방식입니다.
태그 안에 스타일을 정의하는 inline CSS 방식을 사용하게 되면 하기처럼도 표현이 가능합니다.
마지막 세 번째는, External CSS 방식입니다.
가장 유용한 방식으로 외부에 CSS 파일을 별도로 만들고 HTML웹문서를 연결하는 방식이죠.
HTML <head> 섹션 사이에 하기처럼 link 태그와 속성값을 설정합니다.
rel="stylesheet" 의미는 relative 즉, 해당 link는 스타일시트와 연관되어 있고
href = "main.css" heyper reference 연결된 문서는 main.css이다는 뜻입니다.
별도로 만든 CSS 파일인 main.css
에는 CSS syntax 구문에 맞게 스타일을 선언(declation) 합니다.
오늘은 웹문서에서 글자색상 바꾸기를 정리해 보았습니다.
CSS Color 세팅에 관련된 내용은 하기 사이트를 참고하세요.
감사합니다.
CSS Colors
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
'앱 만들기 > CSS' 카테고리의 다른 글
| CSS 배경이미지 전체화면이 되도록 설정하기 (2) | 2023.07.11 |
|---|---|
| CSS 백그라운드 이미지 설정하기 (1) | 2023.07.09 |
| CSS 구문(Syntax) 구조 (4) | 2023.07.07 |
| CSS 박스모델 예제 (0) | 2023.07.06 |
| CSS box-sizing 이란? (2) | 2023.06.21 |
댓글