Youna

자바스크립트에 데이터 저장하는 법은 변수,상수,배열,객체를 이용해서 저장할 수 있는 저장할 수 있는 방법이 있습니다. 숫자로 기재할 때는 ; 로 표시해주고 문자열로 표시해 줄때는 ""로 표시해줍니다. 01.변수: 데이터 저장 변수는 데이터를 저장하는 저장소입니다. x= 100, y=200, z="javascript"로 데이터를 저장하게 됩니다. 02.변수: 데이터 저장 + 데이터 변경 변수는 데이터를 저장할 수도 있지만 변경도 가능합니다. x=100에서 300으로 변경, y=200에서 200 그대로 z="javascript"에서 "react"로 데이터가 변경 되었습니다. 03.변수: 데이터 저장 + 데이터 변경 +데이터 추가 변수는 데이터를 저장할 수도 있지만 변경도 추가도 가능합니다. :연산자를 이용하..

선택자(selector) 선택자란 말 그대로 선택을 해주는 요소이며 CSS로 UI의 어느 부분을 디자인할지, 즉 표현하고 규칙을 정할 대상을 선택자라고 부릅니다. See the Pen Untitled by younajeong (@younajeong) on CodePen. CSS로 속성을 하는 부여하는 방법입니다. 여기에서 h1은 선택자 { }는 선언부로 선언부 안에 color라는 속성 그리고 red라는 속성값을 표시하며 속성 설정간에는 ";"를 표시하여 구분해준 후 또 다른 속성과 속성값으로 선언을 할 수 있습니다. 마지막 속성 끝에는 구분자를 생략할 수 있습니다. 01. 태그선택자(type Selector) 태그 선택자는 html문서의 태그 이름을 직접 지칭하는 가장 간단한 선택자입니다. Css에 대한..

문제 01. 10보다 큰 숫자 찾기 주어진 배열을 for문과 조건문을 이용해서 10보다 큰 숫자를 찾아봅니다. 길라잡이 배열 요소의 개수만큼 for문을 반복합니다. if문을 사용해서 요소의 값과 10을 비교합니다. document.wirte문을 사용해서 화면에 표시합니다. const arr = [1,3,5,7,9,11,13,15,17,19] //배열의 값을 지정 해줍니다. for(let i=1; i10){ //조건문 if문을 이용해서 arr의 값을 선언 해줍니다. }document.write(arr[i]); } //result : 11,13,15,17,19 정리 값을 구할 때 반복문과 조건문을 사용해서 문제를 풀어줍니다. 문제 02. 1보다 큰 수를 입력하게 한 후 입력한 숫자를 짝수만 더하기 연산자와 ..

보통 레이아웃을 만들게 되면 block요소기 때문에 세로로 나열이 됩니다. 하지만 오늘 이 방식을 사용한다면 우리 모두 세로로 손 쉽게 바꿀 수 있습니다. 바로 float입니다. 01. 레이아웃 - float float은 레이아웃을 쉽게 구성할 수 있도록 도와주는 css요소입니다. float은 요소를 좌측이나 우측으로 붙이고 아래 내용이 그 주변으로 흐르게 하는 속성인데, 세로로만 나열되던 블록들이 가로로 서로 어울리게 배치하려고 할 때 아주 유용한 방식입니다. float한 박스에는 가로 사이즈를 지정해 주여야 속성이 사용됩니다. 하지만 heading요소나 인라인 요소들은 가로 사이즈 없이 float을 해도 레이아웃이 흐트러지지 않습니다. 이렇게 사용 했을시에 첫 이미지에 html이미지에서 css로 변경..

조건문이란? 조건문은 명령을 실행하기 위해 조건을 체크하는 문(statement)입니다. 즉 조건에 따라 실행을 달라지게 할 수 있는 문장입니다. 프로그램 소스는 작성된 순서대로 실행되는 것이 아니라 조건에 따라 명령을 실행하는 경우가 많아서 조건문은 자주 사용하게 됩니다. 01. if문 먼저 if 조건문을 알아보겠습니다. if문은 if다음에 소괄호를 사용하여 조건을 표기합니다. 그리고 조건을 체크한 뒤 결과 값이 ture이면 if문에 있는 명령들이 false이면 if문에 있는 명령을 건너뛰고 그 다음 명령을 실행합니다. if 문이란 if예약어의 다음에 오는 중괄호로 묶은 명령을 가리킵니다. if (조건) { 조건이 true일 때 실행하는 명령(들) } 예를 들어 비가 온다라는 조건이 생성되었고 그것이 ..

