이미지
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>로그인페이지</title> <style> .mytitle { color: white; width: 300px; height: 200px; background-image: url('이미지 url 주소'); background-position: center; background-size: cover; border-radius: 10px; text-align: center; padding-top: 40px; } * 로그인 화면을 가운데로 정렬하기 * 가운데로 정렬이 안되면 display:block 추가하기 .wrap { margin: 10px auto; width: 300px; } </style> </head>
<body> <div class="wrap"> <div class="mytitle"> <h1>로그인 페이지</h1> <h5>아이디, 비밀번호를 입력해주세요</h5> </div> <div> <p> ID: <input type="text" /> </p> <p> PW: <input type="password" /> </p> <button>로그인하기</button> </div> </body> </body>
폰트 넣기
* 구글 웹폰트 사용시, - <head> ~ </head> 사이에는 link 태그 <style> ~ </style>사이에는 CSS를 복사하여 붙여넣기 - CSS 앞에 *을 붙이면 모든 곳에 폰트가 적용됨 <head> <meta charset="UTF-8"> <title>로그인페이지</title> <link href="폰트 링크"> <style> * { font-family: CSS; }
주석 달기
- 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때 - 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용 - 주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아서 개발자 본인 또는 동료를 위해 사용 * 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / * htm; : 컨트롤+시프트+/ *javascipt/java : // (한 줄), /* 또는 */ (여러줄)
