나는 예전에 웹개발 강의를 들은 적이 있었는데 사전캠프로 제공되는 강의 중에 웹개발 강의가 있어 복습 차원에서 다시 듣게 되었다.
사실 이미 들은 지 너무 오래 되어 기억이 가물가물하긴 했지만 그래도 한 번 들었던 거라고 내용이 익숙했다.
오늘은 간단한 로그인 페이지를 css로 만들어보았다.
핵심은 body의 요소들에 class를 지정해주고 이를 위의 style에서 꾸밈요소들을 넣어주는 것이었다.
예를 들어 '로그인 페이지'가 적혀있고 사진이 있는 박스의 경우 div로 문구가 있는 부분을 나누어 class를 지정해준 뒤, style에서 width, height를 지정해준 뒤, 여기에 색, 텍스트 정렬, padding, background image를 넣어주는 식이다.
*여기서 padding은 안쪽 여백을, margin은 바깥 여백을 의미한다.
예를 들어 body는 이런식으로,
<body>
<div class="wrap">
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해주세요.</h5>
</div>
</div>
</body>그리고 style은 이런식으로 적는다.
<style>
.mytitle {
width: 300px;
height: 200px;
color: white;
text-align: center;
padding-top: 50px;
border-radius: 8px;
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center;
background-size: cover;
}
.wrap {
width: 300px;
margin: 50px auto 0px auto;
}
</style>이 외에도 폰트를 적용시키는 방법이나 줄정렬로 깔끔하게 정리하는 방법(Alt+shift+f) 등을 배웠다. (전체선택은 ctrl+a)
오랜만에 코딩을 하니 재미있기도 하고 손풀기 느낌이라 설레였다.
내일은 부트스트랩에 관한 부분을 배워볼 예정이다.
