생활코딩 <CSS> 6 : Property를 스스로 알아내는법, 제목 글자 크기(font-size)바꾸는 방법(검색어css text size property),픽셀px(크기의 단위), 글자 가운데 정렬(text-align:center)하는 방법(css text center property), 코드언어 자동 추천 가능 활용하기

6강. CSS속성을 스스로 알아내기

---

내 웹 페이지를 찬찬히 살펴보다보면,

불만족들이 하나씩 나오게 된다.

맨 처음 눈이 가는 곳은 바로

제목부분이다.

가운데 정렬해서 웹 사이트의 가운데에 글자가 위치해 있으면 좋을 것 같다는 생각이 들 것이다. (아니어도 그렇다고 쳐야한다)

내가 적은 이 제목 텍스트,

< hello! Welcome to my home :) >

이 부분이 코드에서 어디 있는지를 먼저 알아야 한다.
(본 강의에서는 제목 텍스트가 WEB 이라고 되어 있다)

웹 페이지에서 어떤 태그인지를 찾아야 한다는 말이다.

바로 <h1> 태그다. 그리고

' 우리는 이 웹 페이지에 있는 <h1> 태그 밑에 있는 텍스트를 더 크게 하고 싶다 '

라는 생각을 하게 될 것이다.


이때 이 웹 페이지에 있는 모든 <h1> 태그는 이렇게 하면 된다.

style 태그 안에서

중괄호({})가 끝나는 지점에서 엔터를 친 다음

h1 {} 를 입력해주고

중괄호{ 와 } 사이에 엔터를 쳐준다.

이제 여기서 우리가 해야 할 것은 무엇일까?

우리는 제목 텍스트의 글자를 크게 하고 싶은데,
어떻게 하면 크게 되는지는 모른다.

그리고 크게 키우는것을 모른다는 것을 우리는 알고 있고,

지식과 개념은 알고 있는 상태다.

그렇다는 것은

검색엔진을 조금만 활용하면 금방 찾을 수 있다는 얘기다.

지금부터 우리는 검색엔진을 통해 눈앞에 닥친 문제를 직접 해결해 보도록 하는 실습을 해보자.

검색엔진 구*을 켰다.

우리가 알고 싶은 것은 무엇인가?

1. CSS로 웹 페이지를 디자인 하는 것
   = 검색어 css

2. 글씨의
   = 검색어 text

3. 크기를 키우는것
   = 검색어 size

4. 어떤 속성을 이용하면 되는가?
   = 검색어 property

이것을 모두 더한

css text size property

를 검색하면 된다.

검색했을 때 제일 먼저 위에 뜨는 사이트를 눌러보니ㅡ

이런 사이트가 나왔다.

찾은 결과를 보면,

1. text가 아니라 font 였음을 알 수 있고,
2. size 크기
3. % (퍼센트) 기호가 나와있음을 알게 되었다.

다시 코드로 돌아와서,

검색으로 찾았던 결과를 입력해보자.

font-size: 라고 적고

font-size:60px

여기서 px 는 컴퓨터에서 사용하는 단위이다.
픽셀이라고 부른다.

이제 이 크기가 어떤정도로 하면 적합한지

내 웹 페이지와 비교해보며 수정하면 된다.

^ 크기를 입력하지 않았을 때

^ 60px로 했을 때

60px 을 기준으로 잡고, 45px 정도로 맞춰보았다.

^ 45px 로 했을 때

---

글자(텍스트) 가운데 정렬 하기

이제 글의 크기(font-size:)는 우리가 할 줄 알게 되었다.

그 다음 해볼 것은 가운데 정렬 이다.

검색어는 css text center property 이라고 치면 된다.

(또는 정렬하다 (align) 라는 단어를 써도 된다)

검색결과에서는

text-align:center 라고 나왔다.

코드로 돌아가 이렇게 입력해주고 저장하니,

왼쪽으로 정렬되있던 제목 글자가

가운데 정렬로 바뀐 것을 볼 수 있다.

---

코드언어 자동 추천 기능

우리가,

정보 기술이 존재하지 않는 시절에는 우리 머리 속에
모든 지식을 다 가지고 있어야 했다.

뭐가 필요할지 모르기 때문이다.

지금의 우리는

인터넷, 컴퓨터, 웹, 검색엔진 등

고도로 발전한 정보 기술을 가지고 있기 때문에

우리 머리 속에 font, size, text, align 이라는
구체적인 Property를 가지고 있지 않는다고 하더라도

이것들을 알아내는 데에 1분 밖에 걸리지 않는다면
우리는 저것을 알고 있는 것이나 다름 없다, 라고 할 수 있다.

이러한 시대를 사는 우리가
이런 Property들을 머리 속에 암기 할 필요가 있을까?

눈썰미가 있다면,

코드에서 타이핑할 때

text-a 까지만 쳐도

우리가 쓰고 있는 에디터가 추천을 해준다.

즉, 내가 스펠링을 모르고 있어도 에디터가 알려준다는 말이다.

여기서 엔터를 치면 다음 뭐가 나오는가?

그 다음에 내가 할 수 있는 Property Value 를
또 자동으로 추천해준다.
추천에 나오는 단어들 중 내가 찾는 항목으로 엔터만 쳐도
스펠링을 일일이 다 치고 있지 않아도 된다.

---

정리하며

우리는 코딩을 할 때,
코딩은 인간이 혼자 하는 것이 아니라
끊임없이 기계의 도움이 받아가면서 코딩을 하고 있다.

이런 시대에서
모든 Property를 외우려고 한다면
우리의 뇌는 혹사 당하는 느낌을 받을 것이다.

그러므로 우리는 이 모든 것을 다 외울 필요는 없다는 것이고,

지금까지 우리가 배운 것만으로도

"우리는 이미 모든 Property를 사실상 아는 것과 다름이 없다."

라고 할 수 있겠다.