📌 Front End80 [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. [JavaScript] ==와 ===의 차이 ● == 연산자두 피연산자의 값의 타입이 다를 경우 자동으로 일부 피연산자의 타입을 변환한 후 값을 비교합니다.ex)10 10 // true10 '10' // truetrue 1 // truetrue '1' // truetrue 'true' // falsenull undefined // true 10 '10'→ 두 피연산에서 하나가 숫자형이고 다른 하나가 문자열이면, 문자열을 숫자로 변환 후 값을 비교합니다. true 1→ 두 피연산자에서 불리언 값이 존재하면, 불리언 값을 1로 변환 후 값을 비교합니다. true '1'→ 불리언 값을 1로 변환하면, 1=='1' 이 되는데, 문자열 '1'을 숫자로 변환 후 값을 비교합니다.즉, 1==1 로 비교되며, true를 반환합니다. true 'true'→ 불리언.. 2023. 3. 13. [JavaScript] 자바스크립트 비동기 처리 원문 : ⭐️🎀 JavaScript Visualized: Promises & Async/AwaitJS 코드를 다루면서 예상대로 동작하지 않은 적이 있나요? 아마 함수가 무작위로 예상되지 않는 시간에 실행되거나 실행이 지연되었을 겁니다.ES6에서 도입된 Promise는 이런 일을 다룰 새롭고 멋진 기능입니다!수 년전의 고민이 해결되고 잠 못 이루는 밤은 다시 한 번 애니메이션을 만들 시간을 주었습니다. 왜 Promise를 사용해야 하고, 어떻게 동작하며, 어떻게 가장 현대적인 방식으로 사용할 수 있을까요?만약 자바스크립트 이벤트 루프에 관한 이전 게시물을 읽지 않았다면, 먼저 읽어보는게 도움이 될겁니다.콜스택, 웹 API, 큐에 대한 기본적인 지식을 바탕으로 이벤트 루프에 대해 다시 한 번 다룰 예정입니.. 2023. 3. 13. [JSP] setCharacterEncoding, setContentType 정리 JSP코드에 들어가는 인코딩 문장들에 대해 정리해보자!우선 contentType 이란?클라이언트에 자원을 보낼 때 HTTP 헤더를 통해 페이지에 대한 세부정보 (소프트웨어 타입, 시간, 프로토콜 등)를 전송함.*charset=UTF-8 을 통해 웹브라우저가 어떤 캐릭터셋으로 페이지를 받을지 선택한다.*pageEncoding은 JSP페이지가 어떤 캐릭터셋으로 작성됬는지를 표기한다.요약charset=UTF-8" pageEncoding="MS949"%> jsp파일은 MS949로 작성되었으며 브라우저는 UTF-8로 받게될 것이다. 다음으로, jsp파일 지시어 다음에 헤드에 들어오는 이 UTF-8은 html의 페이징 캐릭터 셋인다. 는 jsp인코딩인데본문의 소스를 굳이 2번씩이나 인코딩해주어야 하나 싶다.* j.. 2023. 3. 10. [JavaScript] JavaScript 문서 로딩 순서 ● 실행 순서1. document.ready2. window.ready3. window.onload (문서의 모든 콘텐츠 image, script, css, etc가 로드 된 후 발생하는 이벤트)● 설명① document.ready② window.ready│ window.ready 보다 document.ready 가 먼저 실행됩니다.│ window.ready 는 페이지 내의 이미지를 포함하여 모든 리소스가 로드 되고 나서 실행되고│ document.ready 는 태그 등의 셋팅이 완료 되었을 때 실행되기 때문이다. ③ window.onload│ window.onload 는 와 같은 기능이다.│ 둘 다 선언된다면 body 의 함수가 실행되고, window.onload 함수는 실행되지 않는다.│ windo.. 2023. 3. 10. 이전 1 2 3 4 5 6 7 8 9 다음 728x90 반응형