반복문 이란? 반복문은 같은 동작을 여러번 실행하기 위해 사용하는 것입니다. 반복문을 사용하게 된다면 불필요하게 여러 명령을 만들 필요 없이 반복 실행을 시킬 수 있습니다. 그만큼 소스도 깔끔해지고 실행도 빨라진답니다. 1. for문 자바스크립트에서 제일 많이 사용하는 for문은 조건에 들어가는 값이 일정하게 커지면서 명령을 반복 실행할 때 사용합니다. for 문에서는 몇 번 반복했는지 기록 하기 위해 카운터를 사용하고 for문으 첫 번째 항에서 카운터 변수를 지정합니다. 기본형 : ( 초깃갑; 조건; 증가식) {....} 여기서 초깃값은 몇번 반복할지 지정하기 위해 카운터 변수를 사용합니다. 초깃값은 0이나 1부터 시작합니다. 조건은 문장을 반복하기 위해 체크할 조건 부분입니다. 이 조건을 만족해야 f..

section태그란 태그는 주제별 그룹의 섹션 태그를 설정하고 문서의 독립적인 컨테츠 섹션을 설정합니다. 부문,구역,영역을 나타내는 기능을 가지고 있으며 문단이라던지 1장,2장,1절, 2절 등과 같이 이루어지는 글 등을 하나의 그룹 혹은 묶음으로 다루어즌 역할을 하고 있습니다. 이러한 섹션을 구체적으로 나타내는 요소로는 , , , 가 있습니다. section 관련 태그 문서의 주요 콘테츠 영역을 설정합니다. 주제별 그룹의 콘테츠 섹션을 설정합니다. 문서의 독립적인 컨테츠 섹션을 설정합니다. 블로그나 뉴스 기사내용 공지사항들을 나타낼 때 적절 합니다. 주요 컨테츠의 보조적 컨테츠 섹션을 설정합니다. 예를 들어 사이드바 , 최근 글 목록, 인기 목록 등을 나타낼 때 적절합니다. 문서의 소개 및 메뉴 링크를 ..

연산자란? 연산자는 '3+5' , '3 a>b가 참이면 ture, 거짓이면 false가 됩니다. =b가 참이면 ture, 거짓이면 false가 됩니다. 10, 10이상을 의미 합니다. 이하 num = 20 && x

