'항해99 개발 일지' 카테고리의 글 목록 (14 Page)

항해99 개발 일지

#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax 2022.10.19 2
#항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법 2022.10.19 1
#항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS 2022.10.18

PREV 이전 1 ···11 12 13 14 NEXT 다음

#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax

2022. 10. 19. 01:10

[수업 목표]

Javascript 문법에 익숙해진다.
jQuery로 간단한 HTML을 조작할 수 있다.
Ajax로 서버 API(약속)에 데이터를 주고, 결과를 받아온다.

Javascript

우리가 매일 접속하는 웹사이트는 크게 3가지 요소로 구성된다. ‘HTML(Hyper Text Markup Language)’, ‘CSS(Cascading Style Sheets)’, ‘자바스크립트(Javascript)’다.
HTML은 웹페이지의 큰 뼈대를 제공하고, CSS는 색깔이나 글씨체와 같은 디자인 요소를 관리한다.
자바스크립트는 크로스 플랫폼(cross platform), 객체지향 스크립트 언어로 웹페이지의 동작을 담당한다
자바스크립트는 컴파일 과정이 없기 때문에 다른 언어와 비교했을 때 빠른 시간 안에 스크립트 코드를 작성할 수 있게 도와준다. 기존 C나 자바 언어와 달리 굉장히 단순한 구조와 원칙을 가지고 있기 때문에 초보 개발자들이 쉽게 배우고 이해할 수 있다.
단점은 성능이나 보안 측면이다. 일단 내부에서 제공되는 기능이 제한적이고, 관련된 개발도구도 적은 편이다. 또한 자바스크립트는 HTML 소스코드에 함께 작성되면서 소스코드가 외부로 공개되는데, 이 과정에서 보안 취약점이 발생할 수 있다.

출처 : [네이버 지식백과] 자바스크립트 [Javascript] - 웹을 풍부하게 만들어주는 작고 가벼운 언어 (용어로 보는 IT, 이지현)

1) jQuery 란?

HTML의 요소들을 조작하는, 편리한 Javascript를 미리 작성해둔 라이브러리. (JS보다 직관적)
jQuery는 전문 개발자들이 짜둔 미리 작성된 Javascript 코드 (그렇게 때문에, 쓰기 전에 "임포트" 필요)
https://www.w3schools.com/jquery/jquery_get_started.asp (임포트 하는 법 링크 참고하기)

임포트 하는 법 : <head> 와 </head> 사이에 아래를 넣으면 끝!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

css와 마찬가지로, jQuery를 쓸 때에도 "가리켜야" → 조작할 수 있다. css에서는 선택자로 class="..."를 사용했다면 jQuery에서는 id="..." 값을 통해 특정 버튼/인풋박스/div/.. 등을 가리킨다.

자주쓰는 jQuery

// 크롬 개발자도구 콘솔창에서 쳐보기
// id 값이 url인 곳을 가리키고, val()로 값을 가져온다.
$('#url').val();
// 입력할때는?
$('#url').val('이렇게 하면 입력이 가능하지만!');

// id 값이 post-box인 곳을 가리키고, hide()로 안보이게 한다.
$('#post-box').hide();
// show()로 보이게 한다.
$('#post-box').show();

// let temp_html = `` 주의: 홑따옴표(')가 아닌 backtick(`)으로 감싸야 합니다.
// 숫자 1번 키 왼쪽의 버튼을 누르면 backtick(`)이 입력됩니다.
// backtick을 사용하면 문자 중간에 Javascript 변수를 삽입할 수 있습니다.
let title = '영화 제목이 들어갑니다';

let temp_html = `<div class="col">
				            <div class="card h-100">
				                <img src="https://movie-phinf.pstatic.net/20210728_221/1627440327667GyoYj_JPEG/movie_image.jpg"
				                     class="card-img-top" alt="...">
				                <div class="card-body">
				                    <h5 class="card-title">${title}</h5>
				                    <p class="card-text">여기에 영화에 대한 설명이 들어갑니다.</p>
				                    <p>⭐⭐⭐</p>
				                    <p class="mycomment">나의 한줄 평을 씁니다</p>
				                </div>
				            </div>
				        </div>`;
