[HTML,CSS] 로그인 페이지 제작시 알아두면 좋을 태그 및 속성들
🗒 본 게시글은 html과 css만으로 간단한 로그인 페이지를 제작하면서 배운 알아두면 좋을 태그 및 속성들을 정리해놓은 글입니다!
📌 block vs inline
block 태그만 width, height, marign 상하 속성이 적용되고,
inline은 적용되지 않는다! (예외: input)
.login label {
display: inline-block;
/* label은 inline태그이므로 "display:inline-block"으로 변경해서 적용함 */
width: 60px;
margin-bottom: 20px;
}
width, height, margin 상하 속성이 적용되지 않는 inline태그는
inline-block 속성으로 바꾸어 적용시킬 수 있다
- [참고] block vs inline 태그 표
📌 input placeholder 위치 조정엔 "text-indent:"
input 태그의 placeholder text의 위치를 조정하려할 때,
padding을 사용하면 늘린만큼 가로 너비도 늘어나지만,
text-indent를 사용하면 가로 너비는 변하지 않고 글자만 옆으로 이동한다
📌 input 클릭시 생기는 테두리 없애기(+색상 바꾸기)
outline 속성: html 요소의 가장 바깥 부분을 둘러싸고 있는 부분
border 속성처럼 style, width, color 속성이 있다.
form 태그나 a 태그처럼 커서가 있는 곳에 사용 가능
input:focus { outline:none; } /* 테두리 없애기 */
input2:focus { outline: 2px solid #f00; } /* 색상 바꾸기 */
📌 input placeholder 글자색 변경법
input { color: #f00; } /* placeholder글자색 변경-> 익스, 파이어폭스에서만 적용되고, 입력시에도 글자가 빨간색이 됨 */
::-webkit-input-placeholder { color: #f00; } /* placeholder 글자색 변경(크롬 적용) -> 접두사를 반드시 붙여야 적용됨 */
📌 손가락 모양을 띄우고 싶을 땐 "cursor: pointer"
요소에 마우스 커서를 갖다대었을 때 👆(손가락)모양이 나오지 않는 경우,
나오게 하고 싶을 땐 ~
.loginbtn:hover { cursor: pointer; }
📌 아이디/비밀번호 text와 input창 사이를 일자로 정렬하는 방법
위 사진처럼 아이디/비밀번호가 오른쪽으로 열 맞춰 정렬 + input창과 일자로 정렬되기 위해서는 (text에) width 값을 정하고, text-align으로 정렬하면 된다!
.login label{
display: inline-block; /* label 태그는 inline 태그이므로 width, height, margin 상하가 적용되지 않으므로 inline-block 속성으로 변경해주는 것이 우선이다!*/
width: 60px;
text-align: right;
}
📚 Reference
: 국비지원 수업
Author And Source
이 문제에 관하여([HTML,CSS] 로그인 페이지 제작시 알아두면 좋을 태그 및 속성들), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dygreen/HTMLCSS-로그인-페이지-제작시-알아두면-좋을-태그-및-속성들저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)