한번 해보자 코딩

자바스크립트 데이터 제어하기 정리 오늘은 데이터 제어하기인 while문(반복문), do while문, break문, continue문들의 *document.write() 위치에 따른 값 변화가 헷갈려서 다시 한 번 정리하면서 공부해보려고 합니다. while문 while문은 조건식이 참인 동안 반복해서 코드를 실행하는 반복문입니다. 조건식이 참일 경우 while문 안의 코드가 실행, 실행되고 나면 조건식이 다시 검사, 조건식이 여전히 참이면 코드를 다시 실행. 조건식이 거짓이 될때까지 반복. { let num = 0; while(num

사이트 만들기 이미지 유형 오늘은 사이트 만들기 중에 이미지 유형에 대해 정리해보려고 합니다! 💜 이미지 유형 코드 보기 / 완성 화면 완성 화면입니다. 디자인은 피그마에서 작업해주었습니다. 맛있는 커피를 찾아서 여러 카페들을 가본 후 보기에도 예쁘고 맛있는 찐 커피맛집들을 찾아서 커피란 무엇인가 일반적으로 커피 열매의 씨앗인 커피 콩, 혹은 그 씨앗을 로스팅해 갈아서 물에 우려내서 만드는 음료 자세히보기 커피의 종류 커피의 품종은 크게 3가지로 구별 아바리카, 로부스타, 리베리카 자세히보기 body 안에 section태그를 만들어 제목들을 지정해준다. article 태그안에 이미지를 포함하고, figure 태그는 이미지를 감싸고 있는 header역할을 하고, div태그는 이미지에 대한 정보를 담고 있는..

자바스크립트 시험 2 오답 1. { if( null ){ console.log("true"); } else { console.log("false"); } } 정답 false 2.(X) { let num = 0; while( num 6 ){ break; } console.log(num); } } 정답 1,2,4,5,6 ✔ 'num'은 무한루프 루프 내에서 'num' 변수를 1씩 증가 if 조건문을 사용하여 'num'값이 3인 경우 'continue'를 실행하여 해당 루프를 건너뜀 그리고 'num'값이 6보다 큰 경우 'brake' 를 실행하여 무한 루프를 탈출. 따라서 값이 1부터 시작 3은 건너뛰고 6까지 출력 7.(X) { for(let i=1; i { const str = "함수가 실행되었습니다.";..

오늘은 저번에 했던 퀴즈 사이트를 이어서 좀 더 업그레이드 된 버전을 살펴보겠습니다. 💜 퀴즈 2번째 코드 보기 / 완성 화면 정답을 적으면 웃는 강아지가 틀리면 우는 강아지가! 우선 는 전과 동일하게 태그로 css와 연결시켜 작업해주고 Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 도 동일하지만 태그 안에 링크를 걸어 다음퀴즈로 넘어가게 설정해줍니다. 일단 2개의 퀴즈를 만들었으니 2개만 만들어줬습니다. 하나씩 동일한 방법으로 추가해주면 되겠습니다. . 정답 확인하기 연변대비 설명 hunmi961119@gmail.com 태그도 전과 동일합니다. 이제 를 이용해 가장 복잡한 부분을 작성해줍니다. const로 선택자 데이터와 문제 정보의 데이터..

오늘은 수업시간에 배웠던 퀴즈 사이트를 정리해보려고 합니다. 💜 퀴즈 코드 보기 / 완성 화면 html 에서 타이틀을 지정해주고 link로 reset.css, quiz.css파일을 지정해줍니다. css파일을 따로 만들어 html과 css를 구분해 작업하기 더 쉽게 합니다. Quiz 정답 확인하기 유형 . 정답 확인하기 연변대비 hunmi961119@gmail.com body안에 로 각각의 문서 구조를 정의해줍니다. 안에 들어간 내용은 강아지를 만들기 위한 구조들입니다. 가져온 코드는 좋아요! 싫어요!가 분명한 강아지 애니메이션 See the Pen Cute Dog by David López (@davidlpz) on CodePen. 좋아요! 싫어요!가 분명한 강아지 애니메이션 wsss.tistory.co..

사이트 만들기 카드타입(cardType) 정리 오늘은 수업시간에 해본 사이트 만들기 중 카트타입 정리를 해보려고 합니다. 우선 만들어본 사이트의 완성본입니다. 💜 카드 유형 코드 보기 / 완성 화면 피그마를 이용해 디자인 작업을 먼저 하고 그 틀을 가지고 코드를 작성합니다. 사용한 코드들 커피에 대해 알아보자 커피는 카페인이 포함된 차류 음료입니다. 커피는 주로 커피 콩에서 추출되며, 세계 각국에서 재배되고 있습니다. 일반적으로 커피는 커피빈, 원두, 분쇄된 커피 등 다양한 형태로 판매됩니다. 커피의 좋은점 커피는 일부 연구에서 많은 건강상의 이점이 있다는 것으로 나타났습니다. 커피는 당뇨병, 간암, 알츠하이머병 등의 발병 위험을 줄이는 데 도움이 될 수 있다는 것으로 알려져 있습니다. 자세히 보기 커피..

자바스크립트 데이터 불러오기(배열, 객체) 오늘은 자바스크립트 데이터 불러오기 배열과 객체에 대해 정리해 보겠습니다! 배열 펼침연산자(Spread Operator) 자바스크립트에서 배열, 객체, 문자열 등의 요소를 펼쳐서 개별 요소로 분리하는 연산자 { let arr1 = [100,200,300,400,500]; let arr2 = [600,700]; console.log(arr1, " ");//100,200,300,400,500 //배열 console.log(...arr1,);//100 200 300 400 500 //...으로 불러오면 데이터 console.log(...arr1, ...arr2);//100 200 300 400 500 600 700 } { const arr = [1,2,3,4,5]; ..

자바스크립트 화살표 함수 오늘은 화살표 함수를 정리해보려고 합니다. 기본적인 함수들은 이제 외워서 눈에 들어오긴 하는데 기본함수를 쓰고 화살표 함수로 바꿀 순 있는데 딱 화살표 함수로만 나와있으면 알아보기 쉽지 않더라구요 그래서 정리해보면서 익히려고 합니다! 일단 함수의 종류를 다시 한번 정리해볼게요! 선언적 함수 함수를 호출할 때 함수의 앞 또는 뒤에서 호출이 가능 function func(){ document.write("실행되었습니다.") } func(); 익명 함수 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 준다 변수 선언 이후에 호출 cosnt func = funtion(){ document.write("실행되었습니다.") } func(); 매개변수 함수 함수를..

지금까지 배운 것들 중에 부족한 부분들 정리 사실 다 부족하지만 그 중에 아직도 바로바로 안나오고 익숙하지 않은 용어들을 정리해보면서 공부해보려고 한다. 이제는 익숙한 용어들도 한 번 더 정리하면서 머리에 익히기! JAVASCRIPT 기본 명령어 prompt(명령, 메세지) : 사용자의 정보를 얻기위해 띄우는 입력창 prompt('당신의 나이는 몇살입니까?'); alert(알림, 경보) : 사용자에게 띄우는 안내창 (경고창으로 많이 쓰임) alert('자바스크립트'); confirm(확정) : 사용자에게 띄우는 확인창 confirm('정말 삭제 하시겠습니까?'); 변수(var, let) //변수 변수명 = 데이터(값); var num = 10; var str = 'javascript'; var temp ..

시험 오답 학원에서 본 시험 오답노트! 확실히 시험을 봐야 내가 모르는게 뭔지 정확하게 알 수 있는 것 같다. 혼자 공부하다 보면 다 알았다고 생각하는데도 문제를 풀어보면 그게 아닌.. 이번에 틀린 문제로 확실히 알았으니 다음 시험은 100점 가보자고-! 출력값 보고 빈칸 채우기 1. (x) { var x = 100; var y = 200; var z = "javascript"; console.log(__); console.log(__); console.log(__); //100 //200 //300 } 정답 x y x+y 😥 3번째 출력값이 javascript인줄 알았는데.. 300이었다. 당연하다고 생각하지 말고 문제는 하나하나 자세히 뜯어볼것! 변수 var에 각각의 a,b,c데이터값을 저장해줬으니 ..

자바스크립트 함수 마무리 문제 1,2 모던 자바스크립트 함수 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트! 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언 parseInt( )함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환 반환값이 숫자일 경우에만 함수를 실행 정답 function isPositive(n) { if (n > 0) { alert(`${n}은 양수입니다.`); } else if (n < 0) { alert(`${n}은 음수입니다.`); } else { alert(`${n}은 0입니다.`); } } cons..

CSS 문자 관련 스타일 font-family 문자의 글꼴을 지정하는 속성 여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다. font-family: '돋움', Dotum, Arial, Helvetica, sans-serif ; font-size, 단위의 고찰 문자 크기를 지정하는 속성 글자 크기를 지정하지 않으면 기본값 16px이 됩니다. px 해상도에 따라 상대적으로 달라지는 기본 단위 font-size: 12px; % 부모 요소의 글자 크기를 100% 기준으로 계산한 %단위 font-size: 150%; em 부모 요소의 글자 크기를 100% 기준으로 계산한 100분의 1 단위 font-size: 1.5..

CSS 레이아웃 grid 방식 정리 grid layout 은 비교적 직관적이어서 다른 레아이웃보다 사전지식이 덜 필요합니다. 예제1 가장 많이 접해본 레이아웃으로 시작해보겠습니다. header sidemenu content footer 이 박스에 grid layout을 사용한다고 선언합니다. 가로로2칸 세로로3칸이므로 grid-templat-columns에 두 개의 가로 크기를 차례로 지정하고 grid-template-rows에는 위부터 아래까지 세 개의 세로 크기를 지정합니다. .wrpa { display: grid; grid-templte-colums: 30% 70%; grid-template-rows: 50px 150px 50px; } 다음은 각 칼럼의 경게선 번호를 알아야 합니다. 칼럼이 두개이므..

CSS 레이아웃 flex 오늘은 레이아웃을 구성할 때 쓰는 flex방법에 대해 정리해보려고 합니다. 최신 브라우저들에서 많이 실행됩니다. flex layout flex layout은 요소들이 포함된 큰 박스에 flex를 선언하고, 안에 있는 요소들에게는 유연하게 배치하는 속성들을 부여하여 레이아웃을 잡는 것입니다. display: flex : display: -webkit-flex: display: -ms-flexbox: 해당 요소에 flex로 레이아웃을 설계한다고 선언한다는 뜻입니다. 예제 더보기 위의 예제와 같이 display: flex를 써주면 이렇게 레이아웃이 잘 잡힙니다. 예제에서 display: flex 를 선언하지 않으면 이렇게 레이아웃 밖에 나타납니다. flex-direction 자식 요소..

함수 함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 됩니다. 분류 종류 설명 사용자의 정의 함수 선언적 함수 익명 함수 프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수 내장 함수 인코딩, 디코딩 함수 숫자 판별 함수 유 •무한 값 판별 함수 숫자변환 함수 문자 변환 함수 자바스크립트 코드 변경 함수 프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해주는 함수 선언적 함수 선언적 함수의 형식 { function func(){ document.write("실행되었습니다."); //실행문이 있어야함 } func(); //가장 기본적인 함수 } 선언적 함수의 호출 선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니..

자바스크립트 데이터 저장하기 자바스크립트에서 데이터 저장하는 방법들에 대해 정리해보려고 합니다. 변수 변수는 데이터를 저장하는 저장소입니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 데이터를 추가할수도 있습니다. 데이터 저장 { var x = 100; var y = 200; var z = "javascript"; console.log(x); console.log(y); console.log(z); } 데이터 저장 + 데이터 변경 { let x = 100; let y = 200; let z = "javascript"; x = 300; y = 200; z = "react"; console.log(x); console.log(y); console.log(z); } 데이터 저장 + 데..

CSS 선택자 종류 14가지 오늘은 CSS의 선택자 종류 14가지를 간단하게 정리해보려고 합니다. 우선 선택자란 CSS가 UI의 어느 부분을 디자인할지, 즉 표현할 대상이 되는 부분을 말합니다.type 선택자, id선택자, class 선택자, 전체 선택자, 하위 선택자, 자식 선택자, 인접 선택자, 형제 선택자, 그룹 선택자, 속성 선택자, 가상클래스 선택자, 가상요소 선택자, 종속 선택자, 선택자의 우선순위 이렇게 14가지의 선택자가 있는데요 그럼 하나씩 간단하게 알아볼까요!? type 선택자 html 문서의 태그 이름을 선택자로 사용할 수 있습니다. See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. p태그 안에 글자들을 파란색으로 표시하도록 속성..

CSS float 방법에 대해 block요소는 원래 세로로만 나열되는데요!? float을 이용해 가로로 배치 할 수가 있습니다! 한번 알아볼까요!? float float은 요소를 좌측이나 우츠겡 붙이고 아래 내용이 그 주변을 흐르게 하는 속성입니다. 세로로만 나열되던 블록들을 가로로 서로 어울리게 배치하려 할 때 유용합니다. float: left; 이렇게 작성해주면 됩니다. 속성 값 속성 설명 left 왼쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 right 오른쪽에 배치하고 나머지 콘텐츠는 그 주변을 흐르도록 함 아래 코드를 살펴보면 float를 사용했을 때와 사용하지 않았을 때의 차이를 잘 알 수 있습니다. float을 사용하지 않았을 때 See the Pen Untitled by hyunm..

모던 자바스크립트 03 마무리문제 1,2 풀어보기 오늘은 모던 자바스크립트 책에 있는 03 마무리 문제 1,2를 풀어보려고 합니다! 하나씩 같이 풀어볼까요? 마무리 문제 1 배열이 주어지고 이 배열에서 10보다 큰 값을 찾아서 화면에 표시해 주는 문제입니다. 10보다 큰 숫자 찾기 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19] 힌트! 배열 요소의 개수만큼 for 문을 반복 if 문을 사용해서 요소의 값과 10을 비교 documen.write 문을 사용해 화면에 표시 정답! { const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; for(let i=0; i< arr.length; i++){ //배열의 요소 갯수를 알 수 있는 length를..

자바스크립트 조건문 오늘은 제가 지금까지 배운 자바스크립트 조건문에 대해 정리해보려고 합니다! if문, 다중 if(else if), if문 생략, 삼항 연산자(조건 연산자), 중첩 if문, for문, 중첩 for(table),switch문, while문, do while문, break문 continue문 에 대해 정리해보겠습니다! if문 if다음에 { }를 사용해 조건을 표기합니다. 조건을 체크한 후 결괏값이 ture면 if문에 있는 명령을 , false면 if문에 있는 명령은 건너뛰고 다음명령을 실행합니다. if (조건) { 조건이 ture일 때 실행할 명령(들) } if...else문 조건을 체크한 후 ture일 때 처리할 명령과false일 때 처리할 명령이 따로 있다면 if 문과 else문을 사용합..

자바스크립트의 반복문에 대해서 반목문을 사용하면 여러번 실행해야할 것들을 줄일 수 있어 불필요한 명령을 늘어놓지 않아도 됩니다. 그럼 소스도 더욱 깔끔해져서 프로그램 실행도 더 빨라지겠죠? 그럼 , for문과 forEach, for in, for of 반복문에 대해 알아보겠습니다. for문 자바스크립트에서 가장 많이 사용하는 반복문은 for문입니다. for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 편리합니다. for (초깃값; 조건; 증가식) { ... } 초깃값 : 몇 번 반복할지 지정하기 위해 카운터 변수를 사용하는데, 이 항목에서 카운터 변수를 선언하고 초기화합니다. 초깃값은 0이나1부터 시작합니다. 조건 : 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야..

HTML 기본 문서와 관련된 태그 오늘은 HTML의 기본 문서와 관련된 태그들에 대해 알아보겠습니다. 우선 HTML요소는 요소와 요소로 구성되어 있습니다. 요소 안에는 , , , , 그럼 오늘 알아본 기본 텍스트 태그들로 제일 기본적인 문서 구성은 이렇게 만들어볼수가 있겠죠!? 이제 여기에 텍스트 관련 태그들을 추가로 써 넣으면 내용을 추가할 수가 있습니다. 간단하게 몇가지만 살펴볼게요! 태그명 태그의 의미 및 특징 ~ 제목 표시, 일반 텍스보다 진하고 크게 표시(1부터 6까지 크기다름) 단락 만들기 줄 바꾸기 or Bold, 진하게 컴퓨터 인식을 위한 소스 코드 [ HTML 예시 2 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 위의 [ H..

HTML 구조 관련 요소들(섹션관련태그정리) 오늘은 웹사이트 레이아웃 만들 때 필요한 구조 관련 요소들에 대해 알아보려고 합니다. 구조 태그를 이용한 마크업 시멘틱 태그를 사용하면 검색 효율성과 웹 접근성의 향상, 협업 측면에서도 더욱 유리합니다. [ 예시 사진 ] 일단 사진으로 먼저 살펴보면 이렇습니다 이렇게 레이아웃을 잡을 때 사용하는거에 따라 맞게 설정을 해 주어야 작업할때도 편리하겠죠? 그럼 하나하나씩 태그의 의미와 특징에 대해 알아보겠습니다. 구조 관련 요소 요소 유형 태그명 태그의 의미 및 특징 블록 레벨 요소 HTML문서의 헤더 영역을 의미, 제목, 네비게이션, 검색 등을 포함할 수 있음 텍스트, 인라인요소, 블록레벨 요소를 포함할 수 있지만 , 태그는 포함할 수 없음 HTML 문서에서 맥락..

자바스크립트 연산자의 종류에 대해 연산자 3+5, 3 a>b가 참이면 true, 거짓이면 false가 됩니다. b가 참이면 true, 거짓이면 false가 됩니다. >= a>=b가 참이면 true, 거짓이면 false가 됩니다. ex) 5 == '5' 는 false가 나옵니다. !== a !== b, a와 b가 같지 않거나 데이터 타입이 같지 않지 않으면 ture, 같으면 false가 됩니다. 이상, 초과, 이하, 미만 표현 이상 num >=10, 10 이상을 의미 합니다. 초과 num > 10, 10 초과를 의미 합니다. 이하 num ture && true = true true && false = false false && true = false false && false = false || (OR연산..

CSS선택자_id선택자와 class선택자의 차이점 id 선택자 HTML문서의 요소 중 같은 요소라도 각기 다른 이름을 지정하여 따로 속성을 부여 HTML 요소에 id로 이름을 붙일 때는 유일한 이름을 부여 다른 요소에 같은 id명을 또 주면 안됨 CSS에서는 id 선택자 앞에 '#'을 붙여야 함 id명이나 class명은 숫자로 시작할 수 X 영문자로 시작 [ 예시 1 ] See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. class 선택자 HTML 문서의 여러 요소 중 같은 이름을 갖는 요소들만 모아 따로 속성 부여 가능 여러개의 요소에 같은 class명 부여 가능 하나의 요소에 여러개의 class명 부여 가능 CSS에서는 class 선택자 앞에 ' ..

See the Pen Untitled by hyunmijin (@hyunmijin) on CodePen. 수업시간에 만들어본 애니메이션인데요 너무 신기합니다! 언젠간 제가 만들고 싶은 애니메이션을 만들 수 있겠죠...? 다들 화이팅..!!

CSS 표현방법에 대해 이번엔 CSS의 기본 문법에 대해 알아보려고 합니다! 내부 스타일시트 CSS를 HTML 문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. 그 스타일이 기술된 페이지에만 적용 [ 예시 1 ] 우리를 기쁘게 하는 것들. [ 예시 1_결과 ] 외부 스타일시트 스타일 속성들을 따로 저장하여 HTML 문서에 파일명으로 연결할 수 있습니다. 스타일은 .css 확장자를 가진 별도의 파일로 저장 HTML에서는 태그를 이용해 선언 그 스타일을 선언한 모든 HTML 페이지에 적용 [ 예시 2 ] 우리를 기쁘게 하는 것들. [style.css] @charset "UTF-8"; p { color: red; } [ 예시 2_결과 ] @inmort css 안으로 다른..

자료형이란 무엇일까? 오늘은 자료형에 대해 알아보려고 합니다. 자료형 자료형이란 프로그램에서 처리할 자료의 형태를 말합니다. 3이라는 숫자를 숫자로 처리하는지, 문자열로 처리하는지에 따라 결괏값이 달라집니다. 자바스크립트의 자료형은 크게 원시유형과 객체로 나뉘어 집니다. 원시유형은 하나의 값만 저장하는 자료형으로 숫자와 문자열, 논리형, undefind, null, symbol 유형이 있습니다. 그리고 원시 유형 외에는 모두 객체입니다. 우선 숫자형에 대해 더 알아볼까요? 숫자형 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형입니다. 정수와 실수를 명확히 구별 정수도 크기에 따라 다른 자료형을 사용 정수와 실수를 함께 묶어 '숫자형'이라고 함 큰따옴표 없이 입력하면 숫자로 인식 숫자를 큰따옴표로 묶으..

텍스트 관련 요소

시멘틱 마크업과 논리적인 순서 마크업 우선 마크업이 무엇이고, 마크업의 기본 문법 규칙은 어떤 것이 있는지 먼저 알아보겠습니다. , 반응형웹 '반응형웹'이 HTML문서에서 제목으로 사용된다고 할 경우 [예시 1]처럼 마크업을 하면, 스크린 리더에서는 그저 '반응형웹'이라고만 읽어주기 때문에 그것이 제목인지 알 수가 없습니다. [예시 2] 반응형웹 이렇게 [예시 2]처럼 '반응형웹' 부분을 제목을 의미하는 태그로 바꾸어 마크업 해 주어야 이 부분이 제목인걸 알 수 있게 됩니다. [예시 3] 이렇게 [예시 2,3]처럼 의미에 맞게 마크업 해주는 것을 시멘틱 마크업 이라고 한다. 작업자마다 콘텐츠의 의미를 해석하는 차이가 있을 수 있지만 가급적 시멘틱하게 마크업 하려고 노력하는 것이 중요! 자, 그럼 이제 논..