이제 드디어 css를 공부한다. css가 대체 뭐길래…
예전에 html로 웹페이지에 뼈대를 만들고, css로 예쁘게 꾸미고, javascript로 움직이게 한다고 했었다. 뼈대 만드는걸 해봤으니 이제 이쁘게 꾸미는걸 배울 차례이다.
css는 cascading style sheet라고 한다. Html이 hyper text markup language라고 했을때랑 같은 기분일꺼다. 뭔소리인데 이게..? 이해하지 않아도 좋다. css는 그저 html을 예쁘게 꾸미는 거다. 그것만 알면 된다.
그렇다면 css를 어떻게 쓰는걸까? 이걸 알기 전에 영어단어 하나 외우고 가자. style. 스타일이라는 뜻이다. css는 이 style과 관련이 있다. 사용이 어렵지는 않지만 활용이 워낙 다양하기 때문에 내가 만들고 싶은 디자인이 있다면 그걸 구현하는 방법을 검색해보고 고민해보고 적용하려고 해봐야 한다. Html을 공부할 때보다 수없이 많은 시행착오들이 우리를 기다리고 있을꺼다. 괜찮다. 할 수있다.
아까도 말했다 싶이 html을 예쁘게 꾸미는거다. 색을 바꾸고 배경색을 입히고, 위치를 조정하고 등등. 전부 css를 통해 활용한다.
CSS 적용방법에는 3가지 방법이 있다.
무슨소리야 이게?!?
하나씩 진행해보며 알아보자.
쉽게 설명하면 내가 모양을 만들고 싶은 녀석 귀에다 대고 어떻게 변해라 라고 소리치는 방식이다.
이렇게 html파일을 만들고 인라인 방식으로 css를 먹여보자. p태그로 둘러싸인 ‘안녕하세요’와 ‘안녕’이 있는데 나는 ‘안녕’의 글씨 크기를 키우고, 색을 바꿀 생각이다.
코드는 다음과 같다.
<p>안녕하세요</p>
<p style="font-size:30px; color:blue">안녕</p>
인라인 방식으로 css를 쓸 때는 html의 style 속성을 적용한다. style=””를 적어넣고 따옴표 안에 적용하고 싶은 css 속성과 값을 집어 넣는다. CSS는 “”안에 있는 내용을 의미한다.
위 코드에서는 css 속성 중 font-size, color를 이용했다. font-size는 글씨의 크기를 바꾸는 속성이고, color는 글씨의 색상을 바꾸는 속성이다. 속성 뒤에 오는 30px과 blue는 값(value)라고 하며 이 값이 변함에 따라 모양이 변하게 된다.
css가 적용된 ‘안녕’은 파랗고 글씨가 커졌다. 이런 방식으로 css를 적용하면 된다.
두번째로 css를 적용하는 방식은 내부 스타일 시트 방식이라고하고.. css 내용을 head 태그안에 담아 두는 방식이다.
비교를 위해 p태그로 감싸지 않은 ‘안녕하십니까’를 추가했다.
이런 식으로 적는다. head 태그 안에 style 태그를 쓰고 style 태그 안에 css 내용을 적는다. 여기여 적을 때 우리가 css를 적용시키고 싶은 html 태그를 먼저 적고 {}를 해준 뒤, css의 속성과 값을 위와 같이 적는다.
위의 코드는 p태그에 css를 적용시키는 코드이다. 출력하면…
이렇게 된다. p태그로 감싼 모든 애들한테 css 효과가 적용되었다. 앞서 다루었던 인라인 방식으로 이렇게 효과를 지정해주려고하면 하나하나 찾아가며 font-size와 color를 입력했어야 했겠지만.. 내부 스타일시트 방식을 사용하면 모든 p태그에 내가 원하는 효과를 바로 먹일 수 있다.
인라인 방식, 내부 스타일시트 방식 보다 사실 더 많이 쓰이는게 이 외부 스타일 시트 방식이다. 앞선 두 방식은 모두 css코드가 많아지면 html보기도 같이 번거로워진다는 단점이 있다. 그래서 css를 만든 사람은 생각했다. ‘css를 따로 관리하면 되지!’ 그 방식이 외부 스타일 시트 방식이다.
css파일을 만들어 html과 연결시켜서 효과를 적용하는 방식이다.
이걸 위해서 새로 파일을 하나 만들자. 지금 있는 html파일이 있는 폴더 안에 style.css 파일을 만들어보자.
여기서 new file 선택.
이렇게 이름을 쳐주고 엔터
그러면 새로운 창이 생기는데.. 보통 작업할 때 창을 두개로 나눠서 한쪽에는 html, 한쪽에는 css를 두고 쓴다.
요렇게!!
그러면 html파일안에 썼던 css내용을 새로만든 style.css로 옮겨보자.
옮기면서 style 태그는 지워버렸다.
이렇게 하고 두 파일 모두 저장해준다. 창을 두개 띄워놓고 작업하다 보면 저장하는 것을 까먹기도 하는데 내용변경이 있으면 상단에 파일명이 적힌곳에 파란 동그라미가 뜬다. 저장하면 사라지지 저장을 잊지 말자.
이 상태로 html을 띄우면 어떻게 될까? 당연히 css가 적용되지 않는다.
왜냐? 우리는 style.css에 기존에 있었던 css내용을 넣고 저장했을뿐, html파일에게 ‘그 css파일을 가져와서 적용해!’ 라고 말해주지 않았다. 그 작업을 해주기 위해 head태그 안 적당한 곳에 link라고 쓰고 탭을 눌러보자.
그러면 자동으로 아래와 같은 코드가 작성된다.
<link rel="stylesheet" href="">
친절하게 stylesheet라는건 미리 쳐놓았다. 우리는 href에 우리가 아까 만들었던 style.css파일을 넣어주면 된다.
<link rel="stylesheet" href=”style.css">
그리고 저장하고 다시 html파일을 열어보면…
잘나온다!!
Css가 뭔지, css를 적용하는 3가지 방법에 대해 알아 봤다. Css를 적용하는 방법 중 앞의 두가지는 한번 해보고 치워라. 앞으로 우리는 3번째 방법을 사용해서 내용을 진행해 나갈 것이다!
html이나 css, javascript에 관심이 있다면 아래 링크들로 학습하길 권합니다.
인프런 - https://www.inflearn.com/
코드카데미 - https://www.codecademy.com/