html 파일과 CSS 파일을 서로 나눠서 작업하는 것이 안전하고 효과적이긴 하지만
간단하거나 짧은 코드를 작성할 경우나 범위를 알기 위해서 잠깐 사용할 수 있기 때문에
html 단일 파일에서 CSS 효과를 주는 방법에 대해 알려드릴려고 합니다 :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>이것은 제목</h1>
</body>
</html>
위와 같은 html 파일이 있다고 가정을 합시다
간단하게 'h1'태그의 글씨 색상을 변경하고 싶은 경우
'head' 태그 안에 'style' 이라는 태그를 적고 속성을 적으면 되는데요
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>이것은 제목</h1>
</body>
</html>
위와 같이 'head' 태그 안에 'style' 이라는 태그를 적음으로 'h1' 태그 속 제목의 글씨 색상을 바꿔줄 수 있었습니다
그 외에 CSS에서 줄 수 있는 효과들도 위와 같은 방법으로 적용할 수 있습니다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
color: red;
text-align: center;
border: 1px solid #000;
border-radius: 20px;
width: 200px;
}
</style>
</head>
<body>
<h1>이것은 제목</h1>
</body>
</html>
예를 들면 이런 식으로 말이죠
할 수 있지만 나중을 위해서는 CSS파일을 따로 만들어서 작업하시길 추천드립니다
(아마도..?😀)
디자이너의 코딩 도전👍🏻