📌 Front End80 [CSS] 스크롤 바(Scrollbar) 스타일 커스텀하기 CSS 스크롤 바(Scrollbar) 스타일 커스텀각 아래에 대한 CSS 코드를 추가해 주면 커스텀을 할 수 있습니다.영역::코드로 적용 대상을 제한하여 사용할 수 있습니다. ::-webkit-scrollbar : 스크롤바 전체 영역에 대한 설정::-webkit-scrollbar-thumb : 스크롤바 막대에 대한 설정::-webkit-scrollbar-track : 스크롤바 뒷 배경에 대한 설정스크롤바 스타일 적용 See the Pen 스크롤바 커스텀(Scrollbar Custom) by 권소현 (@uilserhu-the-looper) on CodePen." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스 2024. 5. 22. [CSS] CSS 애니메이션 - transform, transition, animation CSS3 애니메이션TransformTransitionAnimation1. Transform- 요소를 회전, 크기 변경 및 각도와 위치 변경 시 사용- 2D Transform 기본 x, y 두 좌표로만 요소를 변화시켜 2D적인 변화를 가미할 수 있다. 📝 Transform 형태transform: scale() translate() rotate() skew();/* 공백(스페이스)으로 구분지어 여러 속성들을 함께 사용할 수 있다. */속성설명단위translate(x,y)요소의 위치를 X축으로 x만큼, Y축으로 y만큼 이동시킨다.px, %, em 등translateX(n)요소의 위치를 X축으로 x만큼 이동시킨다.px, %, em 등translateY(n)요소의 위치를 Y축으로 y만큼 이동시킨다.px, %, .. 2024. 5. 22. [CSS] CSS 속성 선택자(Selector) 종류 선택자(Selecotr) 작성방법선택자 { 속성:값; 속성:값; }1. 태그 선택자HTML의 특정 태그 선택합니다.h1 { background-color:yellow; }h12. 클래스, 아이디 선택자 (. #)클래스는 반복적인 디자인 요소를 적용 시 사용 ▶ .(점)아이디는 단독으로 사용하는 디자인 요소 적용 시 사용 ▶ #(샵)h1.title1 { background-color:yellow; }.title2 { background-color:pink; }h3#title3 { background-color:blue; }#title4 { background-color:green; }h1h2h3h43. 속성 선택자form 관련 대상을 선택 시 주로 사용합니다.선택자[속성=값] 속성의 값이 모두 일치할 때.. 2024. 5. 22. [JSP] <%@ include %>디렉티브 <jsp:include>액션태그 차이점 1. 스크립트 태그 (include 디렉티브) - jsp 파일과 구분하기 위해 JSP Fragment 를 사용한다.(jspf)include 디렉티브 (jspf)include 디렉티브는 해당 file을 include 디렉티브를 호출한 위치에 먼저 적용시키는 개념이다. 따라서 include 디렉티브의 file은 전체적인 jsp의 구조를 갖추지 않고 조각형태로 가져도 된다. 이러한 조각형태로 존재하는 jsp파일은 확장자로 "jspf"를 설정해주면 된다.2. 액션 태그 (jsp 액션 태그)3. vs include디렉티브 비교비교inclue 디렉티브처리시간코드 내에서 요청 시 처리JSP 파일을 자바 소스코드로 변환할 때 처리기능아예 별도의 파일로 에 지정된 파일에서 실행한 결과를 현재 JSP 페이지에 표현.. 2024. 5. 21. [JSP] JSP에서 다른 컨텐츠를 포함하는 3가지 방법 <%@ include file="" %> <jsp:include> <c:import> ⭐ 포함될 html조각에는 의 시작, 마침 태그가 있어서는 안된다.1. 스크립트 태그 - 정적 include 방식- include하는 jsp 파일내에 복사되어 같이 컴파일됨- include되는 jsp파일 내 전역변수를 상위 jsp에서 사용가능2. 액션 태그 page : 포함할 다른 JSP 페이지의 경로 지정flush : "page"에서 지정한 JSP 페이지를 실행하기 전에 출력 버퍼를 flush할지 여부 지정 (default = "false") - 동적 include 방식- include되는 jsp파일의 출력결과(Html 코드)만 포함- include되는 jsp파일의 변수 사용 불가- 태그로 값 전송 가능- 다른 JSP의 실행 결과 & 코드를 포함할 때 사용하는 액션 태그※ flush : "true"?.. 2024. 5. 21. [CSS] CSS 미디어쿼리(Media Query) 기본 사용법 1. 최소 반응형 레이아웃가장 대중적이고 많이 사용하고 있는 간결한 기준이다. 📝 미디어쿼리(Media Query) 형태// 뷰포트의 가로너비가 1025px 이상인 경우 적용 : 데스크탑 환경@media screen and (min-width: 1025px){ .. }// 뷰포트의 가로너비가 769px 이상 1024px 이하 : 태블릿 환경@media screen and (min-width: 769px) and (max-width: 1024){ .. }// 뷰포트의 가로너비가 768px 이하인 경우 적용 : 모바일 환경@media screen and (max-width: 768px){ .. }// 장치가 가로 방향인 경우 적용@media (orientation: landscape){ .. }// 장치가.. 2024. 5. 20. [CSS] CSS Flex 완벽 가이드 CSS Flex BoxFlex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다. 우선 Flex는 2개의 개념으로 나뉩니다. 첫 번째는 Container 두 번째는 Items 입니다. Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수입니다. 주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것입니다. (부모요소) Container ▶ display, flex-flow, justify-content 등의 속성을 사용할 수 있으며, (자식요소) Items ▶ order, flex, align-self 등의 속성을 사용할 수 있습니다. Flex ContainerFlex C.. 2024. 5. 20. [HTML] 시맨틱 태그(Semeantic Tag)란? 시맨틱 태그(Semeantic Tag) 란?Sementic 요소들로 아래와 같이 직관적으로 웹사이트를 구성할 수 있습니다. 시맨틱 태그의 종류태그설명사이트의 머리부분에 사용웹 페이지 메뉴를 만들 때 사용 메인 콘텐츠를 나타내는데 사용 제목별로 나눌 수 있는 문서의 콘텐츠 영역을 구성하는 요소개별 콘텐츠를 나타내는 요소 (여러개 반복되는 요소)좌우측의 사이드 영역사이트의 바닥부분, 주로 연락처나 제작자 정보등을 기술하는 부분 제목과 부제목을 묶어서 나타내는 요소 시맨틱 태그 상세 설명 태그는 보통 사이트의 도입부, 즉 머릿 부분에 사용되며 사이트의 로고나 제목 등을 기술할 때 사용합니다. 하나의 구역이기에 태그 안에 부수적인 태그들이 추가로 들어갈 수 있으며 주로 태그를 사용해 검색창을 넣거나 태.. 2024. 5. 13. [CSS] CSS Flex(display: flex) 레이아웃 구성과 정렬 display : flex 정리 1 2 3 4 5 display : flex부모 클래스에 flex 속성을 줘야 나머지 flex 속성을 사용할 수 있다..box_wrap{ display: flex;}display : flex-direction : 정렬의 방향을 선택 정방향 : row; 정방향 + 역순정렬 : row-reverse; 세로방향 : column; 세로방향 + 역순정렬 : column-reverse;.box_wrap{ display: flex; flex-direction : row;// flex-direction : row-reverse;// flex-direction : column;// flex-direction : col.. 2024. 5. 13. 이전 1 2 3 4 5 6 7 ··· 9 다음 728x90 반응형
