반응형 웹 디자인5 09. JavaScript 변수와 데이터 타입 이해하기 | 웹 개발 기초 JavaScript 변수 선언 및 데이터 타입 이해하기 01. 변수 선언: var, let, const1) var: 함수 스코프를 가지며 재선언과 재할당이 가능합니다.var greeting = "Hello";var greeting = "Hi"; // 재선언 가능greeting = "Hey"; // 재할당 가능console.log(greeting); // 출력: Hey 2) let: 블록 스코프를 가지며 재할당은 가능하지만 재선언은 불가능합니다.let age = 30;// let age = 25; // 오류 발생: 재선언 불가age = 35; // 재할당 가능console.log(age); // 출력: 35 3) const: 블록 스코프를 가지며 재선언과 재할당이 모두 불가능합니다.const b.. 2024. 7. 9. 08. CSS Layout 종합 학습 | 웹 개발 기초 1 2 3 실행 결과위 코드를 실행하면, 세 개의 박스가 수평으로 배치되고, 각각의 박스는 중앙에 정렬됩니다. 이를 통해 Flexbox의 기본 개념과 활용 방법을 시각적으로 확인할 수 있습니다. 02. Normal Flow1) 기본 배치 방법Normal Flow는 웹 페이지에서 요소들이 기본적으로 배치되는 방식을 의미합니다. 별도의 CSS 스타일링을 적용하지 않으면, 모든 요소는 Normal Flow에 따라 배치됩니다. 블록 레벨 요소는 수직으로 쌓이고, 인라인 요소는 수평으로 배치됩니다. Normal Flow는 웹 문서의 기본 구조를 유지하는 데 중요한 역할을 합니다.. 2024. 7. 8. 07. CSS Grid Layout 가이드 | 웹 개발 기초 CSS Grid Layout 가이드: 유연하고 강력한 웹 레이아웃 디자인 01. 서론1) CSS Grid Layout이란?CSS Grid Layout은 웹 페이지의 2차원 레이아웃을 구성하는 데 사용되는 CSS 모듈입니다. 행(row)과 열(column)을 기준으로 요소를 배치할 수 있으며, 복잡한 레이아웃을 쉽게 구현할 수 있습니다. Flexbox가 1차원 레이아웃에 최적화되어 있는 반면, Grid Layout은 2차원 레이아웃을 다루기 때문에 더 복잡한 디자인을 구현하는 데 유용합니다. 1 2 3 4 5 6위 예제는 3개의 열로 구성된 그리드 레이아웃을 보여줍니다. 각 그리드 아이템은 동일한 간격으로 배치됩니다.2) Grid Layout의 중요성Grid Layout은 웹 디자인에서 여러 가.. 2024. 7. 7. 04. CSS 선택자와 기본 스타일링 학습 | 웹 개발 기초 CSS 선택자와 기본 스타일링 학습: 웹 개발 기초 01. 서론1) CSS란 무엇인가?CSS(캐스케이딩 스타일 시트)는 HTML 요소의 스타일을 정의하는 언어입니다. CSS는 HTML 문서의 외관을 제어하여 웹 페이지를 더욱 아름답고 사용자 친화적으로 만듭니다. 이를 통해 개발자는 HTML 문서의 구조와 스타일을 분리하여 유지보수를 용이하게 할 수 있습니다.예시 코드 CSS로 스타일링된 제목 이 문장은 기본 스타일링입니다. 2) CSS 선택자와 기본 스타일링의 중요성CSS 선택자는 특정 HTML 요소를 선택하여 스타일을 적용하는 데 사용됩니다. 이를 통해 웹 페이지의 디자인과 레이아웃을 세밀하게 제어할 수 있습니다. 기본 스타일링은 텍스트 색상, 배경색, 여백, 테두리 등 웹 페이지의 .. 2024. 7. 4. 이전 1 2 다음 반응형
