'CSS' 태그의 글 목록

[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

[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

[Chit Chat] Functional CSS 강의 시청 & 팀 프로젝트 일부 회고록

삼성청년SW아카데미(SSAFY)의 2학기 첫 프로젝트인 공통 프로젝트가 지난 주에 끝났다. 사실 해당 프로젝트에 대한 회고록도 작성해야 하는데 기분이 안내켜서 아직 쓰지는 못했다.. 그렇게 프로젝트가 끝나고 어영부영 충전이라는 핑계로 놀다가 슬슬 다시 공부도 해아한다는 사명감에 책상에 앉았다. 그리고 다음 팀 프로젝트에 대한 컨벤션을 정하기 위해 (라는 핑계로 공부하기 싫어서) CSS in JS를 써야 하나 순수 CSS로 가야 하나를 고민하던 도중 우연히 강의를 하나 보게 되었다. https://tv.kakao.com/channel/3693125/cliplink/423595065 사실 특강을 보고 'Wa...'라는 감탄을 하거나 '내가 모르는 새로운게 있네'라고 하고 끝내는 경우가 많은데 해당 영상은 팀..

일상/Chit Chat 2023. 8. 29. 08:28

[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

[Bootstrap] Footer 화면 하단에 배치(고정)하기

Bootstrap으로 화면 제작 시 데이터 양이 부족하여 페이지를 체우지 못하는 경우 footer(푸터)가 딸려 올라오는 현상이 발생합니다. 일반적인 HTML 코드에서는 css에서 display 속성을 변경하여 수정이 가능하지만, Bootstrap(부트스트랩)이 적용되어 있는 경우 제대로 변경되지 않는 현상이 발생합니다. 대신 Bootstrap의 문법을 이용하여 일반적인 html 코드의 css를 수정하듯이 변경이 가능합니다. - 수정 코드 body class에 [ d-flex flex-column min-vh-100 ] 추가 footer class에 [ mt-auto ] 추가 기본적인 개념은 html에서 footer를 하단에 다는 방식과 유사하다고 보시면 됩니다. body의 display를 flex로 변..

Web/etc 2023. 3. 16. 22:44

[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

AngelPlayer`s Diary