2022. 10. 30. 21:47ㆍHTML
글자 색깔 변경과 같이,
웹페이지를 꾸미고 싶으면 CSS 를 알아야 한다고 합니다.
근데, CSS를 하기 위해서는,
(꾸미고자 하는 객체에) 이름표를 붙이고,
그 이름표를 불러서 어떻게 하라고 명령하면 된다. 그게 CSS 다.
라고 합니다.
(객체라고 표현하는게 맞는지는 모르겠습니다. 이름붙일 때 그냥 class라고 하길래 객체라고 불러봤습니다.)
"짱구의 바지 색깔을 바꿔줘!"
여기서 '짱구'는 웹페이지의 특정 객체, '바지 색깔을 OO으로 바꿔줘'는 그 객체를 꾸미는 명령이라고 보면 되겠네요.
결국 '짱구'가 될 객체를 정해서 그 객체에 '짱구' 라고 이름을 붙여주고,
'바지 색깔을 빨간색으로 바꿔줘' 라고 하면, 그 객체 색깔이 바뀐다는 이야기.
여기서의 핵심은 바로 <style> 태그를 활용하는 것!
이 <style> 태그는
<head> 부분 안에 작성을 해야한다고 합니다.
바로 이렇게요!
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
color: red;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button> 로그인하기</button>
</body>
</html>
잊지 말아야 할 건, 꼭 <style>의 대상이 될 객체에 이름표를 붙여주어야 한다는 겁니다.
class = "이름표"
그리고, <style> 태그는 일반적으로
Cascading style sheet이라고 해서,
밖에 있는 것이 안에 있는 것의 스타일을 정하지만,
안에 있는 것의 스타일은 밖에 있는 것의 스타일과 다르게 지정할 수 있다는 규칙에 따라 코딩이 된다고 합니다.
와우, 새로운 개념들이 마구 머릿 속으로 들어오고 있습니다.
과연 얼마나 머릿 속에 남아 있을지는 모르겠지만요.
장기 기억 전환을 위해서는 일주일 내에 꼭 복습을 해야한다는데 말이죠.
장기 기억으로 전환되길 바라면서, 1주차 복습을 이렇게 주말 밤에 몰아서 하고 있네요.
점점 더 복잡해지는 것 같지만,
아직 코딩과 강의는 빙산의 일각이라는 사실...
힘을 내봅니다~
'HTML' 카테고리의 다른 글
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(2) (0) | 2022.10.30 |
|---|---|
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(1) (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 3번째 - 간단한 로그인 페이지 만들기 (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 2번째 - HTML, CSS 기본내용 (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 1번째 - '네이버' 해킹해보기 (0) | 2022.10.30 |