웹 개발 종합

웹은 개발의 기초이다🤨

웹은 개발을 입문할 때 배우는 개발의 기초라고 할 수 있다!
앱 개발자도, 게임 개발자도 처음에는 웹으로 시작한다고 할 수 있다!!

1주차 : HTML, CSS, Bootstrap

HTML과 CSS를 배우면 브라우저에서 우리 눈에 보이는 웹의 뼈대를 만들고 꾸밀 수 있다!
웹을 쉽게 꾸밀 수 있는 부트스트랩도 활용 가능하다. 😊
주로 배운 내용은 HTML & CSS 이다!

웹 브라우저 작동 원리

브라우저의 역할 : 요청을 보내고 받은 HTML 파일을 그려주는 것이다!

우리가 보는 웹 페이지는 서버에서 준비해 두었던 것을 받아서 브라우저에서 우리가 볼 수 있도록 그려주는 역할을 수행한다.
요청하는 쪽 : 클라이언트(브라우저), 주는 쪽 : 서버
즉, 브라우저는 요청을 보내고, 요청의 답으로 받은 것을 그려주는 역할이다.
페이지를 고칠 수 있는 이유 → 이미 내 컴퓨터에 가져왔기 때문이다! 내 데이터가 되어버렸다!

그렇다면 요청은 어디로 보내는 걸까?

서버가 만들어 놓은 API 라는 창구에 미리 정해진 약속대로 요청을 보내는 것이다. 우리는 평소에도 웹을 쓰는 동안 몇 번이고 요청을 보낸다.
예) https://naver.com/
- "naver.com"이라는 이름의 서버에 있는 "/"라는 주소 창구에 요청을 보낸 것이다.
- 네이버에서는 그 대답으로 네이버 홈에 해당하는 HTML 파일을 준다고 보면 된다.
우리가 보는 브라우저는 주소를 통해 API로 요청을 보내고, API는 요청에 맞는 HTML 파일을 돌려주고 브라우저는 받은 것을 화면에 그려준다.
- HTML(뼈대), CSS(꾸미기), JavaScript(움직이기) → 일종의 설명서
- 항상 HTML 파일로 돌려주는 것이 아니라 데이터만 돌려줄 때가 더 많다!!

✔️참고
실제로 많은 웹 서비스에서는 API로 요청을 보내면 서버의 데이터베이스에서 데이터를 돌려주고, 브라우저에서 Javascript라는 언어에서 갈아 끼워준다!

코딩 환경 세팅하기

VS Code(Visual Studio Code)

마이크로소프트 사에서 개발한 코드 에디터이다! 코딩하는데 효율적인 프로그램이다.

HTML 기초

HTML은 웹 페이지의 뼈대를 담당한다!

웹의 뼈대를 잡아주는 구역을 나타내는 코드이다. 웹의 전반을 HTML을 통해서 작성할 수 있다!
CSS는 HTML을 통해 작성된 뼈대를 예쁘게 꾸며주는 코드이다.
CSS를 잘 사용할 줄 아는 것과 예쁘게 만드는 것은 다른 영역이기 때문에, 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 된다...

HTML 기초 - 가장 기본적인 HTML 형태

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

html:5 입력 시 자동으로 입력되는 내용

HTML은 크게 <head> 영역과 <body> 영역으로 이루어져 있다.
- head 안에는 페이지의 속성 정보, body 안에는 페이지의 내용을 담는다.

✔️참고
head에서는 페이지의 속성을 정의하거나, 필요한 스크립트들을 부른다.
눈에 안 보이는 필요한 것들을 담는 것.

head 안에 들어가는 대표적인 요소들 : meta, script, style, link, title 등
body 안에 들어가는 대표적인 요소들 : span, img, input, textarea

HTML tag 기초

<!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="" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

코딩은 절대 외워서 하는 것이 아니다!

tag는 외우는 것이 아닌 가지고 와서 사용하는 것이다!!!

✔️참고 - 코드 정렬
코드의 정렬이 제대로 되어있지 않으면, 코드의 생김새를 파악할 수 없어 오류를 해결하기가 어려워진다.
html은 줄 맞추기가 생명이다. 늘 보기 쉬운 형태로 쓰여있어야 한다.

Format Document(문서 서식)
VS Code에서 Shift + Alt + F 로 자동정렬 기능을 사용할 수 있다!!

CSS 기초

HTML 부모와 자식 구조

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

빨간색 div 안에 초록색/파란색 div가 들어있다.
빨간색 div를 가운데로 옮기면, 내용물인 초록/파랑 div도 모두 함께 이동한다!
- 박스를 옮기면 안의 내용물도 함께 옮겨지는 것과 같은 원리이다.
같은 원리로 초록 div의 글씨 색을 바꾸면 [나는 버튼 1]의 글씨 색도 바뀐다!

CSS 기초

<head>......</head> 안에 <style>......</style>로 공간을 만들어 작성한다.

클래스를 가리킬 때는 .클래스이름 { }라고 써줘야 한다!
배경 관련
- background-color
- background-image
- background-size
사이즈
- width
- height
폰트
- font-size
- font-weight
- font-family
- color
간격
- margin
- padding

꼭 기억할 것!

박스는 div(구역)이다!

margin과 padding
- margin은 바깥 여백, padding은 안쪽 여백
- div에 색깔을 넣고, 직접 사용해서 차이를 비교한다!

박스를 가운데로 가지고 오기
- 박스를 씌우고 양쪽 여백 조정하기
- 전체 div를 만들고 width를 설정한 후 margin : auto를 사용한다!

구글 폰트

크롬 브라우저에서 google fonts를 검색한다.

https://fonts.google.com/?subset=korean

Filters를 클릭하고 language를 korean으로 설정한다.

원하는 폰트의 @import 부분을 <style></style> 태그 안에 복사 붙여 넣기 한다.

CSS class 탭의 코드를 복사한 후, 전체 적용(* { })을 css에 넣으면 완성!

Bootstrap

예쁜 CSS를 미리 모아둔 것!

CSS를 다룰 줄 아는 것과 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이다.
현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다!

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

웹 개발 종합_2주차 (5)	2024.10.29
Spring 사전캠프 퀘스트_반복문 연습하기 (0)	2024.10.29
Java Handbook_Part 1✏️ (4)	2024.10.22
내일배움캠프 스타터 노트 작성✏️ (2)	2024.10.21
내일배움캠프 시작😊 (10)	2024.10.21

당근당근🥕

웹 개발 종합_1주차

웹은 개발의 기초이다🤨

1주차 : HTML, CSS, Bootstrap

웹 브라우저 작동 원리

코딩 환경 세팅하기

HTML 기초

CSS 기초

구글 폰트

Bootstrap

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

티스토리툴바

웹 개발 종합_1주차

웹은 개발의 기초이다🤨

1주차 : HTML, CSS, Bootstrap

웹 브라우저 작동 원리

코딩 환경 세팅하기

HTML 기초

CSS 기초

구글 폰트

Bootstrap

'Today I Learned(TIL) > 스파르타 내일배움캠프' 카테고리의 다른 글

관련글

티스토리툴바