2일차 : 혁명적 변화, CSS 속성 알아내는 법

2일차 : 혁명적 변화, CSS 속성 알아내는 법

 

지난 시간에 CSS가 등장하게 된 배경에 대해 살펴보았습니다.

이번에는 조금 더 구체적으로, CSS를 사용하는 방법에 대해 알아볼 예정입니다.

 

○ 웹 페이지에서 CSS를 적용하는 두 가지 방법

 

1. style 태그를 이용

 

style 태그는 지난 시간에 살짝 살펴보았습니다.

 

이처럼 <style>을 입력한 후, 속성을 적용시킬 대상 (a) 을 선택하고, 적용시킬 효과 (color=색상;) 를 적어주면 됩니다.

a 태그를 달고 있는 모든 곳에 동일한 속성을 한 번에 적용시키는 것이죠.

여러가지 속성을 한꺼번에 변경시킬 때 유용하게 사용할 수 있는 것이 바로 이 스타일 태그입니다.

 

그렇다면, 이 중에 하나만 변경하고 싶을 때는 어떻게 할까요?

 

 

 

2. style 속성을 이용

 

바로 이처럼 속성을 적용할 곳에 가서, style 속성을 바로 적용시켜주면 됩니다.

style 태그는 속성을 누구에게 적용시키는지 알 수 없기 때문에 <style> 아래에 a {color:black;} 이라고 지정을 해 주었죠.

여기서 a 는 선택자, color:black; 은 선택자에게 지정될 효과 혹은 선언이라고 부릅니다.

 

밑줄과 같은 장식을 따로 지정해 줄 수도 있는데요.

 

우선 style 태그 안에 text-decroation 을 이용하여 모든 장식을 해제해 줍니다.

text-decoration:none; 을 적어주면 되죠.

 

그 후에 원하는 곳으로 가서, text-decoration:underline 을 적용시켜, 밑줄을 쳐주면 됩니다.

 

 

지난 시간에 예쁘게 바꾼 색상에서, 위와 같이 2번째만 빨강에 밑줄까지 적용되었습니다.

 

text-decoration 을 사용하면 밑줄 뿐 아니라 다양한 장식을 넣을 수 있습니다.

text-decoration 을 입력하고 : 을 넣으면, 뒤에 나오는 다양한 명령어를 확인할 수 있습니다.

 

또한 style을 사용할 때, 태그든 속성이든 한가지 효과 뒤에는 ;을 넣어서 각 효과를 구분합니다.

세미콜론으로 각 효과를 구분하기 때문에 엔터를 치더라도 세미콜론은 삽입해 주어야 합니다.

 

 

 

○ CSS 속성을 스스로 알아내는 방법

 

속성은? = property

 

속성은 property 라는 것을 알면, 모든 것은 검색으로 알아낼 수 있습니다.

 

예를 들어 글자 크기를 키우고 싶을 때, 검색을 어떻게 하면 될까요? 

CSS, text, size, property 등을 검색하면 되겠죠.

 

 

영어가 어렵다면 CSS 글자 크기 변경 이렇게 검색해도 바로 잘 나옵니다.

 

오히려 한국어 검색 결과가 더.. 편..한 건 한국 사람이기 때문이겠죠..?ㅎㅎ

 

자 이렇게 font-size를 배웠구요. 그냥 글씨체 변경이라고 쳤더니.. 다양한 정보가 한번에 나오네요.

 

 

한꺼번에 글꼴, 글자크기, 글자스타일, 굵기까지.. 저 페이지에 들어가면 더 자세한 걸 배울 수 있겠죠?

 

저도 예전에는 공부할 때 암기가 중요하다고 생각했는데요.

정보화 시대에 사는 만큼 우리가 원하는 것을 검색하면 5초도 되지 않는 시간에 넘치는 정보를 얻을 수 있습니다.

코딩을 할 때 꼭 아는 지식으로, 모든 것을 외워서 하는 것이 아니라 쉽고 간편하게 기계를 사용하면 되겠죠.

 

뇌는 하기 싫은 것을 할 때 더 안하려고 하는 습성이 있다고 하는데, 굳이 널려있는 정보들을 모두 외울 필요는 없겠죠.

 

코딩 공부 시작 전에 코딩은 새로운 정보를 빠르게 습득하는 것이 중요하니 항상 공부해야한다는 이야기를 들었습니다.

그 후, 막연하게 모든 정보를 내 머릿속에 집어넣어야만 이 일을 업으로 삼을 수 있겠다 라는 생각을 했구요.

오늘은 저의 발상을 전환하게 해주는 수업이었습니다.

앞으로 공부의 방향을 어떻게 잡아야 하는지 생각해 볼 수 있었고, 너무나도 큰 도움이 되었습니다.