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 해서 살펴보기
- 간단한 페이지 구현해보기
- gitlab 새로운 repo 생성해서 CI/CD로 자동배포하기
🌥 오후수업
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가지 경우가 있다.
- Inline Style Sheet
- html 태그 내부에서
style="color:red"와 같은 형태로 적용
- html 태그 내부에서
- Internal Style Sheet
- head 태그 영역에
<style>태그를 이용하여 적용
- head 태그 영역에
- External Style Sheet
- 외부 css 파일에 스타일 시트를 작성 후
<link>태그를 통해 head 태그 영역에 적용
- 외부 css 파일에 스타일 시트를 작성 후
- Inline Style Sheet
- 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/
Frontend Developer, 올라운더가 되고싶은 잡부 개발자, ISTP, 겉촉속바 인간, 블로그 주제 찾아다니는 사람