CSS
html이 웹 페이지의 뼈대를 만드는 역할은 한다면 css는 꾸미는 기능을 한다.
특정
html의 태그를 꾸미기 위해서는 우선 어떤 태그를 꾸밀것인지 특정 시키는게 필요하다.
방법은 태그의 class 속성을 사용해서 원하는 문자열로 이름을 지정하고 이를 사용해 태그를 특정할 수 있다.
<head>
~
<style>
.mytitle{
color : red;
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="mytitle">Login Page</h1>
<p>ID : <input type="text" /></p>
<p>PW : <input type="text" /></p>
<button>Login</button>
</body>
h1 태그에 class 속성으로 이름을 지정하고 해당 이름을 가지고 css로 꾸민다.
<style>태그는 css를 사용하여 웹 페이지의 스타일을 정의하는 태그이다. 이러한 태그를 head에 정의하는 이유는 웹 브라우저가 문서를 로드할 때 head 태그 내에 있는 요소들을 먼저 읽어들이기 때문에 이러한 부분을 먼저 처리함으로 페이지의 로딩 속도를 높이고 사용자 경험을 개선할 수 있다.
css 코드는 우선 꾸밀 대상을 먼저 선정하는데 class 속성을 찾아오기 위해서는 .className으로 지정하고 중괄호를 열어서 속성들을 수정하면 된다.
color 속성으로 색을 수정하고 font-size 속성으로 문자의 크기를 조절한다.
동일한 방식으로 이번엔 버튼도 수정해 본다.
<head>
<style>
.mybtn{
font-size: 30px;
color : white;
background-color: green;
}
</style>
</head>
<body>
<button class="mybtn">Login</button>
</body>
mybtn으로 태그를 특정하고 문자의 크기와 색상 그리고 배경 색상을 수정해본다.
'스파르타 > Web' 카테고리의 다른 글
| [Web] 구글 웹 폰트 - ( week 1) (0) | 2023.04.07 |
|---|---|
| [Web] CSS 기초 2 - ( week 1) (0) | 2023.04.06 |
| [Web] Sample - ( week 1) (0) | 2023.04.06 |
| [Web] HTML 기초 - ( week 1) (0) | 2023.04.06 |
| [Web] 프로젝트 준비 - ( week 1) (0) | 2023.04.06 |
