[HTML] WEB1.3 - WEB1.15 — 둥당둥당동

728x90

https://www.youtube.com/watch?v=QwCdCcsPVTQ&list=PLuHgQVnccGMDZP7FJ_ZsUrdCGH68ppvPb&index=4&t=0s

WEB1.3 기획

기획

무엇을 만들 것인지 그려보고 설계하는 과정

코딩과 HTML

사람이 하는 부분(원인) - code/source/language

기계가 하는 일(결과) - application/app/program/webpage/website

HTML

= HyperText Markup Language

webpage를 만들때 사용하는 언어

HTML 코딩과 실습환경 준비

준비물: web browser + editor

>> editor로 atom 1.48.0 version 설치

확장자 html의 파일 1 생성 >> web 디렉터리에 있는 파일 1.html

기본 문법 태그

태그 (Tag) = <열리는 태그> + </닫히는 태그>

<strong> </strong>: 볼드 처리

<u> </u>: under line

<h1> ~ <h6>: HTML headings → 줄바꿈 + 약간 볼드

줄바꿈 br vs p

#html newline tag

#html paragraph tag

<br>: 단순 줄바꿈을 의미, 따라서 감쌀 필요가 없다 (==</br>필요없다)

<p>: 단락을 표시, 단락의 처음과 끝을 표시해야한다(==</p>필요)

의미 전달성은 더 좋음

여백 자유도가 떨어짐 >> CSS를 사용해 <p style="margin-top: 40px;">으로 문단 사이의 공간을 원하는 만큼 지정할 수 있다

최후의 문법 속성 & img

속성(Attribute): 태그의 이름만으로는 정보가 부족할때 태그에 이어 붙여 더 많은 의미 부여

부모자식과 목록

부모와 자식관계의 태그들에 대해 알아보기

<ul>태그는 <li>태그의 부모 태그

<li>: 리스트화

<ol>태그는 <li>태그의 부모태그로, 자동으로 넘버링이 된다

<ol> = ordered list

<ul> = unordered list

++표를 작성하고 싶을 때

<table> </table>을 사용하면 된다

문서의 구조와 슈퍼스타들(빈도수가 높은 태그들)

1 <!doctype html>: 관용적으로 웹 페이지의 맨앞에 붙이는 태그로 html로 작성된 문서임을 알려준다

2 <html>: 최고위층 태그

3-6 <head> </head>: 본문의 정보에 대해 설정하는 부분

<title>:본문의 제목 설정

태그의 제왕

<a>: 링크를 표현

href = "": 연결해 참조할 주소 (=hypertext reference)

target = "_blank": 링크 연결 시 새로운 창에 연결된 주소의 사이트가 나타나도록 함

title = "html5.3 specification": 링크가 걸린 부분에 마우스를 가져다 대면 나올 메시지(타이틀)

웹페이지 완성

서로의 페이지를 연결해서 완성된 웹 사이트 만들기

WEB --> (index.html) --> 1.HTML 2. CSS 3. JavaScript --> (1.html) --> HTML ~~

SMALL

'Web > Web Programming' 카테고리의 다른 글

WEB 02.1.2 문서 내 이동 (0)	2020.07.19
[HTML] 입력 폼 (0)	2020.07.19
[HTML]링크와 멀티미디어 (0)	2020.07.16
WEB 01.2 (0)	2020.07.12
WEB01.1 (0)	2020.07.12

기획