$('#cards-box').append(temp_html);

let ...=$('#...').val() 로 변수를 정해주고,

그것을 다시 let temp_html=`` 로 받아

$('#....').append(temp_html)로 연결시키는 과정을 기억하자!

2) 서버-클라이언트 통신 이해하기

① 서버→클라이언트: "JSON"을 이해하기

JSON은 쉽게 말해 데이터를 주는 규칙
JSON은, Key:Value로 이루어져 있다. 자료형 Dictionary와 유사

위 예제에서는 RealtimeCityAir라는 키 값에 딕셔너리 형 value가 들어가있고, 그 안에 row라는 키 값에는 리스트형 value가 들어가있다.

② 클라이언트→서버: GET 요청 이해하기

API는 은행 창구와 같은 것! 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 가져와야 하는 것과 처리해주는 것이 다른 것처럼, 클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
GET → 통상적으로 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회
POST → 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

③ GET 방식으로 데이터를 전달하는 방법

https://movie.naver.com/movie/bi/mi/basic.nhn?code=161967

위 주소는 크게 두 부분으로 쪼개집니다. 바로 "?"가 쪼개지는 지점인데요.
"?" 기준으로 앞부분이 <서버 주소>, 뒷부분이 [영화 번호] 입니다.

* 서버 주소: https://movie.naver.com/movie/bi/mi/basic.nhn
* 영화 정보: code=161967


여기서 잠깐, 그럼 code라는 이름으로 영화번호를 주자!는 것은
누가 정하는 것일까요?

→ 네, 바로 프론트엔드 개발자와 백엔드 개발자가 미리 정해둔 약속입니다.

프론트엔드: "code라는 이름으로 영화번호를 주면 될까요?"
백엔드: "네 그렇게 하시죠. 그럼 code로 영화번호가 들어온다고 생각하고 코딩하고 있을게요"

3) Ajax

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자
자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능
비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식이며 Ajax를 통해서 서버에 요청을 한 후 멈추어 있는 것이 아니라 그 프로그램은 계속 돌아간다는 의미를 내포
브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법
Ajax는 jQuery를 임포트한 페이지에서만 동작 가능

Ajax 기본 골격 + 해설

$.ajax({
  type: "GET", // GET 방식으로 요청한다.
  url: "http://spartacodingclub.shop/sparta_api/seoulair",
  data: {}, // 요청하면서 함께 줄 데이터 (GET 요청시엔 비워두세요)
  success: function(response){ // 서버에서 준 결과를 response라는 변수에 담음
    console.log(response) // 서버에서 준 결과를 이용해서 나머지 코드를 작성
  }
})

※ GET 요청은, url뒤에 아래와 같이 붙여서 데이터를 가져간다. http://naver.com?param=value¶m2=value2

※ POST 요청은, data : {} 에 넣어서 데이터를 가져간다. data: { param: 'value', param2: 'value2' }

사실, 아직 이해가 완전히 되지는 않기 때문에 오늘 풀었던 예제를 통해 형식을 그냥 외워보려 한다.

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
        .bad {
            color: red;
            font-weight: bold;
        }
    </style>

    <script>
        function q1() {
            // 여기에 코드를 입력하세요
            $('#names-q1').empty();
            $.ajax({
                type: "GET",
                url: "http://spartacodingclub.shop/sparta_api/seoulair",
                data: {},
                success: function (response) {
                    let rows = response["RealtimeCityAir"]["row"];
                    for (let i = 0; i < rows.length; i++) {
                        let gu_name = rows[i]['MSRSTE_NM'];
                        let gu_mise = rows[i]['IDEX_MVL'];

                        let temp_html = ''

                        if (gu_mise > 70) {
                            temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
                        } else {
                            temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                        }
                        
                        $('#names-q1').append(temp_html);
                    }
                }
            })
        }
    </script>

