자주 쓰이는 CSS연습하기

👇👇아래에 있는 로그인 페이지 똑같이 만들어보기👇👇

🎈사진처럼 완성하기 위해 div를 생성하고 글자를 써 넣는다.

<div>
    <h1>로그인 페이지</h1>
    <h5>아이디,패스워드를 입력해주세요</h5>
</div>

🎈사진처럼 되려면 div안에 꾸며줄것이 보이니까 명찰(class="mytitle"로)을 달아준다

<div class="mytitle">
    <h1>로그인 페이지</h1>
    <h5>아이디,패스워드를 입력해주세요</h5>
</div>

🎈style안에 달아준 명찰을 지칭하는 행위를 한다.

 <style>
        .mytitle {   
        }
    </style>

🎈div를 적용하고 크롬으로 켜보면 안보이기 때문에 초록색으로 배경색을 깔아준다.

 <style>
        .mytitle {
            background-color: green;
        }
    </style>

🎈원하는 사이즈로 배경크기를 지정해준다.(width:가로,heigth:세로)
🎈글씨 색도 바꿔준다.(color:색)
🎈글자 위치도 가운데로 맞춰준다(text:글자,align:정렬,center:중앙)

  <style>
        .mytitle {
            background-color: green;
            width: 300px;
            height: 200px;
            color: white;           
            text-align: center;
        }
    </style>

🎈이미지를 넣는다.이미지를 넣을땐 세줄이 같이 붙는데
💡이 세가지를 실무에선 복붙해서 url내용만 갈아끼운다.

background-image: url("https://www.ancient- origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;

• (url을 넣는다.)
• (url 넣었을시 이미지 한부분만 걸쳐 나올수 있기 때문에 사이즈를 cover로 한다.)
• (이미지가 중앙이 아닐시 애매할수 있기 때문에 postion도 center로 넣는다.)
  

🎈모서리를 만들어준다.(border-radius: px;)
🎈글자를 중앙으로 맞춰준다.(padding:내 안쪽으로,margin:내 바깥쪽으로)

 border-radius: 10px;
 padding-top: 20px;