CSS3 - CSS와 문법 및 위치 (1)

CSS3 - CSS와 문법 및 위치 (1)

오늘은 CSS3의 첫번째 내용으로 CSS와 문법  그리고 

HTML에서 사용시 위치는 어디에 사용해야 적절한지에 대해서 가볍게 알아 보도록 하겠습니다.

CSS도 HTML처럼 기초부터 알아보기 전에  

압타나 스튜디오를 직접 설치 하시고 한번씩 따라해 보시기 바랍니다.

(백번 보는 것 보다 한번 살짝 타이핑 해보면 이해 되니! 꼭!)

(굳이 압타나 아니더라도 이클립스등 자신에게 맞는 툴이 있으시다면 사용하시기 바랍니다.)

먼저 CSS3란?

 

먼저 CSS3란 스타일시트라고 하며 기존딱딱하던 HTML에 선택자를 이용해

스타일을 입혀주는 것이라고 생각 하시면 됩니다.

현재 CSS3는 현재 HTML5와 같이 개발중인 규격으로 CSS3모듈로

구성이 되어 있어 필요한 부분만 선택자를 이용해 스타일을 적용 시킬 수 있도록 되어 있으며

선택자, 박스모델, 배경및 경계선, 텍스트 효과, 2차원 및 3차원 변환, 애니메이션,

다중 컬럼 레이아웃, 사용자 인터페이스 등을 지원 하고 있습니다.

(위 내용의 자세한 내용은 앞으로의 포스팅에 하나하나 순차적으로 포스팅 하겠습니다,)

이 다음 CSS의 문법 입니다.

먼저 CSS는 HTML 요소를 페이지 위에 어떻게 그리느냐를

 

지시하는 명령어의 집합인데 사용법은 아래와 같습니다.

<css3 문법>

1. 위 p는 HTML의 P태그를 선택한 것

2. 위 background는 백그라운드 배경 속성을 뜻

3. 위 red 배경의 값을 뜻 함

사용법은 위와 같이 스타일을 변경하고 싶은 html 태그를 선택하는데 이러한 선택을

"선택자"라고 하며 선택자 뒤에 중괄호를 붙이고 이 중괄호 안에는 CSS3에 맞는

속성과 그의 값을 입력 (선언) 합니다. ^^

(여기서 선택자에 관한 내용은 이 다음 시간에 집중적으로 파보도록 하겠습니다.)

이 다음 이렇게 작성한 CSS는 어디에 위치 할까요?

먼저 CSS는 앞서 배운 HTML에서 간혹 태그 안에 style 라는 

속성을 넣고 

색상을 입힌적이 있었습니다.

이렇게 태그안에 스타일을 넣는 것을 "인라인 스타일"이라고 하는데

이러한 방법 말고 HTML 문서 안에 따로 표기 하는 방법에 대해서 알아 보도록 학겠습니다. 

 <HTML문서 안 CSS의 적절한 위치>

위 내용을 보면 알겠지만 기본적으로 CSS는 HTML의 head태그 내에서 

style 태그 입력 후 작성하면 됩니다.

하지만 위와 같은 방법은 간단한 웹페이지에 효과를 볼때 연습할때 피치못할때 등 

사용하기 적합하며 실제 작업시 위 스타일 부분을 외부 파일로 만들어 사용하는 방법 등이 있습니다.

(위 외부 파일 만드는 방법은 압타나 설치 포스팅 파일생성에 있으나.

링크를 가져오는 방법은 추후에 제대로 알아 보도록 하겠습니다.)

이상 CSS3 - CSS와 문법 및 위치 (1)에 

관련된 포스팅을 마치도록 하겠습니다.