선우공작소
궁금해요! 너를 알려줘! CSS 본문
궁금해요! 너를 알려줘! CSS
안녕하세요. 선우에요.
총 3차례에 걸쳐 HTML에 대해 포스팅 했는데요.
비록 기초적인 부분이지만, HTML의 기본 구조정도는 그릴 수 있다고 생각합니다.
혹시 HTML5 구조를 코딩하기 어려운 분이 있다면
HTML 카테고리의 궁금해요! 너를 알려줘! HTML5의 시맨틱 구조 글을 참고해 주세요.
위의 포스팅에서 구조에 대한 이해와 예시 소스를 보시면 될 것 같습니다.
그럼 그 가정하에 CSS에 대해 배워볼까요?
공부야 말로 들어올 때는 마음대로 였겠지만, 나갈 때는 아니란다.
입문은 밥 먹듯이 하는데, 나갈 수가 없네. 크흑..
CSS란 무엇일까요?
CSS란 Cascading Style Sheets의 약자로 W3C의 표준이며, 주로 HTML, XHTML에서 레이아웃과 스타일을 정의하는 언어입니다.
이름을 잠깐 살펴보자면 Cascading 단어의 뜻처럼 CSS는 부모의 값이 자식에게 상속되는 구조입니다.
아직 잘 이해가지 않죠? 괜찮아요. 부모의 값이 자식에게 상속된다는 개념만 잊지 않으시면 됩니다:D
HTML이 사이트의 구조를 설계한다면, CSS는 만들어진 HTML을 스타일을 정의합니다.
같은 HTML이여도 CSS에 따라 다양하게 표현될 수 있어요.
적절한 예시가 될지는 모르겠지만 제가 생각한 HTML과 CSS, javascript의 차이는
카페에서 커피를 주문했을 때 카페마다 특유의 그림이 그려져 있잖아요.
HTML이 종이컵이고 그 위에 그려진 그림이 CSS, 커피를 마시는 액션을 javascript라고 생각해보면 어떨까요?
종이컵이라는 틀은 같지만, 카페마다 그 위에 그려진 그림에 따라서 느낌이 다르니까요.
제가 든 예시 때문에 헷갈린다면 그냥 패th! 하시면 됩니다:D
CSS 어떻게 쓰나요?
위의 이미지와 설명을 같이 보면서 알아 볼까요?
CSS는 선택자 (Selector) 와 선언 블록 (Declaration block) 으로 구성됩니다.
HTML 태그, 클래스, 아이디가 선택자에 해당됩니다. 예제에서는 h1이 선택자가 되겠네요.
최초 선언 시 선택자와 중괄호 ( {} ) 로 시작되며 선언 블록(속성과 값)이 끝나면 세미콜론 ( ; ) 으로 마침표를 찍어 줍니다.
선언 블록이 하나 이상일 경우, 세미콜론 뒤에 연결하여 써 주면 됩니다.
CSS 어떻게 사용하나요? HTML 문서에 CSS를 사용하는 3가지 방법
HTML 문서에 따라 외부 스타일 시트, 내부 스타일 시트, 인라인 스타일로 나뉩니다.
위의 스타일 모두 동시에 사용할 수 있으며 일반적으로 인라인 > 내부 > 외부 스타일이 우선적으로 적용됩니다.
똑같은 스타일을 외부 스타일과 인라인 스타일로 정의했다면 인라인 스타일이 적용 되겠죠!
CSS 우선 순위에 대해서는 따로 포스팅을 하도록 하겠습니다.
- 외부 스타일 시트 (External Style Sheet)
이름에서 알 수 있듯, 외부에 css라는 확장자를 가진 파일을 불러와 사용하는 방법입니다.
css 파일을 만드는 방법은 스타일 시트를 저장할 때 확장자를 css라고 저장하면 됩니다.
주로 외부 스타일 시트로 많이 사용하는데, 그 이유는 한 번 정의한 스타일이 모든 html에 적용됩니다.
보통 사이트는 여러 html 파일이 연결되어 있는데 하나의 스타일을 변경하기 위해 모든 html 파일을 하나씩 열고 바꾼다면 피곤하겠죠.
나머지 방법보다 관리를 수월하게 할 수 있습니다. 즉, 유지 보수가 쉬워집니다.
<link type="text/css" rel="stylesheet" href="style.css">
- 내부 스타일 시트 (Internal Style Sheet)
HTML 문서 내에 있는 <head>와 </head> 사이에 스타일을 정의합니다.
주로, 단독 페이지일 경우나 페이지가 몇 안되는 곳 혹은 해당 페이지에서만 사용하는 스타일일 경우에 사용됩니다.
내부에 스타일 시트를 두어 바로 수정할 수 있다는 장점이 있습니다.
<head>
<style>
h1{background-color:#efefef; color:#ddd;}
</style>
</head>
- HTML 태그 내 스타일 지정 (inline Styles)
특정 요소에 직접 스타일을 적용하는 방법으로, 인라인 스타일이라고도 합니다.
특정 요소에 바로 스타일을 줄 수 있어 어떤 스타일이 선언되었는 지 쉽게 알 수 있고,
외부, 내부 스타일과 다른 별도의 스타일이 적용될 경우 사용되기도 하지만
스타일 관리 측면에서 바람직하지 못해 권장하지 않는 방법입니다.
그렇다고 사용하지 말라는 말은 아니에요! 되도록 사용하지 말자! 인거죠! 하하:D
h1 title
'공작소 > CSS' 카테고리의 다른 글
| 궁금해요! 너를 알려줘! display (0) | 2019.02.25 |
|---|---|
| 선택자(selector)의 종류 (0) | 2017.01.08 |
