본문 바로가기
Java 웹 개발

21.11.02 - 웹 개발 입문 57일차

개발이란 2021. 11. 2. 21:57

디자인 - 프론트엔드

Visual Studio Code 설치

기본 설정

1. Extensions -> Live server 검색 후 설치

2. F1 누르고 -> setting 검색 후 -> Font Size(폰트 크기) Font Family(폰트 글꼴) 변경

3. F1 누르고 -> thema 검색 후 Workbench: Color Theme -> 테마 설정

4. F1 누르고 -> browser 검색 후 Live Server › Settings: Custom Browser -> chrome:PrivateMode 선택

 

 

디자인 - 인라인 스타일

인라인 스타일(inline style)
html 태그에 디자인을 설정할 수 있다.
= 속성명은 stytle이다
= 모든 태그는 style 속성을 가지고 있다.
= style 속성 내부에는 약속된 디자인 설정을 수행한다.
= 간단한 설정은 편리하게 사용 가능하다
= 어떠한 설정보다 우선 적용된다

<!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>Document</title>
</head>
<body>
    <h1 style="color:red;">CSS Design 1</h1>
    <h1 style="background-color: yellow;">CSS Design 2</h1>
    <h1 style="color: red; background-color: yellow;">CSS Design 3</h1>
    <h1 style="border:1px solid black;">CSS Design 4</h1>
    <h1 style="text-decoration: underline;">CSS Design 5</h1>
</body>
</html>

 

디자인 - style 태그

style 태그를 사용한 디자인
= html에는 <style> 태그가 존재한다.
= <style> 영역에서는 디자인 관련 처리 코드만 작성
= 별도의 영역에 디자인 설정을 해야하므로 "대상 지정"이 필요
= "대상 지정"을 위한 문법을 "선택자(selector)"라고 함
= <style> 영역은 화면에 표시되지는 않는다
= 따라서 <head>에 배치하는 것이 일반적이다. 

<!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>style 태그 사용</title>
    <style>
        /* h1 태그에 color 를 red 로 설정 */
        h1 {
            color:red;
        }
        /* h1 태그 중 첫 번째에만 배경을 yellow로 설정 */
        h1:nth-child(1) {
            background-color:yellow;
        }
    </style>
</head>
<body>
    <h1>CSS Design 1</h1>
    <h1>CSS Design 2</h1>
    <h1>CSS Design 3</h1>
    <h1>CSS Design 4</h1>
    <h1>CSS Design 5</h1>
</body>
</html>

 

 

디자인 - 선택자, id, class 선택자

선택자(selector)
= 디자인을 위해 대상을 선택(특정)하는 문법

 

1. 태그(tag) 선택자
= 태그명을 이용하여 대상을 선택하는 방법
= 모든 태그를 바꾸는 것은 매우 위험한 행동
= 추천하지 않음
h1 {
    color:blue;
}
h1 , h2 {
    color:blue;
}


2. 아이디(ID) 선택자
= 아이디(ID)란 같은 페이지 내에서 유일해야 하는 식별자
= 특정 태그에 id라는 속성을 추가하여 부여
= h1[id=first]
= [id=first]
= h1#first
= #first
#first {
    color:green;
}

 

3. 클래스(class) 선택자
= 클래스란 디자인의 편의를 위해 태그에 설정하는 식별자
= 중복 부여 가능
= 디자인의 효율성을 극대화 시킬 수 있는 선택자
= 특정 태그에 class라는 속성을 만들어서 복수의 명칭을 설정
= h1[class=test], h2[class=test]
= [class=test]
= h1.test, h2.test
= .test

