AngelPlayer`s Diary

[HTML] Meta Data와 Open Graph 개념 학습하기

오늘은 사이트 제작 시 필수적으로 알아야하는 메타 데이터와 오픈 그래프에 대해서 설명해드리겠습니다.    1. Meta Data메타 데이터는 head 태그에 포함되어 있으며, 웹 페이지에 대한 정보를 제공할 때 사용되는 기능입니다. 정보의 제공은 사이트를 사용하는 사용자에게 뿐만 아니라, 웹 사이트를 크롤링하는 서칭 봇에게도 제공될 수 있습니다. 메타 데이터를 정확히 작성하는 것이 검색 엔진 최적화(SEO)에 도움이 되며, 궁극적으로 사이트 유입을 늘리는데 도움이 됩니다.   메타 데이터를 작성하기 위해서 meta 태그를 이용하며, title, description, author 등의 정보를 제공할 수 있습니다.    2. Open Graph오픈 그래프는 Facebook에서 개발한 프로토콜입니다.   카..
Web/HTML&CSS 2024. 8. 1. 08:58

[HTML/CSS] textarea 개행 안되는 문제 해결 (Feat. React)

(※ 저는 React와 Firebase를 사용하는 도중 문제가 발생하였습니다.) 태그를 사용하여 1)글을 작성 한 후, 2)DB에 저장하고, 3)출력을 했더니, 개행(Enter)이 모두 띄워쓰기(Space)로 치환되어 출력되는 현상이 발생하였습니다. 인터넷에서 유사한 문제가 발생한 사람들이 몇몇 있었으나 /n으로 저장이 되고 제대로 출력되지 않는 현상이었고, 저는 DB에 띄워쓰기로만 저장되는 상태였습니다. (※ 문제를 해결한 사람들 중에 "white-space: pre-wrap;를 통해서 해결하였다"는 분들도 계셨으나, 일단 저는 해당 방법으로 해결되지 않았습니다.) const formattedDescription = item.description.replace(/\r?\n/g, '\\n'); texta..
Web/HTML&CSS 2024. 2. 6. 09:35

[HTML/CSS] Header 화면 최상단에 고정시키는 방법

요즘에는 헤더에 네비게이션 기능을 적용하고 스크롤 시 함께 내려오도록 하는 UI를 많이 사용합니다. 이를 구현하는 간단한 코드를 작성해보겠습니다. // 내용 입력 먼저 간단히 헤더를 생성하고 class명을 지정하였습니다. .header { padding: 0 16px; border-bottom: 1px solid var(--color-light-gray); position: fixed; /* 상단에 고정 */ top: 0; width: 100%; z-index: 999; } css 코드에 들어갈 내용은 비교적 간단합니다. header가 계속 최상단에 위치해야 하므로 position을 fixed를 주었습니다. 그리고 어떤 요소라도 header보다 높은 위치에 있으면 안되기 때문에 z-index를 높게 지정..
Web/HTML&CSS 2024. 1. 26. 09:46

[HTML/CSS] 외부 Font(TTF/OTF) 웹 페이지에 적용하기

테스트 환경 React + Vite ※. TTF vs OTF 차이 폰트 구조 TTF는 오래된 폰트 형식으로, 덜 복잡한 비트맵으로 구성되어 있어 일부 오래된 시스템과의 호환성이 더 좋을 수 있습니다. OTF는 TTF의 확장 버전으로, 스플라인 규격에 대한 추가 지원(주로 베지어 곡선) 및 자체적인 스케일링 및 변환 특성이 있어 디자인과 출력 품질이 더 우수할 수 있습니다. 파일 크기 일반적으로 OTF 폰트 파일은 TTF 파일보다 크기가 큰 편이므로 웹 성능에 영향을 미칠 수 있습니다. 웹 사이트의 로딩 시간이 중요한 요소인 경우, 더 작은 파일 크기의 TTF가 더 나을 수 있습니다. 호환성 대부분의 모던 웹 브라우저는 TTF와 OTF를 모두 지원합니다. 그러나 일부 구식 시스템이나 오래된 브라우저에서는 ..
Web/HTML&CSS 2023. 11. 1. 08:04

[HTML/CSS] 움직이는 Gradients 배경 적용하기

오늘은 동적으로 움직이는 그레디언트를 background-image로 적용하는 방법을 알아보겠습니다. https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part of your website. webgradients.com 그레디언트 색상 예제는 위 링크를 통해서 선택할 수 있습니다. /* content */ #root { width: 100%; height: 100%; background-image: linear-gradient(-30deg, #fbb7d4 0%, #a9d4ff 10..
Web/HTML&CSS 2023. 10. 26. 09:07

[Error] DOMException: play() failed because the user didn't interact with the document first 해결 방법

https://angelplayer.tistory.com/494 이전에 백그라운드 영상을 자동으로 출력하는 방법에 대해서 알아보았습니다. // App.jsx import video1 from '/video_test1.mp4'; // 1080p import video2 from '/video_test2.mp4'; // 1440p import video3 from '/video_test3.mp4'; // sound function App() { return ( {/* mute 제거 */} AngelPlayer`s Viedo Test!!! 버튼도 나온다!! ); } export default App; 영상이 자동으로 백그라운드로 실행되는 것은 확인하였으니, 이제 소리가 있는 영상을 적용하려고 muted를 제거..
Web/HTML&CSS 2023. 9. 27. 09:42

