회원가입, 로그인 페이지 만들기

권정익·2024년 7월 17일

순서

머릿속에 넣기만 하니까 금방 휘발되어 버린다.
지금까지 배운 것을 사용해서 만들어보자.
뼈대 -> 위치정렬 -> 글자 정렬 -> 내부 정렬 -> 글꼴

뼈대

부트스트랩

기본적으로 필요한 뼈대만 세웠다.

  • 부트스트랩에서 박스를 가져왔다.

위치 정렬

margin으로 좌우는 중앙으로 정렬하고 위를 200px만큼 떨어트렸다.

  • 설정 순서 margin: 위 오른쪽 아래 왼쪽
  • 시계방향으로 생각하면 편하다.

글자 정렬

글자 정렬은 text-align: center;로 가능하다.

  • align은 '나란히 만들다' 라는 의미의 단어이다.
  • text-align은 글자를 나란히 만들다 라고, 직관적으로 알기 쉽다.

내부 정렬

<div></div>와 margin, padding을 이용해서 정렬했다.

  • 맨 아래 버튼을 보면 태그 안에 바로 style를 사용해서 설정했다.

글꼴

구글폰트

 * {
~~~code~~~
}

구글폰트 홈페이지에서 가져왔다.

  • '*'은 현재 파일의 모든 글꼴을 지정한다.

후기

이거 하나 만드는데 3시간 걸렸다.
html은 익숙하지도 않고, 강의를 볼 때는 쉬워보였는데 막상 해보니 어렵다.
역시 일단 만들어보는 게 맞긴한데...;
태그는 구글링하면 쉽게 나오는데 css 생각보다 이해하기 어려웠다.
우선 태그 자체에 익숙해지고 css로 조금씩 바꿔보는 방향으로 가야겠다.

profile
그냥 하자

0개의 댓글