▶현재 시간 : 2022년 10월 14일 9:14 A.M.
11월 7일 수업전까지 나의 목표는 2번 웹종합 강의 다 듣기 + JavaScript 문법 뽀개기 + 파이썬 문법 뽀개기 듣기!! 계획했던 목표 일단 해보자!
[1주차 수업 목표]
- 서버와 클라이언트의 역할에 대해 이해한다.
- HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
- Javascript 기초 문법을 익힌다.
▶HTML은 뼈대, CSS는 꾸미기!
- HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다.
- 또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
▶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>
▶ CSS 기초
1) HTML 부모-자식 구조 살펴보기
html 태그는, "누가 누구 안에 있느냐"를 이해하는 것이 가장 중요합니다. 나를 감싸고 있는 태그가 바뀌면, 그 안의 내용물도 모두 영향을 받지요!
2) CSS는 어떻게 사용하나요?
<head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성합니다. 아래 코드를 통해 간단한 사용 방법을 알아봅니다. mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 하는 것을 꼭! 기억하세요!
배경관련 background-color background-image background-size
사이즈 width height
폰트 font-size font-weight font-family color
간격 margin padding
▶ 꿀팁! 주석 달기
👉 주석은 언제 사용하나요?
- 필요없어진 코드를 삭제하는 대신 임시로 작동하지 못하게 하고 싶을 때
- 코드에 대한 간단한 설명을 붙여두고 싶을 때 사용합니다.
주석을 붙여놓으면, 브라우저/컴퓨터가 읽지 않아요. 즉, 개발자 본인 또는 동료를 위해 붙여두는 것!
- 단축키: 주석처리하고 싶은 라인들을 선택 → ctrl(또는 command) + / (슬래시)
※ 웹의 동작 개념 (HTML을 받는 경우)
우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서", "그려주는" 것입니다.
즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이죠.
어디에 요청을 보내냐구요? 서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보내는 것이랍니다.
https://naver.com/ → 이것은 "naver.com"이라는 이름의 서버에 있는, "/" 창구에 요청을 보낸 것!
※ 웹의 동작 개념 (데이터만 받는 경우)
공연 티켓을 예매하고 있는 상황을 상상해봅시다! 좌석이 차고 꺼질때마다 보던 페이지가 리프레시 되면 난감하겠죠? 이런 경우에는 데이터만 받아서 받아 끼우게 된답니다.
데이터만 내려올 경우는, 아래 그림을 JSON 형식이라고 합니다!.
▶<단축키 정리 모음>
- 새로고침
- F5
- 저장
- Windows: Ctrl + S
- macOS: command + S
- 전체선택
- Windows: Ctrl + A
- macOS: command + A
- 잘라내기
- Windows: Ctrl + X
- macOS: command + X
- 콘솔창 줄바꿈
- shift + enter
- 코드정렬
- Windows: Ctrl + Alt + L
- macOS: option + command + L
- 들여쓰기
- Tab
- 들여쓰기 취소 : Shift + Tab
- 주석
- Windows: Ctrl + /
- macOS: command + /
- 이전으로 돌아가기
- command + z
- 코드 정렬하기
- command + option + L
'Web development (1)' 카테고리의 다른 글
| 웹개발 1주차 (3) - 자바스크립트 (0) | 2022.10.14 |
|---|---|
| 웹개발 1주차 (2) - bootstrap (0) | 2022.10.14 |