<!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>선택자(selector)</title>
    <style>
        #first {
         color:green;
        }    
        .test {
            color:blue;
        }
        .test2 {
            background-color:yellow;
        }
        .test3 {
            border:1px solid black;
        }
        .test4 {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <h1 id="first">CSS Design 1</h1>
    <h1>CSS Design 2</h1>
    <h1 class="test test2 test3 test4">CSS Design 3</h1>
    <h2 class="test">CSS Design 4</h2>
    <h2>CSS Design 5</h2>
    <h2>CSS Design 6</h2>
</body>
</html>

 

디자인 - 기본 css 특성

ex. 검색창 만들기

<!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>
        .search-input {
            /* 글자 관련 설정 */
            font-size: 30px;
            font-family: 굴림, sans-serif;

            /* 크기 관련 설정 */
            width: 300px;

            /* 
                여백 관련 설정 
                - 내부 여백 : 테두리 안쪽 여백(padding)
                - 외부 여백 : 테두리 바깥쪽 여백(margin)
            */
            padding:10px;

            /*
                테두리 관련 설정(border~)
            */
            border-style: solid;
            border-width: 5px;
            border-color: green;
            border-radius: 10px;
        }
    </style> 
</head>
<body>
    <input type="text" class="search-input" 
                                    placeholder="검색어 입력">
</body>
</html>

 

 

Q. 검색창 만들기

<!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>
        /* 공통 스타일 */
        .search {
            font-family: 굴림;
            font-size: 25px;
            padding:20px;
            border-width: 3px;
            border-style: solid;
            border-color: rgb(63, 72, 204);
            border-radius: 10px;
        }
        /* 개별 스타일 */
        .search-type {
            width:350px;
        }
        .search-btn {
            background-color: rgb(63, 72, 204);
            color:white;
        }
    </style>
</head>
<body>
    <form action="?" method="?">
        <input type="text" name="keyword" placeholder="검색어 입력" required class="search search-type">
        <input type="submit" value="검색" class="search search-btn">
    </form>
</body>
</html>

 

ex. 다중 입력창 만들기

<!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>
        /*
            display 속성은 컴포넌트들이 표시되는 방식을 정하는데 사용한다.
            - inline
                = 폭을 지정할 수 없다.
                = 컴포넌트들을 폭이 허락하는 한 우측으로 나열한다.
            - block 
                = 폭을 지정할 수 있다.
                = 컴포넌트들을 한 줄에 하나씩 나열한다.
            - inline-block
                = 폭을 지정할 수 있고 한 줄에 여러개 나온다
        */

        /* 공용 스타일 */
        .login-id, .login-pw, .login-btn {
            display: block;

            font-size: 25px;
            font-family: 굴림;

            width: 300px;

            padding:10px;

            /*
            margin-top:20px;
            margin-bottom: 20px;
            */
            margin: 20px 0px;

            /*
                폭 계산 기준을 "테두리까지"로 변경
            */
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <form>
        <input type="text" placeholder="ID" required name="memberId" class="login-id">
        <input type="password" placeholder="Password" required name="memberPw" class="login-pw">
        <input type="submit" value="Login" class="login-btn">
    </form>
</body>
</html>

 

 

Q. 다중 입력창 만들기

<!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>로그인문제1</title>
    <style>
        * {
            box-sizing: border-box;
        }

        div {
            border:0px dotted gray;//테두리 위치 알기위한 값
        }

        /*
            컨테이너에는 화면의 전체 폭을 설정해야 한다.
        */
        .container {
            width:400px;
        }

        /*
            줄(row) 사이는 일정 간격 벌어져 있도록 설정한다.
        */
        .row {
            margin:20px 0px;
            text-align: center;
        }

        /*
            내부 항목들은 바깥 영역을 채우게 구성한다.
        */
        .logo-image {
            width:200px;
        }

        .login-input {
            width:100%;
            font-size:15px;
            padding:15px;
        }

        .login-btn {
            width:100%;
            font-size:20px;
            padding:12px;
            color:white;
            background-color:rgb(255, 171, 56);
            border:none;
        }
    </style>
</head>
<body>
    <!--
        div 태그 : 아무 효과도 없는 비어있는 영역(block 속성을 가짐)        
    -->

    <div class="container">
        <div class="row">
            <img src="./image/ppomppu-logo.png" class="logo-image">
        </div>
        <div class="row">
            <input type="text" name="memberId" placeholder="아이디 입력" required class="login-input">
        </div>
        <div class="row">
            <input type="password" name="memberPw" placeholder="비밀번호 입력" required class="login-input">
        </div>
        <div class="row">
            <input type="submit" value="로그인" class="login-btn">
        </div>
    </div>
</body>
</html>

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

21.11.04 - 웹 개발 입문 59일차  (0) 2021.11.04
21.11.03 - 웹 개발 입문 58일차  (0) 2021.11.03
21.10.29 - 웹 개발 입문 55일차  (0) 2021.10.29
21.10.28 - 웹 개발 입문 54일차  (0) 2021.10.28
21.10.27 - 웹 개발 입문 53일차  (0) 2021.10.27

'Java 웹 개발' Related Articles

티스토리툴바