반응형 Study50 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. 06. CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 | 웹 개발 기초 CSS Flexbox 기초 학습: 유연한 웹 레이아웃 만들기 01. 서론1) Flexbox란?Flexbox(플렉서블 박스 레이아웃)는 CSS의 레이아웃 모델로, 요소들을 유연하게 배치하고 정렬하는 데 사용됩니다. Flexbox는 Flex 컨테이너와 Flex 항목으로 구성되며, 컨테이너 내의 자식 요소들을 하나의 차원에서 배치할 수 있게 해줍니다. 이를 통해 요소의 크기를 조절하고, 남은 공간을 채우거나 넘치지 않도록 할 수 있습니다..container { display: flex;} 항목 1 항목 2 항목 3 2) Flexbox의 중요성Flexbox는 다양한 화면 크기와 디바이스에 적응할 수 있는 유연한 레이아웃을 쉽게 만들 수 있게 해줍니다. 이는.. 2024. 7. 6. 이전 1 ··· 8 9 10 11 12 13 다음 반응형
