21.12.02ver.
<HTML로 웹 페이지를 만들면서 코딩이 무엇인지 파악하기>
1~3강.
- 수업소개
- 공부와 친해지는 계기가 되는 강의가 되길
- 프로젝트의 동기
- 기획
4. 코딩과 HTML
여기부터 눈에 보이는 화면이 나옴
HTML(HyperText MarkUp Language)의 강점
1) 쉽다. 이 언어의 문법을 배우는 데 10분도 걸리지 않을 것이다.
그렇기에 첫 코딩 공부를 하는 데 있어서 이보다 좋은 언어는 없다.
코딩한다 = 코드를 짠다.
5. HTML코딩과 실습환경 준비
1) HTML Editor
2) best HTML Editor 2021(현시점)
검색은 구글로 하자.
결국 나온 건 '아톰(atom)'이었다. 강의 그대로 보면서 진행해도 된다.
https://atom.io/
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
Ctrl + O 를 누르면 창 열기가 나오는 데, 이 작업은 새로운 인터넷 창에서 실행하기를 권장한다.
영상을 보고 있는 화면에서 진행하면 당황스러울 수 있다.
입력하고 '새로고침'을 누르면 바로 반영된다.
즉각적으로 반영되니 재밌다.
22.09.16. ve.
백엔드에서 프론트엔드 공부로 전향한 지금은
Visual Studio Code를 쓰고 있다. HTML, CSS, JavaScript. 모든 것을 할 수 있어서 편하다.
6. 기본문법 태그
<문법 내용> : 태그(TAG) 라고 부른다.
ex1) 강조
<strong>내용</strong>
ex2) 밑줄
<u>내용<\u>
앞에 있는 태그 : 열리는 태그
뒤에 있는 태그 : 닫는 태그
7. 혁명적인 변화
제목(제목과 더불어 줄바꿈)
그렇다면 장난을 한 번 쳐보자.
<h1>내용</h1>
-> 검색을 해보거나 뒤에 숫자를 바꿔보는 것도 시도해보자!
숫자가 커질수록 글자 크기는 작아진다.
앞의 숫자와 뒤의 숫자를 다르게 하면 어떻게 나타날까?
<h1>제목과 줄바꿈</h6>결과 : <h1>내용</h1>의 크기와 동일하게 나온다.
왜일까?
앞에 있는 태그가 '여는' 태그인 만큼, 글자 크기는 앞에 것에 영향을 받는다.
하지만 나중에 오류가 발생하지 않을까 싶다.
8. 통계에 기반한 학습
태그의 수는 150개 이상이 존재한다.
이번 강의는 보는 것만으로도 충분!
9. 줄바꿈 : br vs p
줄바꿈
<br>내용</br>줄바꿈을 많이 하고 싶을 때 자유롭게 사용할 수 있다.
단락
<p>내용</p> + <p>내용</p>단락태그는 줄바꿈의 크기가 정해져 있어서 여백의 제한이 있다. 하지만 CSS를 활용하면 해결된다.
시각적으로 부족한 것은 CSS를 통해서 충분히 해결할 수 있다.
그러므로 먼저는 HTML의 문법을 익히는 데 초점을 맞추자.
10. html이 중요한 이유
검색엔진에 노출되지 않는다는 것은 실질적으로 존재하지 않는 것과 다름 없다.
그림으로 작성해 놓은 제목은, 훗날 검색엔진에 노출되지 않게 될 수 있다.
11. 최후의 문법 속성 & img
img : image의 줄임말
<img src="이미지">를 입력하면 사진이 등장한다.
사진 참고 사이트
https://unsplash.com/
<img src="coding.jpg" width="100%">
이런 표현을 속성(Attribute)라고 한다.
리스트
<li>리스트화</li>
Unordered List
<ul>내용</ul>
자동 넘버링 Ordered List
<ol>내용</ol>
13. 문서의 구조와 슈퍼스타들
<!doctype html>
<html>
<head>
<title>WEB1 - html</title>
<meta charest="utf-8">
</head>
<body>
</ol>
<li>1. HTML</li>
<li>2. CSS</li>
<li>3. JavaScript</li>
</ol>
<h1>HTML이란 무엇인가?</h1>
<p>Hypertext Markup Language (HTML) is the standard markup language for <strong>creating <u>web</u> pages</strong> and web applications.Web browsers receive HTML documents from a web server or from local storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document.
<img src="coding.jpg" width="100%"></p>
<p style="margin-op:45px;">HTML elements are the building blocks of HTML pages. With HTML constructs, images and other objects, such as interactive forms, may be embedded into the rendered page. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. HTML elements are delineated by tags, written using angle brackets. </p>
</body>
</html>
14. HTML 태그의 제왕
링크(Achor>
<a href="링크 주소">링크 걸 내용</a>
- h : 하이퍼링크
- ref : 참조
<a href="링크 주소" target="_blank" title="설명 내용">링크 걸 내용</a>
- target="_blank" : 클릭했을 때, 새탭(new tap)이 열리게 하기
- title="설명 내용" : 링크 위에 마우스를 올리면 설명이 나옴
15. 웹사이트 완성
구경하자. 그리고 특정 언어나 분야에 대한 공부가 완료되면,
이런 식으로 웹사이트를 하나 만들어보자.
'프론트엔드 > 생활코딩' 카테고리의 다른 글
| JAVA 1 생활 코딩 11-15강. Parameter, Arguments, 컴파일, API, UI, 패키지, 클래스, 변수, 메소드, 인스턴스, 상속 (0) | 2022.01.06 |
|---|---|
| JAVA 1 생활 코딩 8-10강. 변수, 데이터 타입 변환, 프로그래밍, 프로그램, 디버거 (0) | 2022.01.06 |
| JAVA 1 생활 코딩 1-6강. 데이터, 데이터 타입, 연산, 숫자, 문자열 (0) | 2022.01.06 |
| 생활 코딩 16~20강 정리 + 웹 부록 (0) | 2022.01.03 |
| 자바 토이 프로젝트(Java toy project)에 관한 링크 모음 (0) | 2021.12.16 |
댓글