🎈로그인 페이지 가운데로 옮기기
글자,아이디,비번 따로따로 옮겨야 할까?
nope! div로 묶어주자!
만들어둔 전체를 옮길거기 때문에
div를 body안에 새로 생성하고
🎈새로 생성한 div안에 기존div를 넣는다.
그전에 배웠던 부모태그와 자식태그 사진을 상기해 볼 내용이다.
<body> <div> <div class="mytitle"> <h1>로그인 페이지</h1> <h5>아이디,패스워드를 입력해주세요</h5> </div> <p>ID: <input type="text"/></p> <p>PW: <input type="text"/></p> <button>로그인하기</button> </div> </body>
❔이 div를 어떻게 해야 가운데로 가져올 수 있을까❔
힌트: 내가 가운데 있다는것은 내 양쪽 여백이 동등하게 최대이다.
🎈우선, 새로묶은 div안에 class="wrap"으로 명찰을 달아준다.
🎈style안에 .wrap { }으로 지칭한다.
🎈background-color :green;으로 배경을 보이게한다.
🎈사진 가로 크기 width: 300px;만큼 크기를 맞춰준다.
<style> .wrap { background-color: green; width: 300px; } </style>
🎈나머지 여백을 margin: auto;로 동등하게 맞춰준다.
<style> .wrap { background-color: green; width: 300px; margin: auto; } </style>
background-color: green;없애서 배경색 제거
❔로그인하기 버튼이 가운데 가려면 어떻게 해야할까❔
🎈button에 "mybtn"명찰을 달고 지칭해준다.
<button class="mybtn">
🎈margin: auto;를 먹여본다.
<style> .mybtn { margin: auto; } </style>
놀랍게도 아무런 반응이없다.
💡HTML은 글 속성과 박스 속성이 있다.
박스는 가로세로 개념이 존재하지만 글은 가로세로라는 개념이 존재하지 않다.
그래서 이 글 속성을 박스 속성으로 강제로 바꿔준 다음 옮겨야 한다.
display: block;
<style> .mybtn { margin: auto; display: block; } </style>
🎈중첩 개념
명찰을 두개를 달아줄 수 있다.
mybtn으로 이미 명찰을 달아준 button에
<style>에.red-font를 생성해서
글씨색과 폰트 사이즈를 먹여보자.<style> .red-font { color: red; font-size: 16px; } </style>
.red-font(지칭)으로 color과 font-size를 먹였으니
명찰을 달아주러 가자.
명찰 달아준 mybtn에 red-font를 같이 먹이고싶다면 바로 옆에 쓰면 된다.
<button class="mybtn red-font">로그인하기</button>
완성
