css의 간략한 설명과 속성, 속성값

CSS(스타일시트)는 html문서와 같이 사용하면 웹페이지를 만들때 다채롭게 만들 수 있습니다. 요소들의 색상, 크기, 레이아웃, 여러 효과와 표현을 만들 수 있습니다. 또한 CSS를 활용하면 하나의 html 문서로 PC나 모바일 등의 여러 스마트기기에서 볼 수 있는 웹페이지를 만들 수 있습니다.

CSS는 브라우저별로 지원하는 속성과 속상값이 다른 경우가 잇어서 호환성을 맞춰야하는 단점이 있지만 크로스브라우징으로 각기 다른 브라우저에서 동일한 결과가 나오도록 할 수 있습니다.

 

CSS적용

CSS를 html에 적용시키는 방법은 3가지가 있습니다.

1. 외부파일을 링크 시키는 경우
2. head태그에 css를 작성하는 경우
3. 태그에 style 속성과 속성값을 직접 사용하는 경우

외부링크

<link rel="style sheet" href="파일 경로">

외부파일을 링크하여 적용하는 경우 css파일을 불러오는 link태그를 활용합니다.
위의 소스코드는 head태그 안에 작성해야 하며, 여러개의 css파일을 불러올 수 있습니다.

head태그

<style type="text/css">
  html, body{margin:0; padding:0}
</style>

head태그 안에 스타일시트를 작성할 수 있습니다.
위의 소스코드처럼 작성하면 됩니다. 간단한 페이지를 만들 경우 이 방식도 효율적인 경우도 있습니다.

작성방법은 선택자{속성:속성값; 속성:속성값}으로 작성합니다.
css파일도 같은 형식으로 작성할 수 있습니다.

style속성

<div style="width:100%; height:200px"></div>

태그에 직접 style속성으로 css를 지정할 수 있습니다.
이는 인라인 방식이라고 하며, 특별한 경우를 제외하곤 사용하지 않는 것을 추천합니다.

인라인방식은 우선순위가 높아 외부CSS 등의 속성들을 무시하고 인라인 속성이 우선하여 적용됩니다.

 

반응형웹

과거에는 PC로 인터넷을 하던 시기가 있었지만 요즘은 모바일로 웹페이지를 이용하는 사람이 더 많아졌습니다. 모바일 회사마다 각기 다른 해상도를 가지고 있습니다. 또한 모바일 이외에도 테블릿, PC 등 여러 해상도를 가진 스마트기기로 인터넷을 사용하고 있습니다.

여러 해상도를 가진 스마트기기를 활용하는 사람들이 많아지면서 웹페이지도 각각의 해상도에 맞게 만들어 제공하는 것은 쉽지 않은 일입니다. 또한 PC와 달리 모바일은 작은 화면으로 모든 정보를 담을 수 없어 웹페이지 구성과 레이아웃도 달라져야 합니다.

반응형웹은 하나의 웹페이지로 PC, 테블릿, 모바일 등 각기 다른 해상도에 적합한 레이아웃과 디자인 등을 제공하는 것을 말합니다. 하나의 웹페이지, 즉 html문서는 같지만 해상도에 맞게 레이아웃, 디자인을 변하게 하는 것입니다. 이를 css파일을 이용해서 구현할 수 있습니다.

반응형웹을 구현하기 위해서는 css를 이해해야 하고, 가변그리드, 유연한 이미지, 미디어쿼리 등을 이해해야 합니다.

 

CSS(스타일시트)

CSS를 작성하려면 선택자, 속성, 속성값을 이용해야 합니다.

선택자는 html문서에서 태그를 선택하는 것으로 태그, 아이디, 클래스, 가상선택자 등을 이용하여 요소(태그 등)를 선택합니다. 선택자를 선택한 후 { } 중괄호를 열고 닫아 그 사이에 속성과 속성값을 입력하여 css를 적용할 수 있습니다.
속성은 크기, 색상, 글꼴, 위치 등등 효과들을 의미하며, 속성값은 속성들의 실제 값이 됩니다. 속성값은 수치나 백분율, 단어 등을 이용하여 적용할 수 있습니다.

div{width:100%; height:150px}
#intro{width:200px; height:100px}
.intro_bg{width:1200px; height:500px}

태그 선택자는 태그명을 입력하면 됩니다.
아이디 선택자는 #아이디명을 입력합니다.
클래스 선택자는 .클래스명으로 할 수 있습니다.

선택자 이후 중괄호{ }를 열어 속성과 속성값을 작성할 수 있습니다.