될때까지

HTML study :: 생활코딩 | WEB1 - HTML & Internet (36/36) 본문

학습/JavaScript, TypeScript

HTML study :: 생활코딩 | WEB1 - HTML & Internet (36/36)

랖니 2022. 5. 19. 23:29
728x90
본 포스팅은 생활코딩 HTML 영상을 보고 개인적으로 정리한 내용입니다.

✍️정리하기

#4

  • HyperText Markup Language은 쉽고 (많이 쓰이니까)중요하다.
  • 웹을 만든 팀 버너스리는 저작권이 자유로운 public domain으로 선언했다.

#5

  • 웹의 확장자는 ‘.html’
  • 파일 선택하는 창 단축키 W:ctrl + 알파벳 ‘O’ / M:command + 알파벳 ‘O’

#6

  • 강조(두껍게 표시) : <strong>강조할 문구</strong>
  • 밑줄(underline) : <u>밑줄칠 문구</u>
  • tag : 옷의 태그는 옷에 대한 정보를 담고 있듯이 html에서의 tag도 똑같다. 그리고 열린태그, (슬래시가 붙은)닫힌태그 1쌍으로 이루어져있다.

#7

  • 제목(heading) : <h1>제목</h1> - 숫자가 작을수록 글씨가 크다. 두껍게와 줄바꿈 처리가 들어가있다.

<h1>This is heading 1</h1> 제일 큰 제목 1

<h2>This is heading 2</h2>  
<h3>This is heading 3</h3>  
<h4>This is heading 4</h4>  
<h5>This is heading 5</h5>  
<h6>This is heading 6</h6> 제일 작은 제목 6

#8

  • 통계 기반으로 효율적으로 공부하면 좋다.

#9

  • 에디터에서 엔터를 쳐서 문단을 나눠도 웹사이트에서는 줄바꿈처리가 되지 않는다. 태그를 사용하여 줄바꿈처리를 해줘야한다.
  • 줄바꿈 : <br> - 시각적 효과만 주기 때문에 닫힌 태그 x
  • 단락(paragraph) : <p>단락으로 구분 지을 문장들</p>
  • 의미론적으로 웹사이트를 만드는 게 더 좋은 방법이기 때문에, 내용상 문단으로 나눠야 하는 경우라면 br태그보다 p태그를 사용하는 게 좋다. p태그의 단점은 여백의 넓이가 정해져있다는 점이지만 css의 style이라는 속성을 사용하면 커스텀이 가능하다.

#11

  • 이미지(image) : <img source=”위치” width=”가로 사이즈”>
  • 태그의 이름만으로는 표현해야할 정보가 부족한 경우가 있다. 이럴땐 어떤 img인지 알 수 있게 source라는 단어를 줄여 src=”” 안에 가져올 이미지의 경로를 써주고, width=””안에 가로 사이즈를 적어주면 된다. 이때 사용한 src, width와 같이 추가 정보를 나타내는 아이들을 속성(attribute)이라고 한다. 속성은 태그에 더 많은 의미를 부여해준다.

#12

  • 목록(list) : <li>리스트로 나타낼 아이들</li> : 부모 태그인 ol(ordered list), ul(unordered list)와 함께 2대가 같이 다닌다.
  • VScode에서 여러 줄을 한번에 선택하는 단축키는 alt + ctrl

#13

  • 웹 페이지의 구조
<!DOCTYPE html>
<html>
<head>
    <title>웹 페이지의 제목</title>
    <meta charset=”utf-8”>
</head>
<body>
    <p>본문에 해당하는 내용</p>
</body>
</html>
  • 컴퓨터는 모든 정보를 0과 1로 저장한다. 우리가 작성한 파일은 utf-8을 사용하기 때문에 웹 브라우저에서도 utf-8을 사용해서 열도록 명시해야한다.

#14

  • 앵커(anchor) 링크를 타고 이동하는 태그 : <a href=”이동할 사이트 주소” target=”목적지” title=”설명글”>링크이동</a>
  • W3C는 미래의 웹의 기준(표준)을 정하는 단체다.

#16

  • 인터넷 ≠ 웹 : 인터넷(1960년대 등장)은 웹이 돌아갈 수 있도록 전 세계적으로 모든 컴퓨터들이 서로 연결되어 통신을 주고받는 하나의 거대한 네트워크(통신망)를 말한다. 웹(1990년대 등장)은 인터넷에 연결된 사용자들이 서로 정보를 공유할 수 있는 공간이다. 인터넷이 도시라면 웹은 건물, 인터넷이 도로라면 웹은 자동차에 비유할 수 있다.

#17

  • 웹 브라우저, 웹 서버 기능을 하는 2대의 컴퓨터가 필요하다. 웹 브라우저(클라이언트)는 웹 서버에 request를 하고, 웹 서버는 웹 브라우저에게 response를 돌려준다.

#18

  • 웹 호스팅 : github 회원가입 > 저장소 생성 > public으로 선택 > create repository > uploading > 작성한 코드를 업로드 하기 > commit 메세지 작성 > commit changes > settings > pages > source의 none을 main으로 선택 > save
  • actions의 pages build and deployment 작업이 모두 끝나야 웹사이트가 성공적으로 조회된다.

#19

  • http : HyperText Transfer Protocol = 웹페이지를 전송하는 통신 규칙
  • 127.0.0.1 : Internet Protocol Address = 컴퓨터끼리 통신할 때 쓰는 주소 체계로, 127.0.0.1은 나의 IP주소다.
  • 8887 : Port

#33

  • 댓글 : disqus

#34

  • 채팅 : tawk

#35

728x90
저작자표시 비영리 변경금지

'학습 > JavaScript, TypeScript' 카테고리의 다른 글

split()  (0) 2022.08.25
map()  (0) 2022.08.25
JavaScript study :: 함수  (0) 2022.03.14
JavaScript study :: switch문  (0) 2022.03.14
JavaScript study :: 동등연산자와 일치연산자  (0) 2022.03.14
'학습/JavaScript, TypeScript' Related Articles more