우당탕탕 코딩생활

안녕하세요. 🥰🥰🥰 오늘도 어김없이 돌아온 자바스크립트의 기초를 다져보는 시간! 데이터 제어하기에 대해 알아보도록 하겠습니다. 여기에는 지난 번에 했던 if문이 포함되니 복습한다는 느낌으로 함께 공부하시면 좋을 것 같습니다. 데이터 제어하기 자바스크립트 내에서 데이터를 제어하는 종류에는 다양한 것이 있는데요. 가장 대표적인 것이 if문이며 그 외에 if문 생략, 삼항 연산자, 다중 if문, 중첩 if문, switch문, while문, do while문, for문, 중첩 for문, continue문, break문이 있습니다. 이 친구들에 대해서 자세히 알아보도록 하겠습니다. 👉 기본 if문 자바스크립트에서 쓸 가장 일반적인 형태이자 기본적인 구문 중 하나이자 조건에 따라 다른 작업을 수행하려고 할 때 작성..

🥴🥴 오늘은 좀 힘든 날이었어요. 자바스크림트 함수가 좀처럼 이해가 안되서..하지만 화이팅 해봅니다! 문자 관련 스타일에 대해서 알아보려고 합니다. 종류가 많은 만큼 간략하지만 정확하게 정리해보도록 하겠습니다.🤫 문자 관련 스타일 01. font - family 문자의 글꼴을 지정하는 속성입니다. 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', dotum, Arial, Helvetica, san-serif; 02. font - size와 단위 문자의 크기를 지정하는 속성입니다. 크기를 명시하지 않을 경우 16px기본입니다. CSS에서 사용하는 단위는 다음과 같습니다. 👉..

안녕하세요! 오늘도 한 번 달려보겠습니다. 지난 시간에 알아본 것은 flex였는데요. 🤔 Grid 공부를 시작하면서 한 가지 알아두어야 할 점이 있습니다. 바로 둘의 차이점인데요. flex는 한 방향 레이아웃 시스템이고 grid는 두 방향 (가로세로) 레이아웃 시스템이라는 것입니다. 따라서 flex보다 더 복합적인 레이아웃 표현이 가능하다는 거 짚고 넘어가겠습니다! 😊😊 grid layout flex와 마찬가지로 컨테이너와 아이템만 있으면 구조를 짤 수 있습니다. 역시, 부모 요소인 것을 grid container라고 부르고 자식 요소를 grid item이라 칭합니다. .container { display: grid; } 용어 정리 그리드 컨테이너 (Grid Container) display: grid를..

안녕하세요! 🥰🥰🥰 지난 시간에는 float을 알아봤는데 오늘은 또다른 방법, flex에 대해서 알아보려고 합니다. flex는 flexible box, flexboc라고 부르기도 하며, 레이아웃 배치 전용 기능으로 고안된 친구이기 때문에 float 등을 이용한 기존 방식보다 훨씬 편리하기 때문에 알아두시는 것이 좋습니다! 바로 시작하겠습니다! flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 방법입니다. 레이아웃을 작업할 때 아주 유용하므로 꼭 알아두시는 게 좋습니다. //부모 요소인 main을 flex container라고 부르고 //자식 요소인 contents들을 flex item이라..

