brunch

매거진 코딩 공부를 해보자

라이킷 8 댓글

You can make anything
by writing

C.S.Lewis

계정을 잊어버리셨나요?

by 아무나 Jul 06. 2019

CSS- 1. HTML을 꾸미기 시작하다

*생활코딩 수업을 통해 배워나가고 있습니다

https://yah.ac/web2css

HTML을 끝낸 지 얼마 지나지 않았을 때, 더 공부를 할 것이냐 말겠이냐의 기로에 서 있을 때,

나는 글자만 앙상한 내 홈페이지를 그냥 둘 수 없다고 생각했다.

그래서 시작했다!

CSS!

이번에도 역시 생활코딩을 통해서 공부하였는데, 이곳의 출석표 시스템이 완강을 하는데 꽤 도움을 주었다. 그러므로 혹시나 CSS를 공부하시려거든 이 출석부 시스템을 따라오는 것을 추천드린다. (생활코딩 CSS 출석표 : https://yah.ac/web2css)

자 그럼 공부한 내용을 바탕으로 리뷰를 시작해보도록 하겠다.

1. html아 잘 들어, 이제부터 CSS를 쓸 거야 - <style> 태그

원래 우리가 작성한 코드는 html이며, html 문법으로 작성된 문서이다. 하지만 우리가 지금부터 적용하고자 하는 CSS는 html과 완전히 다른 문법을 가지고 있다. 따라서 html 문서에게 미리 html 용어로 말을 해줘야 한다. 우리가 이제 CSS를 쓸 것이라고.

그 태그가 바로 <head> 아래 보통 넣어주는 <style> 태그이다.

2. 링크 폰트 색깔을 바꿔보자 - a {color:red}

현재 HTML의 기본 설정에 따라 링크의 색깔이 파란색(클릭 후에는 보라색)으로 변하는 것이 싫었다. 미관상 별로 좋지 않다! 그러니까 이제 모든 링크 <a>의 색깔을 빨간색으로 바꾸고 싶다.

방법은 아주 간단하다. <style>과 </style> 사이에 a는 color가 red 야라고 이렇게 써주면 된다.

<style>

a {

color:red;

}

</style>

CSS라는 언어가 개발되기 이전에 HTML 문서에서 일일이 <a> 하나하나를 찾아가서 <font>라는 태그를 붙여줘야 했는데 이제는 이렇게 한마디면 <a>가 1000줄이고 10000줄이고 한방에 바꿀 수 있다. 이렇게... 한방에 검정으로도 바꿀 수 있다. color:black이라는 한마디로

이래서 CSS를 쓰는구나!!

HTML은 정보에 집중한 언어라면, CSS는 디자인에 집중하여, 작업을 할 때 각각 필요한 부분만 효율적으로 살펴볼 수 있게 해 준다!

3. html아, 잘 들어 이건 CSS야 - 속성을 통한 방법

<a> 속에 href라는 링크를 알려주는 속성을 넣었다면, 마찬가지로 style이라는 속성을 사용해 HTML 언어 속에서 CSS의 특징을 그대로 사용할 수 있다.

style="color:red"를 이번엔 html의 태그 안에서 사용한 것이다. 여기서 style =" " 이것은 html의 속성이다!

그러나 html 문법에서 약속하기를 style = " " 안의 값은 css의 값으로 불러온다 라고 되어있다.

4. 선택자(selector)와 선언(declaration)

우리는 상단에 어떤 태그에 어떤 속성을 붙일지에 대해 공부하였다.

a { - a를 선택하는 선택자

color:black; - 색깔이 검정이라고 선언

}

</style>

이렇게 말이다.

위의 예에서 우리가 a를 선택해서 검정이라는 값을 부여하였다. 여기서 a는 선택자(스타일을 붙이기 위해 선택한 값)라고 부르고, color:black은 선언(이렇게 보이게 할 거야!)이라고 부른다.

하지만 스타일 태그로 미리 선언했더라도, 각각의 코드에서 속성 값으로 따로 지정해주면(아까 CSS만 붉은색으로 만든 것처럼) 별도 지정한 속성 값을 따라간다.

5. 하이퍼링크에 밑줄이 거슬려요 - text-decoration:none

html로 작성된 하이퍼링크 부분에는 항상 밑줄이 달려있다. 하지만 심미적으로 불편하지 않을 수가 없다. 그럴 땐 역시 a선택자 들의 모든 꾸밈을 없앤다는 text-decoration:none라는 선언을 통해 밑줄을 없앨 수 있다

밑줄이 없어졌다.

6. 세미콜론(;)을 잊지 마세요.

html은 <a>가 있으면 이것을 끝내기 위해 </a>가 존재했다. 이렇게 닫아주는 부분이 어떤 코드에든 필요하기 마련, CSS의 경우 이렇게 코드 한 줄이 끝났음을 명시할 때는 세미콜론 ; 을 붙인다.

이것이 없다면 코드가 깨지고... 야근이 시작되고... 나라가 혼란해지게 된다.

7. 특정한 곳에 다시 밑줄을 붙여주고 싶다면 - text-decoration:underline;

아까 밑줄을 다 지웠더니 내가 지금 어떤 페이지에 있는 건지 알 수 없게 되었다. 그러니까, 속성 값으로 그 부분에만 다시 밑줄을 붙여보자. color:red 뒤에 ;으로 요 명령을 끝내주고, text-decoration:underline;을 붙여주자. 저장하고 리로드를 하면 짠-