[HTML/CSS] 화면 백그라운드에 영상 넣기 (feat. React 적용법)

최근 페이지의 Background로 영상을 집어넣어 좀 더 고급스러워 보이는 사이트들이 종종 보입니다. 이를 간단히 구현하는 방법을 알아보도록 하겠습니다. 1. Project Setting npm create vite@latest react-video --template react cd react-video npm install npm run dev 우선 테스트를 진행할 프로젝트를 생성하였습니다. 저는 Vite + React + JS로 진행하였습니다. 제가 설정한 방법과 동일하게 프로젝트를 생성하려면 위와 같이 진행하시면 됩니다. (Vue와 같은 다른 라이브러리나, Vanilla HTML을 사용하더라도 영상 경로 등을 제외하면 기본 코드에 큰 차이는 없습니다!) 1440p video https://pix..
Web/HTML&CSS 2023. 9. 26. 08:42

[HTML / CSS] 선택자 (Selector) 문법 정리

선택자는 CSS 및 JS의 querySelector에서 사용하는 매우 중요한 문법입니다. 기본적이지만 중요한 내용이기에 간단한 예시와 함께 정리하였습니다. 용어 정리 태그 == 요소 : 편의상 저는 태그라고 부르는 편이지만 일반적으로 요소라고 작성된 자료들이 많습니다. 형제 : 자신과 동등한 관계에 있는 태그 자식 : 자신의 바로 아래에 위치한 태그 자손 : 자식 + 자식이 포함하고 있는 자식을 모두 포함 container의 자식 1 container의 자식 2 inner의 span 자식 1 inner의 span 자식 2 inner의 p 자식 1 inner의 p 자식 2 container2의 자식 1 container2의 자식 2 설명을 위해서 간단히 위와 같은 예제를 작성하였습니다. 일반 선택자 - 전..
Web/HTML&CSS 2023. 4. 13. 09:25

[HTML / CSS] 이미지(div) 수평&수직 가운데 정렬하기

홈페이지를 개발하다보면 여러 div를 한 라인에 표시하고 싶은 경우가 발생합니다. 문제는 div의 높이가 서로 다르면, 높이가 낮은 div는 자연스레 페이지 위로 붙게 됩니다. 아래 코드를 구현하면 위와 같은 상태가 됩니다. 제가 간단하게 사용하려고 만들던 코드라 Bootstrap이 적용되어 있는데 무시하여 주시고, 아래 주석으로 작성된 'div A'와 'div B'만 주목하시면 됩니다. 현재 'div A'안의 내용이 길어지면서 'div B'의 이미지가 상대적으로 위에 붙은 것과 같은 형태를 띄고 있습니다. 이제부터 div B에 있는 내용(이미지)를 수직/수평 정렬해보도록 하겠습니다. AngelPlayer Lorem ipsum dolor sit amet co... Lorem ipsum dolor, sit..
Web/HTML&CSS 2021. 9. 6. 10:02

[HTML/CSS] Footer 화면 아래에 고정시키는 방법

일반적으로 footer는 가장 아래에 들어가기 때문에 별도의 설정 없이도 가장 아래에 위치하는 경우가 대부분입니다. 하지만 로그인 페이지와 같이 페이지에 상대적으로 적은 데이터가 들어가는 페이지는 푸터가 하단에 붙어있지 않는 경우가 발생합니다. 이때 css를 이용하여 footer를 가장 아래로 내릴 수 있습니다. 1. html 코드 변경 우선 html 코드에서 footer를 제외한 나머지 body에 속한 태그를 감싸는 #body-content와, footer와 #body-content를 모두 감싸는 #body-wrapper, 총 2가지의 div를 필요로 합니다. ※ header는 화면 상단에 계속 따라다니도록 absolute를 적용할 것이기 때문에 따로 넣지 않았습니다. 2. css 코드 변경 /* fo..
Web/HTML&CSS 2021. 7. 26. 15:59

