[ HTML ] 검색사이트 구현, 동영상 넣기

 

---

 

검색사이트 구현하기

​

1) Naver에서 검색 url을 복사한다.

? 을 기준으로 앞부분은 전송될 페이지

? 을 기준으로 뒷부분은 전송 데이터

​

2) html에서 <from> 태그 이용하여 만든다.

<form>태그에서 action 속성에 전송될 페이지를 입력

( action = "https://search.naver.com/search.naver )

​

3) 네이버 검색 링크에서 데이터 이름과 데이터값을 나눠준다.

? 오른쪽 있는 query=covid를 데이터이름=데이터값 이라고 할수 있다. 

따라서 input type="text" name="query" 로 설정한다.

​

4) 나머지 데이터이름=데이터 값도 작성

가운데 & 를 지워주고 name과 value값을 설정해 준다.

 

코딩 화면

​

5) 텍스트 상자에서 검색해서 잘 실행되는지 확인

 

결과 화면

​

​

동영상넣기

​

- html에서 비디오를 넣으려면 < video > 태그 사용

- 첫번째 source 를 실행하고 실행이 되지 않으면, 두번째 source

   두번째 source도 실행이 안되면 Your browser~ 멘트가 띄어진다.

- 사용자가 재생을 컨트롤 할수 있게 controls="controls" 속성을 추가해준다.

 

코딩 화면

결과 화면

​

​

SVG도형 만들기

​

svg 태그에 대한 자료는 해당 링크를 참고

 

https://www.w3schools.com/html/html5_svg.asp

HTML SVG

- svg 태그는 도형을 만들수 있는 태그

( 활용하여 그래프 만들기도 가능 )

- 테두리는 stroke 와 stroke-width 속성 추가

 

코딩 화면

결과 화면