[Day 18 | Web] Media Tag , 기타 태그, CSS(업데이트 필요)

► 미디어 태그 

<img src="  위치(URL) "  width=" 100 " height=" 200 "  alt=" 대체글자 " />	

<audio src=" "  width=" 100 " height=" 200 "  autoplay = " " loop=" " control= " " />

<video src=" "  width=" 100 " height=" 200 " autoplay = " " loop=" " control= " "  />

태그들은 찾아보면 엄청 많다. 

 

버전이 안맞으면 파일이 지원될 수도 안될 수도 있으니, 버전별로 넣어본다. 

브라우저별로 안맞을 수도 있다. 

 

► 전송 태그 

► form 태그: 

<Form action = "위치(어디로 보낼지 파일 위치) method = "전송 방식(get, post)"  > 

            <input type = "submit" value = "submit"/> <br/>

</From>

폼 태그 영역 안에 있는 애들만 보내겠다. 

그런데 어디로? --> action 

어떻게? --> 전송방식 method (1. get, 2. post) 

• get ==> QueryString => url? 변수명 =" ~~~ " & 변수명 = " ~~~"
  • 언제? 

 

 

 

form의 역할은 다른 페이지로 넘겨주는데 있다. 

 

 

아래처럼 웹서버 안에서 페이지가 두 개가 있다고 하자. 

텍스트라는 데이터를 페이지 1에서 받아서 페이지 2로 넘기고자 한다. 

넘기는 방식에는 여러가지가 있다. 

1. get 2. post

 

 

get ==> 보안상 취약 글자 크기가 제한되어있음, 따라서 검색 등 에 사용

body ==> 데이터 양이 많을 때. 

 

사실 get과 post 외에도 HTML 요청 메소드는 아주 많음 

HTTP 요청 메서드 - HTTP | MDN

 

 

 

html은 일반 프로그래밍과 달라 연산, 함수가 없음 

그래서 그 연산을 서버에서 한다면, Java로 하면 되고

클라이언트 PC에서 하면 Javascript에서 한다. 

 

id와 name의 차이는 무엇일까? 

실질적으로 데이터로 쓰이는 것은 username이다. 

 

id는 태그의 유니크한 값을 의미한다. 

id는 언제 쓰냐면, css, ID가 어떤 값인 것만 바꿔라. 

class가 어떤 것만 색을 어떻게 입혀라 등

 

즉, name, value는 데이터를 처리할 때.

id는 css를 처리할 때. 

 

위의 사진처럼 헷갈릴 때에는, id와 name을 다른 값으로 쓰면 됨!

 

 

 

리스트 상에서 선택을 할 때에는 select를 쓴다. 

여러 개 선택할 때는 multiple을 쓴다. 

 

선택 시에 대분류를 할 수 있는 것. optgroup

 

 

 

fieldset은 영역을 나눠주는 것 

 

 

 

 

<textarea>

글을 계속 내려 쓸 수 있게 하는 형태 

 

 

<p>

문단.

p태그가 끝나면 문단 바뀜.

한 줄 자동 내려쓰기가 됨 

 

<div>

영역

 

<br>

그냥 한 줄 내려쓰기 

 

<span>

글자 자신이 차지하는 공간만큼 차지. 

 

 

simentics

의미있게 구분지어져 보이는 태그, 기사 원본처럼 보이는 태그 

 

 

► 태그 종류 정리

#. 태그 종류 (영역 태그, 인라인 태그)

	- 영역 태그
		h1  태그
		div  태그
		p  태그
		목록 태그
		Table 태그
		Form 태그
	- 인라인 태그
		a 태그
		span 태그
		input 태그

 

1. 구조를 만들고

2. 실행하고

3. 색칠한다. 

 

나중에 데이터 분석을 하려면 웹 크롤링이 9를 차지합니다. 

1. 어떤 단어를 내려받고 싶으면 개발자도구 들어가서 섞여있는 태그 속에 찾는다 

2. css가 있는 방식으로 

3. 자바스크립트가 핸들링하는 액션 처리 방식으로 내려온다 

 

<li>
  <label for="mail">메일 주소</label>
  <input type="email" id="mail" value="예) tom@abc.com">
</li>

<li>
  <label for="phone">연락처</label>
  <input type="tel" id="phone" value="예) 010-1234-2345">
</li>

<li>
  <label for="homep">블로그/홈페이지</label>
  <input type="url" id="homep" value="예) http://www.naver.com/blog/tom>
</li>

 

 

HTML input type: 

• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="datetime-local">
• <input type="email">
• <input type="file">
• <input type="hidden">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="tel">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

 

태그 정리 

• progress
• time
• download
• meter
• color

 

 

css

 

 

#이 의미하는 것 : ID 

 

자바와 다르게 css는 다중 상속 가능

 

 

태그 별 지정 가능 

 

 

클래스를 더 많이 쓴다. 

 

 

 

* 을 사용한 와일드카드도 가능 

 

 

자식 선택자 중 > 는 직계 자식만을 의미한다. 

따라서 직계 자식보다 더 아래 자식들에게는 상속되지 않는다.  

 

 

ㅍ

 

 

 

 

em은 배수단위, px은 고정된 단위! 

 

select만 복사할 수 있음!

나중에 웹에서 데이터 추출할때 유용하게 사용될 것

 

데이터의 대부분은 웹에서 가져다 써야한다. 

계층적 이해를 해야 나중에 파이썬으로 가져다 쓰기가 편해진다. 

 

 

 

 

 

 

오늘은 뭔가 개념의 이해보다는

HTML과 CSS에는 이런 종류가 있다

설명들이 대부분이어서 수업 자체가 힘들지는 않았다.

 

그러나 이걸 온전히 잘 쓸 수 있느냐는 다른 문제이다. 

뭐가 있는질 알고, 

 

어떤 때는 =" " 를 쓰고, 어떤 때는 그냥 :을 쓰고, 사소한 문법들이 자잘자잘하게 알아야 하는 것들이 많은데. 

 

 

 

종종 해주시는 IT의 옛날 이야기가 2015년 2016년 이쯤 얘기가 아니라 

2000년대 초반.. 이야기라 넘 과거 이야기 같당ㅎㅎ

다음 페이지도 근 5년간 최고 많이 본듯...

 

 

 

 

웹쪽은 트렌드가 빨리 변해서

책을 사려면 최신책을 사야해요! 

 

 

 

 

 

 

복습 잘하세요!