1주차 공부 정리

HTML - 뼈대
CSS - 꾸미는것
JAVA SCRIPT - 움직이는것

HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.

내가 공부하는데 사용하는 툴 - PyCharm

1. style 사용하는 방법

(1) 사용할 부분에 class 지정

<h1 class="mytitle">로그인</h1>

(2) class로 mytitle이라 지정해 놓은 곳에 스타일 넣기

<style>
 .mytitle{
    color : red;
}
</style>

2. 이미지에 글자쓰는 방법

(1) div로 영역 만들어두고 글자 써놓기

    <div class="mytitle">
                  <h1>로그인 페이지</h1>
                  <h5>아이디, 패스워드를 입력해주세요</h5>
    </div>


 (2) 스타일로 적용 (복사할때 / 이후로는 지우기)

      <style>
          .mytitle {
                  background-color: green;
                  width: 300px;
                  height: 200px;
                  color: white;
                  text-align: center; / 가운데정렬

      			/셋이 세트
                  background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
                  background-size: cover;
                  background-position: center;
      
                  border-radius: 10px; /모서리 둥근 정도 설정
                  padding-top: 20px;
              }
      </style>

Tip
여백

바깥 여백 : margin ( 바깥으로 여백을 줘라 )

안 여백 : padding ( 안쪽으로 여백을 줘라 )

3. 전체 가운데로 이동시키기

( 힌트. 내 양쪽 여백이 동등하게 최대 )

(1) 전체 div 로 묶어주기
(2) width 를 줘서 나의 영역을 줄여준다 ( 안주면 영역이 최대 가로영역임)
(3) margin : auto; 해주면 끝
이랬는데 안 움직여지면 다른 방법을 써주기

글속성을 박스속성으로 바꾸어 옮겨주기
위에서 display : block; 을 추가하여주기

<div class="wrap">
        <div class="mytitle">
            <h1>로그인 페이지</h1>
            <h5>아이디, 패스워드를 입력해주세요</h5>
        </div>
        <p> ID : <input type="text"/></p>
        <p> PW : <input type="text"/></p>
        <button class="mybtn red-font">로그인하기</button>
</div>

<style>
        .wrap{
            width: 300px;
            margin: auto;
        }
        .mybtn{
            width: 100px;
            margin: auto;
            display: block;
        }
</style>

4. 모든곳에 스타일 적용 : style의 *

구글 웹폰트넣기 주소
https://fonts.google.com/?subset=korean

<style>
        *{
            font-family: 'Black Han Sans', sans-serif;
        }
</style>

5. 부트스트랩 적용하기위한 템플릿 ( 복사용도 )

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
        
    <title>hello</title>
</head>
<body>
    <h1>hello</h1>
</body>
</html>

부트스트랩 사이트 주소
https://getbootstrap.com/docs/4.0/components/alerts/

6. 부트스트랩을 이용한 숙제

레이아웃

숙제코딩

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
            integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
            crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
            integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
            crossorigin="anonymous"></script>

    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Nanum+Pen+Script&display=swap"
          rel="stylesheet">
    <title>스파르타코딩클럽 | 부트스트랩 숙제</title>
    <style>
        * {
            font-family: 'Nanum Pen Script', cursive;
        }

        .img-box {
            width: 500px;
            height: 400px;

            background-image: url("https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAyMTA0MDlfODYg%2FMDAxNjE3OTQ5MDE3MTMx.XCLXpfXi2AVDIzNE_cPYgfIEJ0lEO--hf1EQBUBCr5Ag.CISpw7Yx-Wx__X6YNZ3o9HUVTmzME14iuZdfRueby8sg.JPEG.smilart_ilsan%2F2-red-dice-close-up-white-background.jpg&type=sc960_832");
            background-size: cover;
            background-position: center;

            display: block;
            margin: auto;
        }

        .small-font {
            font-size: 20px;
        }

        .center {
            width: 500px;
            margin: auto;

        }

        .my_btn {
            display: block;
            margin: auto;
        }

    </style>

    <script>
        function order(){
            alert('주문이 완료되었습니다')
        }
    </script>
</head>

<body>
    <div class="img-box"></div>
    <div class="center">
        <h3>주사위 <span class="small-font">가격 : 500원 / 개</span></h3>
        <p>
            놀이 도구의 하나. 뼈나 단단한 나무 따위로 만든 조그만 정육면체의 각 면에 하나에서 여섯까지의 점을 새긴 것으로,
            바닥에 던져 위쪽에 나타난 점수로 승부를 결정한다.
        </p>
        <h3>주문하기</h3>
        <div>
            <div class="container">

                <div class="form-group">
                    <div class="row">
                        <label for="exampleFormControlInput1" class="col-lg-3">주문자 성함</label>
                        <input type="name" class="form-control col-lg-7" id="exampleFormControlInput1">
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <label for="exampleFormControlSelect1" class="col-lg-3">수량</label>
                        <select class="form-control col-lg-7" id="exampleFormControlSelect1">
                            <option>1</option>
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                            <option>5</option>
                        </select>
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <label for="exampleFormControlInput2" class="col-lg-3">주소</label>
                        <input type="name" class="form-control col-lg-7" id="exampleFormControlInput2">
                    </div>
                </div>

                <div class="form-group">
                    <div class="row">
                        <label for="exampleFormControlInput3" class="col-lg-3">전화번호</label>
                        <input type="name" class="form-control col-lg-7" id="exampleFormControlInput3">
                    </div>
                </div>

                <button type="submit" class="btn btn-primary mb-2 my_btn" onclick="order()">주문하기</button>

            </div>
        </div>
    </div>

</body>

</html>

결과

Author And Source

이 문제에 관하여(1주차 공부 정리), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jstone24/1주차-공부-정리

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