소개하는 거북이

이번 장에서는 라는 태그에 대해 다뤄보도록 하겠습니다! ◈ -> 앵커라고 불리며, 다른 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/..

저번 장에서 다루던 비교 연산자 기억나시나요? 기억이 안 나신다면 이 글을 참고해주세요! 2021/02/26 - [분류 전체보기] - 4장. 비교 연산자 (1) 자! 그럼 이제 다른 비교 연산자들에 대해 알아볼까요? 이번에 배울 비교 연산자들은 바로 ==, ===입니다. 뭐가 다른가 싶죠? 하지만, 엄연히 차이가 있답니다! 이번 장을 통해서 한 번 확인해봐요 :) ◈ == (이중 등호, 동등) -> 자료형 유형이 서로 다른 두 값이 같은지 비교할 때 사용하는 연산자 ◈ ===(삼중 등호, 일치) -> 자료형 유형과 상관없이 서로 다른 두 값이 엄격히 같은지 비교할 때 사용하는 연산자 자료형 유형...? 어디서 들어 봤더라...? 네 맞습니다! 제 javascript 2장 글에서 다룬 적이 있었습니다! 만..

이번 장에서는 저번 장에서 배운 논리 연산자와 비슷하게 불리언 값을 다룰 수 있는 비교 연산자에 대해 다뤄보도록 하겠습니다! 저번 장에서는 &&(AND), ||(OR), !(NOT)에 대해 다뤄봤었죠? 이번 시간에서는 숫자를 비교할 때 사용하는 비교 연산자에 대해 알아보도록 하겠습니다. ◈ 초과/이상 연산자 -> 두 개의 값 중 지정된 값이 아닌 값보다 더 크거나 같은지 비교할 때 사용하는 연산자 ~보다 크다 (>), 혹은 ~보다 크거나 같다 (>=) 초과/이상 연산자는 값을 비교 했을 때 이 값이 저 값보다 크거나 같은지 확인할 때 사용하는 연산자입니다. 간단하게 예시를 통해 설명해드리겠습니다. 위의 사진을 분석해보겠습니다. 분석한 결과, 남자친구키 = 180, 여자친구키 = 165, 남자친구친구 = ..

Title : Bunker ( 변경 가능 ) Progress : 6번째 페이지까지 디자인을 구상했고, 첫 번째 페이지는 약 80%의 완성도를 보이기 시작했습니다. 첫 번째 페이지에서 추가하고 싶은 것들이 많았는데, 현재 html과 css만으로는 한계가 있어 첫 페이지는 이 정도로 하고 두 번째 페이지에 들어갈 생각입니다. 실습을 진행하면서 하느라, 진행 속도가 더뎌 이번 주는 첫 번째 페이지 작업 + 페이지 디자인 구상밖에 진행하지 못했습니다. Error : 딱히 에러는 없었습니다. 아이콘 디자인 부분은 여전히 방법을 찾지 못했고 자바스크립트를 적용하는 시점에 다시 재도전해보려고 생각 중입니다. Promise : 다음 주는 학교 OT 기간이기도 하고, 실습도 끝났기 때문에 빠르게 진행할 수 있을 것 같습..

이번 장에서는 디스플레이 (Display)와 블록(Block), 인라인(Inline)에 대해 알아보겠습니다. ◈ 디스플레이 (Display) -> 요소를 블록으로 처리할지 인라인으로 처리할지, 자식(내부) 요소를 어떻게 배치할지 결정하는 레이아웃 설정 속성 값 디스플레이가 어떤 것인지 감이 안 오시죠? 일단, 블록과 인라인에 대해 먼저 설명하고 차근차근 알아보겠습니다 :) ◈ 블록 (Block) -> 화면의 가로 넓이만큼의 길이를 가진 직사각형 형태의 속성 항상 새로운 줄에서 시작됩니다. 블록 속성을 가지는 요소 옆에는 다른 요소가 올 수 없습니다. ◈ 인라인 (Inline) -> 해당 요소의 내용만큼의 넓이를 가진 속성 새로운 줄에서 시작되지 않습니다. 인라인 속성을 가지는 요소 옆에는 다른 요소가 올..

이번장에서는 클래스와 아이디에 대해 다뤄보도록 하겠습니다! 먼저, 아이디에 대해 정의해보겠습니다. ◈ ID (아이디) -> 하나의 문서에서 가질 수 있는 유일한 고유식별자 -> 요소를 가리킬 때, 특정 요소를 식별할 때 사용 무슨 말인지 이해가 가시나요? ID는 하나의 문서에서 가질 수 있는 유일한 고유식별자입니다. 즉, 한 문서당 하나의 ID만 존재할 수 있다는 것이죠! ID명을 중복해서 쓸 수 있습니다만, 나중에 골치 아파지기 때문에 매우 매우 비추천하는 방법입니다. 만약, html만 사용할 것이라면 ID 중복은 가능합니다. 예를 들어, div에 orange라는 아이디를 부여했다고 합시다. 그러면 라고 적을 수 있겠죠? 그리고 위의 div는 orange라는 고유한 값을 가지게 되는 것입니다. 만약, ..