Front-end] Html , Css

Front-end

Front-end] Html , Css

김코식 2022. 11. 1. 10:10

*Html은 뼈대, Css는 꾸미기

-html은 구역이나 텍스트, Css는 구역을 꾸며주는것

html안에 style 속성으로 꾸미기 가능 > 이 속성들을 모아놓은 것이 Css

Html

html은 head 와 body로 구성

-head : 페이지의 속성 정보

-body에는 페이지의 내용

Css

html의 head 안에 <style> ~ </style> 사용

예)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .title{
      background-color: gray; /* 배경 회색*/
      width: 300px; /*가로길이*/
      height: 300px; /*세로길이*/
      margin: auto; /*가운데정렬*/
    }
    .head {
      color: red;
      background-color: blue;

    }
    .cont{
      color: white;
      background-color: black;
    }
  </style>
</head>
<body>
<div class = title>
  <h1 class=head>제목</h1>
  <h2>부제목</h2>
  <div class = cont>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </div>
  <button>
    저장
  </button>

</div>
</body>
</html>

*<head>~</head> 안에있는 <style> ~</style>부분 >> Css