2. CSS
-
개념 : CSS는 잡은 구역을 꾸며주는 것을 의미, HTML 부모-자식 구조에서 부모가 하위 구조에 대한 style담당
-
구조 및 종류 : head에 style tag를 사용하여 각 class에 대한 CSS를 .class 명으로 적용
- background-image : 이미지 url을 사용하여, 배경에 이미지를 넣는 기능
- background-size : 이미지의 크기를 지정하는데, cover는 이미지가 전체적으로 나오도록 함
- background-position : 이미지의 정렬(?)을 담당하는데, center는 이미지가 자체적으로 중앙에 위치
- color : 글자의 색을 지정
- width : 배경의 너비를 지정
- height : 배경의 높이를 지정
- border-radius : 이미지 모서리의 형태를 지정
- margin : 바깥쪽 여백 크기를 의미하며, top -> left -> bottom -> right 순으로 지정할 수 있다.- margin : auto; - 해당 이미지를 페이지에서 가운데 두고자 할때 사용, 양 여백이 동등하다는 의미
- 글속성은 가로,세로 구분이 없어 가운데 정렬하기 쉽지 않다. 때문에 글 속성(ex. button)을 box속성으로 바꾼 뒤 가운데 정렬을 할 수 있는데, 이 때 사용하는 코드가 display: bolock;이다.
-
글의 폰트를 주려면, '구글웹폰트' 등을 이용하여 link와 style을 작성하면 된다.
로그인 페이지
로그인 페이지
아이디, 패스워드를 입력해주세요
ID :
PW :
로그인하기<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인 페이지</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Do+Hyeon&family=Nanum+Pen+Script&display=swap"
rel="stylesheet">
<!-- 파일로 신행하는 방법-->
<!-- <link rel = "stylesheet" type="text/css" href = "mystyle.css">-->
<style>
*{
font-family: 'Cute Font', cursive;
font-family: 'Do Hyeon', sans-serif;
font-family: 'Nanum Pen Script', cursive;
}
.wrap{
width: 300px;
margin: auto;
}
.my_title{
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: 10px;
padding-top: 20px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="my_title">
<h1>로그인 페이지</h1>
<h5>아이디, 패스워드를 입력해주세요</h5>
</div>
<p> ID : <input type="text"/></p>
<p> PW : <input type="text"/></p>
<button> 로그인하기</button>
</div>
</body>
</html>-
css 파일의 분리 방법은 코드가 너무 길어지는 것을 방지하기 위한 방법으로 별도의 css파일을 만들어 import하는 것이다. 구체적으로 별도의 파일명.css 를 만들고, link rel = "stylesheet" type="text/css" href = "파일명.css" 을 head에 작성해주면 된다.
-
부스트 스트랩 이용 방법
- css는 디자인 요소이기 때문에, 다른 사람들이 만들어 놓은 결과물을 사용할 수 있다. 부스트 스트랩은 이러한 결과물들의 모음 사이트라고 생각하면 되며, 필요한 부분을 복사하여 사용 가능하다.
- 중요한 점은 구역을 구분하는 것이며, 웹 상에서 개발자 도구[element]에서 구역을 확인할 수 있다. 이를 보고 개발자는 필요한 부분을 check하여 코드상의 불필요한 부분을 제거할 수 있다.
- 부스트 스트랩을 사용할 때, 개발자가 특정 부분에 대한 추가사항이 있을 때는 구글 search(구글 폰트 굵기)를 통해서 작성하면 된다.
- 테두리를 원할 떄, css border mdn(공식문서)나 w3schools 에 들어가면 어떻게 작성 표준이 나와있으므로 이를 참고하면 된다.
