코코아톡 #2

타키탸키·2021년 3월 24일

html 노마드 코더 웹사이트 코코아톡 클론 코딩

코코아톡 클론 코딩

목록 보기

2/3

2.0 [21.03.25]

VSC 파일 이름과 폴더 이름은 반드시 소문자
.html은 파일 확장자
파일 이름 옆 동그라미는 변경 사항 저장 안 했다는 뜻
저장 단축키: ctrl + s
브라우저를 통해 html 파일을 볼 수 있음(오른쪽 마우스 -> 열기)
새로고침하면 변경 된 파일 바로 확인 가능

2.1

메모장으로도 똑같이 할 수 있음
그럼에도 VSC 사용하는 이유는 좋은 확장 프로그램을 가지고 있기 때문
Material Icon Theme & Material Theme
브라우저에는 오류가 없다 = HTML 규칙을 따르지 않아도 보인다
- 브라우저는 HTML 파일에 에러가 있다고 말해주지 않는다

2.2

HTML은 tag 사이에 content를 넣는다
<tag 이름> - content - </tag 이름>
- ex:) <food>김치</food>
이렇게 하면, 브라우저가 김치가 food인 것을 알게 된다
마우스 우클릭 -> 요소 검사
h1(header number 1)
- 텍스트 크기와 모양이 바뀜
tag 암기할 필요X -> 작동 원리 이해
tag 시작만 하고 끝 안 내면 모든 것이 tag 형식대로 변함
h1부터 h6까지 글씨 크기 설정 가능
- h7 존재하지 않는 tag

2.3

list tag
- ordered list(<ol>): 순서가 있는 목록
- unordered list(<ul>): 순서가 없는 목록
list item(<li>): 리스트 아이템
ex:

<ul>
  <li>김치</li>
  <li>우유</li>
<ul>

prettier: 에러 코드 방지 확장 프로그램
- setting: format on save 체크

2.4 [21.03.26]

anchor(<a>)
- link
- 다른 웹사이트로 이동
attributes(속성): tag에 추가하는 부가적인 정보
href
- HTTP reference
- hyperlink reference
- 이동할 곳을 알려준다
<a href="http://">
target="_self": 바로 이동
target="_blank": 새 탭으로 이동
image(<img />)
- 끝이 없다
- self-closing tag(자체 닫기 태그)
source(src="이미지 주소")
- 웹사이트 이미지는 이미지 주소로 가져옴

2.5

파일로도 이미지 추가 가능
- 원하는 이미지 파일을 html 파일과 같은 폴더에 넣어준다
- src="파일 이름.확장자"
- html 파일과 다른 폴더에 있다면 그 폴더의 경로까지 함께 적어준다(path notation).
모든 HTML 문서의 첫 번째 라인
- <!DOCTYPE html>
- 현재 파일이 텍스트 파일이 아닌 html 파일이라는 것을 브라우저에게 알리는 역할
두 번째 라인
- <html>...</html>
- 이 태그 안의 모든 코드는 html 코드임을 알리는 역할
웹사이트 구조의 두 가지 부분: head & body
<head>
- 웹사이트 페이지에 관한 환경을 설정
- 외부적으로 보여지지 않는 설정
- <title>: 웹사이트의 타이틀 지정
- head 태그에 속한 모든 태그들은 보여지지 않는다
<body>
- 사용자가 볼 수 있는 content를 보여준다
- 브라우저 화면 상에 보여질 내용들은 모두 body 태그에 있어야 한다

2.6

meta 태그
- 부가적인 정보를 나타낸다
- self-closing tag
- 속성: content, name, charset...
- charset="utf-8": 특수문자 언어 안 깨지고 나오게 한다
<html lang="">: 검색 엔진에게 사이트에서 사용하는 언어 알려준다
<link rel="shortcut icon" />: 타이틀 옆 로고 설정
og:
- 오픈 그래프 메타 태그
- 소셜 그래프(페이스북, 카카오)에서 객체를 정의한다

