"For Information Security" Blog 입니다.
일상과 취미와 관련된 내용들
위주로 작성되었습니다.
모두 환영합니다~ *^^*
티스토리 뷰
CSS기본구조
# CSS란 무엇인가
→CSS 정의
CSS는 Cascading Style Sheet의 약자이다. CSS는 문서의 콘텐츠와 레이아웃, 글꼴 및 시각적 요소들로 표현되는 문서의 외관(디자인)을 분리하기 위한 목적으로 만들어졌습니다.
HTML이 웹페이지의 '뼈'라면 CSS는 '살'이라고 할 수 있습니다. 즉 HTML이 웹페이지의 정보를 표현한다면,
CSS는 HTML을 보기 좋게 디자인하는 역할을 하는 언어입니다.
따라서 CSS를 공부하려면 선행지식으로 HTML을 요구합니다. 물론 HTML을 많이 알고 있을 필요는 없습니다.
HTML이 무엇이고, 태그는 어떻게 사용하는지만 알고 있으면 CSS를 배울 수 있습니다.
하지만, CSS의 대상이 HTML이라는 점에서 CSS에게 있어서 HTML은 필연적입니다.
CSS 기본 문법
# 선택자는 보통 스타일링하고 싶은 HTML 요소나 부여한 ID 혹은 Class가 위치 합니다.
# 선언부에 여러개의 속성과 속성값이 있을때는 ;(세미콜론)으로 구분합니다.
# 각각의 선언은 속성과 속성값을 : (콜론)으로 구분합니다.
HTML문서에 CSS를 사용하는 방법은 3가지가 있습니다.
외부 스타일 시트(External Style Sheet)
내부 스타일 시트(Internal Style Sheet)
HTML 태그내에 스타일 지정(Inline Styles)
1) 외부 스타일 시트(External Style Sheet)
# CSS라는 확장자를 가진 스타일 시트 파일을 만들고 이 파일을 HTML 문서에 연결하여 사용하는 방법 입니다.
↑CSS파일을 외부에 만들어 test1.html파일과 연결해 보겠습니다.
먼저 css파일을 만들어 주겠습니다.
↑CSS파일의 이름은 적용하고자 하는 html파일의 이름을 따서 짓는것이 가독성을 높이는데 도움을 줍니다.
저는 test1_css.css로 만들겠습니다.
.css 는 확장자를 의미 합니다.
↑생성된 CSS파일의 기본 화면 입니다. 현재 인코딩값이 EUC-KR로 되어 있어 이를 UTF-8로 바꾸어 주겠습니다.
UTF-8 인코딩이 무엇인가요? 클릭
↑<link/>태그는 <head>태그 안에 적어주며, 단일태그 입니다.
<link/>태그를 이용하여 현재 test1.html파일과 새로만든 스타일 시트인 test1_css.css파일을 연결해 줄 수 있습니다.
rel속성과 type속성을 위와같이 값을 주고, href 속성에 새로만든 css파일을 적어줍니다.
<link/>태그의 속성을 적용해준뒤 <body>태그에 <h1>태그를 이용해 3줄을 작성해 보겠습니다.
↑인코딩값을 UTF-8로 수정하고, <html>태그와 <body>태그의 설정은 기본값으로 설정해 주었습니다.
※저는 가독성을 높이기 위해 css파일 내용을 가로로 작성했습니다.※
test1.html 파일의 모든 <h1>에 text-align 속성을 적용 해보겠습니다.
속성값은 center로 주어 가운데 정렬을 해보려고 합니다.
# text-align 속성은 블럭안에 내용을 수평으로 정렬할 수 있습니다.
# left,right,center >> 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬
# height : 영역의 높이값
# width : 영역의 가로값
# float : 정렬 (right, left)
# 1픽셀은 LED 전구 1개
- 픽셀이 많은 모니터는 깨짐현상이 적음
- 픽셀 대신 %로 사이즈를 지정할 때 body 태그의 크기를 기준으로 설정 됨
# margin : 여백
↑스타일 시트에 설정한 <h1>태그에 대한 설정을 잠시 주석 처리하고, 페이지를 열어보면..↓
/* 내용 */ << 이러한 방식으로 주석처리 하여 기능을 감출 수 있습니다.
↑<h1>태그가 기본적인 기능으로 작동합니다.
↑/* */ 주석을 제거하고 저장한후, 페이지를 열어보시면 스타일 시트의 설정 내용이 적용돼 있습니다.
이렇게 test1.html파일에 대한 스타일 시트 파일 test1_css.css를 만들어
외부에서 test1.html의 속성을 적용할 수 있습니다.
↑만약에 <h1>태그 전체에 속성을 부여하는 것이 아니라,
특정 <h1>태그에만 속성을 부여 하고싶다면,
원하는<h1>태그에 id속성을 부여하여, 속성값을 지정하고
사용하실때는 앞에 꼭! #을 붙이고 사용하시면 됩니다.
<h1 id="h1_1">안녕하세요.</h1>
id값은 h1_1입니다.
↑원하는 태그에만 속성을 부여 할 수 있습니다.
이와 같이 <h1>태그 외에도 앞으로 익힐 많은 태그들 역시
id속성을 부여하여 따로 특정 스타일을 부여할 수 있습니다.
이렇게 외부에 스타일시트 파일을 만들어서,
현재html파일에 링크를 걸 수 있는 방법이 있습니다.
이를 외부 스타일 시트라고 합니다.
이 방법의 장점은 홈페이지 전체의 스타일을 일관성있게 유지하면서 변경시에도 일괄적으로 변경되므로
홈페이지 제작의 효율성을 극대화 할 수 있습니다.
반면 외부 스타일 시트 파일을 계속적으로 관리해주면서 HTML 문서를 만들어 나가야 하기에 불편한 경우가 있습니다.
그리고 외부 스타일 시트 파일이 지나치게 복잡해지면 곤란하므로 css파일을 관리하는 노하우가 필요합니다.
그럼에도 불구하고 전문적인 홈페이지를 만들려면 외부 스타일 시트를 적극적으로 활용해야 합니다.
2) 내부 스타일 시트(Internal Style Sheet)
# HTML 문서내에서 <head>태그 안에 스타일을 정의하는 방법 입니다.
↑<style></style> 태그는 시작태그와 종료태그가 있습니다.
외부 스타일 시트를 이해 하셨다면 내부 스타일 시트는 더욱 간단히 이해 하실 수 있습니다.
<head>태그안에 <style>태그를 만들어서 스타일을 지정할 수 있습니다.
외부 스타일 시트는 스타일 시트 파일 (test1_css.css)를 만들어서 스타일 적용을 html파일 밖에서 설정한 것 이면
내부 스타일 시트는 html파일 안에서 스타일을 지정해 주는 것입니다.
## 화면이 작아서 <html>과 <body>의 기본 설정은 뺏습니다. ##
↑저장 후 페이지를 새로고침 해보시면 스타일에 변화가 없음을 볼 수 있습니다.
즉, 외부와 내부 둘다 같은 설정을 적용한 것 입니다.
이렇게 내부에 스타일시트 파일을 만들어 보았습니다.
현재html파일에 <style>태그를 사용하여
html문서 내에서 스타일을 정의 했습니다.
HTML문서마다 스타일을 매번 지정해 주어야 하지만, 한 문서에만 해당되는 스타일을 지정할때 사용하면 됩니다.
1) HTMl태그내에 스타일 지정(Inline Style)
# 위의 방법들에 비해서 적용범위가 더욱 좁아진 형태입니다. 스타일을 적용하고 싶은 HTML태그안에서 정의하는 방법입니다.
↑위의 2가지 방법보다 더욱 직관적인 방법입니다.
스타일을 주고자 하는 태그에 style속성을 주어 그 태그에 스타일을 줄 수 있습니다.
속성="속성 값" 의 규칙대로 써주시면 됩니다.
↑개념을 잘 이해하시고 사용하셔야 합니다.
↑같은 설정을 할 수 있습니다.
이 방법은 외부 스타일 시트, 내부 스타일 시트
보다 더욱 다이렉트로 스타일을 지정해 줄 수 있고,
태그에 바로바로 사용한다는 점이 있습니다.
각 내용마다 스타일을 분리하여 html문서 전체에 일괄변경의 효율성 측면에서는 바람직하지 못하지만,
이는 스타일을 좀 더 직관적으로 부여 할 수 있다는 장점이 있습니다.
===========================================================================
CSS의 기본 구조에 대해서 알아 보았습니다. 앞으로는 CSS에 기능과 영역에 대해
기초의 틀안에서 조금 더 깊이 있게 공부해 보려고 합니다.
html과 css는 서로 뗄 수 없는 사이 임을 명심 하셔야 합니다.
'HTML & CSS' 카테고리의 다른 글
| HTML & CSS 기초 - Html 의 기본구조 및 기본태그(1) (0) | 2016.11.26 |
|---|---|
| HTML & CSS 기초 -html 사용을 위한 eclipse-php 설치하기 (0) | 2016.11.22 |
