스파르타 코딩클럽 1주차 개발일지

Experience

스파르타 코딩클럽 1주차 개발일지

BIBC/빕 2021. 6. 22. 01:24

html = 뼈대

CSS = 꾸미기

Javascript = 동작 생성

서버 ---(데이터)---> 클라이언트

새로 그리지 않고 데이터만 줄 때도 있음 ex) 티켓팅 때 새로고침하면 예매된 좌석과 예매되지 않은 좌석 색 변경

html 기초

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

margin과 padding

margin: 텍스트 기준 바깥의 여백 (ex. 버튼을 위에서 30px 떨어뜨림)

padding: 텍스트 기준 안쪽의 여백 (ex. 텍스트에서 상하좌우 20px씩 버튼 자체의 크기를 키움)

사용례

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>

폰트는 title 하단

구글 한국어 폰트 https://fonts.google.com/?subset=korean

.mytitle {
background-color: green;

width: 300px;
height: 200px;

color: white;
text-align: center;

background-image: url("이미지주소"); div 사이즈에 맞춰 좌상단 부분이 들어감
background-size: cover; div 사이즈에 맞춰 이미지 넣기
background-position: center; 이미지 중앙 정렬로 맞추기

border-radius: 10px;

padding-top: 20px; 텍스트 기준 위쪽 20px 만큼 띄움
}

.wrap {
width: 300px;
margin: auto; 양쪽 여백을 동일하게 최대값으로 만듦 -> 중앙정렬
}

.mybtn {
width: 100px;
margin: auto;
display: block; 글자의 속성을 box로 바꿈 (위치 이동 등을 위해)
}

.red-font {
color: red;
font-size: 16px;
} 저기

</style>
</head>

<body>
<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> "mybtn"과 "red-font"의 style 중첩
</div>
</body>
</html>

여기부터 저기까지를 New → Stylesheet를 만들어 내용 복사하고, html 파일에서 <style> 전체를 지운 후 Stylesheet(.css 파일)를 html에서 읽어오게 할 수 있음

<head> 상단에 <link rel="stylesheet" type="text/css" href="(스타일시트 이름).css"> 삽입

단축키

ctrl + alt + L 줄 정렬

ctrl + / : 주석처리 (코드에 있지만 페이지에 나타나지 않음)

템플릿 사용하기

Bootstrap https://getbootstrap.com/docs/4.0/getting-started/introduction/

Introduction

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with BootstrapCDN and a template starter page.

getbootstrap.com

Starter Template 복사 후 CSS 복사