<!DOCTYPE html>
<html lang="kr">
    <head>
        <link 
          rel="shortcut icon" 
          sizes="16x16 32x32 64x64" 
          href="https://nomadcoders.co/m.png"
        />
        <title>Home - My first website.</title>
        <meta charset="utf-8" />
        <meta name="description" content="This is my website" />
        </head>
    <body>
        <h1>Hello!</h1>
        <a href="http://google.com">Go to google.com</a>
        <img src="KakaoTalk_20210126_003913544.jpg" />
    </body>
</html>

2.7 [21.03.30]

구글에 html, css, Javascript 검색할 때, mdn 붙이기
- Mozilla developer Network로 안내
- Web에 관한 documentation
- mdn 없을 때 뜨는 w3 schools는 이용하지 말 것
<p>: paragraph, 긴 문장
<pre>: 글씨체 다름
<mark>: 하이라이팅
- <p>I love <mark>you!</mark></p>
- I love you!
<strong>: 글자 굵게
<sup>: 글자 조금 위로
- 지수에 활용 가능
- <p>2<sup>5</sup></p>
- 25
ctrl + d: 태그 한 번에 바꿀 수 있음
<audio>: 음악 재생
- <audio controls src="https://(생략).mp3"></audio>
<dialog>
- <dialog><p>Greetings, everyone!</p></dialog>
태그 암기하지 말고 구글 검색하기
enable = true
- attribute(ex: src)에 넣으면 동작 수행
- controls="true"

2.8

<form>
<input>
- self-closing tag
- 입력 박스 생성
type="": input은 여러 개의 타입을 가짐
- color: 색 입력 가능
- password: 비밀번호 마킹
- text: 기본
placeholder="": 입력창에 연한 글씨
disabled: 입력 금지, 마우스 클릭 안됨
required: 안내 문구
minlength: 최소 글자 제한
file: 파일 첨부 가능
accept: file attribute와 사용, 첨부 가능한 확장자 목록 / image/*(이미지 파일 전부), video/*, audio/*

  <input type="file" accept=".pdf" /> 
  <input reuired placeholder="Name" type="text" />
  <input reuired placeholder="Last Name" disabled type="text" />
  <input reuired placeholder="Username" minlength="10" type="text" />
  <input reuired placeholder="password" minlength="10" type="password" />
  <input type="submit" value="Create Account" />

html 기본 구문
- <tagname attrname="attrvalue"></tagname>

2.9 [21.03.31]

label: form에 question 추가
- <label>Profile Photo</label>
- Website
- for은 id와 함께 사용
id
- 고유 식별자(unique identifier)
- body 속 어떤 태그에든 넣을 수 있는 attribute
- element(태그)당 하나의 id만 가질 수 있다
- CSS가 태그를 지정하여 꾸미기 위해 필요하다
- ex:) website라는 ID를 가진 input을 파란색으로 해줘
- id="website" (생략) type="text"
alt+클릭: 두 군데 동시 입력
range: 범위 조정 가능
date: 날짜

2.10

div: 박스, division
- 구역 나누기
- 구역을 나누길 원하는 태그를 div 안에 넣어준다
- <div> <label>...< /></div>
- Website
  Website
sementic
- 문서를 보기만해도 그 의미를 짐작할 수 있다
- 코드 자체로 의미가 부여된 태그, 의미 있는 박스
header = div
- head와는 다름
- body 안에 정의 됨
- 개발자로 하여금 website의 header 부분임을 명시한다
- <header> <h1>The Taki Times</h1> </header>
- <div id="header"> => 이런 식으로도 가능
main
- <main> <span>hello!</span> </main>
- span: 짧은 텍스트
- p: 문단
모두 div로 대체할 수 있다
- 그러나, document와 content를 명확하게 묘사하기 위해 sementic으로 작성한다