자바스크립트의 함수 자바스크립트의 함수는 하나의 작업 또는 여러 작업을 수행하는 코드로 익명 함수, 매개 변수, 리턴 함수 등이 있습니다. 오늘은 그 함수들에 대해서 알아보겠습니다. 선언 함수 - 함수의 기본 문법 { function func(){ document.write("실행되었습니다."); } func(); //실행문 } 가장 대중적인 방법으로 함수의 이름은 'func'이 됩니다. *호이스팅이 되기 때문에 이 함수는 어느 스코프에서는 호출 할 수 있는 함수가 됩니다. 호이스팅이란? 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것. 익명 함수 { const func = function(){ document.write("익명함수"); } func(); // fun..

안녕하세요. 오늘은 제가 스스로 공부했던 자바스크립트 데이터와 표현방법들에 대해 정리해 보려고 합니다. 🤨 변수의 특징 변수는 데이터를 저장하는 저장 공간이자 데이터 변경과 추가가 가능합니다. 상수 상수는 데이터 저장은 가능하지만 변경은 불가능합니다. 상수( const )는 이미 선언한 상수에 대해 중복선언이 불가능하며 상수의 값을 재지정할 수 없습니다. 배열 여러개의 데이터를 하나의 변수에 저장하는 것 객체 여러개의 데이터를 하나의 변수에 저장하고 ( const obj = new Object(); ) 데이터가 추가되면 추가 된 데이터를 식별하여 가져올 수 있다. 변수 안에 함수(function)가 들어갈 수 있다. 객체 안에는 실행문이 들어갈 수 있다. 실행문에는 console.log를 적지않는다. c..

자바스크립트 왕 초보 문제 풀어보기 문제 1 주어진 배열에서 10보다 큰 값을 찾아서 화면에 표시하시오. 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19 ] 힌트! 배열 요소의 개수만큼 for문을 반복합니다. if 문을 사용해서 요소의 값과 10을 비교합니다. document.write문을 사용해서 화면에 표시합니다. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // 주어진 숫자를 먼저 배열 해준다. for(let i = 0; i 10) { document.write(arr[i]);//넣은 배열이 거짓일 때는 출력이 되지 않..

float 요소에 대해서 말하기 전에 block 요소에 대해서 다시 한 번 짚어볼건데요. block요소의 가장 중요한 포인트! 바로 세로 나열이었는데요. 이런 세로 나열을 가로로 바꿀 수 있는 친구가 바로 float이라는 친구입니다. float은 레이아웃을 완성하기 위한 필수적인 속성이므로 꼭 알아두어야하구요. float지정하는 법과 함께 해제하는 방법도 오늘 알아보도록 하겠습니다. float 요소를 좌측이나 우측에 붙이고 아래 내용이 그 주변에 존재하게 하는 속성 이런 속성을 가진 친구여서 세로로만 나열되던 block들을 가로로 서로 어울리게 배치하려고 할 때 유용합니다. 그렇게 때문에 레이아웃에서 필수적입니다. 글로만 보니 어려우시죠. 그림으로 한 번 보겠습니다. 이런 모양의 레이아웃을 만들고 싶다고..

안녕하세요.🥰🥰🥰 지난시간에 id선택자와 class선택자를 알아보았는데요. 오늘은 나머지 선택자를 알아보도록 하겠습니다. 선택자의 개념! 지난 시간에 했던 것이지만 다시 한 번 복습해보겠습니다. 선택자란, CSS로 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다. 개념을 정리 했으니 바로 살펴보도록 하겠습니다.😘 1. type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. 2. id 선택자 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여할 수 있는데 HTML 요소에 id로 이름을 붙일 때에는 유일한 이름을 부여해야 하며, CSS에서는 id 선택자 앞에 '#'을 붙여야 합니다. 3. class 선택자 여러 개의 요소에 같은 class명을 부여할 수 있습..

코린이인 저는 그동안 간단한 명령을 처리하는 소스들만 공부했는데, 실제로 프로그램에서 처리하는 소스는 훨씬 더 복잡하겠죠. 특히나 어떤 조건에 따라 명령 실행 순서를 바꾸거나 특정한 부분만 계속해서 반복하려면 조건문이나 반복문을 사용 해야합니다. 그래서 배워야 할 것은 바로 if문과, if...else문입니다.추가적으로 else if문, 삼항 연산자, 중첩 if문에 대해서도 알아보겠습니다. if문 if문은 if 다음에 소괄호를 사용해서 조건을 표기합니다. 그리고 조건을 체크한 후 결괏값이 true이면 if문에 있는 명령들을, flase이면 if문에 있는 명령은 건너뛰고 그 다음 명령을 실행합니다. 라고 설명드렸지만 먼저 살펴볼 것은 if의 기본형입니다. 먼저 이 조건식 안에 들어가는 조건의 값에 따라 t..