한번 해보자 코딩

10보다 큰 숫자 찾기 수업시간에 배운 배열을 이용하여 10보다 큰 숫자를 찾아내는 미션이다. 길라잡이 배열요소의 개수만큼 for문을 반복한다. if문을 사용해서 요소의 값과 10을 비교한다. document.write문을 사용해서 표시한다. 자바스크립트 사용할 때 불편한점 여기는 제목 3에 대한 설명글입니다.변수는 데이터를 저장하는 저장소입니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 데이터를 추가할수도 있습니다. 여기는 제목 3에 대한 설명글입니다.변수는 데이터를 저장하는 저장소입니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 데이터를 추가할수도 있습니다. 불편한점 제목3를 썼을 때는 디자인을 변경할것! 여기는 제목 3에 대한 설명글입니다.변수는..

자바스크립트 데이터 저장하기 자바스크립트에서 데이터 저장하는 방법들에 대해 정리해보려고 합니다. 변수 변수는 데이터를 저장하는 저장소입니다. 데이터 변경이 가능하고, 마지막으로 지정해준 데이터가 값이 됩니다. 데이터를 추가할수도 있습니다. 데이터 저장 { 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]처럼 의미에 맞게 마크업 해주는 것을 시멘틱 마크업 이라고 한다. 작업자마다 콘텐츠의 의미를 해석하는 차이가 있을 수 있지만 가급적 시멘틱하게 마크업 하려고 노력하는 것이 중요! 자, 그럼 이제 논..

블록(Block)구조와 인라인(Inline)구조에 대해 태그를 배우기 전에 알아두어야 할! 블록구조와 인라인 구조에 대해 정리해보려고 합니다! 우선, 블록구조에 대해 알아보겠습니다. 블록 레벨 요소 (Block-leverl Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스라고 생각하면 됩니다. [블록 예제.html] 블록 레벨 요소 블록 레벨 요소 성질 줄 바꿈이 생깁니다. ​ [블록 결과.html] 이렇게 [블록 예제]에서 마크업 했던 , , 요소들은 블록의 성질을 가지고 있어 화면상 줄 바꿈이 일어나는 것을 볼 수 있습니다. 이러한 블록 레벨의 기본 요소로는 제목 ~ , 문단 , 주소 가 있습니다. *특징 줄 바꿈이 일어난다. 텍스트(문..