CSS 기본 [1]

Cascading Style Sheets

CSS는 html을 꾸밀 때 사용된다.

이렇게 기본적인 html 파일이 있다. 

바디 안에 문단과 링크가 있다.

이를 출력하면 이렇게 된다

바디 안에 style="color: pink" 를 넣어준다.

html 파일 안에 바로 꾸미는 내용을 넣어줄 때는 style 속성을 부여한다.

그 다음에 쌍따음표 안에 color: 색깔 을 넣어주면 되는데,

색깔을 단어로 표현할 수도 있고 hex나 rgb로도표현이 가능하다.

속성을 부여한대로 출력이 되었다.

핑크색이 아니라 연어색같다.

똑같이 문단과 링크에도 각각 다른색으로 색깔 속성을 부여해보자

문단 하나에만 색깔을 주었더니 하나만 색깔이 바뀐다.

속성이 없는 문단은 바디 속성을 받는다.

색깔 속성을 부여한 링크는 클릭해도 색깔이 변하지 않는다!

일일이 문단 하나하나에 속성을 부여하기는 귀찮다.

이럴 때는 헤드 태그 안에 <style> 태그를 넣어서 html 광역 속성을 만들어준다.

p{color: red;}

를 사용하면 html 전체 파일의 문단이 붉은색으로 바뀐다.

두줄 다 문단이라는 사실을 까먹었다.

문단 속성이 바디 속성을 씹어먹어서 body{color:pink;}가 생략되버렸다.

이렇게 html 안에 바로 css를 작성하는 방법도 있지만,

편의상 html파일과 css파일을 따로 만드는것이 나중에 수정하기 편하다.

위와같이 간단한 속성을 넣고 style.css로 저장해준다.

이름은 굳이 style이 아니어도 괜찮다

그리고 html의 헤드 태그 안에 링크를 걸어준다.

rel="stylesheet" 는 css임을 알려주는 속성이다

저장하고 다시 웹페이지를 불러주면 이렇게 css가 적용이 된것을 볼 수 있다