English
한국어
[HTML 스타터] CSS II
안녕하세요? 지난 포스트에서 css와 텍스트 연결방법에 대해 알아보았습니다. 이번 포스팅은 본격적으로 css 사용방법에 대해 알아보겠습니다. 지난 HTML 포스팅 처럼 간단한 사용방법에 대해 알려드립니다. css에 대한 유용한 팁이 있다면 한번 공유해 주세요~🙏🏻
이번 포스팅에서는 css를 사용하기 위한 기본 룰과 html 텍스트의 색깔 변환에 대해 알아보겠습니다.
CSS 베이직 룰!
css 사용에 있어 가장 중요한건 맨 위의 텍스트부터 css를 적용한다는 것입니다. 먼저 지난번에 마친 html 텍스트를 보겠습니다.
<html>
<head>
<link rel="stylesheet" rel="stylesheet" href="style.css">
</head>
<body>
<div class="main-title">
<h1>HTML 스타터를 위한 가이드!</h1>
</div>
<div class="sub-title">
<h2>컴알못도 할수있다! HTML 베이비들을 위한 안내서</h2>
</div>
<div class="main-picture">
<img src="file:///Users/sunbee/Downloads/computer-hands-laptop-2115217.jpg">
</div>
<div class="main-contents">
</div>
</body>
</html>
위 텍스트에서 가장 위에 있는 태그는 body입니다. CSS의 기본 룰은 맨 위에 위치한 태그를 먼저 적용하는 것입니다. 오늘은 텍스트와 이미지 파일에 대한 css를 적용하기로 했으니 body태그 안에 가장 먼저 입력한 텍스트 HTML 스타터를 위한 가이드를 먼저 조정해 보겠습니다.
해당 텍스트의 사이즈와 색깔 변환을 한번 넣어보겠습니다. CSS파일을 열어 다음의 코드로 ‘h1’태그에 원하는 사이즈와 색깔을 적용해 봅니다.
h1 {
color: red;
font-size: 120px;
}
위의 코드를 보면 먼저 원하는 태그를 입력합니다. 여기서는 h1태그를 했습니다. 그리고 {를 입력한 후 대괄호 안에 원하는 내용을 입력합니다. 텍스트의 색깔변환은 color로 입력한 후 :을 입력합니다. 그리고 원하는 색깔을 입력한 후 ;로 명령어를 마칩니다. font-size는 텍스트의 크기를 지정하는 명령어입니다. 이것도 :입력한 다음에 원하는 사이즈의 텍스트를 지정한 후 ;로 명령어를 마칩니다. 명령어를 마친 후 }로 해당 태그의 css 명령어를 마칩니다.
그럼 위 css의 적용 상태를 확인해 보겠습니다.
태그이름을 사용하기
태그에 이름을 지정했다면 이름을 사용하여 명령어를 입력할 수 있습니다. HTML 텍스트에서 h1태그에 main-title이란 이름을 지정했습니다. 따라서 css에서 다음과 같이 명령어를 적용할 수 있습니다.
.main-title {
color: red;
font-size: 120px;
}
여기서 중요한건 태그의 이름을 사용할 경우 반드시 이름 앞에 .을 입력해야합니다.
오늘은 간단한 css의 베이직 룰에 대해 알아보았습니다. 간단하지만 중요한 부분이니 잊지마세요!
Responses
Leave a response to @alexis