분류 전체보기566

• 

  [HTML] 브라우저 최소 폭 모바일은 320px가 최소라고 하지만,PC에서 봤을때, 메뉴 등 인터페이스가 차지하고 있는 부분들이 있어서,Windows10을 기준으로        파이어폭스 450px        크롬 500px        에지@코파 452px        에지 492px이다. 예제 Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 Item 9 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [CSS] grid-template-columns의 repeat를 포함한 속성 설명 grid-template-columns에 대해서 설명해줘. repeat는 생소해 grid-template-columns 속성은 CSS Grid 레이아웃에서 그리드 컨테이너의 열(컬럼)을 정의하는 데 사용됩니다. 이 속성을 통해 각 열의 크기와 수를 지정할 수 있습니다.기본 사용법.grid-container { display: grid; grid-template-columns: 100px 200px 100px;}위 예시에서는 3개의 열을 정의하며, 각 열의 너비는 각각 100px, 200px, 100px입니다.repeat() 함수repeat() 함수는 동일한 패턴을 반복할 때 유용합니다. 이 함수를 사용하면 더 간결하게 코드를 작성할 수 있습니다..grid-container { display: gri.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [CSS] grid-template-columns의 repeat를 포함한 속성 설명 grid-template-columns에 대해서 설명해줘. repeat는 생소해 grid-template-columns 속성은 CSS Grid 레이아웃에서 그리드 컨테이너의 열(컬럼)을 정의하는 데 사용됩니다. 이 속성을 통해 각 열의 크기와 수를 지정할 수 있습니다.기본 사용법.grid-container { display: grid; grid-template-columns: 100px 200px 100px;}위 예시에서는 3개의 열을 정의하며, 각 열의 너비는 각각 100px, 200px, 100px입니다.repeat() 함수repeat() 함수는 동일한 패턴을 반복할 때 유용합니다. 이 함수를 사용하면 더 간결하게 코드를 작성할 수 있습니다..grid-container { display: gri.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [CSS Grid & Flex] 같은 레이아웃을 표현한 예제 grid 레이아웃이나, flex 레이아웃 모두 HTML의 의미론적 접근을 하게 되면 같은 레이아웃이 나오게 되네. GRID는 2차원 이상, Flex 일차원이 적합하다는게 맞지? 네, 맞습니다. CSS Grid와 Flexbox 모두 HTML의 의미론적 접근을 통해 웹 접근성과 유지보수성을 높일 수 있습니다. 두 레이아웃 시스템은 목적과 용도에 따라 다른데, 이를 고려하여 적절히 사용하면 됩니다.주요 차이점CSS Grid: 2차원 레이아웃(행과 열)을 다루기에 적합합니다. 전체 페이지 레이아웃이나 복잡한 레이아웃 구조를 만들 때 유용합니다.CSS Flexbox: 1차원 레이아웃(행 또는 열)을 다루기에 적합합니다. 개별적인 UI 요소의 정렬, 크기 조정 등에 유용합니다.같은 레이아웃 예제Grid 레이아웃 예.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [CSS Flex] 레이아웃에 어울리는 태그 세트 CSS Flex 레이아웃  자체는 어떤 HTML 태그와도 잘 작동하지만, 의미론적 HTML을 유지하는 것이 웹 접근성과 유지보수성에 도움이 될 수 있는 태그 세트는 어떤 것이 있어? CSS Flexbox 레이아웃을 사용할 때도 마찬가지로 의미론적 HTML 태그를 사용하여 구조를 명확히 하고 웹 접근성과 유지보수성을 높일 수 있습니다. 다음은 CSS Flexbox를 사용하여 레이아웃을 구성할 때 적합한 HTML 태그 세트와 예시입니다.1. 네비게이션 바 Home Services Contact nav: 네비게이션 링크 그룹을 정의ul/li: 목록 항목을 구조화a: 링크 요소2. 아티클 및 섹션 Article Title Section Title Content g.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [CSS Grid] 레이아웃에 어울리는 태그 세트 CSS Grid 레이아웃 자체는 어떤 HTML 태그와도 잘 작동하지만, 의미론적 HTML을 유지하는 것이 웹 접근성과 유지보수성에 도움이 될 수 있는 태그 세트는 어떤 것이 있어? CSS Grid 레이아웃을 사용할 때, 의미론적 HTML을 유지하면서 웹 접근성과 유지보수성을 높일 수 있는 다양한 HTML 태그 세트가 있습니다. 각 태그는 특정 의미와 용도를 가지고 있어, 콘텐츠의 구조와 의미를 명확하게 전달할 수 있습니다. 다음은 이러한 태그 세트의 예시입니다.1. 네비게이션 바 Home Services Contact  nav: 네비게이션 링크 그룹을 정의ul/li: 목록 항목을 구조화a: 링크 요소  2. 아티클 및 섹션 Article Title Section.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [HTML] href 설정, ="javascript://" 와 ="void(0)" 하게 되면, 페이지의 상단으로 이동해 버립니다.그래서   하는 경우가 있다.하지만 ... 좀 더 나은 방법이 있다고 한다.a href="javascript://" 와 a href="void(0)" 는 같은 건가? a href="javascript://"와 a href="void(0)"는 비슷하지만 약간 다릅니다. 둘 다 링크를 클릭했을 때 페이지 이동을 방지하기 위한 목적으로 사용되지만, 구현 방식과 의미가 다릅니다.a href="javascript://"의미: javascript:// 스키마를 사용하여 JavaScript 코드를 실행합니다.사용 예시:Click me특징:이 코드는 특정 동작을 수행하지 않기 때문에 실제로는 아무 일도 일어나지 않습니다.때로는 브라우저가 이 링크를 클릭했을 때 페이지 상단.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• [HTTPS] 윈도우 서버용 무료 SSL 인증서, Let's Encrypt SSL 윈도우 서버에 설치할 수 있는 무료 SSL 인증서로는 "Let's Encrypt"를 추천합니다. Let's Encrypt는 무료, 자동화된, 그리고 개방된 인증 기관(CA)으로, 많은 웹사이트에서 SSL/TLS 인증서를 발급받아 사용하고 있습니다. Let's Encrypt 인증서를 윈도우 서버에 설치하는 방법을 간단히 안내드리겠습니다.Let's Encrypt SSL 인증서 설치 가이드 (윈도우 서버)Certbot 설치: Let's Encrypt 인증서를 자동으로 발급받고 갱신하기 위해 Certbot을 사용합니다. 윈도우용 Certbot을 설치하세요.Certbot Download​ (Certbot)​웹서버를 선택하고, 운영체제로 "Windows"를 선택하여 다운로드 및 설치 지침을 따르세요.파워쉘 실행: .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 26.

• 

  버스피아 산업안전교육 2024년 하반기 -12시간- 교육 정답 🐤 관련글 참고2024.07.25 - [직박구리/버스 운전] - 버스피아 안전교육 동영상 퀴즈 자동 풀기 매크로 실행 방법12시간 짜리1회2회3회4회5회6회7회8회9회10회11회12회 직박구리/버스 운전 2024. 7. 25.

• 

  버스피아 안전교육 동영상 퀴즈 자동 풀기 매크로 실행 방법 버스피아 산업안전보건교육 자동 퀴즈 풀이 매크로 사용방법1. 보내드린 압축 파일을 압축해제 합니다.2. ImageMax.exe 를 실행합니다.3. 강의 보기 해서 강의 창을 띄웁니다.4. START 클릭 합니다.5. 기존 창 크기 복구 > 확인6. 인식 대상 > 확인7. 동영상 재생  * 만약 2번째 페이지에서도 자동재생이 안되시는 경우는 파이이폭스 동영상/오디오 자동재생 속성을 허용해야합니다. 압축 파일 없으신 분은 다음 링크 참고하세요.🐤 관련글 참고2023.01.24 - [직박구리/버스 운전] - 동영상 강의 자동 수강 방법 by 매크로프로그램 직박구리/버스 운전 2024. 7. 25.