sparta 웹개발 종합반 개발일지

Sparta 웹개발 종합반 1주차 1~4강

나아눙 2022. 5. 19. 21:46

<기본 개념>

전체선택 : Windows: Ctrl + A

잘라내기 :Windows: Ctrl + X

콘솔창 줄바꿈 shift + enter

코드정렬 Windows: Ctrl + Alt + L 

들여쓰기 취소 : Shift + Tab

주석: Windows: Ctrl + / 

 

[수업 목표]

1.서버와 클라이언트의 역할에 대해 이해한다.

2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!

3. Javascript 기초 문법을 익힌다.

 

1-1 1주차 오늘 배울것

1) 서버/클라이언트/웹의 동작 개념

웹동작 개념(HTML을 받을 경우)

브라우저가 하는 일

1)요청을 보낸다.

어디에 요청? 서버가 만들어 놓은 API라는 창구에 미리 정해진 약속대로 요청을 보내는것

ex) https://naver.com/ → "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!

2)받은 HTML 파일을 그려준다.

=>서버한테 요청하고 서버가 준거(HTML,CSS,JS)를 받아서 그대로 그려준다.

HTML:뼈대 

CSS:예쁘게 꾸미는거

JS: 움직이는거,클릭하면 이동하는거 

 

 

 

 

 

 

웹동작 개념(데이터만 받는 경우)

 

기본적으로 서버는 클라이언트한테 그릴것을 준다.

그릴것을 뜯어보면 데이터다.

데이터만 내려올 경우 JSON형식이라고 한다.

 

 

 

 

예쁨을 빼고 데이터만 준 형태(JSON형식)

 

 

 

 

 

 

 

 

 

 

1-3 HTML,CSS 기본내용

7) HTML과 CSS의 개념

HTML 뼈대 , CSS 꾸미기

HTML 코드 내에 CSS 파일을 불러와서 적용

 

8) HTML 기초

HTML은 크게 head와 body로 구성

문서형태

head안에는 페이지의 속성 정보를

head 안에 들어가는 대표적인 요소들: meta, script, link, title 등

ex) CSS,javascript

    구글검색엔진이 내 사이트를 퍼가기 좋게 만드는 것들

    카카오톡에 내 페이지 공유했을때 이미지 제목뜨는 거

body안에는 페이지의 내용을 담습니다.

 

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

결과

1-4 Quiz_간단한 로그인 페이지 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>로그인페이지</title>
</head>
<body>
                                          <h1>로그인 페이지</h1>
                                         <p>ID: <input type="text"/></p>
                                         <p>PW: <input type="text"/></p>
                                        <button>로그인하기</button>
                                        </body>
                                         </html>

* P 태그로 줄바꿈을 해주었다.