[스파르타코딩클럽 웹개발종합반] 개발일지 #1

29422 단어 개발일지스파르타코딩클럽개발일지

1주차

  • 프로그램 설치

  • HTML과 CSS의 개념: HTML은 빼대, CSS는 꾸미기
    ▪️HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS파일이 탄생하게 되었습니다. HTML코드 내에 CSS파일을 불러와서 적용합니다.

  • HTML 기초
    ▪️HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담습니다.
    ▪️head안에 들어가는 대표적인 요소들: meta, script, link, tilte 등
    ▪️body안에 들어가는 대표적인 요소들: div, p, h1~6, span, a, img src, input type, button, textaarea 등

  • HTML 부모-자식 구조 살펴보기
    ▪️html태그는 "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요! 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물 모두 영향을 받음.

  • CSS 기초
    ▪️head~/head안에 style~/style로 공간을 만들어 작성
    ▪️배경관련: background-color/image/size
    ▪️사이즈: width, height
    ▪️폰트: font-size/weight/family, color
    ▪️간격: margin(바깥 여백), padding(안쪽 여백)

  • 구글 웹폰트
    ▪️link태그 복사해서 head~/head 사이에, CSS를 복사해서 style~/style 사이에 넣기

  • 주석
    ▪️필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고싶을 때
    ▪️코드에 대한 간단한 설명을 붙여두고 싶을 때
    ▪️단축키: ctrl(command)+/

  • CSS파일 분리: CSS가 길어지면 파일로 분리해서 쓰기

  • bootstrap 써서 메모장 만들기 연습!

  • 자바스크립트 맛보기
    ▪️head~/head 안에 script~/script 로 공간을 만들어서 함수 만들어두기
    ▪️함수 연결하기

  • 자바스크립트 기초 문법(1)
    ▪️console.log(변수)
    ▪️let으로 변수 선언
    ▪️리스트: 순서를 지켜서 가지고 있는 형태[]
    ▪️딕셔너리: key-value 값의 묶음{}

  • 자바스크립트 기초 문법(2)
    ▪️함수: 만들기 - function 함수이름(필요한 변수들){내릴 명령들을 순차적으로 작성}
    사용하기 - 함수이름(필요한 변수들)
    ▪️조건문: if / else if / else
    and / or
    ▪️반복문: for(시작조건; 반복조건; 더하기){매번실행} 주로 리스트와 함께 씀

  • 1주차 과제: 기획서 만들기

<!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>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap" rel="stylesheet">

    <style>
        *{
            font-family: 'Gowun Dodum', sans-serif;
        }
        .item {
            width: 450px;
            height: 300px;
            background-image: url("https://lp-cms-production.imgix.net/2021-07/GettyRF_1137803766.jpg?auto=format&fit=crop&sharp=10&vib=20&ixlib=react-8.6.4&w=850");
            background-position: center;
            background-size: cover;
            margin: 0px auto 20px auto
        }
        .list {
            width: 450px;
            margin: auto;
        }
        .mybtn{
            margin: auto;
            display: block;
        }
    </style>

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

<body>
<div class="item"></div>
    <div class="list">
        <h1>바르셀로나 여행 <span style="font-size:16px">5박6일 3,300,000원</span></h1>
        <p>가우디의 도시 바르셀로나에서 잊지못할 추억을 만드세요!</p>
    </div>
    <div class="input-group mb-3 list">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3 list">
        <div class="input-group-prepend">
            <label class="input-group-text" for="inputGroupSelect01">수량</label>
        </div>
        <select class="custom-select" id="inputGroupSelect01">
            <option selected>수량을 선택하세요.</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
    </div>
    <div class="input-group mb-3 list">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
    <div class="input-group mb-3 list">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
        </div>
        <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
    </div>
<button type="button" onclick="order()" class="btn btn-primary mybtn">주문하기</button>

</body>

</html>
D3.js 환경설정
백준 - 센서 2212번

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage