본문 바로가기
Java 웹 개발

21.11.03 - 웹 개발 입문 58일차

개발이란 2021. 11. 3. 20:35

 

디자인 - 색상(color)

 RGB 방식
= Red, Green, Blue 후레시를 이용한 색상 생성 방식(빛의 3원색)
= 값이 클 수록 밝아진다
= 0(0x00)부터 255(0xFF)까지 설정이 가능하다
= 전부다 255면 흰색, 전부다 0이면 검은색

 

RGBA 방식
= A(Alpha)를 통해 투명도를 설정할 수 있다.
= 0(0%) 부터 1(100%) 까지 설정이 가능하다.
= hex string에서는 00(0%) 부터 FF(100%) 사이에서 설정한다.

 

HSL 방식
= Hue(색조), Saturation(채도), Lightness(명도)를 이용한 색상 방식
= 색상환에서 색상을 숫자로 (0~359) 범위에서 선택하여 사용(각도)
= 0은 360과 같다
= 채도와 명도는 0%부터 100%까지 설정한다.

<!DOCTYPE html>
<html lang="en">
<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>색상 설정</title>
    <style>
        .color-1 {
            color:red;
        }
        .color-2 {
            color:rgb(255, 0, 0);
        }
        .color-3 {
            color:#FF0000;
        }
        .color-4 {
            color:rgba(255, 0, 0, 0.5);
        }
        .color-5 {
            color: #FF000080;
        }
        .color-6 {
            /* 색상환 0deg의 색상(빨강) + 100%의 선명도 + 50%의 밝기 */
            color:hsl(0, 100%, 50%);
        }
    </style>
</head>
<body>
    <h1 class="color-1">color-1</h1>
    <h1 class="color-2">color-2</h1>
    <h1 class="color-3">color-3</h1>
    <h1 class="color-4">color-4</h1>
    <h1 class="color-5">color-5</h1>
    <h1 class="color-6">color-6</h1>
</body>
</html>

 

 

디자인 - 컨테이너와 행 디자인

CSS 파일
= 디자인 코드만 모아두는 파일
= 매 페이지마다 새롭게 디자인을 하지 않도록 자주 사용하는 디자인을 보관

 

- commons.css 생성

/*
    모든 디자인은 크기(폭, 높이) 기준을 "테두리"까지로 한다.
    모든 디자인에는 고딕(sans-serif)체를 적용한다.
*/
* {
    box-sizing : border-box;
    font-family: sans-serif;
}

/*
    모든 영역은 컨테이너를 만들면서 시작한다.
    자주 사용할 컨테이너를 크기별로 준비해둔다.(100px ~ 1000px)
*/
div {
    border:1px dotted gray;/* 개발을 위한 테두리 속성 */
}
.container-100 {width:100px;}
.container-200 {width:200px;}
.container-300 {width:300px;}
.container-400 {width:400px;}
.container-500 {width:500px;}
.container-600 {width:600px;}
.container-700 {width:700px;}
.container-800 {width:800px;}
.container-900 {width:900px;}
.container-1000 {width:1000px;}

/*
    컨테이너 내부에는 행(row)을 배치하여 자리를 확보한다.
*/
.row {
    margin-top: 10px;
    margin-bottom: 10px;
}

/*
    form 입력요소 스타일링
    
    = .form-input은 입력창
    = .form-btn은 버튼
    = 기본적으로 100%의 폭을 가지도록 설정
*/
.form-input, .form-btn {
    width:100%;
    font-size: 20px;
    padding:10px;
}
.form-input {
    border:1px solid rgb(43, 48, 90);
}
.form-btn {
    color:white;
    background-color: rgb(43, 48, 90);
    font-weight: bold;
}

/*
    내용 정렬 스타일링
    .left = 왼쪽 정렬(기본값)
    .center = 가운데 정렬
    .right = 오른쪽 정렬
*/
.left {
    text-align: left;
}
.center {
    text-align: center;
}
.right {
    text-align: right;
}

/*
    영역 배치
    .container-left = 영역 왼쪽 배치
    .container-center = 영역 가운데 배치
    .container-right = 영역 오른쪽 배치
*/
.container-left {
    margin-left: 0;
    margin-right: auto;
}
.container-center {
    margin-left: auto;
    margin-right:auto;
}
.container-right {
    margin-left: auto;
    margin-right:0;
}

 

- 로그인 만들기 [1]

<!DOCTYPE html>
<html lang="en">
<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>Document</title>

    <!-- commons.css 를 연결시켜 사용하는 코드 -->
    <link rel="stylesheet" type="text/css" href="commons.css">

