HTML로 기본 뼈대를 다졌다면, CSS로 디자인을 해보자!!
HTML은 정보를 표현해야 하니까 <body>태그 안에 작성한다.
CSS는 부가적인 정보이기 때문에 <head>태그 안에 작성한다.
<!DOCTYPE html>
<html lang="en">
<!-- head : 부가적인 정보-->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- style태그 : css를 작성하겠다! -->
<style>
/* 여기에는 css언어로만 작성*/
/* 선택자{
속성 : 값;
속성 : 값;
} */
h1{
color: green; 색지정
background-color: black; 배경색지정
font-size: 100px; 크기지정
font-weight: lighter; 두께지정
font-family: "궁서체"; 글꼴지정
font-style: italic; 스타일-기울게
}
</style>
</head>
<!-- body : 정보표현 -->
<body>
<h1>이서연</h1>
</body>
</html>
실행결과
이 코드에서의 핵심은 한 태그에만 설정을 줄거라면 id를 지정하고
여러 태그를 동시에 관리하고 싶다면 동일한 class를 지정해서 한꺼번에 설정을 주는 것이다.
색깔지정 등의 코드는 간단해서 따로 설명할 것이 없어보인다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 전체선택자(*) : 모든요소 */
*{
color: blue;
}
/* 타입선택자(요소이름) : 해당 요소만 */
h1{
color: green;
}
li{
color: violet;
}
a{
color: red;
}
/* 아이디, 클래스 : 요소에 별칭 짓기*/
/* class선택자(.) : 여러번 사용 가능 */
/* 한식에만 배경색 검정색 주기 */
.korean{
background-color: black;
}
/* id선택자(#) : 1번만 사용가능 */
/* 양식에만 배경 파랑색 주기 */
#Western{
background-color: blue;
}
</style>
</head>
<body>
<h1> 오점추 </h1>
<ul>
<li class="korean">떡볶이</li>
<li class="korean">김치</li>
<li>탕수육</li>
<li>짜장면</li>
<li id="Western">오븐스파게티</li>
</ul>
</body>
</html>
실행결과
'웹 개발 언어 > CSS' 카테고리의 다른 글
| CSS float, layout, 선언방식 (0) | 2022.03.14 |
|---|---|
| CSS overflow, background, position, float (0) | 2022.03.14 |
| CSS Box Model, box-sizing, border (0) | 2022.03.09 |
| CSS 계층선택자, 반응선택자, display (0) | 2022.03.07 |
댓글