Web/css

css 기본

Devwon99 2024. 1. 1. 22:16

● css Basic


css는 html로 작성된 문서의 디자인 요소를 정하는 언어이다.

<style> </style> : 스타일 태그는 html 문법인 동시에 해당 태그 내에 있는 것은

css이기 때문에 css의 언어 문법에 맞게 해석한다.

style 태그는 head 태그 내부에 작성한다.

        <style
            a← Selector
                color:red← Declaration
            } ↑Property:Value;
        </style>

모든 a 태그의 content color을 빨간색으로 바꾼다.

html에서 색상을 변경할때는 하고싶은 부분 모두 <font> </font> 태그를 사용하여 하나하나 사용해야하지만,

css언어를 활용한다면 많은양을 일괄적으로 처리할 수 있어 효율적이다.

 

스타일 태그를 사용하지 않고도 html 문서에 속성 값을 통하여 css언어를 사용할 수 있다.

<li><a href="2.html" style=color:red> CSS </a></li>

위처럼 태그 내부에 style 속성을 사용하여 디자인을 변경할 수 있다.

style= 이후에 들어오는 값은 모두 css언어로 인식되어 처리된다.

위와 같은 방식을 인라인이라고 한다.

 

css 문법 기본

style 태그 내부에 특정 태그에 대해서 일괄적인 처리를 원할때

a {

}
위와같이 태그명과 { } 중괄호를 사용한다. 이것을 선택자라고 부른다.

중괄호 내부에는 원하는 효과를 작성한다. 이것을 선언부라고 부른다.

<li><a href="2.html" style=color:red> CSS </a></li>

위처럼 직접 사용할때에는 해당 태그 내부에 있기 때문에 선택자가 따로 필요하지 않는다.

 

● css Property


font-size: 원하는크기; →크기를 원하는 사이즈로 변경한다.

크기는 px로 직접 크기 명시 또는 small, large 등등 다양하게 있다.