로그인 페이지

1. CSS

꾸밀 대상을 지정해야 함.
class="이름표"
<style>태그 안에 이름표. {} 를 적고 시작

📝 예제1

1) <div> 태그로 박스 공간 만들기
2) 박스 안에 들어갈 내용 입력
3) class 지정 후 <style>태그에서 꾸미기
- 가로, 세로 사이즈 지정 (width / height)
- 내용 정렬 (text-align)
- 텍스트 컬러 (color)
- 여백 지정 (margin / padding)
- 배경 지정 (background - image / color)
- 배경 이미지의 크기 & 위치 (gackground - size / position)

[사이즈 / 텍스트 컬러 및 정렬]

width: 300px;
height: 200px;

color: white;

text-align: center;

[배경 이미지용 set]

background-image: url("이미지 주소");
background-size: cover;
background-position: center;

[margin 활용]

margin: auto; - 양 방향에서 최대한 미는 것. 중앙에 위치하게 됨. 
margin: 0(px) auto; - 위아래 여백 지정, 좌우 중앙. ★
margin: 0px 0px 0px 0px; - 시계방향으로 각 여백 크기 지정.
margin-top: 0px; - 방향을 지정해서 여백 크기 지정.

📝예제2

1~3) 동일
- width: 100%; : 가로 꽉 차게
- background-image에 linear-gradient 속성을 사용하면 배경 이미지에 그라데이션이나 컬러를 입힐 수 있음.

[위 예제의 배경 이미지 + 어둡게 하기 set]

background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("이미지 링크");
background-position: center;
background-size: cover;

4) <button> 입력 후 <style>에서 꾸미기
- .class명 > button {}로 별도 class 지정 없이 해당 <div>안의 button을 지정하여 꾸밀 수 있음.
- border-radius: 0px; : 모서리 둥글리기
- .class명 > button:hover {}로 마우스를 올렸을 때 모습을 꾸밀 수 있음.

[위 예제의 버튼 코드 set]

.mytitle > button {
	width: 200px;
	height: 50px;

	background-color: transparent;
	color: white;

	border-radius: 50px;

	border: 1px solid white;

	margin-top: 10px;
}

[마우스 올렸을 때 선 굵어지게 하기]

.mytitle > button:hover {
	border: 2px solid white;
}

5) 공간 안의 내용물 정렬

[박스 안의 내용들 정렬 set]

display: flex;
flex-direction: column;(세로) / row;(가로)
justify-content: center;
align-items: center;

📝예제3

- box-shadow: : 테두리 그림자

[예제에 사용된 박스 그림자 코드]

box-shadow: 0px 0px 3px 0px gray;
            padding: 20px;

폰트 적용
1) 구글 웹폰트에서 폰트 선택
2) Select this style
3) 코드 복사 후 <head>안에 넣기 (title 밑에)
❓ 왜 모든 코드를 안넣지? rel과 href차이가 뭐지?
4) CSS 코드 복사 후 <style>안에 * {}안에 넣기.
* 은 모든 태그에 적용하겠다는 의미

페이지 분리
- CSS 코드가 너무 길어질 때, CSS페이지로 분리 가능.
1) <style>코드 안의 내용을 CSS페이지에 입력.
2) <head>코드 안에 <style>대신 아래 코드로 연결.
<link rel="stylesheet" type="text/css" href = "페이지이름.css">
👆 같은 폴더 안의 파일을 불러오는 것.

부트스트랩
- 부트스트랩 사이트에서 필요한 CSS를 불러다가 활용.
- <head>태그 안에 아래 태그들을 입력해서 연결.
- <body>에 복사한 코드 내용 입력.
👆 CSS페이지를 연결하는 것과 같은 원리.

<head>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"></script>

</head>

모바일 호환용 사이즈
1) max-width에 px로 사이즈 지정
2) width에 %로 사이즈 지정

💡 display 속성

1) block : 새로운 라인에서 시작. 해당 라인의 모든 너비를 차지.
<div>, <p>, <h>, <ul>, <ol>, <form>

2) inline : 새로운 라인에서 시작하지 않음. 해당 요소의 내용만큼만 너비 차지.
<span>, <a>, <img>

💡 단축키

ctrl + alt + L : 코드 줄맞춤
shift + tab : 들이기

💡이모지
https://kr.piliapp.com/facebook-symbols/

Author And Source

이 문제에 관하여(로그인 페이지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@haripot/로그인-페이지

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

로그인 페이지

1. CSS

💡 display 속성

Author And Source

좋은 웹페이지 즐겨찾기