웹💻

유데미 91강까지 수강

CSS 기초

CSS란 Cascading Style sheet의 약자로 HTML로 작성한 문서를 꾸며주는 역할을 하는 디자인언어다. CSS를 HTML문서에 적용하기 위해서는

1. HTML문서 내에 <style>요소로 작성하기

2. HTML 요소 내에 작성하기

3. 외부에 작성 후 HTML문서에 연결하기

가 있다. 이 3가지 중 2번이 더 사용하기에 적절한데, 그 이유는 다음과 같다.

1번으로 사용할 시에는 해당 페이지의 HTML문서 뿐만 아니라 같은 스타일을 공유하는 다른 페이지에 적용이 번거롭다.

2번으로 사용할 시에는 요소마다 각각 스타일이 붙어있어 한번에 변경하는 것이 어렵고 같은 스타일을 공유하는 요소들을 만들때마다 각각에 스타일을 입력해야 하기에 번거롭다.

3번은 다른 페이지에 CSS문서를 연결하기만 하면 되기 때문에 번거로움이 없고 한번에 많은 요소를 변경할 수 있다.

CSS로 요소를 꾸밀 때는 요소이름, 아이디, 클래스를 이용할 수 있는데

가령 h2요소를 꾸미고 싶다면 h2{꾸밀내용} 으로 모든 h2요소를 꾸밀 수 있고

h2요소 중 하나만 꾸미고 싶다면 id를 부여한 다음(예시:<h2 id=toDesign>loremipsum</h2> ) 아이디를 지정하여 #toDesign{꾸밀 내용}으로 꾸밀 수 있다.

클래스로 꾸밀 때에는 클래스로 묶을 요소들에 class='class_name' 을 입력하고 .class_name{꾸밀내용} 로 꾸밀 수 있다. (+ CSS는 위에서 아래로 코드를 읽으며 세미콜론으로 줄을 구분하기 때문에 모드줄의 끝부분마다 세미콜론이 붙어있는 지를 잘 확인해야 한다.)