HTML과 CSS_CSS 기본 문법_VS Code로 실습 해보기

오늘은 이전까지 실습했던 HTML에 추가로 CSS를 배워보자.

 

간단히 얘기하면,

 

HTML = "내용"

 

CSS = "스타일"

 

사이트에 CSS 스타일을 입혀주기 위해 <style>태그를 사용할 수 있다.

 

위의 기본 문법을 참고해서 이전의 실습에 스타일링을 추가해보자.

 

CSS 스타일링 종류

https://2myona.tistory.com/200

CSS 기본 속성 정리_스타일링 종류_폰트 크기, 여백, 색, 정렬

 

이전의 실습 참고

https://2myona.tistory.com/181

HTML_글씨 굵게 쓰기/날려 쓰기

 

먼저 h1은 64픽셀로 사이즈를 설정해 주었다.

또한, 중앙에 정렬하도록 하였다.

 

그리고 h3 위에는 공백을 띄워주었다.

 

실행 결과를보자.

잘 실행되었다!

 

추가로,

머리말 전체가 아닌, 일부 단어만을 스타일링하는 것을 배워보자.

 

아까와 똑같은 코드에 다음과 같은 코드만 추가하였다.

이 코드의 의미는

<p> 안의 <i>에 있는 부분에 대해 스타일링 하겠다는 것이다.

여기에서는 글씨 크기를 48픽셀로 스타일링 해주었다.

 

실행 결과를 보자.

아까보다 저 빨간색 부분의 글씨가 커졌다.

 

이 경우는 마지막 한 줄이 모두 <i> 태그 사이에 둘러싸여 있기 때문에, 

크게 다른 점을 인식하지 못할 수도 있다.

 

다른 예제를 보자.

아까와는 사알짝 다르게 코드를 써봤다.

빨간색 네모 부분만 달라졌다.

 

이제 다시 실행된 결과를 보자.

이렇게 결과가 나왔다.

 

<p>태그 안의 <i>태그로 둘러싸인 부분만 글씨 크기가 24픽셀로 설정된 것을 볼 수 있다.

 

* 참고로 <br>태그를 사용하면, 줄바꿈을 할 수 있다.*