</head>
<body>
    <form>
        <div class="container-500 container-center">
            <div class="row center">
                <h1>로그인</h1>
            </div>
            <hr>
            <div class="row">
                <input type="text" name="memberId" placeholder="이메일" required class="form-input">
            </div>
            <div class="row">
                <input type="password" name="memberPw" placeholder="비밀번호" required class="form-input">
            </div>
            <div class="row">
                <input type="submit" value="로그인" class="form-btn">
            </div>
        </div>
    </form>
</body>
</html>

 

 

- 로그인 만들기 [2]

<!DOCTYPE html>
<html lang="en">
<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>뽐뿌 로그인</title>
    <link rel="stylesheet" type="text/css" href="./commons.css">
    <style>
        .logo-image {
            width:200px;
            margin:20px 0px;
        }
        /* 디자인 재정의 */
        .form-input {
            border:1px solid rgb(255, 171, 56);
        }
        .form-btn {
            background-color: rgb(255, 171, 56);
            border:none;
        }
        div {
            border:none;
        }
    </style>
</head>
<body>
    <form>
        <div class="container-400 container-center">
            <div class="row center">
                <img src="./image/ppomppu-logo.png" class="logo-image">
            </div>
            <div class="row">
                <input type="text" name="memberId" placeholder="아이디" required class="form-input">
            </div>
            <div class="row">
                <input type="password" name="memberPw" placeholder="비밀번호" required class="form-input">
            </div>
            <div class="row">
                <input type="submit" value="로그인" class="form-btn">
            </div>
        </div>
    </form>
</body>
</html>

 

 

 

디자인 - 입력창 라벨

라벨은 입력창에 붙이는 이름표 역할을 수행하는 태그
= for 속성에 대상 입력창의 ID를 작성하면 라벨을 선택했을 경우 입력창이 선택되도록 설정

 

- 라벨을 사용하여 로그인 만들기

<!DOCTYPE html>
<html lang="en">
<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>라벨의 활용</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>

    </style>
</head>
<body>
    <div class="container-400 container-center">
        <div class="row center">
            <h1>로그인</h1>            
        </div>
        <hr>
        <div class="row">
            <label for="id-input">아이디</label>
            <input type="text" name="memberId" required class="form-input" id="id-input">
        </div>
        <div class="row">
            <label>비밀번호</label>
            <input type="password" name="memberPw" required class="form-input">
        </div>
        <div class="row">
            <input type="checkbox" name="remember" id="remember">
            <label for="remember">아이디 기억하기</label>
        </div>
        <div class="row">
            <input type="submit" value="로그인" class="form-btn">
        </div>
    </div>
</body>
</html>

 

- 라벨을 이용하여 회원가입 만들기 [1]

<!DOCTYPE html>
<html lang="en">
<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>회원가입</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>

    </style>
</head>
<body>
    <form action="?" method="post">
        <div class="container-500 container-center">
            <div class="row center">
                <h1>회원가입</h1>
            </div>
            <div class="row">
                <label>아이디</label>
                <input type="text" name="memberId" required class="form-input">
            </div>
            <div class="row">
                <label>비밀번호</label>
                <input type="password" name="memberPw" required class="form-input">
            </div>
            <div class="row">
                <label>닉네임</label>
                <input type="text" name="memberNick" required class="form-input">
            </div>
            <div class="row">
                <label>생년월일</label>
                <input type="date" name="memberBirth" required class="form-input">
            </div>
            <div class="row">
                <label>이메일</label>
                <input type="email" name="memberEmail" class="form-input">
            </div>
            <div class="row">
                <label>전화번호</label>
                <input type="tel" name="memberPhone" class="form-input">
            </div>
            <div class="row">
                <label>프로필</label>
                <input type="file" name="attach" class="form-input">
            </div>
            <div class="row">
                <input type="submit" value="가입" class="form-btn">
            </div>
        </div>
    </form>
</body>
</html>

 

- 라벨을 이용하여 회원가입 만들기 [2]

<!DOCTYPE html>
<html lang="en">
<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>회원가입</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        .form-input {
            border-color: black;
        }
        .form-btn {
            background-color: black;
        }
        div {
            border:none;
        }
    </style>
