[코코아톡 클론] 2.4~2.11 필기

yejin·2021년 1월 5일

html css kokoa clon

[코코아톡 클론] html-css

목록 보기

1/9

html

📌tag attributes

href는 a에서만 사용 가능 h1같은곳에선 불가능

<h1 herf="http://google.com">go tho the google</h1>

이게 불가능하다는 소리

<a href="http://google.com" target="_blank"> go to the google </a>

" target_blank " 이거는 저 링크를 눌렀을때 현재 페이지가 구글페이지로 넘어가는게 아니라
새 창이 뜨면서 거기에 구글 페이지가 나옴

<img>

얘는 다른것들이랑 다르게 /로 닫아주는 태그가 없음

<img></img>

이게 아니란말임 . 이유는 lf-closing tage이기때문 (자체 닫기 태그)

<img src="이미지 주소 여기다 복붙" />

이렇게 하면 이미지가 뜸 아니면 " " 에 이미지 파일명 쓰던가

📌lts all about the head

<head>
	<title> home- my first website. </title>
</head>

👉결과

📌mor tags

<!DOCTYPE html>
<html lang="kr">
  <head>
    <title>home - my first website.</title>
    <meta charset="utf-8" />

<!--og title과 og image는 링크를 카카오톡에 공유할때 보여지는거-->

    <meta name="description" content="this is my website" />
    <meta property="og:title" content="Nomad Coders" />
    <meta property="og:image" content="https://asdlkbjdkl" />

<!--위에 로고 보이게하는거 -->
    <link
      rel="shortcut icon"
      sizes="16x16 32x32 64x64"
      href="http://nomadcoders.co/m.png"
    />
  </head>

👉결과

결과모습
정리
meta는 부가적인 정보란 뜻임
```
<meta charset="stf-8"> 
```
: 브라우저에게 text를 어떻게 그려달라는지 말해줌 이거 안적으면 글자가 깨져보일수도있어

title도 구글이 검색에 중요한 비중을 가지고 있음
google이 검색할때 찾는 태그 content
카카오톡은 우선 og:title이라는 태그를 찾고 그리고 description을 찾음
사이트의 부가적인 정보들은 head 태그에 작성해주는것
페이스북이나 트위터 관련 정보들도 여기에 넣을 수 있어

★w3schools 사이트 절대 사용하지않길 바란다 하심★
mdn 사이트를 항상 이용 => mdn html요소 참고서

<!--글자효과-->
<p>wow good</p>
    <pre>wow good</pre>
    <p>my name is<abbr title="yejin">강동원</abbr></p>
    <cite>hello!</cite>
    <p>i like to live in <mark>south korea</mark></p>
    <p>i like to live in <strong>south korea</strong></p>
    <p>i like to live in <sub>south korea</sub></p>
    <p>i like to live in <sup>south korea</sup></p>

<!--audio삽입-->
    
    <audio 
    controls="enabled"
    autoplay="enabled"
    src="오디오주소"></audio>

👉결과

결과모습
+강동원에 마우스 대면 yejin이라는 문구가 뜸

정리
굳이 enabled를 안적어줘도 작동함 enabled나 true는 같은것임
autoplay → 자동으로 노래가 재생됨 play버튼을 누르지 않아도.

📌form tags

<form>
      <input type="file" accept=".pdf,image/*" />
      <input type="color" />
      <br />
      <input required placeholder="name" type="text" />
      <input required placeholder="last name" type="text" />
      <input required placeholder="username" disabled type="text" />
      <input required placeholder="password" minlength="5" type="password" />
      <input type="submit" value="click!" />
    </form>

👉결과

username은 작성 불가능하게 막혀있음. -> 코드에 disabled를 삽입했기 때문

<form></form> 을 써야지만 제출 버튼 눌렀을때 이 입력란을 작성하라고 경구문구가 뜸!
안쓰면 안뜸

<form>
      <!--profile photo라는 문구를 클릭하면 파일 업로드 창이 뜸-->
      <label for="profile">profile photo</label>
      <input id="profile" type="file" accept=".pdf,image/*" />
      <br />
      <!--first name누르면 바로 name창에 입력할수 있도록 됨-->
      <label for="first">first name</label>
      <input id="first" required placeholder="name" type="text" />
      <br />

      <!--여기에 hello입력하면 url을 입력하라고 뜨는데
      이게 바로 원치않은 값을 안 받도록 도와주는거야
      input의 type은 ulr뿐만아니라 text, email, date, range등 여러가지있어!
      input유형은 mdn웹사이트에서 찾아볼수있어 -->
      <label for="website">website</label>
      <input id="website" required placeholder="name" type="url" />

      <input type="submit" value="click!" />
    </form>

👉결과

📌Semantic HTML

<form>
      <!--div여부차이-->
      <div>
        <label for="profile">profile photo</label>
        <input id="profile" type="file" accept=".pdf,image/*" />
      </div>

      <div>
        <label for="first">first name</label>
        <input id="first" required placeholder="name" type="text" />
      </div>

      <label for="website">website</label>
      <input id="website" required placeholder="name" type="url" />

      <input type="submit" value="click!" />
    </form>

👉결과

div 있을때 (세로정렬)
div 없을때 (가로정렬)

<body>
    <header>
      <h1>the nico times</h1>
    </header>

    <main>
      <p>hello!</p>
    </main>

    <!--꼬릿말을 위한 tag-->
    <footer>&copy; 2020 Y.J</footer>

    <!--짧은 text는 p태그가 아닌 span태그가 적합 -->

    <span>치킨 또 먹고싶다</span>

    <!-- 위 태그들을 전부 div로 바꿔도됨 바꿔서 id값 줄수도있구..
    하지만 이런식으로 쓰면 코드 자체를 이해하는데 번거로움이 생김
    이런 header footer...등등 이런 코드 모음은 mdn사이트 content sectioning에 볼수있어
    예전에는 div를 많이썼구 떡칠했었는데 지금은 저런 태그들이 생김! -->
  </body>

👉결과

우리가 사용은 하지만 아무런 의미가 없는 태그(Non Semantic Tags) : div
의미론적으로 봤을때 document안에는 아무런 값도 없는 box인거임

head는 보이지 않는 태그
header 태그는 body안에 포함돼있는거

보자마자 바로 의미 알 수 있는 태그(Semantic Tags) : header, main같은 코드들!

★코드를 외우려고 하지마!★

tag들 뭐뭐있는지 다 구구절절 외우고 의미찾고...그러지마 시간낭비야
모르는거 있으면 MDN같은 문서들 찾아보면서 해도 충분해!

📌html에 css연결

<!--html에 css 분리된 파일 연결시키는거 -->
<head>
	<link href="styles.css" rel="stylesheet" />
</head>

꼭 head안에 적어야해

yejin

♪(๑ᴖ◡ᴖ๑)♪ 기회는 도전에서부터 시작되는 것

다음 포스트