코딩ㆍ개발 정보176 [JAVASCRIPT] 거꾸로 가는 시간 만들기 2024년 7월 31일 오전 09시까지 현재 서버 시간을 기준으로 남은 시간을 DD일 HH시 MM분 00초 남았다고 매 초 단위로 실시간 카운트를 해주고 싶어, 이런 것은 어떤 방식으로 구현할 수 있는거야? JAVASCRIPT 로도 가능해? 구현해줘 그리고, 이러한 부분이 서버 혹은 클라이언트 많은 부하를 줄 수 있나? 실시간 카운트다운을 구현하는 것은 JavaScript로 충분히 가능합니다. 이 카운트다운은 클라이언트 측에서 실행되며 서버에 부하를 주지 않기 때문에 효율적입니다. 다음은 2024년 7월 31일 오전 09시까지의 시간을 계산하고, 매 초마다 남은 시간을 업데이트하는 JavaScript 코드입니다. 코드 설명:목표 시간 설정: targetDate 변수에 2024년 7월 31.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25. [sublimetext] 코드 정렬 애드온 sublime text 3 사용하여 asp와 웹 페이지를 만들고 있데, 인덴트 등을 정렬하고 싶어, 어떤 경우 asp의 주석 같은 경우를 만나면 들여쓰기가 깨지는 경우들도 있고 하던데, asp, html, css, js 등을 태그 정렬하는 방법을 추천해줘 Sublime Text 3에서 ASP, HTML, CSS, JS 등의 코드를 정렬하고 들여쓰기를 맞추는 방법을 아래에 설명하겠습니다.방법1: HTML-CSS-JS Prettify1. HTML-CSS-JS Prettify 설치HTML, CSS, JS 코드를 정렬하는 데 도움이 되는 패키지입니다.Preferences > Package Control > Install Package를 클릭합니다."HTML-CSS-JS Prettify"를 검색하여 설치합니다.2.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25. [sublimeText] 코드 찾아가기 애드온 sublimetext 3 버전을 사용하여 웹 페이지및 css, js를 편집중인데, 소스에 포한된, css 파일이나, js의 함수를 클릭해서 해당 소스로 이동하고 싶거든, 그런 애드온이 있을까? Sublime Text 3에서 웹 페이지 및 CSS, JS 파일을 편집할 때, 특정 CSS 파일이나 JS 함수로 빠르게 이동할 수 있는 여러 가지 유용한 플러그인이 있습니다. 다음은 그런 기능을 제공하는 몇 가지 플러그인입니다:1. Goto Definition기능: 이 플러그인은 함수 정의나 CSS 클래스/아이디 정의로 빠르게 이동할 수 있게 해줍니다.설치 방법:Sublime Text 3에서 Ctrl+Shift+P를 눌러 Package Control: Install Package를 선택합니다.Goto Definit.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25. [HTML] Viewport, DPR, 가로, 세로 다르게 지정 view port 로 모바일과 PC 등에 어떤 효과가 적용되는지 알려줘 뷰포트(Viewport)는 웹 페이지가 다양한 장치에서 어떻게 표시되는지를 제어하는 중요한 요소입니다. 특히 모바일 장치와 PC에서 서로 다른 효과가 적용되며, 이를 이해하는 것은 반응형 웹 디자인의 핵심입니다. 1. 뷰포트 메타 태그:웹 페이지의 헤더에 태그를 추가하여 브라우저에게 화면 크기를 어떻게 조절할지 지시할 수 있습니다. 주로 사용하는 속성은 다음과 같습니다:width: 뷰포트의 너비를 설정합니다. width=device-width는 장치의 너비에 맞추도록 합니다.initial-scale: 초기 줌 레벨을 설정합니다. initial-scale=1은 페이지가 처음 로드될 때 1:1 줌 레벨로 설정합니다.maximum-sca.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25. [CSS] 스타일시트 팁 30가지 웹페이지 스타일시트를 만들때, line-heigt와 height를 같은 크기로 하면 가운데 정렬되는 효과가 있는 것처럼, 팁으로 사용할 수 있는 기술을 30가지만 알려줘 01. 플렉스 박스(Flexbox) 정렬 display: flex;를 사용하여 컨테이너 내부의 요소들을 쉽게 정렬하고 배치할 수 있습니다..container { display: flex; justify-content: center; /* 가로 중앙 정렬 */ align-items: center; /* 세로 중앙 정렬 */}02. 그리드 레이아웃(Grid Layout) display: grid;를 사용하여 복잡한 레이아웃을 간단하게 구성할 수 있습니다..grid-container { display: grid; .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. [HTML] 부모 relative, 자식 absolue 사이에, wrapper 태그를 삽입? 부모태그 relative, 자식 태그 absolute 를 지정하였는데, 부모와 자식 사이에 래퍼 태그를 추가해야 할 경우가 있다면, 보무태그와 자식태그의 관계가 깨지지 않도록 래퍼 태그를 추가하는 방법을 알려줘 부모 태그와 자식 태그 사이에 래퍼 태그를 추가하면서, 부모와 자식 태그의 관계가 깨지지 않도록 하는 방법을 알려드리겠습니다.부모 태그에 position: relative 속성을 유지합니다.자식 태그에 position: absolute 속성을 유지합니다.래퍼 태그를 추가할 때, 래퍼 태그에는 특별한 포지셔닝 속성을 주지 않습니다. 기본적으로 position: static 속성이 적용됩니다.다음은 예제 코드입니다:원본 구조 자식 태그 내용 .parent { position: relati.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. [CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로 2 x 2 이상의 자식을 가진 요소의 flex로 할 수 있는 것들을 설명해줘 Flexbox 레이아웃을 사용하여 2개 이상의 자식을 가진 요소를 다양한 방식으로 구성할 수 있습니다. Flexbox는 웹 페이지의 레이아웃을 디자인하는 데 매우 유용하며, 자식 요소들을 정렬하고 공간을 배분하는 데 도움을 줍니다. 다음은 Flexbox를 사용하여 2개 이상의 자식을 가진 요소에서 할 수 있는 몇 가지 주요 작업입니다.1. 주 축 정렬 (Main Axis Alignment)justify-content 속성을 사용하여 주 축(main axis)에서 자식 요소들을 정렬할 수 있습니다.flex-start: 자식 요소들을 주 축의 시작 부분에 정렬합니다.flex-end: 자식 요소들을 주 축의 끝 부분에 정렬합니다.ce.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. [CSS] 웹페이지 스타일링 - 부모와 자식관계 7 웹페이지 스타일은 부모태그와 자식태그와의 관계로 만들어지는 경우가 있는데 어떤 경우가 있는지 알려줘 일립시스라던가 플렉스 포지션 렐러티브와 앱솔루트 등 가능한 많은 케이스를 알려줘 웹페이지 스타일링에서 부모 태그와 자식 태그의 관계는 매우 중요합니다. 여러 스타일링 기법이 부모-자식 관계를 기반으로 작동합니다. 아래에 주요한 몇 가지 예를 들어 설명하겠습니다.1. 플렉스(Flexbox)플렉스 레이아웃을 사용하면 부모 컨테이너가 자식 요소들을 쉽게 배치하고 정렬할 수 있습니다.부모 (컨테이너) 스타일.parent { display: flex; justify-content: center; /* 가로 축에서 중앙 정렬 */ align-items: center; /* 세로 축에서 중앙 정렬 */ .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. [HTML] 모바일 우선, 반응형 페이지 만들기 웹사이트 개발 시 모바일 우선 접근법(mobile-first approach)을 채택하는 것은 매우 좋은 전략입니다. 이 접근법에서는 모바일 환경에서의 사용자 경험을 최우선으로 고려하며, 이후 데스크톱 환경으로 확장해 나갑니다. 모바일 우선 접근법을 사용할 때 GNB(Global Navigation Bar) 구성에 대해 두 가지 방법을 고려할 수 있습니다.방법 1: 모바일 우선 GNB 구성모바일 GNB 먼저 개발:모바일 사용자에게 최적화된 GNB를 설계합니다.최소한의 공간을 사용하며, 직관적이고 간단한 메뉴를 구성합니다.메뉴 아이콘(햄버거 메뉴) 등을 사용해 GNB를 숨기거나 표시합니다.데스크톱 버전 확장:모바일 GNB를 바탕으로 데스크톱 GNB로 확장합니다.더 큰 화면 공간을 활용하여 메뉴를 더 넓게 .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. [웹폰트] NotoSans 에서 Pretendard 사용 방법 웹폰트 woff2, woff 등을 만들기 위해서는 일반 ttf 또는 otf 폰트를 다운받고,이를 변환해주는 곳에서 변환해주면됩니다. 두가지 폰트 살펴봅니다.NotoSans KR (본고딕, 노토산스) vs Pretendard (프리텐다드) 1. NotoSans KR 다운로드https://fonts.google.com/noto/specimen/Noto+Sans+KR 2. Pretendard 다운로드https://github.com/orioncactus/pretendard 3. 웹폰트로 변환하기https://transfonter.org/ 4. NotoSans 폰트 스타일 예제/* Noto Sans KR 폰트 호출 */@charset "UTF-8";@font-face { font-family: 'Noto S.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 24. 이전 1 2 3 4 5 6 7 8 ··· 18 다음