본문 바로가기
728x90
반응형

📌 Front End147

[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.
[CSS] CSS Position 속성 5가지 정리 (static, relative, absolute, fixed, sticky) Position 이란?element 배치하는 방법을 지정해주는 속성이라고 하며static, relative, absolute, fixed, sticky 5가지가 있다.1. staticdefault 값으로 명시되어 있지 않을 경우 position : static; 으로 적용문서의 흐름에 따라 element 배치top, right , bottom, left, z-index 속성에 영향을 받지 않음HTML의 요소가 일반적인 흐름으로 배치되는 속성2. relative문서의 흐름에 따라 element 배치top, right , bottom, left 를 주면 static이었을 때의 위치에서 주어진 값만큼 이동static과 동일하게 일반적인 흐름으로 배치되는 속성차이점은 현재 자신의 위치를 기준으로 배치를 좀 더 .. 2024. 5. 13.
[CSS] 4K(3840x2160)해상도 배경이미지 화면에 맞게 꽉차게 지정하기 width: 100vw / height: 100vh지정해주면 각각 컴퓨터 화면에 맞는 꽉 찬 사이즈로 자동으로 변경된다 body { width: 100vw; height: 100vh; background-image: url('./img/BG.jpg'); background-repeat : no-repeat; background-size : cover; } 2024. 5. 8.
[JSP] jsp파일 include 하기 파일구조 1. 레이아웃 구성하기  2. 메인 파일 생성  (몸통에 include 하기)main.jsp 파일 생성메인 코드를 이런식으로  구성해준 후  원하는 위치에 include까지 해준다. Main content Aside 1 Aside 2 Secondary content 1 Secondary content 2 Secondary content 3 Secondary content 4   3. 상단.. 2024. 4. 30.
[HTML] 파비콘(favicon) 만들기 파비콘 만드는 방법 1. 우선 포토샵이나 이미지툴로 192*192 픽셀의 이미지를 만든다. 이미지 확장자는 png나 jpg이면 상관없다. 2. www.favicon-generator.org 사이트 접속한다.  Favicon & App Icon GeneratorUpload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.www.favicon-generator.org  3. 만든 이미지를 첨부하고 [Create Favicon] 버튼을 클릭한다.   옵션은 기본적으로 체크되어있는대로 두면 된다. (Generate icons fo.. 2023. 4. 25.
[JavaScript] 로딩(Loading)바 만들기 (submit시 로딩 표현하기) CSS 로딩UI 만들기 #2. 시간차를 두고 스케일 조절 반복하는 원(Circle)앞전에 CSS를 사용하여 회전하는 원 로딩 UI을 만든적이 있다. CSS 로딩UI 만들기 #1. 회전하는 원(Circle)CSS 로딩UI 만들기 #1. 회전하는 원(Circle) 웹사이트에 자주 사용되는 로딩 UI 중, 무한으로 회전하는 원(Circle)을 사용하는 경우가 있다. 이때 돌아가는 원을 GIF이미지로 만들어 사용하는 경우도 있는데 그 경..code-study.tistory.com이번에는 세개의 원을 나열해두고 각각 시간차를 두고 일정은 크기로 커졌다 작아졌다 하는 로딩 UI를 만들어보려고 한다. 이미지를 보지 않으면 설명이 어려우니 우선 결과물부터 보자. 시간차를 두고 스케일 조절을 반복하는 원들 (로딩UI)먼.. 2023. 4. 23.
728x90
반응형

티스토리툴바