[스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(1)
2022. 10. 30. 22:16ㆍHTML
CSS를 활용하여 로그인 페이지 만들어보기의 예제가 제공되었습니다.
본격적으로 더 다양한 태그들을 활용하여 웹페이지를 꾸며보는 시간~
대상은 바로 아래, (This is) 스파르타!
(1) '박스'란 무엇이냐.
= <div> 태그다. 즉, 묶어두고 싶은 객체들이 있으면 <div> 태그를 활용해서 묶어라.
(2) 적극적으로 객체에 이름 붙여주기 활용
class = "mytitle" 과 .mytitle
(3) <style>에 사용되는 다양한 태그들
- background-color: 배경색 조정, 세미콜론(;) 써야함
- width: 너비 조절, 픽셀로 함, 세미콜론(;) 써야함
- height: 높이 조절, 픽셀로 함, 세미콜론(;) 써야함
- text-align: 텍스트 정렬, 세미콜론(;) 써야함
- background-image: 배경그림 제어, url(" ") 로 기재, 세미콜론(;) 써야함.
- background-size: background-image, background-position 과 항상 세트로 사용, 세미콜론(;) 써야함.
- background-position: background-image, background-size 과 항상 세트로 사용, 세미콜론(;) 써야함.
- border-radius: 귀퉁이 둥그렇게 하는 것, 픽셀로 함, 세미콜론(;) 써야함.
저는 그냥 튜터님 하는거 보고 따라했어요.
더보기
사용한 코딩은 아래와 같습니다.
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<style>
.mytitle {
background-color:green;
width: 300px;
height: 200px;
color: white;
text-align: center;
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;
border-radius: 50px;
padding-top: 40px;
}
.mybtn {
margin: 50px;
}
</style>
</head>
<body>
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력해 주세요</h5>
</div>
<p>ID: <input type="text"/></p>
<p>PW: <input type="text"/></p>
<button class="mybtn"> 로그인하기</button>
</body>
</html>
이제 CSS까지 더해지니 뭔가 코딩해보는 것 같은 모양새가 나오네요.
근데 이것도 아직은 다 새발의 피라는 거...ㅋㅋㅋ
참고로 마진과 패딩의 차이를 기억해두면 좋을 것 같더라구요.
- margin: 객체의 바깥 여백 조절, 상하좌우 여백 조절 가능, 픽셀로 함, 세미콜론(;) 써야함.
- padding: 객체의 안쪽 여백 조절, 상하좌우 여백 조절 가능, 픽셀로 함, 세미콜론(;) 써야함.
01
'HTML' 카테고리의 다른 글
| [스파르타코딩클럽] 1주차 6번째 - 폰트, 주석, 파일분리 (0) | 2022.10.30 |
|---|---|
| [스파르타코딩클럽] 1주차 5번째 - 자주 쓰는 CSS 연습하기(2) (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 4번째 - CSS 기초 (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 3번째 - 간단한 로그인 페이지 만들기 (0) | 2022.10.30 |
| [스파르타코딩클럽] 1주차 2번째 - HTML, CSS 기본내용 (0) | 2022.10.30 |