brunch

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

by 아무나

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

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



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


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




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


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


2-1.크게키우는 css 값이 뭐야.PNG 뭐라고 써야 글씨가 커지는 거야????



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


css text size property

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


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


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


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

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


2-3.우왕커짐.PNG 우왕 커졌다!


커졌다!






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


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


css text center property


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


text-align:center;


2-4.중앙정렬.PNG 짜잔-



중앙 정렬이 되었다!


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


keyword
매거진의 이전글CSS- 1. HTML을 꾸미기 시작하다