이전 포스팅에서 추신스 직원은 하태민(HTML) 매니저를 돕기위해 매장 내 환경 셋팅을 전담한다고 설명했습니다. 이 직원(CSS)에 대해서 알아보겠습니다.
CSS : Cascading Style Sheets 홀 셋팅 담당
- 정의
- 기본 구조 및 문법
- 샘플 코딩 해보기
정의
이전 포스팅의 식당 예시에서 추신스(CSS)을 정의한 내용은 아래와 같습니다.
- 사실 추신스 직원은 하태민님의 소개로 식당에 취직하게 되었습니다.
- 하태민님 혼자서 손님의 기호에 맞고 깔끔한 매장을 유지하기 위해 매장 내 테이블과 의자 등의 배치와 크기, 색상을 자주 바꾸는데 너무 힘 들었기 때문입니다. 그래서 추신스 직원은 이러한 배치, 크기, 색상 등 손님에게 보여지는 것 들을 전담으로 관리합니다.
이것을 웹 어플리케이션 관점에서 다시 자세히 설명 드리겠습니다.
- CSS는 HTML과 같이 마크업 언어로 요소를 정의하기 위해 태그를 사용합니다.
- CSS는 브라우저에서 보여지는 구성 요소들의 표현 속성을 설정하는 언어 입니다. 즉, 구성 요소의 위치, 크기, 색상 등을 정의 합니다.
- HTML은 전체 구성을 CSS는 요소의 표현을 담당하게 되는 것 입니다. 이렇게 표현 속성만을 묶어서 CSS가 관리 함으로써 표현의 유연성이 높아지고 여러 다른 페이지(html)에서도 공통적으로 표현 속성을 사용할 수 있게 됩니다. 생각해 보세요! 50개의 웹 페이지가 있는데 모두 같은 배경색을 쓰다가 바뀌게 될 경우 프로그램의 50군대를 모두 바꾸어줘야 합니다. 그러나 CSS를 사용하여 별도 파일(.css)로 관리할 경우에는 이 파일에서만 수정해주면 한번에 모두 적용됩니다.
기본 구조 및 문법
자, 이제 부터는 간단한 기본 구조와 문법에 대해서 알아보겠습니다. 우리의 목표는 CSS가 대략 어떤 것인지 이해하는 것이므로 아주 자세한 내용은 생략하겠습니다.
- CSS 정의 내용은 <html>태그와 <head> 태그 안쪽에 정의 됩니다. 또는 별도 파일로도 관리가 가능합니다.
- <style> 태그로 시작합니다.
- <style> 태그와 </style>태그 사이에 css 구성요소를 배치 합니다.
- </style> 태그로 닫습니다./끝납니다.
CSS 구성요소
- 요소는 "선택자 { 선언문 }" 으로 구성됩니다.
- 선택자는 html 태그 요소 또는 요소의 name/id 등으로 설정이 가능합니다. (예: h1, p, a)
- 선언문은 “속성: 값” 으로 정의되고 하나의 선언문 끝은 ‘;’ 으로 구분됩니다.
- 주요 속성은 다음과 같습니다. color, text-align, background-color, background-image …
- 요소의 예시는 아래와 같습니다.
- HTML 파일 내부에 CSS 내용을 추가했을 때의 예시 입니다.
<!DOCUMENT html>
<html>
<head>
<style>
h1 { color: blue };
</style>
</head>
<body>
<......>
</bod>
</html>
샘플 코딩 해보기 - css 코딩
이제 어떻게 작성하는 지를 알았으니 아래와 같은 요건을 만족 시키는 css 스크립트를 한번 만들어 보겠습니다. CSS는 HTML과 같이 작성에 특별한 프로그램이 필요하지 않습니다. 메모장 같은 모든 텍스트 작성 프로그램으로 작성이 가능합니다. 메모장을 열어서 위에서 배운 문법에 따라 css 파일을 작성해 보시지요. 메모장이 없으시면 간단한 무료 텍스트 작성기를 다운 받아 사용할 수 있습니다. 여기 링크를 통해 운영체재에 맞는 sublime text라는 택스트 작성기를 다운 받아 사용하실 수 있습니다.
요건
다음의 요건 내용에 맞는 CSS 코딩을 해보겠습니다. 이전 HTML 때 만들었던 파일에 추가해 보세요. 파일이름을 02_html_css.html 이라고 바꾸어서 저장해주세요.
- 배경은 노란색
- 글자 색은 파란색 그리고 중간에 배치
- 헤드라인의 글자체는 verdana이고 크기는 20픽셀로 설정
- 문단의 색은 오렌지 색으로 설정
샘플 코딩 내용
한번 직접해 보셨나요?! 아래는 위의 요건을 이전에 만들었던 HTML 파일에 CSS 내용을 추가한 내용입니다.
<!DOCUMENT html>
<html>
<head>
<title>Welcome to HTML world!</title>
<style>
body { background-color: yellow;}
h1 { color: blue; text-align: center;}
p { color: orange;}
</style>
</head>
<body>
<h1>Hello HTML!</h1>
<p>이것은 문단 입니다.</p>
</body>
</html>
작성 내용 확인
앞에서 작성한 내용을 .html로 끝나는 파일로 저장하고 이 파일을 웹 브라우저에서 오픈하면 내용이 잘 작성되었는지 확인 할 수 있습니다.
아래 이미지는 위에서 작성한 샘플 코딩 파일을 크롬 브라우저에서 파일 열기를 통해 열었을 때 보여지는 내용입니다.
요약
이처럼 CSS를 이용하여 웹 브라우저에서 보여지는 내용들을 설정 할 수 있습니다. 선택자의 경우 말씀 드린대로 html 속성으로 쓰이는 id나 name 등을 이용해서 한꺼번에/또는 특정해서 대상을 선택할 수 있습니다. 그리고 위치, 경계 마진 등 다양한 속성을 다룰 수 있습니다.
이번 시간에는 CSS에 대해서 조금 더 구체적으로 알아 보았습니다. 기본 문법을 배웠고 간단한 요건을 충족시키는 CSS를 만들어 보았습니다.
다음 시간에는 JavaScript에 대해서 알아보도록 하겠습니다.
질문 댓글은 언제나 환영이며 구독, 좋아요를 눌러 주시면 다음 글을 더 편하게 보실 수 있습니다.
감사합니다.
'취미코딩' 카테고리의 다른 글
| 취미코딩 - Python이란? 파이썬이란? (0) | 2022.04.03 |
|---|---|
| 취미코딩 - JavaScript란? 자바스크립트란? (0) | 2022.04.02 |
| 취미코딩 - HTML이란? (0) | 2022.04.02 |
| 취미코딩 - 웹 어플리케이션 - HTML, CSS, JavaScript, Python (0) | 2022.04.02 |
| 취미코딩 - 웹 어플리케이션 이란? (0) | 2022.04.01 |