본문 바로가기

🖥️ 프론트엔드/HTML&CSS5

이전 1 다음

[부트스트랩] 화면 쉽게 꾸미기 부트스트랩 홈페이지에서 필요한 기능 찾기 https://getbootstrap.kr/docs/5.3/components/buttons/ 버튼 다양한 크기, 상태 등을 지원하는 폼, 대화상자 등의 작업에 Bootstrap의 사용자 지정 버튼 스타일을 사용하세요. getbootstrap.kr HTML태그에 적절히 class를 추가해서 꾸미기 원하는 페이지 미리 구상하기 레이아웃을 잡고 각 태그에 부트스트랩 class를 추가한다 타임리프 태그를 적용해서 프로젝트와 연결해서 사용하고 이후 다듬어서 사용하면 됨 2024. 1. 5.

[CSS] 티스토리에서 커서 깜빡임 없애기 커서의 깜빡임이 가끔 거슬릴때가 있다. 글자 크기처럼 작으면 모르겠는데, 큰 사진이나 표 옆에서는 그만큼 비례해서 길어지기 때문에 정말 보기가 싫다! 아래 캡쳐 처럼 거슬리는 커서 깜빡임 없애는 방법 티스토리 관리 > 스킨 편집 > html 편집 > CSS body안에 다음의 코드를 추가해준다 caret-color: transparent; 적용 버튼을 누르면 끝 2023. 12. 9.

[부트스트랩] 캐러셀 적용, 스타일 덮기, rem 단위, 100일 코딩 챌린지 - Web Development 부트캠프 331. 사용자 지정 코드와 타사 패키지 결합 [45일차] 캐러셀 적용 부트스트랩 스타일 덮는 방법 슬라이드 쇼 이미지 비율 맞추며 고정하기 rem 단위 rem은 CSS에서 사용되는 크기 단위로, "Root EM"의 약자 1rem의 크기는 문서의 루트 요소(HTML)의 폰트 크기에 대한 상대적 크기를 나타냄 ( 예를 들어, HTML 요소의 폰트 크기가 16px라면, 1rem은 16px과 동일하게 됩니다. rem 단위의 장점 일관성: 모든 요소의 크기가 루트 요소의 폰트 크기에 기반하기 때문에, 루트 요소의 폰트 크기만 조정하면 전체 문서의 크기 조정이 가능 유연성과 접근성: 사용자가 브라우저에서 기본 폰트 크기를 조정했을 때, rem 단위를 .. 2023. 11. 22.

HTML5 의미론적 태그 HTML5에서 도입된 의미론적(semantic) 태그들은 웹 페이지의 각 부분이 어떤 역할을 하는지 명확하게 정의하며, 웹사이트의 접근성을 개선하고, 검색 엔진 최적화(SEO)에도 도움을 줌. HTML5에서 흔히 사용되는 의미론적 태그 예시 : 페이지나 섹션의 머리글을 나타냅니다. 보통 로고, 제목, 네비게이션 링크 등을 포함합니다. : 네비게이션 링크를 위한 태그입니다. 주 메뉴, 목차, 색인 등의 네비게이션 링크를 감싸는 데 사용됩니다. : 독립적으로 구분되거나 재사용 가능한 내용을 나타냅니다. 예를 들어, 블로그 글이나 뉴스 기사, 포럼 게시물 등이 이에 해당합니다. : 문서나 애플리케이션의 독립적인 섹션을 나타냅니다. 각 섹션은 주로 한 주제에 대한 내용을 포함합니다. : 본문과 간접적으로 관련된.. 2023. 11. 22.

<div> 태그와 <section> 태그 태그 의미: (Division) 태그는 의미적인 가치가 없는 범용 컨테이너. 주로 스타일링이나 레이아웃 목적으로 사용 사용 사례: CSS를 사용하여 스타일을 적용하거나 JavaScript를 사용하여 동적 요소를 조작할 때, 관련 요소들을 그룹화하는 데 주로 사용 접근성: 스크린 리더와 같은 보조 기술에게 특별한 의미를 제공하지 않음 태그 의미: 태그는 문서나 애플리케이션의 독립적인 섹션을 나타냄. 이 태그는 의미론적으로 중요하며, 문서의 구조를 더 명확하게 표현하는 데 사용됨 사용 사례: 웹 페이지 내에서 독립적으로 구분되는 섹션(예: 챕터, 탭, 주제별 그룹 등)을 나타낼 때 사용. 각 은 보통 제목(, , 등)을 포함 접근성: 스크린 리더와 같은 보조 기술은 태그를 사용하여 문서의 구조를 사용자에게 .. 2023. 11. 22.

이전 1 다음

티스토리툴바