자주 사용하는 css를 사용해서 로그인 페이지를 꾸며보도록 한다.
예제에는 이미지가 들어가 있고 그 안에 텍스트가 들어가 있는 형태이다.
그리고 그 아래 아이디와 비밀번호를 입력하는 공간이 있고 그 아래 버튼이 있다.
이미지를 넣기 위해서는 공간이 필요한데 이럴 때 필요한 것은 div 태그이다.
우선 공간을 마련하고 그 안에 텍스트를 넣어본다.
div 태그로 공간을 만들고 그 안에 h1, h5 태그로 텍스트를 넣어준다.
div에 class를 지정해서 수정하여 그 안에 텍스트들이 함께 효과가 적용되도록 한다.
그리고 class로 속성을 꾸며주는데 일단 공간을 확인하기 위해서 background-color로 색상을 넣어준다.
div는 기본적으로 body의 전체 너비를 차지하게 되는데 크기를 수정하기 위해서 width와 height로 너비와 높이도 변경한다.
그리고 border-radius 속성으로 테두리를 둥글게 만들고 text-align으로 내부의 텍스트도 정렬해 준다.
여백
여백을 주는 데 사용할 수 있는 속성은 margin과 padding이 있다.
margin은 요소의 바깥쪽에 공간을 주는 방식으로 margin : top right bottom left로 값을 주어 여백을 줄 수 있다.
padding은 요소의 안쪽에 공간을 주며 값의 방향은 margin과 동일하다.
padding으로 여백을 주게 되면 안쪽에 공간을 차지하기 때문에 내부에 요소가 있다면 그 요소에 영향을 주게 된다.
div 내부에 padding으로 여백을 주면 다음처럼 된다.
이미지 넣기
이미지를 넣기 위해서는 backgorund-image: url('URL')을 사용한다.
이미지를 넣고 확인해 보면 이상하게 나온다.
이유는 이미지는 기본적으로 좌측상단을 기준으로 정렬되게 되기 때문에 이를 가운데 정렬로 변경해주어야 한다.
정렬은 됐지만 이미지가 div 영역을 넘치게 되는데 background-size : cover를 사용하면 상위 요소의 크기에 맞춰서 이미지가 가득 채워지게 된다.
마지막으로 로그인 창을 브라우저 가운데 오도록 만든다.
정렬하는 방식은 다양하지만 이번에는 박스로 한번 감싸주고 해당 박스의 좌우 여백을 동일하게 주는 방식을 사용한다.
div로 만들었던 로그인 창을 감싸주고 class를 지정해서 css를 넣어준다. 우선 width로 크기를 동일하게 맞춰준 후 margin을 사용해서 여백을 주는데 여기서 auto는 요소가 끝에 배치될 때까지 여백을 주는 것으로 왼쪽과 오른쪽을 auto로 해주면 중간에 정렬되게 된다.
'스파르타 > Web' 카테고리의 다른 글
| [Web] 주석과 파일분리 - ( week 1) (0) | 2023.04.07 |
|---|---|
| [Web] 구글 웹 폰트 - ( week 1) (0) | 2023.04.07 |
| [Web] CSS 기초 1 - ( week 1) (0) | 2023.04.06 |
| [Web] Sample - ( week 1) (0) | 2023.04.06 |
| [Web] HTML 기초 - ( week 1) (0) | 2023.04.06 |
