코딩

안녕하세요~!! 오늘은 레이아웃 구성 유형의 마지막, grid 유형을 공부해볼게요~! grid 유형을 사실상 많이 쓴다고 합니다. ㅎㅎ 그러니까 잘 알아둬야 하겠죵~~? grid css grid는 기존의 display:flex를 대체할 수 있는 새로운 display property라고 생각하시면 됩니다. flex와 grid의 가장 큰 차이점은 flex는 1차원 레이아웃인 반면, grid는 2차원 레이아웃이라는 점입니다. 2차원 레이아웃을 지원하기 때문에 행과 열 모두에서 요소를 정렬하고 이동하는 데 사용할 수 있는 많은 도구를 제공합니다. grid는 flex에 비해 더 다양하고 고차원적인 레이아웃이 가능해진다는 장점이 있습니다. display: grid; #️⃣grid 속성 속성 속성 설명 grid gr..

안녕하세요 ~~ 오늘도 어김없이 돌아온 코딩 공부 시간 ㅎㅎ 오늘은 레이아웃을 짤 때 중요한 flex 유형을 공부해볼겁니다. 저번엔 float유형을 살펴봤는데 flex유형도 중요하니 차근차근 알아봅시당. flex flex는 css에 display 속성 중 하나로써 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. 박스 레이아웃을 작성할 때 사용되는 아주 유용한 방법입니다. flex를 쓸 때에는 필수 지정 요소들이 있는데, 어떤 건지 살펴볼게요! display: flex; 속성 구분 flexbox는 부모요소인 flex container와 자식 요소인 flex item에 정의하는 속성이 다릅니다. 전체적인 정렬에 관련된 속성..

안녕하세요~ 오늘은 프로그래밍의 꽃이라 할 수 있는 함수를 알아보겠습니다! 자바스크립트 함수 자바스크립트에서 함수는 코드를 모듈화하고 재사용 가능하게 만들어주는 중요한 개념입니다. 함수는 특정 작업을 수행하고 필요한 데이터를 반환할 수 있습니다! 자바스크립트에서 함수를 사용하는 이유는 소스가 복잡해지거나 처리해야 할 기능이 많다면 이것들을 기능별로 나누는 것이 좋은데, 기능별로 함수를 따로 만들어둔다면 필요할 때마다 적절한 함수를 사용해서 함수별로 실행할 수 있는거죠! 함수를 표현하는 스타일은 다 다른데, 총 4가지가 있습니다! 화살표 함수를 포함하면 8가지구요. 한 번 하나하나씩 살펴볼게요~ 👑선언적 함수 선언적 함수는 함수를 선언할 때 함수 이름과 함수 내용을 함께 작성하는 방식입니다. 자바스크립트 ..

안녕하세요~~?? 오늘은 자바스크립트 데이터 저장하는 방법에 대해 정리해보았습니다! 크게 나누면 변수, 상수, 배열, 객체 각각 데이터 저장하기가 있는데요, 한 번 하나씩 살펴보러 가볼까용? 🎀 변수 변수는 데이터를 저장하는 저장소입니다. 데이터를 저장할 수도 있지만 변경과 추가가 가능합니다. 데이터 저장 See the Pen 변수_데이터 저장 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. 데이터 변경 See the Pen 변수_데이터 변경 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. 데이터 추가 See the Pen 변수_데이터 추가 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. 연산자 : 변수..

안녕하세요~ 오늘은 조건문에 대해 알아보는 시간을 갖겠습니다! 저번엔 반복문을 했죠? ㅎㅎ 조건문은 더 어려운 것 같아요 ㅜㅜ 특히 둘이 같이 쓰면요.. 일단 조건문이란 무엇인지? ✨조건문 조건문은 주어진 조건식의 결과에 따라 별도의 명령을 수행하도록 제어하는 명령문입니다. 그럼 조건문들에는 어떤 것이 있는지 살펴볼까요? ✨if문 if문은 조건식의 결과가 참(true)이면 주어진 명령문을 실행하며, 거짓(false)이면 아무 것도 실행하지 않습니다. if문 순서도로 표현하여 살펴볼까요? 그래서 if 문의 공식은 어떻게 쓰느냐! 요런식으로 써주면 된답니다. 예제로 한 번 살펴볼까요? See the Pen if문 예제 by YeoDaSeul4355 (@YeoDaSeul4355) on CodePen. if문 ..

안녕하세요~ 오늘도 어김없이 돌아왔습니다 ㅎㅎ 저번엔 CSS 선택자중 id선택자와 class선택자에 대해 알아보았는데요, 오늘은 선택자 14가지를 간략하게 예제를 통해 알아볼겁니다! 자 그럼 얼른 알아보러 가볼까요~~? 일단 선택자의 개념은 저번에도 알아보았지만! 까먹었을 수도 있으니... 한 번 더 짚고 넘어가겠습니다. ✅선택자 선택자란 CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 그럼 선택자의 종류 14가지, 간단하게 살펴볼게요~!! 1️⃣type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 예제1) 다음 예제에서는 p 태그 안의 글자를 갈색으로 표시하도록 속성을 부여하고 있습니다. See the Pen type 선택자 by YeoDaSeul..

안녕하세요~ 오늘은 레이아웃에서 중요하게 다뤄지는 float에 대해 살펴볼거에요! 레이아웃은 기본중에 기본이니 float에 대해 잘 알아보고, 익혀두는게 좋겠죠? 우리 레이아웃을 구성하다보면 구성한 요소들이 세로로 나열될 때가 있죠? 원래 block요소라서 세로로 나열이 되지만 float을 이용하면 가로로 배치 하지만 float을 지정하면 float을 해제하는 방법도 알아야한다는 사실! float에 대해 간단하게 설명하고 예제와 같이 살펴볼게요~ 👌float float 요소는 좌측이나 우측에 붙이고 아래 내용이 그 주변을 흐르게 하는 속성인데, 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 매우 유용합니다. float한 박스에 가로 사이즈를 지정해 주어야 크로스브라우징이 됩니다. 그러나..

오늘은 자바스크립트 연산자와 제어문의 마무리 문제들을 풀어볼게요! 배운 것들을 활용해 문제를 열심히 풀어봅시다 ㅎㅎ 10보다 큰 숫자 찾기 (마무리 문제_1) 수업시간에 배운 배열을 이용하여 10보다 큰 수를 찾아내는 미션입니다. 길라잡이 배열 요소의 개수만큼 for문을 반복하기 if 문을 사용해서 요소의 값과 10을 비교하기 document.write 문을 사용해 화면에 표시하기 아무래도 for문을 반복하는 것보단 if 문을 사용하여 출력하는게 훨씬 효율이 좋겠죠? ㅎㅎ 자바스크립트 코드 const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] // 배열에 값을 적어줍니다. for(let i=0; i 10){ document.write(arr[i] + ","); } } //..