지난 글에서 CSS 선택자와 자주 쓰이는 CSS들에 대해 공부해보았는데 이번 글에서는
자주 쓰이는 CSS를 이용하여 로그인 페이지를 만들어보려고 한다.
(1)이미지가 들어간 로그인 페이지 만들기
여기서 사용할 CSS속성들은이다.
color / text-align / background-image / background-size / background-position / border-radius / width, heigth
기존 로그인 페이지에 <div>태그에 mytitle이라는 이름표를 붙여 <style>태그에 여러 속성들을 주었다.
1) color : color 속성은 단어 뜻 그래도 텍스트의 색상을 뜻한다.
ex) color : red
2) text-align : 이 속성은 텍스트를 정렬하는 속성으로 여러 값을 주어 정렬 방향을 지정할 수 있다.
ex) text-align : left 왼쪽 정렬
text-align : right 오른쪽 정렬
text-align : center 중앙 정렬
text-align : justify 양쪽 정렬
3) background-image : 이 속성은 이미지를 배경으로 사용하는 속성이다.
ex) background-image : none 이미지를 배경으로 사용하지 않음
background-image : url 이미지의 URL을 입력한다.
background-image : none 기본값으로 설정.
background-image : inherit 부모 요소의 속성값을 상속받음.
4) background-size : 이 속성은 배경 이미지의 크기를 조정하는 속성이다.
ex) background-size : auto 이미지 크기를 유지
background-size : cover 배경을 사용하는 요소를 다 채울 수 있도록 이미지를 확대 또는 축소
background-size : contain 배경을 사용하는 요소를 벗어나지 않는 최대 크기로 이미지를 확대 또는 축소
background-size : initial 기본값으로 설정
background-size : inherit 부모 요소의 속성값을 상속받음
5) background-position : 이 속성은 배경 이미지의 위치를 정하는 속성이다.
ex) background-position : x-position(가로 위치 값 - left, center, right, 백분율, 길이)
background-position : y-position(세로 위치 값 - top, center, bottom, 백분율, 길이)
background-position : initial 기본값으로 설정
background-position : inherit 부모 요소의 속성값을 상속
6) width, heigth : 이 속성은 각각 가로와 세로의 길이를 의미하는 속성이다.
(값을 "100px"처럼 숫자 뒤에 단위를 적어 표시하고 px또는 %를 사용할 수 있다.)
7) border-radius : 이 속성은 요소의 바깥 테두리 경계의 모서리를 둥글게 만든다.
ex) border-radius : 10px (숫자가 클 수록 더 둥글둥글해짐)
