html 다시 공부

2020.04.04 - html 다시 공부

https://www.youtube.com/watch?v=pQN-pnXPaVg

Basic Tags

<meta name = "decription" content = "This is a website"

검색 시 제목 아래 나오는 사이트 설명글

프로젝트 완성 후 필요할듯

 

<hr/>

위 아래 내용 사이에 줄 추가

Style

글자 색 지정

태그 중간에 style="colodr: blue;" 추가

<p style="color: blue;"> </p>

blue, red yellow 등등

 

배경색 지정

style = "background-color:red;" 추가

<p style="color: red; background-color:blue">

눈뽕 디자인...

body 태그에도 적용 가능 (페이지 전체 적용)

 

Formatting a Page

<header> </header>

<main> </main>

<footer> </footer>

<article> </article>

<nav> </nav>

<section> </section>

<aside> </aside>

보기 좋으라고 다는 태그? 스타일 지정할 때 필요한건가

 

Links

<a herf = "https://www.google.com" target="_blank"> <h1>google</h1> </a>

href = "링크(or page.html)"로 가는 텍스트 (하이퍼링크) 또는 같은 폴더에 있는 다른 파일(html,jpg 등)을 열 수도 있음

target="_blank" -> 새탭에 열기

 

Images

<img width="100" height="100" src = "이미지 주소" alt="이미지 이름"/>

페이지에 이미지이름이라고 뜨는 이미지를 소환(?)

이미지 주소는 같은 폴더 안의 경로도 가능

width, height는 사진의 크기 지정

<img/>를 <a> </a>태그 안에 넣으면 이미지에도 하이퍼 링크 가능

 

Videos & Youtube iFrames

<video src="tutorial.mp4" poster="thumb.jpg controls></video>

같은 폴더에 있는 tutorial.mp4 라는 비디오를 표시, thumb.jpg를 썸네일로 사용

(youtube - 공유 - 퍼가기 -  복사 로 유튜브의 영상도 가능)

width,height 추가로 크기 조정 가능

autoplay를 추가하면 페이지를 열었을 때 자동재생

loop플 추가하면 비디오가 끝났을 때 반복재생

 

Lists

<ol type="A">
   <li>Apples</li>
   <li>Oranges</li>
   <li>Bananas</li>
 </ol>

type=" " 안에는 A(알파벳), 1(숫자), i(로마숫자,대문자도 가능) 등등

<li></li>안에 중첩 가능

<ol>를 <ul>로 바꾸면 그냥 나옴

<dl>
  <dt>Apples</dt>
  <dd>- They are red</dd>
</dl>

<dl>은 위 사진처럼 나옴

 

Tables

<table>
  <caption><h2>List of Numbers</h2></caption>
  <tr>
    <th>num1</th>
    <th>num2</th>
    <th>num3</th>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
  </tr>
  <tr>
    <td>four</td>
    <td>five</td>
    <td>six</td>
  </tr>
</table>

<tr>는 table row(가로의 한줄)을 의미함

<td>는 tabel data(안에 들어갈 내용), 괄호 사이 colspan="3"으로 칸 지정

<th>로 하면 두꺼운 글씨로 나옴

<caption>은 표의 제목을 설정

<thead>,<tbody>로 구분

 

Divs & Spans

블럭 요소, 인라인 요소?

<span>span1</span>
<span>span2</span>
<hr />
<div>div1</div>
<div>div2</div>

어디에 쓰는걸까

Inputs & Forms

바로 내가 원하던 것, 버튼이나 그런것들 강의 1시간 45분만에 쓸만한 거 발견

<input type="text" value="Enter Your Name" />
<input type="password" />

text는 말 그대로 text고 password는 사진과 같이 안보이게

value =""로 Enter Your Name 등의 문자열을 넣을 수 있음

 

type은 email, file, text, password 등등 지정 가능

<form>
	<input type="submit" />
</form>

<textarea>
</textarea>

도라에몽 그리기(?)

크기 조절 가능한 text입력란을 만듦

 

type ="checkbox" -> 체크박스

type = "radio" -> 라디오 버튼(하나만 선택 가능)

 

<form>과 제출 버튼, 영상에서는 어떻게 쓰는지 안알려줌 그럼 왜 소개한거야

<form>
	<input type="submit" />
</form>

남은 두 강의는 스킵하고 내일 php 듣고 Oweb을 다시 시작한다 1주 넘게 안해서 다 까먹었음