전체 글566

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

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