코딩ㆍ개발 정보176

• [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.

• [CSS] 스타일가이드에서 블록 단위 표현 웹 페이지의 스타일가이드를 만들려고 하는데, 블럭 단위로 만들어서, 필요한 부분에 레고 블록 처럼 끼워 넣어 사용하고 싶어. 그러려면 이름이 중복이 되지 말아야 할텐데, 예를 들어보자면 표도 있고, 이미지도 있고, 텍스트도 있고, 본문도 있고, 제목도 있고, 인용도 있으면서 그리고 각각에 유형들도 몇가지 있다고 치면 어떤 규칙을 가지는게 좋을까? 설명해주고, 예를 들어줘 스타일 가이드를 블록 단위로 만들어서 레고 블록처럼 재사용하려는 접근은 훌륭한 생각입니다. 이를 위해 각 블록에 고유한 이름을 부여하는 명명 규칙이 중요합니다. 다음은 명명 규칙을 제안하고, 이러한 규칙을 통해 스타일 가이드를 구성하는 방법을 설명하겠습니다.명명 규칙접두어 사용:각 블록 유형에 접두어를 사용하여 블록의 목적을 명확히 합니.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [HTML] Flex, nth-child, Grid, Block, vw, vh, position 예제들 반응형 웹 페이지를 모바일 단위로 만들어서 화면이 점점 커질때 이런 단위를 한 줄에 여러개 표현 하게 되는데 그 방법을 예를 들어 알려줘 반응형 기본 레이아웃 반응형 웹 페이지를 제작할 때, CSS의 미디어 쿼리를 사용하여 화면 크기에 따라 레이아웃을 조정할 수 있습니다. 예를 들어, 모바일 화면에서는 단위가 하나씩 표시되고 화면이 커질수록 여러 개의 단위가 한 줄에 표시되도록 설정할 수 있습니다.아래는 이러한 레이아웃을 설정하는 예제입니다. Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 설명기본 스타일: .container 클래스는 flex 레이아웃을 사용하여 아이템들을 배치합니다. .i.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [CSS] 스타일시트 Tips 101 CSS 스타일링 101 지금 시작합니다.1. Box Model 이해하기  margin, border, padding, content를 명확히 구분.div { margin: 10px; border: 5px solid black; padding: 20px; width: 200px;}2. CSS Resets 사용하기  기본 스타일을 재설정하여 일관성 있는 디자인 유지/* reset.css */* { margin: 0; padding: 0; box-sizing: border-box;}3. Flexbox 배우기  레이아웃을 쉽게 잡기 위한 유연한 박스 모델.container { display: flex; justify-content: center; align-items: center; heig.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [JavaScript] 자바스크립트 101 Tips 동적인 웹 페이지를 만드는 데 유용한 자바스크립트 팁과 예제를 아래에 101가지 제공하겠습니다. 각각의 팁은 jQuery 없이 순수 자바스크립트로 작성되었습니다.01. DOM 요소 선택 및 조작document.getElementById("myElement").innerHTML = "Hello, World!";02. 클래스 추가 및 제거document.getElementById("myElement").classList.add("newClass");document.getElementById("myElement").classList.remove("newClass");03. 이벤트 리스너 추가document.getElementById("myButton").addEventListener("click", funct.. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.

• [CSS] position 속성 예제 position을 사용하는 방법에 대해서 예를 들어 설명해줘 CSS에서 position 속성은 요소의 위치를 제어하는 데 사용됩니다. 이 속성에는 여러 값이 있으며, 각 값에 따라 요소의 배치 방식이 달라집니다. 아래는 각 position 값에 대한 설명과 예제입니다. 1. static기본값입니다. 요소는 문서의 정상적인 흐름에 따라 배치됩니다. 특별한 위치 지정이 필요 없는 경우에 사용됩니다.This is a static box. 2. relative:     요소는 문서의 정상적인 흐름에 따라 배치되지만, top, right, bottom, left 속성을 사용하여 자신의 원래 위치를 기준으로 이동할 수 있습니다.This is a relative box. 3. absolute:     요소는 문서의 .. 코딩ㆍ개발 정보/HTML 연습 2024. 7. 25.