728x90
SMALL
문제없는 줄 알았지...
하지만 창을 키워보니
너 왜 도망가는데;;;;
- 또는 기본코드
<!DOCTYPE html>
<html>
<head>
<title>또는!</title>
<style>
html, body {
margin: 0;
}
*, *::before, *::after {
box-sizing: border-box;
}
h1, h2, h3 {
margin: 0;
}
.custom-hr1 {
width: 40vw;
background-color: beige;
margin: 0 auto;
text-align: center;
}
.custom-hr1 > h1 {
overflow: hidden;
text-align: center;
}
.custom-hr1 > h1::before,
.custom-hr1 > h1::after {
background-color: #000;
content: '';
display: inline-block;
height: 1px;
position: relative;
vertical-align: middle;
width: 50%;
}
.custom-hr1 > h1:before {
right: 0.5em;
margin-left: -50%;
}
.custom-hr1 > h1:after {
left: 0.5em;
margin-right: -50%;
}
</style>
</head>
<body>
<div class="custom-hr1">
<h1>또는</h1>
</div>
</body>
</html>쌤이 보내주신기본코드
body에는 div하나에 h1만 넣었음
그리고 after before를 사용해줌
- -또는- 구현한 코드 ㅋㅋ
<!--'또는' 구현 version-->
<!DOCTYPE html>
<html>
<head>
<title>newneek</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap"
rel="stylesheet">
<style>
html,
body {
margin: 0;
background-color: #ebebeb;
font-family: 'Noto Sans KR', sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
p {
margin: 0;
}
/*전역변수 설정 완료*/
.container {
max-width: 270px;
height: 140vh;
margin: 0 auto;
}
/*제일 큰 상자의 폭과, 높이, 마진값(중간정렬가능하게끔)*/
.container>.logo {
margin-top: 3rem;
text-align: center;
margin-bottom: 30px;
}
/*로고정렬 */
.form-box-field {
margin-bottom: 10px;
}
/*각각의 formbox 창과의 공간주기위해 marginbottom*/
.form-box-field-input {
height: 35px;
width: 100%;
text-indent: 8px;
border: 1px solid black;
outline: none;
}
/*formbox들의 높이, 폭, 들여쓰기, 보더설정*/
.form-box-field-input::placeholder {
/*가상선택자는 콜론두개*/
color: #b9b8b8;
font-size: 0.05rem;
font-weight: 400;
}
/*placeholder에 대한 설정, 폰트는 여기서 바꿔준다*/
.form-box-field-input:focus {
border-color: #aaaaaa;
transition: border 0.3s ease-in-out;
}
/*formbox가 focus됐을 때 easeinout으로 불켜주듯이 색넣어줌*/
.terms-box label {
font-size: 0.5rem;
font-weight: 500;
}
/*약관라벨의 폰트사이즈와 굵기설정*/
.showterms {
float: right;
margin-top: 6px;
text-decoration: underline;
cursor: pointer;
}
/*약관에 있는 라벨 중 약관보기의 설정(float:right로 오른쪽에 정렬해줌),
위치안맞아서 margintop으로 조정해줌,
실제 링크가 아니기때문에 링크효과로 보일 수 있게 textdeco로 underline속성주고 cusor는 pointer로 설정*/
.sign-in {
margin-top: 35px;
}
/*가입하기창과 약관부분의 공간을 주기위해 margintop설정*/
.sign-in-field-input {
width: 100%;
height: 35px;
font-size: 0.6rem;
font-weight: 600;
outline: none;
background-color: black;
border: 1px solid black;
color: white;
}
/*가입하기창의 폭, 높이, 폰트사이즈/굵기/색깔, 배경색과 보더색지정*/
.sign-in-field-input:hover {
background-color: white;
cursor: pointer;
color: black;
}
/*커서올려뒀을때 색 반전시키는 기능*/
.otherlogin-sign-in-field-input {
width: 100%;
height: 35px;
font-size: 0.6rem;
font-weight: 600;
outline: none;
background-color: green;
border: 1px solid green;
color: white;
margin-bottom: 10px;
}
/*네이버로 로그인하는 창*/
.otherlogin-sign-in-field-input2 {
width: 100%;
height: 35px;
font-size: 0.6rem;
font-weight: 600;
outline: none;
background-color: rgb(248, 225, 19);
border: 1px solid rgb(248, 225, 19);
color: rgb(66, 54, 54);
margin-bottom: 30px;
}
/*카카오로 로그인하는창, otherlogin-sign-in-field-input에서 색만 바꿔줬음(비효율적이라서 다른방법모색)*/
.otherlogin-sign-in-field-input:hover {
background-color: white;
cursor: pointer;
color: black;
border: 1px solid black;
}
.otherlogin-sign-in-field-input2:hover {
background-color: white;
cursor: pointer;
color: black;
border: 1px solid black;
}
/*각각 커서올려뒀을 때 흰색으로 반전되는 기능*/
h1 {
margin: 0;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 30px;
}
.custom-hr1 {
width: 100%;
margin: 0 auto;
text-align: center;
}
.custom-hr1>h1 {
overflow: hidden;
text-align: center;
}
.custom-hr1>h1::before,
.custom-hr1>h1::after {
background-color: #000;
content: '';
display: inline-block;
height: 0.8px;
position: relative;
vertical-align: middle;
width: 50%;
}
.custom-hr1>h1:before {
right: 0.5em;
margin-left: -50%;
}
.custom-hr1>h1:after {
left: 0.5em;
margin-right: -50%;
}
/*또는 부분 구현*/
</style>
</head>
<body>
<div class="container">
<div class="logo">
<img src="https://newneek.co/static/media/logo.334be7e9.png" , width="170" />
</div>
<div class="otherlogin">
<div class="sign-in-field">
<input class="otherlogin-sign-in-field-input" type="submit" value="NAVER 로그인" />
</div>
<div class="sign-in-field">
<input class="otherlogin-sign-in-field-input2" type="submit" value="KAKAO 로그인" />
</div>
<div class="custom-hr1">
<h1>또는</h1>
</div>
</div>
<main>
<form class="form-box">
<div class="form-box-field">
<input class="form-box-field-input" type="email" placeholder="이메일" />
</div>
<div class="form-box-field">
<input class="form-box-field-input" type="password" placeholder="비밀번호 (8자 이상)" />
</div>
<div class="form-box-field">
<input class="form-box-field-input" type="password" placeholder="비밀번호 확인 (8자 이상)" />
</div>
<div class="form-box-field">
<input class="form-box-field-input" type="text" placeholder="닉네임" />
</div>
<div class="terms-box">
<div>
<input id="dong-eui1" type="checkbox" />
<label for="dong-eui1">만 14세 이상 가입 동의 (필수)</label>
</div>
<div>
<input id="dong-eui2" type="checkbox" />
<label for="dong-eui2">뉴닉 이용약권 동의 (필수)</label>
<label class="showterms">약관보기</label>
</div>
<div>
<input id="dong-eui3" type="checkbox" />
<label for="dong-eui3">개인정보 수집/이용동의 (필수)</label>
<label class="showterms">약관보기</label>
</div>
<div>
<input id="dong-eui4" type="checkbox" />
<label for="dong-eui4">뉴스레터 및 이벤트 정보 수신동의 (선택)</label>
</div>
</div>
</form>
</main>
<footer class="sign-in">
<div class="sign-in-field">
<input class="sign-in-field-input" type="submit" value="가입하기" />
</div>
</footer>
</div>
</body>
</html>
아무리 코드긁어와도 내꺼에 붙히면 제대로 안되는게 국룰;
다시 어쩌고 수정해주고 또 바꿔주면 완.
이제 큰 창에서도 편-안
728x90
LIST
'Front > Html, css,jsp' 카테고리의 다른 글
| header, footer모듈화 (0) | 2020.12.11 |
|---|---|
| jsp 특징 (0) | 2020.12.10 |
| 20201118 newneek회원가입창 따라만들어보기 (0) | 2020.11.18 |
| 20201116_36 박스움직이기, 순회하며 수정 (0) | 2020.11.16 |
| 20201111_34 flex (0) | 2020.11.11 |
댓글