대학생 쩡딱구리

코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기 본문

STUDIES/WEB

코뮤니티 모각코 웹 기초 1일차: 웹 개발 시작하기

쩡딱구리 2021. 2. 4. 18:48

1. 웹 개발 시작하기(에디터 설치)

 많고 많은 에디터가 있지만 수업에서는 Visual Studio Code를 다루고 있고 나 역시 코딩을 하면서 설치해둔 Visual Studio Code를 사용했다. Visual Studio Code가 편한 이유는 에디터를 여러 개 설치하지 않고 하나를 설치했을 때 C언어 전반(C++, C# 포함), JavaScript, Python, HTML을 비롯한 여러 언어를 사용할 수 있기 때문이다. Visual Studio Code 홈페이지를 아래에 첨부했다.

 

Visual Studio Code - Code Editing. Redefined

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.

code.visualstudio.com

 웹 개발은 브라우저 상에서 작동하는 어플리케이션, 즉 웹사이트를 만드는 모든 일을 말한다. 웹 개발의 범위는 아주 넓은데 디자인 등 눈에 보이는 부분과 서버처럼 눈에 보이지 않는 부분이 있다. 이를 각각 프론트엔드(front-end), 백엔드(back-end)라고 한다. 정리하자면,

 

  • 프론트엔드: 홈페이지 콘텐츠 작성, 페이지 이동, 업로드 및 삭제 등등 담당
  • 백엔드: 데이터베이스, 보안, 데이터 전송 등등 담당

 또 퍼블리싱이라는 것도 있는데 퍼블리싱이란 디자인을 개발로 만드는 것을 말한다. 프론트엔드가 디자인에 관련된 기능까지 구별하는 것이 차이점.

 

2. HTML, CSS, JavaScript

  웹 퍼블리싱을 위해 HTML, CSS, JavaScript가 필요한데, 이들의 역할은 모두 다르다.

HTML, CSS, JavaScript 비교

  • HTML: 웹사이트의 뼈대를 만듦
  • CSS: 디자인(색상, 여백 등)
  • JavaScript: 동적 홈페이지 구성

3. HTML

 HTML(Hypertext Markup Language)이란 하이퍼 텍스트를 작성하기 위해 개발된 마크업 언어이다. 프로그래밍 언어가 아니다. 마크업 언어란 태그 등을 이용해 문서나 데이터 구조를 명시하는 언어를 말한다. HTML은 태그로 구성되어 있는데 이 태그에는 아주 많은 종류가 있다. 수많은 태그를 하나하나 외울 필요는 없다고 한다. 몇 가지 태그만 기록해보려고 한다.

태그 이름 태그의 기능/역할
<head> 해당 문서에 대한 정보인 메타데이터(metadata)의 집합을 정의할 때 사용
<title> 해당 문서의 제목 정의
<body> HTML 문서의 모든 콘텐츠(텍스트, 이미지, 표 등) 포함
<h1>~<h6> - 본문의 제목을 정의
- h1 -> h6으로 갈수록 제목의 중요도가 떨어진다.
<p> 문단 정의
<i> 글씨 기울임
<img> - 이미지를 삽입
- <img src = 이미지 주소 또는 경로.확장자/>로 사용. 따로 닫아주는 태그가 없다.
<table> - 표를 삽입
- 행과 열을 삽입하기 위해 <tr>, <td> 등의 태그를 함께 쓴다.
<a> 하이퍼링크 정의

 

4. 미션

Day1.html
0.00MB

 ✅ 태그 5개 이상 써서 HTML 문서 만들어보기

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>만나서 반갑습니다!</title>
</head>
<body>
    <h1>안녕하세요 여러분 정말 반갑습니다!</h1>
    <img src="C:\Users\s\Desktop\노트북다람이.jpg">
    <h2>저는 이번에 모각코 웹 기초 스터디에 합류한 김민정0110이라 합니다.</h2>
    <p>html이 처음이라 익숙치 않은데 깔끔하게 정리해주셔서 이렇게 나름 열심히!</p>
    <p>재미있게 하고 있습니다! 신청하길 정말 잘 한 것 같아요:)</p>
    <p>기회 주신 코뮤니티에 감사드립니다. 정말 열심히 할게요!</p>
    <p><i>오늘을 시작으로 15일! 잘 부탁드립니다:D</i></p>
</body>
</html>

코드 실행 결과(클릭 시 이미지 출처로 넘어감)

 

5. 공부 후

교육 자료가 상당히 깔끔히 정리되어 있어 스스로 공부하는 데 어려움이 없이 수월했다!

공부도 재미있어서 하길 잘했다고 생각하고 있다. 지금은 이렇게 기초부터 배워나가고 있지만

모각코 웹 기초 과정에서 미니홈피를 직접 만들어볼 수 있다고 하니 정말 기대된다:) 오늘도 즐겁게 공부했습니다!

'STUDIES > WEB' 카테고리의 다른 글

코뮤니티 모각코 웹 기초 5일차: 기본 레이아웃 만들기  (0) 2021.02.16
코뮤니티 모각코 웹 기초 4일차: 크기를 적용하는 여러 가지 방법  (0) 2021.02.14
코뮤니티 모각코 웹 기초 3일차: CSS, 폰트 적용하기  (0) 2021.02.11
코뮤니티 모각코 웹 기초 2일차: HTML, CSS 본격적으로 시작하기  (0) 2021.02.05
코뮤니티 모각코 웹 기초 합격과 시작  (0) 2021.02.04
'STUDIES/WEB' Related Articles more