let rows 를 통해 변수를 설정해주고, for문으로 리스트를 돌려주고, temp_html을 이용하여 변수갑을 브라우저에 찍어준다. 그리고 if 문의 색깔은 class="bad"라는 값을 다시 지정해 위의 <sytle>에 .bad 부분을 추가해 준다.

※ tip : 이미지 바꾸기 $("#아이디값").attr("src", 이미지URL)

텍스트 바꾸기 $("#아이디값").text("바꾸고 싶은 텍스트")

처음 보는 용어들에 정신이 어질어질 어렵지만, 반복된 연습을 통해 익숙해 질 거란 느낌이 팍 들었다 ! 일단 오늘 이해한 부분은, jQuery를 통해 보다 간결한 코드로 자바스크립트를 구현할 수 있다는 점과 서버와 클라이언트가 JSON형식의 데이터를 주고 받을때 [GET], [POST] 이 두가지 요청 방식이 있다는 점.

오늘 배운 내용에 도움이 될 만한 블로그 글을 발견하여 아래에 링크를 남겨본다.

https://velog.io/@surim014/AJAX%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

AJAX란 무엇인가?

AJAX (Asynchronous Javascript And XML) AJAX란, JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequ

velog.io

4회 수강 후 여전히 부족한 부분 정리 : 1. 오타에 유의하자 (특히 중괄호), 2. 코드를 간결히 할 수 있는 방법을 생각해보자.

<2-5 강의 퀴즈 부분>

1 번 문제

2번 문제

2번을 푸는데 좀 시간이 걸렸지만, 이번에도 혼자 코드 작성에 성공 ! 중괄호 하나가 빠져서 이 문제때문에 오류를 찾느라 고생했다. 아, 참고로 네번째줄 alert안에 '.val()' 빼줘야 정답이다.

3번 문제

과제 코드 검사

'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글

#항해99 웹개발 종합반 5주차 회고 - AWS, 가비아 (0)	2022.10.21
#항해99 웹개발 종합반 4주차 회고 - Flask, API (0)	2022.10.20
#항해99 웹개발 종합반 3주차 회고 - Python (0)	2022.10.19
#항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법 (1)	2022.10.19
#항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS (0)	2022.10.18

#항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법

2022. 10. 19. 00:06

자바스크립트(Javascript)란?

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어
HTML이 뼈대고 CSS가 꾸미기라면 JS는 움직이는 것이라고 생각하면 된다. 예) 클릭하면 뜨는 팝업 메시지
HTML과 연결 할 때 <head>~</head>안에 <script>~</script>로 공간을 만들어 <script> 아래에 작성
Java와 Javascript는 어떤 차이가 있나요? - 인도와 인도네시아.. 바다와 바다코끼리.. -> 즉, 아무 관련 없다.

1) Javascript 기초 문법 배우기(1)

① 크롬 개발자도구 콘솔 창은 어떤 의미?

띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구. 새로고침 하면 모두 사라진다는 사실!

tip (console 창 단축키) : 윈도우: F12, 맥: alt(option) + command + i, 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능

console.log(변수)

  --
console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다.
개발자가 결과값을 보기 편하도록!

console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요.
아래를 복사해서 붙여넣어보세요.

console.log("Hello World!");

② 변수 & 기본연산

변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) ∴ 서로 같음을 표시할 때는 '==' 사용.
let으로 변수를 선언

let num = 20
num = 'Bob'

// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.

사칙연산, 그리고 문자열 더하기가 기본적으로 가능
변수명 정하기 :

let first_name = 'bob' // snake case라고 합니다.

또는,

let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.

과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!

③ 리스트 & 딕셔너리

