웹개발 1주차

joo.scent·2022년 6월 19일
CSSJavaScriptbootstraphtmlweb
0

웹개발종합스터디

목록 보기
1/1

Keep

[HTML]

1. 이미지(커버) 넣기

1) 들어갈 글을 적고, div로 묶어줌

<body>
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
</body>

2) css로 이미지 cover 넣어주기

<head>
    <style>
        .mytitle {
            background-image: url('https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg');
            background-position: center;
            background-size: cover;
        }
    </style>
</head>

2.input box 넣기

1) P태그, input type 사용해서 input box 만들기

<body>
    <div>
        <p>
            ID: <input type="text" />
        </p>
        <p>
            PW: <input type="password" />
        </p>
    </div>
    <button>로그인하기</button>
</body>

3.만들어둔 이미지를 화면 가운데로 가져오려면?

1) width를 주고, margin: auto를 사용하자!

2) 그래도 안되면? display:block을 추가!
: 버튼의 경우 안되서, block을 만들어주니까 이동 가능했다.

4. 구글 폰트 넣기

1) link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣는다.

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet">
/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Nanum Gothic', sans-serif;
}

5. bootstrap 시작 준비

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>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

2) 부트스트랩 링크 : https://getbootstrap.com/docs/4.0/components/alerts/

[Javascript]

1. 자바스크립트 시작하기

1) ~ 안에 로 공간을 만들어 작성

2) 예시

function hey(){
	alert('안녕!');
}

3) 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불러들어오는 것

<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>

2. 자바스크립트 - 변수&기본연산

1) 변수 대입( a = 1 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (1을 a라는 변수에 넣는다)

2) let으로 변수 선언을 한다.

3) 예시

let a = 1
let b = 2

a+b // 3
a/b // 0.5

3. 리스트 & 딕셔너리

1) 리스트 선언 - 순서를 지켜서 가지고 있음

let b_list = [1,2,'hey',3]

2) 딕셔너리 선언 - key:value

let b_dict = {'name':'Bob','age':21}

3) 리스트 길이 구하기

b_list.length

4. 자바스크립트 - 도메인 추출

1) 특정 문자로 문자열을 나누고 싶은 경우

let myemail = 'scent@naver.com'

let result = myemail.split('@') // ['scent','naver.com']

result[0] // scent
result[1] // naver.com

let result2 = result[1].split('.') // ['naver','com']

result2[0] // naver -> 내가 하고싶었던 도메인 추출
result2[1] // com

myemail.split('@')[1].split('.')[0] // naver -> 간단하게 쓸 수도 있다!

5. 자바스크립트 - 함수&조건문&반복문

1) 함수

  • 만들때
    function 함수이름(필요한 변수들) {
    내릴 명령들을 순차적으로 작성
    }
  • 사용할때
    함수이름(필요한 변수들);

2) 조건문

  • else 사용예시
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25)
  • else if 사용예시
function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}
is_adult(12)

3) AND 조건 Or조건

  • AND 조건 : &&
  • OR조건 : ||
function is_adult(age, sex){
	if(age > 20 && sex == '여'){
		alert('성인 여성')
	} else if (age > 20 && sex == '남') {
		alert('성인 남성')
	} else {
		alert('청소년이에요')
	}
}

4) 반복문

  • 리스트 내의 딕셔너리를 하나씩 출력
let scores = [
    {'name':'철수', 'score':90},
    {'name':'영희', 'score':85},
    {'name':'민수', 'score':70},
    {'name':'형준', 'score':50},
    {'name':'기남', 'score':68},
    {'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
	console.log(scores[i]);
}
  • 만약 조건을 넣고 싶다면, 아래처럼 조건문 한줄 추가하기
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}

Problem

  1. margin : auto가 계속 안먹어서 보니까 width 주는 것을 빼먹음

  2. 워드프레스에 적용시에는 위에서 배운 방법으로는 구글폰트가 적용이 안되었고, 다른방법인 @import방법을 써야하는 것 같다.

  3. span은 어떻게 지정하는 것인지 몰라서 못했는데, 그냥 원래 있던 h태그나 p태그 등 안에다가 해당 범위까지만 다시 span을 먹여주면 된다.

<div class="item-desc">
        <h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
        <p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>
</div>

그리고 css에서는 그냥 다른거랑 똑같이 .price (클래스)로 디자인해주면 된다.

  1. javascript 사용시 괄호 짝이 안맞아서 실행이 안되었다. 꼭 짝을 잘 맞춰야겠다.

Try

  1. css 연습할 때는 div에 색을 넣어서 확인하는 습관을 가져야겠다.

  2. javascript 연습할 때는 한줄한줄 계속 실행하고 체크해보는 습관을 가져야겠다.(console.log) 뭐가 잘못된건지 찾기가 매우 힘들기 때문

  3. javascript 는 사칙연산 외에도 기본적으로 제공하는 함수가 많이 존재하는데, 왠지 이건 있을 것 같다 싶으면 구글에 먼저 찾아봐야겠다.

  4. javascript 사용시, 변수명을 snake case나 camel case중 선택하여 통일해서 다른 사람들도 쉽게 알아볼 수 있게 쓰는 습관을 들여야겠다.

  5. javascript 사용시, 콤마 잊지말고 체크해야겠다.

profile
joo.scent
쫌쫌따리 개발일지

0개의 댓글