프로그래밍184 LayOuy 구조 5 레이아웃05 float, flex, grid 를이용하여 구조화를 할수있습니다. flex 같은경우는 컨텐츠를 묶어서 구조화 합니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. float으로 인해 영역깨짐 방지법 1. 깨지는 영역에 clear:both를 설정합니다. 2. 부모 박스 영역에 overflow: hidden을 설정합니다. 3. clearfix를 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; ba.. 2022. 7. 27. LayOut 구조 4 레이아웃04 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. CSS구성 이번 레이아웃은 전체 영역이 들어간 구조입니다. 실제 사이트에서 이런 구조를 많이 사용하며, 컨테이너를 만들어서 가운데 영역을 설정합니다. *{ box-sizing: 0; padding: 0; margin: 0; } #header { height: 100px; background-color: #E0F2F1; } #nav { height: 300px; background-color: #80CBC4; } #section { height: 580px; background-color: #26A69A; } #footer { height: 100px; b.. 2022. 7. 27. LayOut 구조 3 레이아웃03 이번 레이아웃은 사이드메뉴가 하나 컨텐츠가 두개 들어간 구조입니다. float, flex, grid 를이용하여 구조화를 할수있습니다. flex 같은경우는 컨텐츠를 묶어서 구조화 합니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { padding: 0; margin: 0; } body { background-color: #E1F5FE; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100.. 2022. 7. 27. LayOut 구조 2 레이아웃02 이번 레이아웃은 사이드메뉴가 두개 컨텐츠가 한개 들어간 구조입니다. float, flex, grid 를이용하여 구조화를 할수있습니다. float를 이용한 레이아웃 CSS 속성(property) float 은 한 요소(element)가 보통 흐름(normal flow)으로부터 빠져 텍스트 및 인라인(inline) 요소가 그 주위를 감싸는 자기 컨테이너의 좌우측을 따라 배치되어야 함을 지정합니다. * { box-sizing: border-box; padding: 0; margin: 0; } body { background-color: #E8F5E9; } #wrap { width: 1200px; margin: 0 auto; } #header { width: 100%; height: 100px; b.. 2022. 7. 27. 체육복 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번호의 학생이나 바로 뒷번호의 학생에게만 체육복을 빌려줄 수 있습니다. 예를 들어, 4번 학생은 3번 학생이나 5번 학생에게만 체육복을 빌려줄 수 있습니다. 체육복이 없으면 수업을 들을 수 없기 때문에 체육복을 적절히 빌려 최대한 많은 학생이 체육수업을 들어야 합니다. 전체 학생의 수 n, 체육복을 도난당한 학생들의 번호가 담긴 배열 lost, 여벌의 체육복을 가져온 학생들의 번호가 담긴 배열 reserve가 매개변수로 주어질 때, 체육수업을 들을 수 있는 학생의 최댓값을 return 하도록 solution 함수를 작.. 2022. 7. 27. function(함수) 함수 함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다. 선언적 함수 선언적 함수는 함수를 선언할 때 이름을 붙여주는 함수를 말합니다. 즉, 따로 변수에 넣어주지 않고 선언할 대 붙여준 이름으로 호출하면 됩니다. 함수이름() function 함수이름() { 실행문; } function func() { document.write("함수가 실행되었습니다."); } func(); 결과 확인하기 익명 함수 익명함수는 말그대로 이름이 없는 함수입니다. 따라서 익명함수를 선언하고 사용하기 위해서는 변수에 넣어서 사용하여야 합니다. const.. 2022. 7. 26. 이전 1 ··· 26 27 28 29 30 31 다음 728x90 반응형
