본문 바로가기

웹 개발10

HTML, CSS, JavaScript의 기본 이해, 웹 개발의 첫걸음 HTML, CSS, JavaScript의 기본 이해, 웹 개발의 첫걸음웹 개발은 인터넷을 통해 사용자와 상호작용할 수 있는 다양한 서비스를 만드는 작업입니다. 많은 사람들은 웹 개발을 어렵다고 느끼지만, 웹 개발의 기본을 이해하면 그 복잡성을 한층 쉽게 풀어낼 수 있습니다. 웹 개발에서 가장 기본적인 세 가지 기술인 HTML, CSS, JavaScript는 각각 다른 역할을 맡고 있으며, 이들을 이해하고 적절히 활용하는 것이 중요합니다.이 글에서는 HTML, CSS, JavaScript의 기본 개념과 역할을 설명하고, 이들 간의 협력 방법을 소개하려 합니다.HTML: 웹 페이지의 뼈대HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 구성하는 마크업 언어입니다. 웹 페이지.. 2025. 3. 1.
자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법 자바스크립트 기초대사량 계산기 - 해리스-베네딕트 기초대사량 계산법해리스-베네딕트 기초대사량(Basal Metabolic Rate, BMR) 계산법은 개인의 기초대사량을 추정하는 데 널리 사용되는 공식을 제공합니다. 기초대사량은 휴식 상태에서 소비되는 에너지의 양을 의미하며, 이를 통해 하루 동안 필요한 총 에너지 소비량(TDEE)을 계산할 수 있습니다. 본 글에서는 해리스-베네딕트 공식을 사용하여 자바스크립트로 기초대사량 계산기를 만드는 방법을 설명하겠습니다.기초대사량이란?기초대사량(Basal Metabolic Rate, BMR)은 개인이 생명 유지에 필요한 최소한의 에너지를 의미합니다. 이는 호흡, 혈액 순환, 체온 유지 등 기본적인 신체 기능을 수행하는 데 필요한 에너지를 포함합니다. 기초대사량은 .. 2024. 6. 3.
JAVASCRIPT RGB 색상표 JAVASCRIPT RGB 색상표웹 퍼블리싱이나 디자인을 공부하는 과정에서 색상 코드는 매우 중요합니다. HTML, CSS, JavaScript와 같은 웹 기술을 사용할 때, RGB 색상 코드는 특히 유용합니다. 이번 글에서는 JavaScript로 구현한 RGB 색상표를 소개하겠습니다. 이 글을 통해 다양한 색상 코드를 쉽게 찾아볼 수 있습니다.RGB 색상코드란?RGB는 빨강(Red), 초록(Green), 파랑(Blue)의 약자로, 이 세 가지 기본 색상의 조합으로 다양한 색상을 표현하는 방식입니다. 각 색상의 값은 0부터 255까지로, 총 256단계를 가집니다. 예를 들어, RGB(255, 0, 0)는 순수한 빨간색을 나타내고, RGB(0, 255, 0)는 초록색을, RGB(0, 0, 255)는 파란색.. 2024. 5. 19.
에라토스테네스의 체 JS 소수 찾기 알고리즘 만들기 에라토스테네스의 체를 이용한 자바스크립트 소수 찾기 로직 소개: 에라토스테네스의 체란 무엇인가? 에라토스테네스의 체는 고대 그리스 수학자 에라토스테네스가 발명한 알고리즘으로, 특정 범위 내에서 소수를 찾는 가장 효율적인 방법 중 하나입니다. 이 방법은 특정 수의 배수를 제거해 나가며 소수만을 남기는 방식으로, 컴퓨터 과학에서도 널리 쓰이고 있습니다. 자바스크립트를 이용해 이 알고리즘을 구현한다면, 소수를 빠르고 효율적으로 찾을 수 있습니다. 자바스크립트로 에라토스테네스의 체 구현하기 자바스크립트를 사용하여 에라토스테네스의 체 알고리즘을 구현하는 과정은 다음과 같습니다: 초기화: 먼저, 소수를 찾고자 하는 범위까지의 모든 숫자를 포함하는 배열을 생성합니다. 이 배열은 초기에 모든 숫자가 소수라고 가정합니다.. 2023. 11. 15.
CSS fontawesome 아이콘, 부트스트랩 아이콘, 구글 아이콘 사용방법 CSS fontawesome 아이콘, 부트스트랩 아이콘, 구글 아이콘 사용방법 fontawesome CSS 아이콘의 사용과 맞춤화 CSS를 이용한 아이콘 사용은 웹사이트에 시각적인 요소를 추가하는 간단하고 효과적인 방법입니다. 예를 들어, Font Awesome은 웹 개발자들 사이에서 널리 사용되는 아이콘 라이브러리입니다. 이를 사용하려면 HTML 페이지에 태그를 추가하여 Font Awesome의 자바스크립트 라이브러리를 불러와야 합니다. 예시 코드는 다음과 같습니다: 태그에 클래스 이름을 지정함으로써 원하는 아이콘을 쉽게 추가할 수 있습니다. 또한, CSS를 통해 이 아이콘들의 크기, 색상, 그림자 등을 맞춤 설정할 수 있습니다. 부트스트랩 아이콘의 활용 부트스트랩은 반응형 웹 디자인을 쉽게 만들 수 .. 2023. 11. 14.
부트스트랩 그리드 폭 Bootstrap grid incorrect width .container .row .col-* 부트스트랩 너비 조절에 관한 이해와 최적화 부트스트랩은 반응형 웹 디자인을 쉽게 구현할 수 있도록 해주는 CSS 프레임워크입니다. 이 툴을 사용하면 다양한 화면 크기에 맞춰 콘텐츠의 레이아웃을 조정할 수 있지만, 때때로 의도한 대로 동작하지 않을 때가 있습니다. 여기서 당신이 겪고 있는 문제는 #breadcrumbs, h1, .info 요소가 자신의 최대 너비를 갖지만 .row 요소는 음의 마진을 가지고 있어 예상치 못한 너비를 가지는 것으로 보입니다. 부트스트랩 그리드 시스템 이해하기 부트스트랩의 그리드 시스템은 컨테이너(container), 행(row), 그리고 열(column)으로 구성됩니다. 이러한 요소들은 사이트의 구조를 정의하고 콘텐츠를 적절히 배열하기 위해 사용됩니다. .container 혹.. 2023. 11. 1.
CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기: steps()함수 CSS Typewriter Effect: CSS3 애니메이션으로 타이핑 효과 만들기 웹사이트의 텍스트를 동적이고 흥미롭게 만드는 방법 중 하나는 타자기 효과(typewriter effect)를 사용하는 것입니다. 이 효과는 텍스트가 점차적으로 나타나는 것처럼 보이게 해서 사이트 방문자의 주목을 끌 수 있습니다. 이 글에서는 순수 CSS만을 이용해 타자기 효과를 만드는 방법을 알아보겠습니다. 타자기 효과는 쉽게 만들 수 있다 타자기 효과를 구현하는 것은 그다지 어렵지 않습니다. 이 튜토리얼을 이해하기 위해서는 기본적인 CSS와 CSS 애니메이션에 대한 지식만 있으면 충분합니다. 우리가 만들 타자기 효과는 CSS의 steps() 함수를 이용해 텍스트 요소의 너비를 0%에서 100%까지 점차 변경하면서 텍스트.. 2023. 10. 9.
vscode에서 PHP와 SCSS 함께 사용하기: SASS 컴파일러 설치 ✈ Visual Studio Code에서 PHP와 SCSS 함께 사용하기: SASS 컴파일러 설치 안녕하세요, 여러분! 오늘은 Visual Studio Code를 이용하여 PHP 프로젝트에서 SCSS를 사용하고 SASS 컴파일러를 설치하는 방법에 대해 알아보려고 합니다. 이 포스팅을 통해 웹 개발 과정에서 SCSS의 활용과 함께 SASS 컴파일러를 효율적으로 활용하는 방법에 대해 배워보세요. 준비물 확인하기 우선, 우리가 할 작업에 필요한 준비물을 확인해봅시다. Visual Studio Code 설치: VS Code가 설치되어 있지 않다면, 공식 웹사이트에서 다운로드하여 설치해주세요. SCSS 지식: SCSS는 웹 개발에서 스타일을 효과적으로 작성할 수 있도록 도와주는 언어입니다. 이미 기본적인 SCSS.. 2023. 9. 1.
Button scss hover not working 원인과 예제 SASS SCSS :hover 예제와 동작하지 않는 사례 - 원인과 해법 서론 SASS(SCSS)는 CSS의 확장 버전으로, 변수, 중첩 규칙, 함수 등을 사용하여 스타일시트 작성을 간편하고 효율적으로 만들어줍니다. 그리고 :hover는 웹 개발에서 자주 사용되는 유용한 CSS 의사 클래스 중 하나입니다. 하지만 때때로, SASS(SCSS)를 사용할 때 :hover가 원하는 대로 동작하지 않는 사례들이 있습니다. 이러한 문제들을 해결하는 방법과 함께, :hover를 SASS(SCSS)에서 사용하는 예제들을 살펴보겠습니다. :hover 사용 예제 먼저, 간단한 예제를 통해 :hover를 SASS(SCSS)에서 어떻게 사용하는지 살펴보겠습니다. // SCSS .button { background-color:.. 2023. 8. 9.
asp, html, jsp, php include(인클루드) 하는 방법. PHP, ASP, JSP에서의 Include 사용법과 HTML의 한계 인클루드(include)는 코드 재사용성을 높이기 위한 매우 유용한 기능입니다. 웹 개발에서는 헤더, 푸터, 네비게이션 바 등과 같은 공통 요소를 여러 페이지에 걸쳐 반복해서 사용해야 할 경우가 많습니다. 이러한 상황에서 인클루드를 사용하면 중복 코드를 줄이고 유지보수를 쉽게 할 수 있습니다. 웹퍼블리셔 뿐만 아니라 웹 개발자들도 이 기능을 자주 사용합니다. 하지만 이 기능은 프로그래밍 언어나 플랫폼에 따라 다르게 구현될 수 있으므로, 여기서는 PHP, ASP, JSP에서 어떻게 인클루드를 사용하는지, 그리고 HTML에서는 왜 사용할 수 없는지에 대해 알아보겠습니다. PHP에서의 Include PHP에서는 include 또는 inclu.. 2020. 8. 14.

티스토리툴바