HTML&CSS 강의
Login_Tailwind CSS
"server": "live-server src"src폴더안에 있는 index.html을 실행하라
mode: 'jit' // 커스텀 속성을 설정하기 위해 이 모드를 사용.input {
@apply w-full outline-none border border-solid rounded-md p-4 focus:border-black dark:focus:border-primary;
}
tailwind에서는 이렇게 @apply를 이용해 원하는 속성을 한번에 적용 시킬 수 있음
사용할 땐.input클래스를 주면 됨
마크업
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Tailwindcss를 활용한 로그인 페이지 스타일링</title>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
rel="stylesheet" />
<link rel="stylesheet"
href="./css/style.css" />
</head>
<body>
<!-- 라이트 / 다크 모드 토글 버튼 -->
<!-- 1. 자바스크립트로 제어하기 위한 버튼 클래스 지정 (toggle-theme-button) -->
<!-- 2. body 영역을 기준으로 오른쪽 상단에 배치 / 3. 글자 및 배경색상 / 4. 라운딩 처리 / 5. 버튼 크기 고정(커스텀) -->
<button type="button"
class="toggle-theme-button absolute top-5 right-5 bg-gray-300 text-gray-700 p-4 rounded-md w-[200px]">
다크모드 보기
</button>
<!-- 전체 콘텐츠 컨테이너 -->
<!-- 1. 플렉스로 배치 (모바일 및 데스크탑 스타일) / 2. 높이 / 3. 텍스트 색상 / 4. 다크모드 텍스트 및 배경 색상 / -->
<div class="flex justify-center items-start md:items-center h-screen text-gray1 dark:text-white dark:bg-gray-900">
<!-- 데스크 탑에서 보여지게 될 로그인 콘텐츠 박스(테두리) -->
<!-- 1. 가로 크기(full) / 2. 데스크탑 최대 가로크기(md:min-w-screen-sm) / 3. 데스크탑에만 border / 4. padding-->
<div class="w-full md:max-w-screen-sm md:border md:rounded-2xl md:border-gray5 px-5 py-10 md:py-16 md:px-12">
<!-- 패스트 캠퍼스 브랜드 로고 -->
<h1 class="logo">
<a href="#">
<picture>
<!-- 운영체제 테마 전환 모드 -->
<source srcset="./images/fastcampus-logo-dark.png"
media="(prefers-color-scheme: dark)" />
<source srcset="./images/fastcampus-logo.png"
media="(prefers-color-scheme: light)" />
<!-- 커스텀 테마 전환 모드 -->
<img src="./images/fastcampus-logo.png"
alt="fastcampus" />
</picture>
</a>
</h1>
<!-- 패스트 캠퍼스 슬로건 -->
<!-- 1. 제목과 슬로건 사이 여백(margin) / 2. 글자 크기 및 색상 / 3. 다크모드 글자 색상-->
<p class="mt-5 text-3xl text-black dark:text-white">
인생을 바꾸는 교육,
<span class="block font-normal">패스트 캠퍼스.</span>
</p>
<!-- 회원 로그인 폼 -->
<!-- 1. 슬로건과 로그인 폼 사이 여백(margin) -->
<form class="mt-10">
<fieldset>
<!-- 스크린리더를 위한 유틸리티 클래스 적용 -->
<legend class="sr-only">회원 로그인 폼</legend>
<!-- 아이디 입력 서식 -->
<div class="mt-3">
<!-- 스크린리더를 위한 유틸리티 클래스 적용 -->
<label for="userId"
class="sr-only">아이디</label>
<!-- 1. 테두리 관련 속성 / 2. 안쪽여백 / 3. 아웃라인 제거 -->
<!-- 4. :focus 스타일 - 선색상 black / 다크모드 선색상 primary -->
<input id="userId"
name="userId"
class="input"
type="text"
placeholder="아이디"
required />
</div>
<!-- 비밀번호 입력 서식 -->
<div class="mt-3">
<label for="userPassword"
class="sr-only">비밀번호</label>
<!-- 반복되는 스타일을 @apply 디렉티브 활용 하여 tailwind.css 파일에 작성할 것 -->
<!--
.input{
@apply ;
}
.input:focus{
@apply ;
}
-->
<input id="userPassword"
name="userPassword"
class="input"
type="password"
placeholder="비밀번호"
required />
</div>
<!-- 자동 로그인 및 비밀번호 찾기 그룹 컨테이너 -->
<!-- 1. 플렉스 배치 / 2. 상하 여백(margin) / -->
<div class="items-center flex justify-between my-4">
<!-- 자동 로그인 및 비밀번호 -->
<!-- 1. relative(input 요소의 컨테이닝 블록 역할) -->
<div class="relative">
<!-- tailwind.css 파일에 추가되어 있는 코드는 주석으로 처리한 후 작성해보기 -->
<!-- 1. 웹브라우저 스타일 제거(appearance) / 2. absolute(영역을 차지하지 않도록) -->
<!-- 3. 가로 세로 크기 / 4. 위치 미세 조정 / 5. 배경이미지 커스텀을 위한 auto-login 클래스-->
<input class="appearance-none absolute w-4 h-4 top-1 auto-login"
type="checkbox"
id="autoLogin"
name="autoLogin" />
<!-- 1. 체크박스(input)와 겹치지 않도록 왼쪽에 padding 지정 -->
<!-- 2. 기본 배경이미지 및 선택상태 배경이미지 커스텀 -->
<!--
backgroundImage: theme => ({
'checkbox-default': "url('/../images/checkbox-default.png')",
'checkbox-checked': "url('/../images/checkbox-checked.png')",
}),
-->
<!-- 3. 배경이미지 반복하지 않기, 배경이미지 왼쪽 중앙 배치 -->
<label for="autoLogin"
class="pl-6 bg-checkbox-default bg-no-repeat bg-left hover:bg-checkbox-checked">
자동 로그인
</label>
</div>
<!-- 비밀번호 찾기 링크 -->
<a href="#">비밀번호 찾기</a>
</div>
<!-- 1. 가로 및 세로 크기 / 2. 테두리 라운딩 / 3. 글자 크기, 색상, 굵기 / 4. 배경 색상 /-->
<button type="submit"
class="w-full p-4 text-white bg-primary font-bold rounded-md">로그인</button>
</fieldset>
</form>
<!-- 회원가입 링크 -->
<!-- 1. 여백(margin) / 2. 텍스트 가운데 정렬 -->
<p class="mt-6 text-center">
아직 계정이 없으신가요?
<!-- 1. 글자 굵기, 밑줄 제거, 글자 색상 / 2. 다크모드 글자 색상 -->
<a class="font-bold underline text-gray1 dark:text-white"
href="#">간편 회원가입</a>
</p>
</div>
</div>
<script defer
src="js/main.js"></script>
</body>
</html>
It is possible for ordinary people to choose to be extraordinary.