[앨리스(elice) 레이서 1기 ] 01주차/DAY2 - 웹 프로그래밍 기초(1)

Jung Wish·2020년 12월 23일

K-Digital-Training

K-digital-training - elice

목록 보기

1/6

TMI: 온라인 수업인데 오프라인 수업으로 대체 진행되었다.
예전에 알았던 내용을 복습하는 차원에서 들었던 내용을 정리해보았다.
자세한 내용은 생활코딩이나 엘리스 강의를 수강하면 좋을것 같다.

앨리스 레이서 1기 교육 - 웹 프로그래밍 기초(1)

☀️ 오전수업

생활코딩 이고잉님 - 웹 프로그래밍 기초(WEB과 HTML)

들어가기 앞서,

공부의 함정에 빠지지 말고, 배운 것을 실제로 활용하는 네이티브(Native)가 되자!

웹 프로그램 동작에서 원인과 결과

프로그램 동작의 원인(사람이 작성) : Code, Source(원천, 근원), Language(약속, 언어)
프로그램 동작의 결과(기계 제어) : Appplication(응용, 프로그램 요소를 응용해서 적용한 결과물), Program, Web Page

HTML && Internet

HTML = Hyper Text Markup Language
- 웹 페이지의 근원이 되는 언어
- 타 언어에 비해 쉽지만, 중요한 언어이다.
- 태그로 구성되어 있다.
  - 태그는 열린태그<> 닫힌태그</>로 구성되고 태그 내부에는 들어갈 내용(Contents)을 입력한다.
  - 태그 내부에는 속성값을 지정할 수 있다.
  - 컴퓨터 공학적인 시각에서, 태그는 기하급수적으로 많은 데이터를 관리하기 위한 수단이다.
- 웹 페이지의 페이지 소스 보기 또는 개발자 도구(F12)를 통해 페이지에 구성된 소스코드를 볼 수 있다.
인터넷(Internet)
- 클라이언트가 주소창에 도메인을 입력한다.(Request) 👉🏻 웹 서버는 원하는 파일을 찾는다.(Response) 👉🏻 서버는 클라이언트에게 해당 정보를 전달 👉🏻 클라이언트는 전달받은 내용을 볼 수 있다.
- 클라이언트와 서버는 각각 host이다.
  ➡️ host는 웹 서버에 연결된 컴퓨터들을 통칭한다.
- 웹 서버를 www를 통해 제공하는 것을 웹 호스팅(Web Hosting)이라 부르며, 근래에는 대용량 서버 제공 서비스를 클라우드(Cloud) 서비스라 부른다.

실습

주석달기, <u>, <strong>, <h1>~<h6> 태그 사용해보기
네이버 html 소스코드 copy&paste 해서 살펴보기
간단한 페이지 구현해보기
- https://opentutorials.org/course/3084/18431
gitlab 새로운 repo 생성해서 CI/CD로 자동배포하기
- (repo) https://kdt-gitlab.elice.io/j_wish_/web
- 배포된 Page

🌥 오후수업

HTML/CSS 기초 1장

웹 사이트 구성 요소

HTML/CSS/JS (구조/스타일/동작)

웹 사이트 제작 시 고려 사항

웹 표준 ➡️ 표준 규격, 속성 등을 따라야 한다.
웹 접근성 ➡️ 모두가 접근할 수 있어야 한다.
크로스 브라우징 ➡️ 사이트가 모든 브라우정에서 정상적으로 동작해야한다.

HTML 구성요소

<!DOCTYPE html>
<html>
	<head>
    	<!-- 웹 문서의 metadata에 해당하는 부분 -->
    	<meta charset="UTF-8">
        <title>웹프로그래밍</title>
    </head>
    <body>
    	<!-- 웹 문서의 본문에 해당하는 내용으로
       	화면상에 출력되는 모든 정보가 이곳에 적힌다.-->
    </body>
</html>

HTML 기본태그

<a> : anchor 태그로 하이퍼링크를 생성한다.
- 주요 속성 : href, target
<img> : 이미지를 삽입한다.
- 주요 속성 : src, width, height, alt
<h> : Heading의 약자로 글자 크기에 따라 1~6이 있다.
<p> : Paragraph의 약자로 본문 내용을 표현한다.
<ol>, <ul> : Ordered list, Unordered list의 약자로 리스트의 틀을 만들때 사용한다.
- <li> : ol, ul 태그 내부에 항목을 나열할 때 사용한다.

HTML 시멘틱 구조 태그

시멘틱 구조 태그는 기본적으로 모두 div 태그의 기능을 한다. 직관적으로 div의 역할을 구분하기 위해 의미를 부여한 이름을 가진 태그라고 정의할 수 있다.

header, nav, main, article, footer 등이 있다.

HTML 태그의 성격

Block 요소 : 부모 요소의 전체 공간을 차지하여 블록을 만든다.
Inline 요소 : 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지한다.

[ 참고 ] https://developer.mozilla.org/ko/docs/Web/HTML/Inline_elements

CSS(Cascading Style Sheet)

HTML문서의 레이아웃과 스타일을 정의한다.
CSS를 HTML요소에 적용하는 방법에는 3가지 경우가 있다.
1. Inline Style Sheet
  - html 태그 내부에서 style="color:red" 와 같은 형태로 적용
2. Internal Style Sheet
  - head 태그 영역에 <style> 태그를 이용하여 적용
3. External Style Sheet
  - 외부 css 파일에 스타일 시트를 작성 후 <link> 태그를 통해 head 태그 영역에 적용
CSS Selector는 Type, id, class가 있다.
선택자 캐스케이딩 우선순위는 style > id > class > type 순이다.
➡️ 여기서 style은 태그 내부에서 쓰이는 속성을 말한다.
HTML은 태그의 위치에 따라 부모-자식, 형제 관계가 결정되며 이는 CSS에도 적용된다.

[기타] VSCode 주요 단축키 (MAC 기준)

command + option + 방향키(⬆️,⬇️) : 커서 여러줄 선택
command + d : 같은 문자 선택
command + { : 내어쓰기
command + } : 들여쓰기
command + f : 문자 찾기
문자열 드래그 + / : 드래그 부분 모두 주석 처리

Reference

엘리스 코딩 교육기관
https://elice.io/
생활코딩
https://opentutorials.org/

Jung Wish

Frontend Developer, 올라운더가 되고싶은 잡부 개발자, ISTP, 겉촉속바 인간, 블로그 주제 찾아다니는 사람

다음 포스트