리스트: 순서를 지켜서 가지고 있는 형태
딕셔너리: 키(key)-밸류(value) 값의 묶음
리스트와 딕셔너리의 조합

names = [{'name':'bob','age':20},{'name':'carry','age':38}]

// names[0]['name']의 값은? 'bob'
// names[1]['name']의 값은? 'carry'

new_name = {'name':'john','age':7}
names.push(new_name)

// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
// names[2]['name']의 값은? 'john'

잠깐 ! 이렇게 사용하는 이유는 ?

순서를 표시할 수 있고, 정보를 묶을 수 있습니다. 보기에도 깔끔해지고, 유지 보수가 쉬워지는 장점이 있다.

2) Javascript 기초 문법 배우기(2)

① 함수의 기본 생김새

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

② 조건문 if, else if, else

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else if (age > 10) {
		alert('청소년이에요')
	} else {
		alert('10살 이하!')
	}
}

is_adult(12)

③ 반복문 (예를 들어 0부터 99까지 출력해야 하는 상황이라면)

for (let i = 0; i < 100; i++) {
	console.log(i);
}

+ 반복문은 주로 딕셔너리가 들어간 리스트와 함께 쓰임 - 앞으로 자주 보게 될 것.

아직은 이해가 어려운 자바스크립트이지만, 튜터님 말대로 이해하려고 하기보다 사용하면서 익숙해지는 것이 좋을 것 같다. 공부하다 모르는 함수나 정의들은 구글링을 통해 적극적으로 배우도록 하자! 웬만한 것들은 구글링을 통해 답을 찾을 수 있다. 갈길이 멀지만 오늘도 화잇티이잉 ! :)

'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글

#항해99 웹개발 종합반 5주차 회고 - AWS, 가비아 (0)	2022.10.21
#항해99 웹개발 종합반 4주차 회고 - Flask, API (0)	2022.10.20
#항해99 웹개발 종합반 3주차 회고 - Python (0)	2022.10.19
#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax (2)	2022.10.19
#항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS (0)	2022.10.18

#항해99 웹개발 종합반 1주차 회고(1) - HTML, CSS

2022. 10. 18. 01:02

[수업 목표]

서버와 클라이언트의 역할에 대해 이해한다.
HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
Javascript 기초 문법을 익힌다.

1. 서버와 클라이언트란 무엇인가?

클라이언트는 자료를 요청(request)하는 컴퓨터이고 서버는 자료를 그 요청에 응답(respond)하는 컴퓨터이다.

프론트엔드 개발자들은 클라이언트에 노출되는 부분을 개발한다고 할 수 있고, 백엔드 개발자는 유저들에게 보이지는 않지만 그 뒤에서 일어나는 서버에 저장하는 데이터에 함수를 입히고 원하는 기능을 구현하는 개발을 한다고 할 수 있다.

프론트엔드는 좀더 고객친화적이고 디자인요소를 다루는 것이고, 백엔드는 추상적인 것들의 다룬다.

2. HTML (=뼈대)/ CSS(=꾸미기) , boostrap

HTML은 구역과 텍스트를 나타내는 코드, CSS는 잡은 구역을 꾸며주는 것. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생함. HTML 코드 내에 CSS 파일을 불러와서 적용한다.

<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">

1) HTML

① HTML은 크게 <head>와 <body>로 구성됨

head안에는 페이지의 속성 정보를, body안에는 페이지의 내용이 들어간다
head 안에 들어가는 대표적인 요소들: meta, script, link, title 등 ( 페이지의 속성을 정의하거나, 필요한 스크립트들을 불러줌. 즉, 눈에 안 보이는 필요한 것들을 담는 것)
아래를 참고해서 필요할 때 찾아서 사용하기

<!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>

※ tip 1 : Pycharm에서 코드 자동정렬 하려면? ctrl+alt+L (맥은 cmd+alt+L)

- 코드를 잘 정렬해야 유지, 보수도 쉽고 협업을 할 때 효율성을 높일 수 있다.

