수많은 CSS 속성 Property를 굳이 다 외울 필요가 없습니다.
검색엔진을 통해 사용 예시까지 쉽게 찾아볼 수 있습니다. 사용을 반복하다 보면 자연스럽게 기억하게 됩니다. CSS 적용이 필요한 상황에 따라 관련 Property를 검색하여 사용하는 방법을 알아보겠습니다.
CSS font-size property를 이용해 텍스트 크기를 수정해야 한다고 가정하겠습니다.
css font size property 키워드로 검색을 합니다. 텍스트 크기를 수정할 수 있는 CSS 속성을 찾을 수 있습니다. 검색엔진의 맨 위에 있는 사이트 W3 Schools에 접속합니다. CSS Font Size에 대한 내용을 확인할 수 있습니다. 텍스트의 크기를 수정하고 싶을 때는 font-size property를 사용해야 한다는 것을 알 수 있습니다. 속성 값 value는 45px 등 픽셀 값을 입력하거나 100% 등으로 입력할 수 있습니다. <head> </head> 헤드 태그 사이에 스타일 태그로서 CSS 텍스트 크기를 수정하는 예시는 다음과 같습니다. 아래 예시에서 선택자 selector 로서 h1을 지정해놓았습니다. <body> </body> 본문에 작성된 모든 <h1> </h1> 태그의 텍스트 크기가 변경됩니다. font-size 속성을 픽셀 값으로 적용해보겠습니다.
<style>
h1 {
font-size:45px;
}
</style>
CSS text-align Property를 이용해 텍스트를 가운데로 정렬합니다.
CSS 정보를 찾기 위해 css text center property 키워드로 검색해 봅니다. CSS text-align Property 내용을 확인할 수 있습니다. 속성 값 value는 center, left, right, justify 등이 있습니다. justify는 양쪽 정렬을 의미합니다. 이전에 텍스트 크기를 수정했던 코드에 center 속성을 추가하겠습니다.
<style>
h1 {
font-size:45px;
text-align: center;
}
</style>
CSS font-weight Property를 사용해 텍스트를 진하게 변경합니다.
font-weight 속성을 모르는 상태라도 괜찮습니다. 우리는 굵은 글씨체를 볼드체라고 부르며 bold라는 단어를 잘 알고 있습니다. 검색엔진에 css text bold property 키워드를 찾아보겠습니다. CSS font-weight Property를 사용해 텍스트의 굵기를 조절할 수 있다는 것을 확인할 수 있습니다. 속성 값 value는 normal, bold 등 일정 규격을 선택할 수도 있고 900 등 숫자를 입력할 수도 있습니다. 앞서 작성했던 코드에 bold 속성을 추가하면 다음과 같습니다.
<style>
h1 {
font-size:45px;
text-align: center;
font-weight: bold;
}
</style>
'코딩' 카테고리의 다른 글
| html 테두리로 상자 만드는 border 속성과 block element, inline element, none 값 (0) | 2020.08.29 |
|---|---|
| html class 클래스 지정과 selector 선택자 활용 (0) | 2020.08.29 |
| html CSS 스타일 style 태그, 선택자 selector, 선언 declaration, 속성 property, 값 value 개념 (0) | 2020.08.27 |
| html 동영상 링크 삽입하기 (0) | 2020.08.27 |
| Web1 , Web2 html 문법과 기타 유용한 태그 (0) | 2020.08.27 |
댓글