소개하는 거북이

보호되어 있는 글입니다.

이번 장에서는 라는 태그에 대해 다뤄보도록 하겠습니다! ◈ -> 앵커라고 불리며, 다른 URL로의 하이퍼링크를 만들 때 사용하는 태그 기본 구조 : a, 앵커라고 불리는 태그는 다른 URL로 이동할 수 있게끔 해주는 태그입니다. 예를 들어, 제 블로그 메인 화면으로 이동하고 싶을 때, introducing-turtle.tistory.com/ 를 클릭하면 바로 이동할 수 있는 것처럼요! 이해가 되시나요? 여러분의 이해를 조금이나마 더 편하게 하기 위해, 예시를 통해 설명해드리겠습니다! See the Pen JjbmRLP by JaeyongLee (@jaeyonglee960212) on CodePen. 위의 링크를 클릭하시면, 새로운 창을 통해 제 블로그 메인 화면으로 이동할 수 있는 것을 확인할 수 있으실..

저번 장에서 배웠던 video 기억하시죠? 이번 장에서는 video를 저장하지 않고 url 그대로 가져와 쓸 수 있는 iframe 태그에 대해 다뤄보도록 하겠습니다! ◈ -> HTML 문서 안에 다른 HTML 페이지(URL 등)을 삽입하는 기능을 가진 태그 기본 구조 : iframe은 video 태그와는 다르게 직접 그 URL을 가져와 붙일 수 있습니다! 즉, 매번 동영상을 저장한 뒤 집어 넣는 번거로운 과정을 거치지 않아도 되는 고급 태그인 것입니다! 자 그럼 이제 어떻게 적용하는지 예시를 통해 확인 해보겠습니다! See the Pen poNOPyM by JaeyongLee (@jaeyonglee960212) on CodePen. 어때요? 확실히 video 태그보다 훨씬 편리하죠? 이제 코드를 하나하나..

저번 장에 이어 HTML의 멀티미디어 태그 중 video 태그에 대해 다뤄보도록 하겠습니다! ◈ -> HTML 파일에 비디오 파일을 추가할 때 사용하는 태그 기본 구조 : video 태그 듣기만 해도 어떤 의미로 쓰일지 감이 오시죠? video 태그는 말 그대로 비디오 파일을 추가하는 태그입니다. 이전에 보았던 img와는 달리 닫는 태그를 통해 꼭 태그를 닫아주셔야 합니다! () 일단 예시를 보고 얘기하겠습니다! 이 홈페이지의 6장을 참고하시면 됩니다! Introducing-turtle ※ HTML 4장 ※ Cla in love Linda (플레이어) Cla in love Linda (무한 반복) ※ HTML 5장 ※ 이미지 예시 ※ HTML 6장 ※ 동영상 예시 jaeyonglee960212.githu..

저번 장에 이어, 이번 장에서는 HTML의 멀티미디어 태그 중 img 태그에 대해 다뤄보도록 하겠습니다! ◈ -> HTML 파일에 사진(jpg, jpeg, png 등)을 추가할 때 사용하는 태그 기본 구조 : 이미지 태그의 경우 사진을 추가하는 태그인데, 원하는 사진을 넣을 때는 반드시 를 통해 작성할 수 있습니다. 기본 구조는 이해가 가지만 src는 무엇인지 이해가 안 가시죠? src는 source의 약자로 이미지의 원본이 존재하는 링크 및 파일명을 넣어주시면 됩니다! 간단한 예시를 통해 설명해드리겠습니다! jaeyonglee960212.github.io/tistory/ Cla in love Linda jaeyonglee960212.github.io ↑이미지 코드 결과 홈페이지↑ 일단 설명에 앞서, 부..

이번 장에서는 HTML의 멀티미디어 태그 중 하나인 audio 태그에 대해 다뤄보도록 하겠습니다! ◈ -> HTML 파일에 소리 콘텐츠를 추가할 때 사용하는 태그 기본 구조 : 오디오 태그는 말 그대로 오디오 콘텐츠를 HTML 파일에 추가하는 태그입니다. 의 형식으로 작성할 수 있는데, 여기서 ~에 들어갈 수 있는 속성이 몇 가지 존재합니다. 첫 번째는 autoplay라는 자동 재생 방식의 속성입니다. 두 번째는 controls라는 플레이어를 화면에 띄워서 제어를 하는 방식의 속성입니다. 그리고 마지막은 바로 loop라는 무한 반복 방식의 속성입니다. 자동 재생?? 화면 제어?? 무한 반복?? 한 번에 이해하실 수 있게 예시를 통해 다시 알려드리겠습니다! jaeyonglee960212.github.io/..

이번 장에서는 HTML의 태그에 대해 알아보겠습니다! 저번 시간에 다양한 종류의 태그 그리고 그 기능에 대해서 배웠었죠? 이번 시간에는 태그 그중에서, 안에 들어가는 태그에 대해 배워보도록 하겠습니다! 안에는 다양한 태그가 들어갈 수 있는데, 우리는 그중 대표적인 3가지에 대해서만 보도록 하겠습니다. 첫 번째 태그는 바로 태그입니다. ◈ -> 문단을 나타내는 태그입니다. 블록 특성을 가지고 있습니다. 기본 구조 : ~ 말 그대로 문단을 나눌 수 있습니다. 내가 원하는 주제의 내용이 끝났을 때 또 다른 태그를 이용하면 다음 줄에 다음 주제에 관한 내용이 표출되는 것입니다. 간단하게 보여드리겠습니다! See the Pen jOVmzgp by JaeyongLee (@jaeyonglee960212) on Cod..

저번에 HTML의 정의에 대해 간략하게 알아봤다면, 이번에는 HTML의 기본 구조 및 각 태그의 기능에 대해 알아보겠습니다! 위의 사진은 Visual Studio Code를 이용해 작성한 HTML의 기본 틀입니다. 작성 방법은 Visual Studio Code에서 ~.html 파일을 만들고 ! + Enter를 누르면 됩니다! 이제 기본 틀 안에 존재하는 다양한 태그들이 어떤 의미를 가지고 있는지에 대해 알아보겠습니다! -> 태그는 이 문서가 어떤 형식의 문서인지 정의해주는 태그입니다. -> 태그는 HTML 문서의 루트를 나타내며, 루트 요소라고도 불립니다. 태그 안에는 1개의 태그와 1개의 태그를 삽입할 수 있습니다. -> 태그는 컴퓨터가 이해할 수 있는 문서의 정보를 입력하는 태그입니다. 대표적인 정보..

HTML 관련 내용을 다루기 이전 HTML이 무엇인지에 대해 간단하게 정의해보겠습니다. HTML(Hyper Text Markup Language) "Hyper Text"란? -> 1960년대, 테오도르 넬슨이 만든 컴퓨터 관련 용어로, 웹 페이지를 다른 페이지로 연결하는 링크를 의미합니다. "Markup Language"란? -> 텍스트를 보여주거나 정의하는 언어로, HTML이 대표적인 예시입니다. 이처럼, HTML은 말 그대로 웹을 구성하는 구성 요소로 본문의 내용을 나타날 때 사용하는 언어입니다. 하지만, HTML은 C, Java, JS와 같은 프로그래밍 언어는 아니니 주의하셔야 합니다! 아까 위에서 HTML은 Markup Language라고 했었죠? 우리는 웹 브라우저에 다양한 콘텐츠를 표시하기 위..