</head>
<body>
    <form>
        <div class="container-500 container-center">
            <div class="row center">
                <h2>회 원 가 입</h2>
            </div>
            <div class="row">
                <label>ID</label>
                <input type="text" name="" placeholder="8~20자 영문 소문자 또는 숫자" required class="form-input">
            </div>
            <div class="row">
                <label>Password</label>
                <input type="password" name="" placeholder="8~16자 영문 대/소문자, 숫자, 특수문자" required class="form-input">
            </div>
            <div class="row">
                <label>Phone</label>
                <input type="tel" name="" placeholder="- 제외한 11자리 휴대폰번호" required class="form-input">
            </div>
            <div class="row">
                <label class="form-block">Address</label>
                <input type="text" name="" placeholder="우편번호" class="form-input form-inline" size="6" maxlength="6">
                <input type="button" value="주소 검색" class="form-btn form-inline">
            </div>
            <div class="row">
                <input type="text" name="" placeholder="기본 주소" class="form-input">
            </div>
            <div class="row">
                <input type="text" name="" placeholder="상세 주소" class="form-input">                
            </div>
            <div class="row">
                <input type="submit" value="가입하기" class="form-btn">                
            </div>
        </div>
    </form>
</body>
</html>

 

 

디자인 - textarea 스타일링

textarea 스타일링
= 우리가 만드는 페이지에서 textarea의 가로 변경은 허용하지 않는다.
= textarea는 기본적으로 크기 변경이 불가능하게 만들고, 세로 변경은 class="vertical"을 추가

<!DOCTYPE html>
<html lang="en">
<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>게시글 작성</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        textarea {
            resize:none;
        }
        textarea.vertical {
            resize: vertical;
            min-height:200px;
        }
    </style>
</head>
<body>
    <form>
        <div class="container-700 container-center">
            <div class="row center">
                <h1>새글 작성</h1>
            </div>
            <div class="row">
                <label>제목</label>
                <input type="text" name="" required class="form-input" autocomplete="off">
            </div>
            <div class="row">
                <label>내용</label>
                <textarea name="" required class="form-input" rows="10"></textarea>
            </div>
            <div class="row">
                <label class="form-block">첨부파일</label>
                <input type="file" name="" class="form-input form-inline">
            </div>
            <div class="row">
                <input type="submit" value="게시글 등록" class="form-btn">
            </div>
        </div>
    </form>
</body>
</html>

 

 

 

디자인 - a태그

하이퍼링크 스타일링
= 링크는 다양한 상태를 가지고 있다.
= a:link 는 link가 설정된 a태그를 의미
= a:visited 는 방문한 주소의 a태그를 의미
= a:hover 는 마우스가 올라간 a태그를 의미
= 이와 같이 특정 상태의 태그를 선택하는 선택자를 상태 선택자라고 한다
= a 태그는 inline 속성을 가지므로 폭을 설정할 수 없다.

<!DOCTYPE html>
<html lang="en">
<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>하이퍼링크 스타일링</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        a:link {
            color:red;
        }
        a:visited {
            color:gray;
        }
    </style>
</head>
<body>
    <a href="https://www.google.com">구글로 이동</a>
    <a href="https://www.naver.com">네이버로 이동</a>
    <a>주소 없는 링크</a>
</body>
</html>

 

디자인 - Pagination

페이징 스타일링
        
연계 선택자(자손 선택자)
= .pagination 안에 있는 a태그만 선택하고 싶은 경우
= .pagination > a
= 모든 a태그를 수정하면 위험하므로 원하는 영역으로 제한하여 수정
                   
REM
= 글자 크기에 비례하여 설정하는 비율형 크기
= 2.5rem은 기본 글자 높이의 2.5배라는 의미
= 글자 크기가 변할 수 있는 경우 유용하게 사용 가능