[HTML/CSS] 들여쓰기 및 내어쓰기 방법

html 문서를 들여쓰기 및 내어쓰기를 하기 위해서는 css의 text-indent를 활용하시면 됩니다. 우선 간단하게 문서 파일을 하나 만들어보겠습니다. 코드는 간단히 이런식으로 만들었으며, p 태그를 수정하는 형태로 진행하도록 하겠습니다. 각각의 p 태그는 서로 다른 클래스명을 가지고 있습니다. 브라우저로 열였을 때 이런 형태의 모습으로 나옵니다. 보시기 조금 편하도록 일부러 왼쪽 끝에서 marign을 준 상태이고, 하늘색 점선이 왼쪽 끝이라고 생각하시고 보시면 됩니다. 우선 가장 먼저 class="in"을 조정하여 들여쓰기를 진행해보도록 하겠습니다. .in { text-indent: 30px; } 위 코드를 입력하시면 첫 줄만 들여쓰기가 일어납니다. text-indent의 속성값을 반대로 음수로 주..
Web/HTML&CSS 2021. 2. 12. 08:24

[HTML] 파비콘 변경, 수정, 표시가 안될때 해결 방법

얼마 전 파비콘 생성 방법과 관련하여 포스팅을 했었는데, 처음에 제대로 뜨지 않아 몇 가지 해결 방법을 이용하여 해결을 했으나, 제대로 뜨지 않는 경우가 발생하였습니다. 문제를 확인 후 아래의 해결방법을 사용해 확인해보았고, 며칠 간 확인 시 제대로 동작하는 것을 확인하였습니다. 파비콘 아이콘 생성 방법이 필요하신 분은 이전 포스트를 참고해주세요..! angelplayer.tistory.com/124 [HTML] 파비콘(주소창 아이콘) 적용 방법 웹 페이지에서 주소창 위에 나타나는 아이콘을 파비콘(Favicon)이라고 부릅니다. (즐겨찾기 등에서도 파비콘으로 지정한 아이콘이 나타납니다.) 오늘은 홈페이지 제작 시 파비콘을 적용하는 방법 angelplayer.tistory.com 우선 기존 코드는 이렇습니..
Web/HTML&CSS 2021. 2. 10. 09:08

[HTML] 파비콘(주소창 아이콘) 적용 방법

웹 페이지에서 주소창 위에 나타나는 아이콘을 파비콘(Favicon)이라고 부릅니다. (즐겨찾기 등에서도 파비콘으로 지정한 아이콘이 나타납니다.) 오늘은 홈페이지 제작 시 파비콘을 적용하는 방법을 알아보도록 하겠습니다. 1. 파비콘용 파일 제작하기 먼저 파비콘으로 사용할 파일을 만들도록 하겠습니다. 우선 파비콘으로 만들 이미지 파일을 준비하고, 구글 등에 favicon이라고 검색하시면 이미지 파일을 파비콘으로 변경해주는 웹 페이지들이 많이 있습니다. 저는 글을 포스팅하는 시점에서 구글에 검색 시 가장 위에 나타나는 페이지를 기준으로 제작하도록 하겠습니다. 웬만한 페이지들이 사용 방법이 유사하기 때문에 다른 홈페이지를 쓰셔도 무방합니다. (※ 일부 사이트는 이미지 크기가 맞지 않거나, 파일 크기가 어느정도 ..
Web/HTML&CSS 2021. 2. 8. 16:00

[HTML5] 구글 폰트 사용하기

HTML 문서를 다루게 될때 하나의 웹페이지를 만들고자하는 목적이 대부분이라고 생각합니다. 웹페이지를 만드는 동안에 사용하는 대부분은 글자 인데요. 오늘은 글자를 꾸밀때 많이 사용되는 구글 웹폰트에 대해 알아보도록 하겠습니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 먼저 구글 웹폰트에 접속합니다. 구글 웹폰트에 접속을하고 나서 마음에드는 폰트를 찾아봅시다. 마음에 드는 폰트를 찾으셨다면 그 폰트를 클릭합니다. 저는 첫번째 폰트로 하겠습니다. 클릭하면 다음 화면으로 넘어갑니다. 원하시는 폰트를 선택하고 순서를 따라 1번을..
Web/HTML&CSS 2020. 7. 14. 20:17
◀ 1 ▶

티스토리툴바