brunch

You can make anything
by writing

C.S.Lewis

by 아무나 Jul 06. 2019

CSS - 2. 원하는 속성을 찾아서

*이 리뷰는 생활코딩 CSS강좌를 따라가고 있습니다.

https://opentutorials.org/course/3086/18328



모든 언어 결국 어느 순간 단어를 많이 알아야 하는 것처럼 코딩 언어도 마찬가지로 속성을 많이 알고 적절한 순간 배치하여 사용해야 한다. 하지만 코딩이 언어와 다른 점은 언제든지 검색해서 사용할 수 있다는 것이다!


자, 그렇다면 어떻게 원하는 CSS 언어의 속성을 찾아낼 수 있을까?




1. 원하는 CSS 속성을 찾아서 - font-size:60px


내 페이지의 제목인 WEB이라는 부분의 폰트를 좀 더 크게 키우고 싶다. 그렇다면 <style> 태그 아래에 WEB이 들어있는 <h1> 태그를 큰 스타일로 만들면 되겠다는 생각이 든다. 그럼 호기롭게 이렇게 써본다.


뭐라고 써야 글씨가 커지는 거야????



아뿔싸, 그러고 보니 난 폰트를 크게 키우는 css 코드를 모른다. 그럴 땐 어떻게 검색할까?


css text size property 

(CSS의 텍스트 크기 속성 값)


구글에 위와 같이 검색을 해보았더니 친근한 이름인 w3c 관련한 페이지가 상위에 검색되기에 들어가 보았다.


직접 검색해서 들어간 홈페이지에 친절한 예시까지 적혀있다.


아하, font-size:라는 것을 쓰고 px(픽셀)이나, large나, %를 사용해서 크기를 바꾸는구나!

이제 이걸 적용해서 내 홈페이지 제목의 폰트 크기를 60px 정도로 바꿔보았다. 


우왕 커졌다!


커졌다!






2. 그럼 중앙 정렬도 시켜보자 - text-align:center;


폰트 크기 변경에 힘을 얻어, 이번엔 제목을 중앙 정렬시켜보자.


css text center property


이렇게 검색해보자. 정렬이라는 단어 align을 알고 있다면 이것도 넣어주어도 좋다. 음 역시 아까 그 사이트에서 친절하게 알려주었다.


text-align:center;


짜잔-



중앙 정렬이 되었다!


이렇게 척척 바꿀 수 있다니, CSS 생각보다 쉬.. 쉽... 다!?


매거진의 이전글 CSS- 1. HTML을 꾸미기 시작하다
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari