Coding CSS

신홍원·2024년 12월 9일

css 기초

CSS(Cascading style sheets)는 HTML과 함께 웹 표준의 기본 개념이다.

html이 문서의 뼈대를 만든다면 css는 뼈대에 디자인을 입히는 언어이다.

CSS는 위에 있는 속성보다 아래에 있는 속성이 먼저 적용된다는 특징이 있다.

CSS문법을 쓸 때에는 선택자가 가장 먼저 등장하고 그 다음 {}(중괄호)안에 속성과 속성값을 :(콜론)으로 구분하여 나열한다.

하나의 속성 선언이 끝나면 ;(세미콜론)으로 문장의 마침표를 찍어주어야 한다.

선택자{
속성1 : 속성값;
속성2 : 속성값;
속성3 : 속성값;
속성4 : 속성값;
}

내부 스타일시트

html웹 문서에 <head>태그 안에 <style>태그를 이용해 css를 작성하는 방식을 말한다.

외부 스타일시트

css문서를 만들고 css폴더에 따로 분리하여 html과 연결해 쓰는 방식을 말한다.

외부 스타일시트를 만들었을때 link태그로 html파일과 연결할 수 있다.

<link rel="stylesheet" href="외부파일 경로" />

rel : 연결하려는 파일의 형식을 지정하는 속성.

href : 파일 경로

html태그에 스타일을 적용하는 선택자로 태그에 직접 스타일을 적용한다.

예시)
p {속성:속성값;}
img {속성:속성값;}
=> 선택자 자리에 태그 이름을 그대로 쓴다.

특정한 태그에만 스타일을 적용하고 싶은 경우 사용하는 선택자.

CSS에서 class선택자를 불러올 때에는 앞에 .을 붙인 후 class의 이름을 붙여서 {속성:속성값;}을 쓴다.

예시)
html에서 이름을 붙일때

    ----------------------------------
    <h2 class="title_big" >제목</h2>
    css에서 불러올때
    ----------------------
    .title_big{속성 : 값;}

id선택자도 class처럼 태그에 특정한 css속성을 적용하고 싶을 때 이름을 붙여주는 역할을 한다.

class와 다른 점은 id로 지은 이름은 단 한 번만 사용이 가능하다는 것이다.

예시)
html에서 이름을 붙일때

    ----------------------------------
    <h2 id="title">제목</h2>
    css에서 불러올때
    ----------------------
    #title{ 속성 : 값;}