그동안 자바 독학한다고 html,css에 손 놨었는데 SWcamp 등록하고 다시 시작.
얼마나 손을 놨었냐면 주석까지 까먹음 념념긋,,,ㅎ
다시 상기시키는 좋은 기회다. 게을리 하면 죽음뿐.
<!--h1 : 제목(표제), h1~h6까지 있음-->
<h1>로그인 페이지</h1>
<!--<p>태그 : 문단 요소-->
<P>ID : <input type="text" /></P>
<p>PW : <input type="text" /></p>
<!--<button> : 인라인 요소, 단일 태그-->
<button>로그인하기</button>
결과 :
<style>
.mytitle{ /*h1에 적용되는 CSS*/
color: red;
font-size: 40px;
}
.mybtn{ /*button 태그에 적용되는 CSS*/
font-size: 12px;
color: white;
background-color: green;
}
.mytext{ /*p태그에 적용되는 CSS*/
color: green;
}
</style>
<!--각 태그에 class 이름을 붙여줌-->
<h1 class="mytitle">로그인 페이지</h1>
<P class="mytext">ID : <input type="text" /></P>
<p class="mytext">PW : <input type="text" /></p> <!--class 이름이 같으면 같이 적용-->
<button class="mybtn">로그인하기</button>
결과
🔑 주요 keyword
: div
margin
padding
박스가 나온다? ➡️ div
(구역)
<div class="mytitle">
<h1>로그인 페이지</h1>
<h5>아이디, 비밀번호를 입력하세요</h5>
</div>
div
적용 시 :
div
크기 변경하기
<style>
.mytitle{
background-color: green;
width: 300px; /*너비*/
height: 200px; /*높이*/
}
</style>
div
크기 변경 결과
margin
: 바깥쪽 여백
.mybtn{
margin: 20px 20px 20px 20px; /*상-우-하-좌 순(시계방향), 전체 값이 같을 경우 한번만 입력해도 됨.*/
}
margin
크기 변경 결과
padding
: 안쪽 여백
.mybtn{
padding: 20px 20px 20px 50px; /*순서는 margin과 동일*/
}
margin
크기 변경 결과
/*h1 로그인페이지 안쪽 여백 위치 조정하기*/
padding-top: 30px; /* = padding: 30px 0px 0px 0px; */
/*이 3개는 set*/
background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
background-position: center; /*이미지의 보여질 위치*/
background-size: cover; /*이미지가 꽉 맞게 나옴*/
결과
🔑 keyword
: auto
.wrap{
/* background-color: green; 맨 처음 사이즈 확인용 */
width: 300px;
margin: 20px auto 0px auto; /*auto로 좌 우 여백 정렬*/
}
결과
<style>
@import url('https://fonts.googleapis.com/css2?family=Hahmlet&display=swap');
*{ /* * : 모두 다 */
font-family: 'Hahmlet', serif;
}
</style>
결과
결과물
.mytitle { /*[내 생애 최고의 영화들]*/
color: white;
height: 250px;
/*4줄 set. 내용물을 정렬*/
display: flex;
flex-direction: column;
/*세로 정렬 : column, 가로 정렬 : row */
align-items: center;
justify-content: center;
background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
url('이미지 url 입력하는 곳');
background-position: center;
background-size: cover;
}
.mytitle>button { /*[영화 기록하기]*/
width: 250px;
/*mytitle 아래에 있는 button 소환*/
height: 50px;
background-color: transparent;
/*button 배경색 없어짐*/
border: 1px solid white;
/*button 테두리 설정*/
color: white;
border-radius: 50px;
/*모서리 둥글*/
margin-top: 20px;
/*h1과 간격 띄우기*/
}
.mytitle>button:hover {
/*마우스 올렸을 때 굵어지게 효과 주기*/
border: 2px solid white;
}
.mypost{ /*[기록하는 부분]*/
width: 500px;
margin: 20px auto 20px auto;
padding: 20px;
box-shadow: 0px 0px 3px 0px gray;
/*가운데로부터 그림자 길이 조정*/
}