2.HTML - CSS

JSON KO (종훈)·2022년 2월 22일
0

Refactoring my life

목록 보기
3/4
  1. CSS는 어떻게 사용?
<head> ~ </head> 안에 <style> ~ </style>

mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!

<style>
.mytitle {
    background-color: green;
    width: 300px;
    height: 200px;

    color: white;
    text-align: center;

    background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
    
    background-size: cover; => 백그라운드 이미지를 width와 height에 맞게 조절
    background-position: center;

    border-radius: 10px;
    padding-top: 30px;
}
.wrap{
    width: 300px ; => div의 크기를 300px로 하고
    margin : auto; => 좌우마진을 자동으로해서 중앙정렬

}
.mybtn{
    width: 100px;
    margin : auto;
    display: block; => 글자로 박스로 취급하게
}
.red-font{
    color: red;
    font-size: 16px;
}
</style>

<div class="wrap"> => div에 부여된 라벨
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 패스워드를 입력해주세요</h5>
    </div>
    <p>I D  : <input type="text"/></p>
    <p>PW: <input type="text"/></p>
    <button class="mybtn red-font"=> mybtn과 red-font 2개 중첩시키기 >로그인하기</button>
</div>
profile
to the future

0개의 댓글