본문 바로가기

코딩/HTML CSS JS41

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.
HTML 기초: 기본 태그와 구조 이번 2강에서는 웹 개발의 첫걸음인 HTML에 대해 좀 더 자세히 알아보도록 하겠습니다. HTML(HyperText Markup Language)은 웹 페이지의 기본 구조를 만드는데 사용됩니다. 이 강의에서는 HTML의 핵심 요소와 그들의 사용법에 대해 배워봅니다. HTML 문서의 기본 구조 모든 HTML 문서는 기본적인 구조를 가지고 있습니다. 이 구조는 웹 페이지가 어떻게 구성되어야 하는지 브라우저에게 알려줍니다. : 문서 타입 선언으로, HTML5 문서임을 나타냅니다. : 문서의 루트 요소로, 전체 HTML 문서를 감쌉니다. 환영합니다! 이것은 내 첫 번째 웹 페이지입니다. 더 많은 정보를 위한 링크 목록과 항목 HTML 기초 CSS 스타일링 JavaScript 프로그래밍 순서 있는 목록 페이지 구.. 코딩/HTML CSS JS 2024. 3. 25.

티스토리툴바