② HTML 부모-자식 구조

html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요! 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받음.

보이는 바와 같이 빨간 <div>를 이동하면 자동으로 초록 파랑<div>도 같이 이동 하게됨.

2) CSS

① CSS 사용

<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성. <body>부분에서 꾸미고자 하는 부분을 'class ="이름"'으로 지정해 주고, <style>아래 부분에 .이름 { ... } 라고 작성 한 뒤 { }안에 꾸며주는 코드를 작성한다.

예시)

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | 로그인페이지</title>
    <style>
        .mytitle {
            width: 100%;
            height: 250px;

            background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://movie-phinf.pstatic.net/20210715_95/1626338192428gTnJl_JPEG/movie_image.jpg');
            background-position: center;
            background-size: cover;

            color: white;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

※ tip2 : 위에 backgroud 와 display 부분은 다음에 필요할 때 복붙해서 쓰도록 한다!

margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 조절함
만들어둔 박스를 화면 가운데로 가져오려면? width를 주고, margin: auto를 사용하자! 그래도 안되면? display:block을 추가!

 .wrap {
            margin: 10px auto;
            width: 300px;
        }

② CSS 구글 웹폰트 입히기

https://fonts.google.com/?subset=korean 에서 마음에 드는 폰트 선택
폰트 클릭 후 우측 상단 아이콘 에서 Embed 탭 클릭
마지막 link 복사해서 HTML 파일에 붙여주기
CSS 에 *{} 를 통해 전체 페이지에 적용하면 끝

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

예시 ) Jua라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다.

<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

/* CSS에 이 부분을 추가하면 완성! */
* {
	font-family: 'Jua', sans-serif;
}

※ tip 3 : 주석 달기 (ctrl 혹은 command + / 슬래시 )

주석을 붙여놓으면 브러우저/컴퓨터는 그 부분을 읽지 않음. 주석은 개발자 본인 또는 동료를 위해 사용.

필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
코드에 대한 간단한 설명을 붙여두고 싶을 때 사용

※ tip 4 : 모바일 처리 하는 법

width: 95%;
max-width: 500px;

3) Bootstrap

남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일합니다. 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐
남이 만들어 둔 것을 쓸 때는 잘 찾아다가 조금씩만 고쳐서 쓰는 게 답
https://getbootstrap.com/docs/5.0/

Buttons

Use Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

getbootstrap.com

※ tip 5 : 이모티콘 모음 링크 https://kr.piliapp.com/facebook-symbols/

페이스 북 기호 : 웃는 기호, 이모티콘 기호, 이모티콘과 코드 목록

× 이모지 - 이모티콘 혹은 웃는 얼굴이라고도 불립니다. iOS와 Android는 기본적으로 845개의 이모티콘을 지원하고 있으며, 페이스북은 하트/사랑 기호, 별, 부호 및 동물 모양을 포함한 절반을 지원

kr.piliapp.com

4회를 수강한 오늘(10/24일) 헷갈렸던 부분 정리 :

기록하기 닫기 버튼 부분 CSS로 가운데다 배치하는 법

먼저 버튼부분을 다시한번 <div>로 묶고 class를 지정해야 했다. 자꾸 이 부분을 까먹는다.

'항해99 개발 일지 > [0주] 웹개발 종합반' 카테고리의 다른 글

#항해99 웹개발 종합반 5주차 회고 - AWS, 가비아 (0)	2022.10.21
#항해99 웹개발 종합반 4주차 회고 - Flask, API (0)	2022.10.20
#항해99 웹개발 종합반 3주차 회고 - Python (0)	2022.10.19
#항해99 웹개발 종합반 2주차 회고 - jQuery, Ajax (2)	2022.10.19
#항해99 웹개발 종합반 1주차 회고(2) - Javascript 기초 문법 (1)	2022.10.19

PREV 이전 1 ···11 12 13 14 NEXT 다음