CSS란?
CSS는 HTML로 만들어진 콘텐츠에 레이아웃과 디자인 요소를 정의하는 기술을 의미한다. 잘 설계된 CSS 코드는 재활용이 가능하며 더 나아가 테마, 템플릿 형태로 확장할 수도 있다. 또한 자바스크립트와 연계하면 콘텐츠의 내용이나 디자인을 동적으로 처리할 경우에도 유용하게 사용되므로 핵심 요소에 대해 정확하게 이해할 필요가 있다.
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소다. HTML이 텍스트나 이미지, 표와 같은 구성요소를 웹 문서에 넣어 뼈대를 만드는 것이라면, CSS는 글씨의 색상이나 크기, 이미지 크기나 배치 방법 등 웹 문서의 디자인 요소를 담당한다.
CSS 사용을 통해 얻을 수 있는 장점
- 웹 문서의 내용과 별개로 디자인만 바꾸거나, 디자인은 그대로 두고 웹 문서의 내용 변경이 용이하다.
- 다양한 기기(PC, 스마트폰 등)에 맞게 탄력적으로 디자인이 바뀌도록 반응형 디자인(Responsive Design)을 구현할 수 있다.
- 동일한 문서 구조이더라도 서로 다른 CSS 테마 적용이 가능하다.
CSS의 동작 원리
h1 {color: red; font-size = 15px;}- h1 : 선택자이며 HTML 문서에서 디자인 적용을 원하는 요소를 선택한다.
- {color: red; font-size = 15px;} : 선언부이며 적용하고자 하는 디자인 속성을 선언한다.
- CSS 구문은 선택자와 선언부로 구성된다.
- 선택자는 디자인을 적용하고자 하는 HTML 요소이므로 선택자 정의가 중요한다.
- 선언부는 {} 블록을 사용하며, 다수의 속성을 포함한다.
- 각 속성 정의는 '속성:값;' 형식이며 항상 세미콜론(;)으로 끝내야 한다.
디자인 정의를 재활용하고 유지보수를 편하게 하려면 우선 HTML 문서 자체가 잘 설계되어 있어야 한다. 또한 CSS에서 가장 중요한 부분은 선택자 선언이므로 HTML에서 적절한 태그로 문서의 상하 구조를 정리해두어야 CSS 적용이 편하다.
디자인 속성은 매우 다양하기 때문에 필수적인 속성이 아니라면 모두 외워서 사용하는 것이 아니라 필요할 때마다 검색하여 사용한다.
스타일 시트 작성과 실행
CSS를 HTML에 적용하기 위한 방법에는 세 가지가 있다.
- 인라인 스타일 시트: HTML태그에 CSS 속성을 정의한다.
- 내장 스타일 시트: HTML 문서의 <head> 부분에 CSS 정의 부분을 포함한다. 현재 작성한 문서에만 적용된다.
- 외장 스타일 시트: 별도의 CSS 파일을 생성한 후 HTML 문서에 링크로 포함한다. 하나의 파일로 여러 문서에 적용 가능하다.
인라인 스타일 시트는 재활용이 불가능하며 관리가 어렵기 때문에 아주 특수한 경우가 아니면 권장하지 않는다. 가장 좋은 방법은 별도의 CSS 파일을 만들고 HTML에서 불러와 사용하는 방식이다.
CSS는 디자인 속성이 위에서 아래로 중첩(Cascading) 적용되는 방식인데, 예를 들어 외장 CSS에서 적용한 디자인 속성은 내장 스타일 시트에서 수정하거나 속성을 추가할 수 있다는 의미다. 이는 내·외장 스타일 시트 개념을 떠나 셀렉터의 중첩에 의해 발생하는 경우에도 동일하게 적용되는 중요한 개념이다.
다음은 내장 스타일 시트를 통해 CSS를 적용한 예제다.
<!DOCTYPEh html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<style>
body {color: blue;}
h1 {color: red;}
div h1 {background-color: green;}
</style>
<body> <!-- 글씨의 색상이'blue'로 적용된다. -->
<div>
<h1>Hello World</h1> <!-- 글씨의 색상이 'red'로 적용된다. -->
</div>
</body>
</head>
</html>- <style> </style> 태그 안에 디자인 속성을 작성한다.
- <h1>은 body 안에 있지만 'red' 색상이 적용된다.
- HTML 문서 구조에서 <body>가 가장 상위이므로 모든 텍스트는 기본적으로 'blue' 색상이 적용된다.
- <div> 태그 안에 있는 <h1>은 'red' 색상에 배경 색상은 'green'으로 적용된다.
위 예제를 통해 동일 선택자에 스타일을 적용할 경우 나중에 적용한 스타일이 최종 적용된다는 것을 알 수 있다.
코드를 설명하기 위한 주석으로 HTML에서 <!-- --> 형식을 사용한다.
CSS에서는 /* */ 형식을, 자바스크립트에서는 //와 /* */를 사용한다.
셀렉터의 개념
선택자의 다른 명칭인 셀렉터(Selector)는 HTML 문서에서 특정 부분을 선택하기 위한 구문을 말한다. 기본이 되는 선택자로는 태그, 아이디, 클래스가 있다.
태그 셀렉터
HTML의 기본구성요소로, 가장 쉽게 사용할 수 있다. 하지만 태그는 중복 사용되기 때문에 특정 영역을 선택하기보다는 공통 디자인 속성을 정의하는 데 사용한다.
p {
text-align: center;
color: red;
}
h1, h2, h3 ,h4 { color: blue; }- 태그 셀렉터는 태그 이름으로 요소를 선택한다.
- 같은 디자인 속성을 적용할 여러 태그는 콤마(,)로 나열해 일괄 적용할 수 있다.
아이디 셀렉터
HTML 태그의 아이디(ID) 속성을 사용하는 것이다. 문서에 존재하는 유일한 값으로 아이디를 지정하여 특정 요소를 가장 확실하게 선택할 수 있는 방법이다. 한 곳만 선택이 가능한 셀렉터로 당연히 같은 문서 내에서는 중복되면 안 되므로 남용하지 않아야 한다. 보통 문서의 전반적인 구조에 해당하는 부분에 사용하고 서로 다른 문서 간에도 동일 규격을 따르는 경우 재활용이 가능하도록 설계한다.
/* CSS */
#id_name { color: blue; }
<!-- html -->
<div id="id_name">
...
</div>- HTML 요소의 아이디가 선택자로 올 때는 HTML에서 지정한 아이디 앞에 #을 붙여 정의한다.
- 아이디는 페이지 내에서 유일한 값이기 때문에 하나의 고유한 요소를 선택하는 데 사용한다.
클래스 셀렉터
가장 대표적인 CSS 셀렉터다. 클래스(Class) 이름으로 구분해 스타일을 만들어두고 HTML에서 클래스 속성을 적용해 원하는 디자인을 적용하는 방법이다. 즉 CSS 선언이 먼저이고 HTML에서 이를 사용하는 개념이라는 것을 주의한다. 재활용이 용이하고 누구나 사용할 수 있도록 라이브러리 등을 만드는 데도 기본이 되는 방법이다.
부트스트랩(Bootstrap)역시 이미 정의된 컴포넌트의 클래스를 HTML에서 원하는 부분에 사용하는 형태다.
/* CSS */
.title { color: blue; } /* .title: 모든 태그 중에서 클래스가 title인 경우에 적용 */
p.title{ color: red; } /* p.title: <p> 태그 중에서 클래스가 title인 경우에 적용 */
<!-- html -->
<div class="title">
...
</div>
<h2 class="title">
<p class="title">- HTML 요소의 클래스가 선택자로 올 때는 클래스 앞에 온점(.)을 붙여 정의한다.
- <div>, <h2>, <p>의 클래스는 'title'로 동일하지만 다른 색상으로 출력된다.
- <div>, <h2> 태그는 글씨가 'blue' 색상으로 출력된다.
- <p> 태그는 글씨가 'red' 색상으로 출력된다.
이 외에도 셀렉터와 셀렉터를 다양하게 조합해서 사용하는 복합 셀렉터도 있으니 참고한다.
CSS 참고 자료
https://developer.mozilla.org/ko/docs/Web/CSS
→ 모질라 재단 CSS 공식 문서
부트스트랩
부트스트랩(Bootstrap)은 가장 대표적인 오픈소스 CSS 라이브러리다. 일관된 디자인이 적용된 컴포넌트가 클래스 형태로 정의되어 있고, 원하는 디자인 적용을 위해서는 해당 클래스를 적절한 태그에서 사용하는 형식이다.
부트스트랩을 사용하기 위해서는 전체 소스코드를 내려받아 원하는 부분을 수정해 프로젝트에서 사용하는 방법과 단순히 CSS 링크만 이용하여 기본 설정 형태로 바로 사용하는 방법이 있다.
부트스트랩의 버전
부트스트랩은 5가 가장 최신 버전이지만, 그동안 사이트 구축에는 4.x 버전이 가장 많이 사용되었다. 5와 4.x의 가장 큰 차이점은 내부적으로 jQuery에 대한 의존성을 제거한 것으로 그 외 기능이나 사용성 측면에서는 차이가 없다. 다만 최근 vue.js, react.js 등을 많이 사용하고 jQuery는 점점 사용하지 않는 추세이기 때문에 가급적 5버전을 사용하는 것을 추천한다.
부트스트랩을 활용하여 버튼을 만들려면 부트스트랩 홈페이지(https://getbootstrap.com)에서 버튼에 대한 설명을 보고 원하는 모양의 버튼 클래스 샘플을 사용하면 된다.
부트스트랩 속성은 중첩해서 사용할 수 있어 여러 속성을 다양한 형태로 바꿔서 사용할 수 있다. 예를 들어 btn 클래스는 기본 버튼을 정의하며, btn-primary는 파란 배경에 흰색 글자 속성을 나타낸다. 두 가지 클래스를 중첩하면 파란 배경에 흰색 글자를 나타내는 버튼이 된다.
다음 코드는 배경은 파란색, 폭은 브라우저 크기의 75%, div 박스와 상단 마진은 5(1~5가능), 박스 테두리에 그림자 효과를 추가한 간단한 박스 영역을 생성하게 된다.
<div class="bg-primary w-75 mt-5 shadow">부트스트랩 참고 자료
https://getbootstrap.com
→부트스트랩 메인 홈페이지
https://themes.getbootstrap.com
→부트스트랩으로 만든 테마(유료/무료)
'Programming > Web' 카테고리의 다른 글
| [Web] 서블릿과 JSP (0) | 2022.10.19 |
|---|---|
| [Web] 웹 프로그래밍의 기초(JavaScript) (0) | 2022.10.19 |
| [Web] 웹 프로그래밍의 기초(HTML) (1) | 2022.10.18 |
| [Web] 웹(DevOps) (0) | 2022.10.18 |
| [Web] 웹(Java, JVM, JDK, IDE, Servlet Container) (0) | 2022.10.18 |