본문 바로가기

HTML&CSS/CSS3

div 태그의 name 속성을 활용한 호버시 생성되는 툴팁 커스터마이징 □ div 태그 내의 name 속성을 부여 후 html 코드 작성 □ 기본 툴팁의 디자인 및 표시형식을 아래 코드를 활용하여 커스터마이징 진행 □ css 스타일은 html 파일 내의 스타일 태그를 생성하여 작성하였음 + TIP) html/css 색상참고 사이트 https://blog.naver.com/pjh445/220010107221 2024. 1. 4.
CSS 사이즈(viewport 단위 등) □ 사이즈 단위 ○ px : 픽셀단위를 의미하며 해상도에 따라 크기가 상대적임 ○ % : 지정된 사이즈를 기반으로 상대적인 비율로 크기 지정 ○ em - 기본 지정한 사이즈를 기준으로 지정한 값의 배수만큼 크기 지정 - 중첩되며 자식에게 사이즈를 영향 줄 수 있음 ○ rem : 기본 지정한 사이즈만큼 동일하게 크기 지정 ○ viewport : 웹 브라우저에서 웹페이지가 표시되는 영역 의미 - vw : viewport 너비 100분율 기준 비율 - vh : viewport 높이 100분율 기준 비율 - vmin : viewport 너비/높이 중 최소크기 기준의 100분율 기준 비율 - vmax : viewport 너비/높이 중 최대크기 기준의 100분율 기준 비율 * 반응형 : 디스플레이 사이즈별 크기에 .. 2023. 11. 14.
CSS(Casacading Style Sheets) □ CSS(Casacading Style Sheets) ○ 현재 사용되는 CSS는 2005년 CSS3로 정의됨 ○ 목적 - 디자인을 위한 것으로 문서를 어떻게 브라우저 상에 렌더링할지 표현 방법을 정의한 언어임 - HTML은 구조화에 집중(Semangtic Web 태그 기반, 의미표현 + HTML 태그로 표현) - CSS를 통해 화면 렌더링 표현방법을 정의 - JS(Javascript)로 사용자 인터페이스등 정의 ○ Selector - CSS Selector라고도 부름 - HTML 문서 특정 부분관련 렌더링 방법을 정의하기 위해 특정 부분을 선택해야함 - 위를 고려하여 CSS Selector를 사용하며 문법은 아래와 같음 /* HTML 태그에 CSS 적용 */ /* 방법① ex) p태그 css적용 */ .. 2023. 11. 14.