<!DOCTYPE html>
<html lang="en">
<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>Pagination</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        .pagination {
            text-align: center;
        }
        .pagination > a, 
        .pagination > a:link, 
        .pagination > a:visited {
            color:black;
            text-decoration: none;
            border:1px solid gray;
            min-width:2.5rem;
            display: inline-block;
            text-align: center;
            padding:0.5rem;    
        }
        .pagination > a:hover,
        .pagination > a.active{
            color:red;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <!--
        바깥을 감쌀 div태그, 이동할 수 있는 링크인 a태그로 pagination navigator를 구현
    -->
    <div class="pagination">
        <a href="#">&lt;</a>
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#" class="active">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
        <a href="#">7</a>
        <a href="#">8</a>
        <a href="#">9</a>
        <a href="#">10</a>
        <a href="#">&gt;</a>
    </div>
</body>
</html>

 

 

 

디자인 - 이미지 디자인(공용스타일과 확장스타일)

<!DOCTYPE html>
<html lang="en">
<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>이미지 스타일링</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        /*
            이미지 스타일
            - 공용 스타일 : .image
            - 확장 스타일
                .image-round : 둥근 이미지
                .image-border : 테두리가 있는 이미지
                .image-hover : 마우스가 올라가면 테두리가 생기는 이미지
                .image-blur : 마우스가 올라가면 선명해지는 이미지
                .image-shadow : 그림자가 생기는 이미지
                .image-leaf : 나뭇잎 모양의 이미지
        */
        .image {
            border:2px solid transparent;
        }
        .image.image-round {
            border-radius: 50%;
        }
        .image.image-border ,
        .image.image-hover:hover {
            border:2px solid gray;
        }
        .image.image-blur {
            /* 
                opacity를 이용하여 불투명 정도를 0(0%) 부터 1(100%) 사이에서 설정 
                background에 부여하는 alpha는 배경만 투명해지지만, opacity는 태그 전체가 투명(내용물 포함)
            */
            opacity: 0.4;
        }
        .image.image-blur:hover {
            opacity: 1;
        }
        .image.image-shadow {
            /*
                box-shadow : x축위치 y축위치 번짐정도 확장크기 색상
                box-shadow: 5px 5px 0px 0px black;
            */
            box-shadow: 0px 0px 10px 2px yellow;
        }
        .image.image-leaf {
            border-top-left-radius: 50%;
            border-bottom-right-radius: 50%;
        }
    </style>
</head>
<body>
    <img src="https://via.placeholder.com/200x200" class="image image-round">
    <img src="https://via.placeholder.com/200x200" class="image image-border">
    <img src="https://via.placeholder.com/200x200" class="image image-round image-border">
    <img src="https://via.placeholder.com/200x200" class="image image-hover">
    <img src="https://via.placeholder.com/200x200" class="image image-blur">
    <img src="https://via.placeholder.com/200x200" class="image image-shadow">
    <img src="https://via.placeholder.com/200x200" class="image image-leaf">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
    <img src="https://via.placeholder.com/200x200" class="image">
</body>
</html>

 

 

디자인 - 테이블 스타일링

<!DOCTYPE html>
<html lang="en">
<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>테이블 스타일링</title>
    <link rel="stylesheet" type="text/css" href="commons.css">
    <style>
        /*
            테이블 스타일링
            = table은 태그가 한 개가 아니다.
            - 공용 스타일 : .table
            - 확장 스타일
                    .table-border - 테두리 추가
                    .table-hover - 마우스가 올라간 줄에 배경색이 표시되는 효과 부여(내용만)
                    .table-stripe - 줄무늬 테이블
        */

        .table {
            width:100%;
        }
        .table > thead > tr > th, 
        .table > thead > tr > td,
        .table > tbody > tr > th,
        .table > tbody > tr > td,
        .table > tfoot > tr > th,
        .table > tfoot > tr > td {
            padding:0.5rem;
            text-align: center;
        }

        .table.table-border {
            border:1px solid black;
            border-collapse: collapse;
        }
        .table.table-border > thead > tr > th, 
        .table.table-border > thead > tr > td,
        .table.table-border > tbody > tr > th,
        .table.table-border > tbody > tr > td,
        .table.table-border > tfoot > tr > th,
        .table.table-border > tfoot > tr > td {
            border:1px solid black;
        }

        .table.table-hover > tbody > tr:hover {
            background-color:#EEEEEE;
        }

        /*
            :nth-child(2n) 일 경우 n=1부터 증가하면서 패턴으로 적용
        */
        .table.table-stripe > thead > tr,
        .table.table-stripe > tbody > tr:nth-child(2n) {
            background-color:#EEEEEE;
        }
    </style>
</head>
<body>

    <table class="table table-border table-stripe">
		<thead>
			<tr>
				<th>번호</th>
				<th>이름</th>
				<th>과목</th>
				<th>유형</th>
				<th>점수</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>피카츄</td>
				<td>수학</td>
				<td>필기</td>
				<td>50</td>
			</tr>
			<tr>
				<td>2</td>
				<td>라이츄</td>
				<td>수학</td>
				<td>필기</td>
				<td>60</td>
			</tr>
			<tr>
				<td>3</td>
				<td>파이리</td>
				<td>수학</td>
				<td>필기</td>
				<td>55</td>
			</tr>
		</tbody>
		<tfoot>

		</tfoot>
	</table>
</body>
</html>

'Java 웹 개발' 카테고리의 다른 글

21.11.05 - 웹 개발 입문 60일차  (0) 2021.11.06
21.11.04 - 웹 개발 입문 59일차  (0) 2021.11.04
21.11.02 - 웹 개발 입문 57일차  (0) 2021.11.02
21.10.29 - 웹 개발 입문 55일차  (0) 2021.10.29
21.10.28 - 웹 개발 입문 54일차  (0) 2021.10.28

'Java 웹 개발' Related Articles

티스토리툴바