CSS 문법

이번 포스팅에서는 css를 작성할 때 사용되는 문법에 대해 간략히 짚고 넘어가보자.

 

<CSS 기본문법>

html과의 비교를 통해 css의 문법에 대해 간략히 알아보자.

html에서 속성값을 넣을 때는 queryString의 형태를 띤다. 여기서 queryString 형태란 key=value의 형태를 띠고 있는 것을 말한다. html의 <input>엘리먼트에서 속성을 부여할 때 다음과 같이 작성하게 된다.

<input type="text" placeholder="아이디를 입력해주세요.">
<input type="password" placeholder="패스워드를 입력해주세요." >
<input type="button" value="로그인">

 

 

반면 css의 경우, object 형태와 비슷한 형태를 띠고 있다.

(css가 object인 것은 절대 아니다. 단지 형태가 비슷할 뿐)

css 생성 형태는 queryString과는 다른 형태로 key : value 형태를 띠고 있다.

또한 css에서는 따옴표" "를 사용하지 않고 끝에 세미콜론(;)이 붙는다.

아래의 코드를 보면 쉽게 그 차이를 이해할 수 있다.

/* CSS style sheet */

#header{
    background:red;
    height:120px;
    font-size: 18px;
    padding:15px;
    box-sizing: border-box;
    color:#fff;
}

#visual{
    background: blue;
    height:450px;
}

#content{
    background: yellow;
    height:300px;
    margin: 15px 0 15px 0;
}

 

간단히 요약하자면 "="는 html에서 속성을 부여할 때 사용하고 ":"는 css에서 스타일을 넣을 때 사용한다고 볼 수 있다. 그리고 css의 경우 끝에 항상 ";"을 작성한다.

 

 

 

(cf) 세미콜론( ; )

세미콜론의 존재 이유에 대해 간략히 짚고 넘어가자.

세미콜론이 없다면 코딩을 할 때 가독성이 떨어지고 구별이 어려워진다. 세미콜론을 사용함으로써 특정 파트가 끝나는 부분을 지정해 줄 수 있다. 또한 세미콜론이 없다면 컴퓨터는 우리가 작성한 코드를 이해하지 못한다. 컴퓨터는 우리가 작성한 코드를 읽을 때 세미콜론 별로 하나하나 끊어서 읽기 때문에 우리는 코드를 작성할 때 세미콜론을 사용하여 하나하나 명시해 주어야 한다.