Id 와 Class 01.이름을 불러올 때 클래스를 불러올 때는 클래스명 앞에 마침표를 찍어준다. 아이디를 불러 올 떄는 아이디 값 앞에 샵(#)표시를 해줍니다. 또 여러개의 요소에 같은 class명을 부여해줄 수 있습니다. 또한 하나의 요소에 여러개의 class명을 부여할 수도 있습니다. 자료출처 이미지 처럼 id로 "attendance"를 불러왔고 값 앞에 #표시를 해둔 걸 볼 수 있습니다. 또 class="name"을 사용해서 김영희라는 이름을 사용했습니다. 02. 중복 사용 class는 중복 사용이 가능하지만 id는 중복사용이 불가능 합니다. class는 동일한 클래스명을 페이지 여러곳으로 사용해도 되지만 id는 한개의 id로 딱 한 페이지에서 사용이 가능합니다. 자료출처 사람으로 생각한다면 하나..

HTML 삽입 미리보기할 수 없는 소스

CSS CSS는 HTML로 작성된 문서의 표시 방법을 기술하기 위한 스타일 시트 언어입니다. HTML 바탕으로 뼈대를 만들어 주고 CSS는 디자인적인 요소를 입혀주는 역할입니다. CSS를 정의하는 방법으로는 내부 스타일시트, 외부 스타일시트, 인라인 스타일시트 등이 있습니다. 01. 내부 스타일시트 CSS를 HTML문서 안에 태그로 기재하여 HTML 문서 안에 CSS가 함께 저장되도록 하는 형태입니다. HTML 문서 내의 태그에 태그를 사용하여 CSS 스타일을 적용합니다. 내부 스타일 시트는 해당 HTML 문서에만 스타일을 적용할 수 있습니다. 이미지출저 이처럼 내부에 필요한 스타일을 입력해 주는 방식으로 배경색상, 제목색상, 텍스트 꾸밈을 할 수 있습니다. 내부 스타일시트는 그 스타일이 기술된 페이지에..

컴퓨터가 프로그램을 처리할 때 숫자를 더하거나 빼고 문자열은 뺄 수 없다는 것을 따로 알려주어야 합니다. 이렇게 숫자나 문자열처럼 프로그램에서 처리할 자료의 유형을 지정해야 하는데, 이러한 자료의 형태를 '자료형'이라고 합니다. 자료형은 크게 '원시유형' 기본형 과 '객체'로 나뉘어집니다 표와 같이 원시형 기본형은 숫자열, 문자열, 논리형, 심벌이 있고 객체는 undefined,null (답이 존재하지 않는것) 이 존재합니다. 자료형을 자세히 보기전에 typeof()함수가 존재하는데 typeof()함수는 자바스크립트에 미리 만들어져 있는 함수로, 소괄호 안에 값이나 변수를 넣으면 어떤 자료형인지 알려줍니다. 01.숫자형 숫자형은 모든 프로그램에서 가장 기본이 되는 자료형입니다. 자바나 C언어에서 정수와 ..

텍스트 관련 요소 01. 제목 관련 태그 요소유형 태그명 태그의 의미 및 특징 블록 요소 ~ 제목 글자 태그 h1이 제일 높고 h6가 제일 낮음 02.글자 형태 태그 요소유형 태그명 태그의 의미 및 특징 인라인 요소 강조하고 싶은 텍스트를 정의하기 위한 태그이며 기울임체로 표시됩니다. 중요한 텍스트를 정의하기 위한 태그이며 굵은체로 표시됩니다. 주의 깊게 볼 텍스트 부분을 강조하기 위한 태그이며 노란색으로 표시됩니다. 의미를 가지고 있지 않으며 단순히 텍스트를 굵은체로 표시합니다. 주의 사항, 법적 제한, 저작권 등을 정의하기 위한 태그이며 작은글씨로 표시됩니다. 아래첨자 텍스트를 정의하기 위한 태그입니다. 위첨자 텍스트를 정의하기 위한 태그입니다. 텍스트 요소 중에 태그와 태그는 의미가 비슷해 보일 수..

마크업이란? 마크업(Mark up)이란 마크(Mark)로 둘러 싸인 언어로 태그(Tag)로 둘러싸여있다고 표현하기도 합니다.HTML, XML 등의 마크업 언어들은 문서의 구조를 정의합니다. 쉽게 말하면 문서의 골격에 해당하는 부분을 작성하는데 사용합니다. 시멘틱 마크업 (Semantic markup) 시멘틱(Semantic)사전적 뜻은 "의미론적인" 으로 해석할 수 있는데, 이것은 마크업을 할 때 의미에 부합하는 태그를 사용하라는 뜻을 가지고 있습니다. 시멘틱한 마크업을 사용하는 이유는 HTML 문서들은 보통 시각적인 방법으로 사용자들에게 정보를 전달하지만, 모든 사람들이 정보를 동일하게 받아들일 수 있는 환경이 아닐 수 있다는 점을 유의해야 합니다. 예를 들어 시각장애인의 경우 HTML 문서의 콘테츠 ..

이미지출처 블록 레벨 요소 (Block-level Elements) 블록 레벨 요소는 마크업을 할 때 줄이 바뀌는 특성을 가지고 있습니다. 블록 요소는 하나의 박스여서 한 줄을 모두 차지하는데 이 때 한 줄을 차지한다는 말은 너비가 100%라는 얘기입니다. 따라서 왼쪽과 오른쪽에 붙을 공간이 없어 자연스러운 줄넘김이 가능합니다. 블록 속성을 가진 요소들 중에는 , , 요소들과 , , 이 있습니다. 주로 화면구성과 레이아웃을 만들 때 사용 됩니다. 따라서 블록 레벨 요소는 한 묶음으로 이루어져 오롯이 하나의 존재로 이루어져 있는 요소로 그 안이 비어져 있습니다. 텍스트와 인라인 요소를 자식 요소로 포함 하여 집어 넣을 수 있습니다. 블록레벨 요소 중에는 블록레벨 요소를 자식으로 포함할 수 있는 요소와 없는..