HTML19 티스토리 블로그 북클럽 스킨, 유튜브 영상을 반응형으로 만드는 법 오늘은 블로그에 유튜브 영상을 반응형으로 올릴 수 있는 방법을 소개하겠습니다. 반응형이란? '반응형'이라는 단어의 사전적 의미는 '유전자와 환경의 상호 작용에 따라 동일한 표현형을 나타내는 개체의 무리'입니다. 블로그의 스킨들 중에서 유튜브의 영상을 올렸을 때 영상이 작게 올라가는 스킨들이 있습니다. 위의 이미지와 같이 지금 이 블로그의 스킨인 북클럽 스킨도 그렇습니다. 딱 봐도 뭔가 답답해 보이죠. 스킨은 반응형 스킨인데, 왜 유튜브는 반응형으로 나오지 않는지 모르겠습니다. 티스토리의 또 다른 반응형 스킨인 #2 스킨입니다. 이 스킨 같은 경우에는 별도로 수정을 하지 않아도 처음부터 이렇게 유튜브의 영상이 반응형으로 올라갑니다. 딱 봐도 #2 스킨이 훨씬 보기에 좋습니다. 지금부터 북클럽 스킨의 이러한.. 2021. 10. 1. 14:39 HTML 웹페이지의 핵심이 되는 콘텐츠는 <main> 태그로 웹페이지의 핵심이 되는 콘텐츠는 태그로 감싸줘야 합니다. 하지만 태그를 사용할 시에는 간단한 법칙을 지켜줘야 합니다. 지금부터 그 내용을 알아보겠습니다. 태그 의미론적 태그 semantic element 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 지난 포스트 meta 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게 gogogameboy.tistory.com 위의 포스트와 연관이 되어있는 내용입니다. 하지만 위의 포스트에는 태그에 대해서는 나와있지 않습니다. 태그는 페이지의 핵심이 되는 콘텐츠를 감싸는 태그입니다. 다만 태그는 한 가지 주의해야 할 점이 있습니다. HTML 기술소개 기본문법 하이퍼텍스트와 속성 리스트와 태그의.. 2021. 2. 11. 12:31 HTML, 같은 페이지의 특정 위치로 링크를 거는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 아래의 4개의 메뉴 목록들을 클릭해보시기 바랍니다. 이승환 개요 데뷔 음악 음반 목록 개요 대한민국의 가수·프로듀서다. 1989년 10월 15일 1집 《B.C 603》으로 데뷔했으며, '어린 왕자'라는 별명으로 유명하다. 1990년대의 대표적인 뮤지션 중 한 명이었고, 그의 콘서트에 대한 열정, 생동감 넘치는 콘서트 등으로 '공연의 신'이라는 별칭을 가지고 있다. 한창 절정의 인기를 자랑하던 2~3집 시기(1990~1992년)에는 아이돌로 봐도 무리가 없을 정도로 10대들에게 엄청난 인기를 받았었고 대학가에서 인기가 많았던 시기였다. 데뷔 가수로 데뷔하기 위해 온갖 음반사를 다녔으나 데뷔는커녕 물만.. 2021. 2. 9. 11:01 HTML에서 사용할 수 없는 특수문자를 표시하는 코드 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 블로그만 하시는 분에게는 아무런 쓸모없는 정보이지만, 자신의 웹사이트를 만들기 위해서는 필요할 수 있는 정보입니다. HTML 문서를 작성할 때에 본문에 들어갈 수가 없는 나 &, 따옴표 같은 특수문자를 표시해주는 코드들을 알아보겠습니다. 많이 사용되는 특수문자 코드 목록 HTML 코드 기호 설명 & & 앰퍼샌드 < 닫는 꺽쇠 괄호 " " 구분없는 큰 따옴표 ‘ ‘ 여는 작은 따옴표 ’ ’ 닫는 작은 따옴표 “ “ 여는 큰 따옴표 ” ” 닫는 큰 따옴표 « « 여는 이중 꺽쇠 괄호 » » 닫는 이중 꺽쇠 괄호 © © 카피라이트, 저작권 기호 ® ® 등록 상표 기호 ™ ™ 상표 기호 ° ° 각도 이 글.. 2021. 2. 7. 14:38 HTML, 한자의 발음을 써놓을 때 사용하는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. Photo by Niketh Vellanki on Unsplash 明鏡止水 (명경지수) 맑은 거울과 고요한 물처럼 잡념과 허욕이 없는 깨끗한 마음을 비유적으로 이르는 말 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. 明鏡止水 (명경지수) 맑은 거울과 고요한 물처럼 잡념과 허욕이 없는 깨끗한 마음을 비유적으로 이르는 말 전체적으로 감싸는 태그는 ~입니다. 태그 안에서 한자를 감싸는 태그는 ~, 발음을 감싸는 태그는 ~, 괄호를 감싸는 태그는 ~입니다. 괄호를 감싸는 는 루비 태그를 지원하지 않는 브라우저가 있을 수.. 2021. 2. 6. 13:54 HTML, 책이나 다른 사람의 글을 인용할 때 써야할 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. Photo by Dollar Gill on Unsplash blockquote cite= 인용할 문구 인용한 웹사이트 이름 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. ~를 써야 합니다. 인용하는 글의 출처가 웹사이트인 경우에는 안에 cite=""를 추가해서 따옴표 사이에 웹사이트의 주소를 적어주어야 합니다. 는 올바른 출처를 밝힐 때 사용하는 중요한 태그입니다. 태그를 사용하지 않고 다른 웹사이트의 글을 인용해서 쓸 경우에는 검색엔진에서 표절・유사 문서로 간주되어 운영하는 블로그나 웹사이트에 안 좋은 영향을 .. 2021. 2. 5. 12:29 HTML 위첨자, 아래첨자 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 위첨자는 , 아래첨자는 입니다. 015B - 나의 옛 친구 (Featuring 이승환) JINU - 너와 함께 (Duet with 이승환) 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. 015B - 나의 옛 친구 (Featuring 이승환) JINU - 너와 함께 (Duet with 이승환) 위의 소스 코드로 브라우저에서는 이렇게 표시가 됩니다. 이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서 빨간 하트♥로 만들어주세요. 지인에게 보여주고 싶은 글이었다면 공감 버튼 옆을 클릭해서 SNS에 공유해주세요. .. 2021. 2. 4. 10:37 HTML 문서 안에서의 주석 쓰는 법 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 본인이 쓰는 태그가 무슨 태그였는지 나중에 혹시라도 까먹을까봐 그 태그에 대해서 설명하는 주석을 달아놓고 싶을 때가 있죠. 쓰는 방법은 간단합니다. ↑ 이 안에 주석을 써넣으시면 됩니다. 그러면 소스 코드를 볼 때에는 주석의 내용이 보이지만, 완성된 웹페이지에서는 주석의 내용은 보이지 않게 됩니다. 위의 소스 코드는 PC에서 드래그 후, ctrl+x로 잘라내서 다른 곳으로 붙여넣기가 가능합니다. ctrl+c(복사)는 불가능합니다. 예를 들어 위와 같이 코드를 작성을 해도 이렇게 주석의 내용은 보이지 않게 됩니다. 이 글이 도움이 됐다면 하단의 ♡ 공감 버튼을 꾹 눌러서 빨간 하트♥로 만들어주세요. .. 2021. 1. 31. 15:17 CSS 효과를 주기 위해서 쓰는 아무 의미도 없는 태그 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 바꿈이 어색하게 보일 수 있습니다. 와 태그 웹페이지의 어느 특정 부분을 CSS로 꾸며주고 싶을 때, 그 특정 부분을 감싸고 있는 어떤 태그가 필요합니다. 그렇다고 제목도 아닌 곳에 같은 태그를 쓸 수도 없고, 링크도 아닌 곳에 태그를 쓸 수도 없는 일이죠. 그런 때 쓰는 어떠한 기능도 없고 어떠한 의미도 없는 태그가 태그와 태그입니다. 와 의 차이 로 감싸는 태그들은 block 속성을 가지고 있어서, 한 줄 전체를 차지하면서 자동 줄 바꿈이 되고, 으로 감싸는 태그들은 inline 속성을 가지고 있어서 줄바꿈이 되지 않습니다. CSS, inline과 block 이 포스팅은 PC로 작성되었습니다. 모바일로 보시는 분들에게는 가끔 줄 .. 2021. 1. 25. 09:47 이전 1 2 3 다음
