스파르타 코딩클럽 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 복사

CSS 참고 모음집

W3Schools / MDN (검색어 뒤에 붙여서 검색)

Javascript

일종의 함수와 같다

let a = 2

ex. let first_name = 'gildong' / let last_name = 'hong' a는 알아보기 쉽도록 명명, 따옴표는 텍스트 표시

first_name+last_name = gildonghong

list

ex. let a_list = ['배','참외','감'] 순서를 표시하는 리스트, 대괄호

a_list[0] = "배" 0부터 시작

a_list.push('수박') → a_list = "배", "참외", "감", "수박" 값 추가, 소괄호

dictionary

dictionary와 list는 상호 호환 가능

a % n: a를 n으로 나눈 나머지

a > < == != n: a는 n(보다) 크다, 작다, 같다, 다르다 (true / false)

split 값을 나누기

function 정해진 동작을 함

if문

and: && or: || (backspace 밑)

if (age > 20 || sex == '남성') {
console.log('성인 남성입니다')
} else {
console.log('청소년입니다') }

if (age > 20) {
console.log('성인입니다')
} else if (age > 7) {
console.log('청소년입니다')
} else { console.log('아동입니다') }

반복문

0에서 시작해 1씩 더하며 10을 넘을 수 없음

저작자표시 비영리 변경금지

'Experience' 카테고리의 다른 글

스파르타 코딩클럽 3주차 개발일지 (0)	2021.07.12
스파르타 코딩클럽 2주차 개발일지 (0)	2021.07.01
VPN 우회하여 ESPN으로 미국 스포츠 보기 (0)	2020.12.07
[충주~제천 여행] 3일차: 정방사, 물태리빵집, 대추나무집 (0)	2020.08.13
[충주~제천 여행] 2일차: 풀향기궁중칼국수, 탄금대공원, 청풍황금떡갈비, 카페슬로비 (0)	2020.08.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

Track

티스토리 뷰