본문 바로가기

코딩57

자바스크립트 소개: JS의 역할과 기본 문법 지금까지 배웠던 html과 css 까지만 해도 어느정도 웹개발에 절반은 발을 들였다 볼 수 있는데요. 이제부터는 웹개발의 꽃 자바스크립트에 대해서 강의를 진행해 볼 생각입니다! 자바스크립트(JavaScript, JS)는 웹 페이지에 동적인 요소를 추가하고 사용자와의 상호작용을 가능하게 하는 프로그래밍 언어입니다. 이 강의에서는 자바스크립트의 기본적인 역할과 문법에 대해 배워보겠습니다. 자바스크립트의 역할 자바스크립트는 웹 페이지를 더 동적이고 상호작용적으로 만듭니다. 예를 들어, 페이지의 요소를 실시간으로 변경하거나, 사용자의 행동에 반응하며, 데이터를 서버와 주고받는 것이 가능합니다. 기본적인 사용 예 웹 페이지의 HTML 요소를 조작합니다. 사용자 이벤트(클릭, 입력, 마우스 오버 등)에 반응합니다... 코딩/HTML CSS JS 2024. 3. 29.
CSS 미디어 쿼리: 반응형 웹 디자인의 기초 오늘날 웹사이트는 다양한 크기와 해상도를 가진 기기에서 접근이 가능해야 합니다. 왜냐하면 데스크탑 PC 모니터 뿐만 아니라 스마트폰, TV, 태블릿 등 다양한 기기에서 웹에 접속이 가능해졌기 때문이죠. 이를 위해서는 반응형 웹 디자인이 필수적인데, CSS 미디어 쿼리는 이러한 디자인을 구현하는데 중요한 역할을 합니다. 미디어 쿼리란 무엇인가? 미디어 쿼리는 다양한 디스플레이 환경(화면 크기, 해상도 등)에 맞게 스타일을 적용할 수 있게 해주는 CSS 기법입니다. 이를 사용하면 하나의 HTML 문서에 여러 스타일 규칙을 정의하고, 특정 조건에서만 이를 적용시킬 수 있습니다. 미디어 쿼리의 중요성 미디어 쿼리는 웹사이트가 다양한 장치와 화면 크기에 맞춰 자동으로 적응할 수 있도록 도와줍니다. 이는 사용자 경.. 코딩/HTML CSS JS 2024. 3. 28.
CSS 레이아웃 기초: 박스 모델과 플로우 웹 페이지의 레이아웃을 이해하고 제어하는 것은 웹 디자인에서 매우 중요합니다. 이 강의에서는 CSS의 기본적인 레이아웃 구성 요소인 박스 모델과 문서 흐름에 대해 알아봅니다. CSS 박스 모델 모든 HTML 요소는 CSS에서 "박스"로 간주됩니다. 박스 모델은 웹 페이지에서 개별 요소의 디자인과 레이아웃을 정의하는 데 사용됩니다. 박스 모델 구성 요소 콘텐츠(Content): 요소의 실제 내용을 포함합니다. 패딩(Padding): 콘텐츠 주위의 내부 공간을 나타냅니다. 테두리(Border): 콘텐츠와 패딩 주위를 감싸는 선입니다. 마진(Margin): 요소 주위의 외부 공간입니다. .box { width: 300px; padding: 20px; border: 5px solid black; margin: .. 코딩/HTML CSS JS 2024. 3. 27.
CSS 기초: 스타일링의 기본, 셀렉터와 프로퍼티 웹 페이지의 시각적 요소를 꾸미고 디자인하는 것은 사용자 경험에 중요한 역할을 합니다. 이 강의에서는 CSS(Cascading Style Sheets)의 기본적인 요소, selector의 종류와 사용 방법, 그리고 스타일링에 자주 사용되는 property에 대해 배워보겠습니다. CSS란 무엇인가? CSS는 웹 페이지의 HTML 요소에 스타일(색상, 글꼴, 레이아웃 등)을 적용하기 위해 사용되는 언어입니다. HTML이 페이지의 구조와 내용을 정의한다면, CSS는 그것들이 어떻게 보일지 결정합니다. CSS 기본 구조 CSS 규칙은 셀렉터와 선언 블록으로 구성됩니다. selector { property: value; property: value; } 셀렉터(Selector): 스타일을 적용할 HTML 요소를 .. 코딩/HTML CSS JS 2024. 3. 26.
HTML 폼과 입력 태그: 사용자 입력을 위한 폼 만들기 웹 페이지에서 사용자의 데이터를 수집하고 처리하는 것은 웹 개발의 중요한 부분입니다. HTML 폼(form)은 사용자로부터 정보를 받아 서버에 전송하는 데 사용되는 요소입니다. 이 강의에서는 태그와 함께 사용되는 다양한 입력(input) 태그들에 대해 알아볼 것입니다. HTML 요소 태그는 사용자 입력을 위한 HTML 요소의 그룹을 정의합니다. 이 태그는 사용자가 입력한 데이터를 서버에 제출하기 위한 방법을 제공합니다. 기본 폼 구조 action 속성은 폼 데이터가 전송될 서버의 URL을 지정합니다. method 속성은 데이터를 전송하는 방식을 정의합니다 (get 또는 post). 입력 태그 태그는 다양한 유형의 데이터 입력 필드를 만듭니다. type 속성을 사용하여 다양한 형태의 입력 필드를 생성할 수.. 코딩/HTML CSS JS 2024. 3. 25.

티스토리툴바