생활코딩 | html

yoongiiii·2023년 8월 9일

생활코딩

목록 보기

1/11

1HTML (Hyper Text Markup Language)

:웹페이지를 만드는 컴퓨터 언어
(웹페이지 확장자명 .html)

사람이 하는일 (원인) -> code 부호, 신호 / source 원천 / language 약속, 컴퓨터 언어
기계가 하는 일 (결과) -> application / app / program / webpage / website

“원인을 통해 결과를 만든다”

웹페이지를 만들기 위한 준비물
: 웹브라우저 & 코드를 작성할 프로그램 editor(visual studio code)
~~“2023 best web development editor”~~

2태그 Tag

웹(html)을 지배하는 가장 중요한 문법.
태그를 정확히 알고, 의미에 맞게 사용해야 웹페이지가 더 가치있게 된다!!

웹이 가지고 있는 본래의 의미인 “정보”를 탄탄하게 하는게 가장 중요하다!!
그래야 검색엔진으로부터 살아남을 수 있음

또한 웹의 핵심적인 철학은 접근성(accessibility)
신체적인 장애가 있는 분들도 정보로부터 소외되지 않도록 노력해야한다!!

tip 모르는 태그나 알고싶은 태그가 나오면 검색
"html h1 tag"
"html new ling tag"
"html paragraph tag"
예제 먼저 살핀 후 정의 보기!

<!doctype html>
<html>

	<head> 본문을 설명하는 태그
		<title>페이지의 제목 (책표지)</title>
		<meta charset=“utf-8”> 본문이  utf-8형식으로 저장됌
	 </head> 
     
	<body> 본문 묶는 태그 
		
      <strong> 글씨 진하게 </strong>
      <u> 밑줄(underline) </u>

      <h1> 본문의 제목(heading) </h1>
      <h2></h2>
      /...
      <h6></h6>

      줄바꿈<br>

      단락<br><br> 
      <p style="margin-top:40px;">단락</p>

      어디서부터 어디까지가 한 단락인지 표현 가능한 p태그를 사용하는게
      br태그를 두번 쓰는 것 보다 웹페이지를 정보로서 조금 더 가치있게 해줌. 
      + 부족한 부분은 css기술 사용해 보안

      img 태그에 source 속성 추가
      <img src="coding.jpg" width="80%">

      ul태그와 li태그는 항상 같이 다님 (부모 자식)
      <ul> li와 같은 항목들을 그루핑해주는 태그(unordered list) 
          <li> 목차, 목록 태그(list) </li>
      </ul>

      <ol> li와 같은 항목들에 자동으로 숫자를 넘버링 해주는 태그(ordered list) 
      ul태그 대신 사용 </ol>
      
      hypertext reference
      <a href=“ ” >링크 거는 태그 </a>
	 클릭했을 때 링크가 새 탭을 열리게 
     <a href=“ ”  target = “_blank” > </a>
     클릭 전에 무엇인지 알려주게 튤팁기능
     <a href=“ ”  target = “_blank” title = “튤팁”> </a>
 
	</body>
</html>

통계에 기반한 학습 하기
https://www.advancedwebranking.com/html/

속성 (attribute)

태그의 심화된 문법. 태그가 태그의 이름만으로는 정보가 부족할 때 속성을 통해 더 많은 의미를 부가할 수 있다.

html 공식 사용설명서 “html specification”

웹 서버

웹서버를 사용할 수 있게 된다는 것은
내 컴퓨터에 잇는 문서를 전세계의 누구나 인터넷에 연결되어있는 컴퓨터에 웹브라우저를 깔면 가져다가 볼 수 있도록 할 수 있다는 것!!!

웹 서버 사용하기

웹서버 직접 운영 or 웹서버 대행 회사

1웹 호스팅

컴퓨터를 빌려주는 사업을 호스팅(또는 클라우드)이라고 하고, 그 중에서 웹서버와 같이 웹을 동작하기 위해 필요한 소프트웨어들까지 설치해서 빌려주는 사업을 웹 호스팅이라고 한다!!

https://github.com
1로그인
2소스코드를 저장할 공간인 저장소를 만들기
(new 버튼 클릭)
3 respository name : 저장소 이름 (예, my-first-web-site)
4public 공개 private 비공개 선택
5create repositorty 클릭
6uploading an existing file 링크 클릭
7파일 업로드
8commit changes에 어떤 작업을했는지 작성
(예, 웹사이트 완성!!)
9
10파일 클릭하면 내용 볼 수 있고
11주소를 공유하면 소스코드 자체를 공유하고 토론할 수 있음
+보관하고 있는 소스코드를 이용해서 웹사이트도 운영할 수 있는 기능을 제공해줌 (깃허브 페이지_웹호스팅 기능 활성화)
12settings -> pages
13 none을 main으로 바꾸고
14 save 버튼 누르기
15완료 되면 완성된 사이트 눌러 방문
(이 주소를 통해 전세계 누구나 내가 만든 웹사이트에 방문 가능!!)
+코드를 수정했으면
1저장소의 홈으로 방문(<>code 클릭)
2add file -> upload files 클릭
3작업한 파일들 다시 드래그해서 넣고
4commit changes에 어떤 작업을했는지 작성
(예, 수정!!)
5commit changes 클릭 -> 수정된 버전 업로드 완성!!
6자동으로 웹사이트 갱신해줌