본문 바로가기

html17

[HTML] <video> 태그 사용 방법 (인코딩, controls 속성) video 태그는 사용 방법이 매우 간단하다. Your browser does not support the video tag. 태그를 열어주고 width 원하는 너비와 height 높이값을 준다. (안 주면 기본 크기로 재생된다.) 태그를 열어 어떤 동영상을 어떤 유형(mp4 등)으로 넣을지 설정한다. 인코딩 이때 html을 여는 브라우저가 지원하는 동영상 유형인지 잘 확인하고 유형을 설정하거나 인코딩을 해야 오류가 없다. mp4는 폭넓게 모든 브라우저에서 지원하는데 재생이 안 돼 확인해보니 H.264 + AAC 방식으로 인코딩 된 MP4 포맷 이어야 한다. 이후 source가 재생이 안 될 경우 화면에 표시할 텍스트를 넣어준다. controls 항목은 플레이, 정지와 같이 비디오 실행을 제어할 수 있게.. 2022. 7. 17.
[HTML] <li> 태그 {<ul>, <ol>, 목록(list) 만들기} HTML은 웹 사이트에 표시되는 뼈대이다. 깔끔한 화면의 정돈을 위해선 는 매우 중요하다. 먼저 이 목록 태그들은 모두 '블록' 요소이다. 할당된 범위가 있어 자동으로 개행이 된 것처럼 화면에 보인다. HTML 블록과 인라인의 개념 (특징, 주의할 점) 블록과 인라인 제일 큰 제목 h1 Header2 h3 + tab : 자동완성 글씨를 쓸 때 사용하는 태그 strong아무글자 행에서 드래그하지않고 ctrl + c, v 사용가능 오른쪽 작성된 코드와 왼쪽 내용을 비교해보면 태그 anhanryang.tistory.com 태그는 숫자를 자동으로 내부 li리스트에 부여해준다. 다음으로 태그는 숫자를 없애고 기본 속성의 아이콘이 앞에 붙는다. 는 단독으로 쓸 수 없어 혹은 내부에 들어간다. 바로 확인해보자. ol.. 2022. 7. 17.
[HTML] <table> 테이블 태그 (rowspan, colspan, border 사용 방법) 태그는 HTML 문서에서 표를 만드는 태그다. 행과 열을 넣기 위해 , 등을 태그 안에 함께 작성한다. 이전에는 웹 페이지의 레이 아웃을 구성할 때 태그를 이용하여 많이 구성하였다고 한다. 하지만 적당한 사용 방법이 아니므로 레이아웃 구성시에는 태그와 CSS를 이용하는 것이 좋다. 먼저 테이블 태그를 열어보자 테이블 내부에 border라는 속성은 테두리를 의미한다. 픽셀 값을 넣어 테이블의 윤곽을 설정한다. 픽셀 값, 줄 종류, 줄 색상 ex) 1px, solid, #777 같은 형태로 다양한 값 적용이 가능하다. 픽셀만 정해주도록 하자. 이제 테이블 내부에 tr, td로 행과 열을 넣어야 할 것이다. align은 맞추다, 즉 정렬의 의미를 가진 속성이다. VS code에서 작성 시 center, lef.. 2022. 7. 17.
[HTML] <a> 앵커 태그 (href, target, 새 탭으로 열기) 앵커 태그 자주 쓰는 태그 중 하나로 흔히 ppt와 한글문서에서도 존재하는 하이퍼링크 개념이다. a 태그를 누르면 담겨있는 주소로 이동하는 방식이다. 속성에 값을 넣어 다른 url 혹은 다른 html로 이동 가능하다. 기본 형태 이름 정상적으로 네이버, 구글, hello.html로 이동이 된다. 기본적으로 a + tab으로 자동완성을 사용하면 href만 나오는데 하이퍼링크를 클릭했을 때 이 페이지에서 표시할지 새 페이지에서 열지 지정하는 속성이 있다. 바로 target 이다. 기본 설정은 입력하지 않아도 _self로 설정되어있다. 그래서 보이는 화면에서 이동만 하게된다. 하지만 target에 _blank 속성을 넣어주면 새 탭에서 열리는 것을 확인할 수 있다. 구글로 이동 새 탭으로 열기 결과 ( 클릭 .. 2022. 7. 17.
[HTML] 블록과 인라인의 개념 (특징, 주의할 점) 블록과 인라인 제일 큰 제목 h1 Header2 h3 + tab : 자동완성 글씨를 쓸 때 사용하는 태그 strong아무글자 행에서 드래그하지않고 ctrl + c, v 사용가능 오른쪽 작성된 코드와 왼쪽 내용을 비교해보면 태그 내용은 모두 을 통해 줄바꿈을 해줘야하는데 strong을 제외한 태그들은 태그를 통한 개행이 없는 것을 확인할 수 있다. 이유는 html을 구성하는 레이아웃 요소는 블럭과 인라인 두 가지로 구분되는데 블럭은 자신의 고유한 할당 영역이 있고 크기와 너비 등이 지정이 가능하다. 고유한 할당 영역이 있기에 수직으로 쌓이게된다. 그러므로 자동으로 개행이 된 태그들은 블록 속성임을 알 수 있다. 인라인은 내부의 내용이 있어야 영역이 생기고 크기와 너비 등이 지정이 안된다. 그리고 수평하게 .. 2022. 7. 17.
[HTML] 태그란? (사용 방법, 태그 종류, 실습) 태그란? 문서의 속성과 정보를 포함하고 있는 객체이다. 내용 기본 형태는 이렇게 되어있다. 안의 내용이 왼쪽부터 시작하지 않고 붕 떠있는 것을 볼 수 있는데 이것을 '들여 쓰기'라고 한다. 들여 쓰기(Tab)을 사용하여 입력해놓으면 태그 안의 내용인 것을 확인하기 편리하다. 태그의 특징 1. 태그 안에 태그가 빈번하게 있다. 제목 내용 그러므로 열린 태그 내용~ 후에는 반드시 닫는 태그를 사용하여 구분한다. 똑같은 태그 안의 태그일 경우는 들여 쓰기로 구분하는 것이 가독성에 좋은데 안되어있어도 컴퓨터가 읽어 들일 때는 큰 문제가 없지만 직접 프로그래밍하는 우리는 힘들 것이다. 2. 한 번만 필요한 태그가 있다. (줄 바꿈, 선 긋기 등) 형태로 꺾인 괄호 내부에 닿는다는 '/'를 사용하여 의미를 부여해주.. 2022. 7. 17.
이해하기 쉬운 CSS 설명 (Cascading Style Sheet 기초 지식) CSS란? Cascading Style Sheet의 약자로 HTML과 XML로 작성한 문서를 화면에 어떻게 표시할지 기술하기 위한 스타일 시트 언어이다. css는 작성된 HTML 등의 문서가 화면에 어떻게 렌더링 되어 표시하는지 지정해준다. 예를 들어 우리가 html 화면에서 ul, li 태그를 이용하여 목록을 만들었다. 기본적인 모양은 이렇게 생성될 텐데 이것을 html 내부 head에 style태그를 열고 li에 너비, 높이 색상들을 지정하고 클릭했을 때 다른 메뉴로 넘어가게 링크를 걸어주면 이렇게 바꿔줄 수 있다. 메일 옆 이미지 파일도 추가할 수 있을 것이다. HTML로 뼈대를 세운다면 CSS로 살을 붙인다고 비유하면 이해가 쉽다. css는 다양하게 표현할 수 있도록 속성들이 많아 외워야 할 것이.. 2022. 7. 17.
HTML이란? (웹, 인터넷, URL, DNS 배경 지식) 비전공자도 쉽게 HTML에 대해 이해할 수 있게 기본적인 배경 지식과 기초 지식을 적어보겠다. 웹이란? 1개 이상의 사이트가 연결되어있는 인터넷 서비스의 한 가지 형태 인터넷이란? 1개 이상의 네트워크가 연결되어 통신이 가능한 형태 URL이란? 인터넷 웹 페이지의 주소 ex) https://anhanryang.tistory.com/ http란? 통신방법 중 하나 Hyper Text Transfer Protocol의 약자로 서버와 클라이언트(사용자)가 정보를 교환하기 위한 하나의 통신 규격을 말한다. 우리가 웹에서 보는 화면은 코딩된 프로그래밍 언어(JS, html, css) 등이 모두 텍스트로 전달되고 그 텍스트를 크롬, 익스플로러 등에서 다시 태그 등으로 구분하여 읽어 화면에 표시해주는 것이다. IP주.. 2022. 7. 16.

티스토리툴바