이레

변수의 종류는 총 4가지입니다. 전역 변수 지역변수 매개변수(파라미터) 멤버 변수(프로퍼티) ⭐️ 전역 변수와 지역변수 전역 변수는 함수 바깥, 지역변수는 함수 내부에서 선언됩니다. 전역변수는 특정 함수에서 선언된 것이 아니기 때문에 코드 전체에서 공유합니다. 전역 변수를 선언된 위치 이후로는 어디서든 사용할 수 있습니다. 지역변수는 자신이 선언된 함수 내부에서만 사용할 수 있습니다. 그 이외의 장소에서는 변수의 존재가 없기 때문에 사용이 안됩니다. ⭐️ 매개변수 (파라미터) 지역변수와 마찬가지로 함수 내부에서만 사용 가능합니다. 함수 외부에서 내부로 데이터를 전달하기 위해 사용하는 변수입니다. function fun1(num1, num2){ //num1, num2 가 매개변수 var local1 = "..

일반 변수는 데이터를 하나만 저장할 수 있지만, 배열 변수는 하나의 변수에 여러개의 데이터를 넣을 수 있습니다. 주로 연관있는 데이터를 하나로 묶어 관리할 때 사용합니다. 배열 데이터는 대괄호 안에 넣어 표현하며, 콤마로 구분합니다. var userName = ["name", "name2", "name3"] 배열은 주로 반복문과 사용합니다. 코드를 간결하게 처리할 수 있습니다.

변수에 어떤 값이 저장되어있는지 확인하는 방법은 대표적으로 3가지가 있습니다. alert(); document.write(); console.log(); ⭐️ alert(); 특정 정보를 브라우저의 알림창으로 알려주는 코드입니다. 예를 들면, 로그인시 비밀번호를 잘못 입력한 경우 경고창이 이 alert입니다. 내용이 길어지면 경고창에 내용이 잘리는 경우가 있습니다. ⭐️ document.write(); document에서 제공하는 write 기능으로 html 내부에 값을 출력해줍니다. 비어있는 html이 아닐 경우 어느 위치에 출력되는지 모릅니다. ⭐️ console.log(); 위의 두가지 기능과 달리 전문 디버깅 코드입니다. 웹킷 엔진을 사용하는 브라우저에서만 사용 가능합니다. 총 3가지의 방법이 있..

var 변수 이름 = 데이터; 이 데이터에 들어가는 종류가 8개 정도 됩니다. Number Boolean String Function Class Class Instance undefined null ⭐️ Number 일반적인 숫자 정수와 실수형으로 나뉩니다. ⭐️ String 문자열, 일반적인 글자를 말합니다. 문자열을 사용할 경우에는 "" 안에 넣어줍니다. ⭐️ Bloolean 논리형이라고 합니다. 오직 참,거짓 두 가지 값만 존재합니다. 참, 거짓을 저장해야 하는 경우 사용한다. ⭐️ undefined 변수 선언은 됐지만, 값을 알 수 없는 경우 나옵니다. ⭐️ null 주로 객체를 담은 변수를 초기화할경우 사용합니다. //숫자형 var age = 20; //문자형 var age ="20"; //위의..

변수란? 데이터를 저장하는 장소 / 데이터를 읽고 쓰고 할 수 있는 장소 입니다. ⭐️변수만들기 var 변수이름 = 값; 가장 일반적인 방법입니다. 여러개의 변수를 만들때도 같습니다. 여러개의 변수를 만들경우 콤마를 사용해도 됩니다. //나이가 담긴 변수 age를 만드세요 var age = 20; //이름과 나이를 저장한 변수를 만드세요 var name = "이름"; var age = 12; //콤마를 이용해 이름과 나이를 저장한 변수를 만드세요 var name = "이름", age = 12; ⭐️변수이름 만들때 조심해야할것! 숫자로 시작하면 안된다 대소문자를 구문한 것은 완전 다른 변수이다 대문자가 아닌 소문자로 시작하라 상수(변하지 않는값)은 대문자로 만들어라 여러단어가 조합되는 경우에는 카멜기법을 ..

오늘은 css를 작성했을 때, 스타일이 적용되는 우선순위에 대해 정리해볼게요. 작업할 때 이런 규칙에 대해 알고 있어야 css내에서 충돌이 나지않습니다. 작업을 하다 보면 하나의 태그에 여러 가지 스타일을 주는 경우가 있는데, 이때 특정한 규칙에 따라 우선순위가 부여되는 것입니다. 순서 대로 나열해 보자면, ⭐️우선순위⭐️ 속성 값 뒤에! important를 붙인 속성 html 내에 style을 직접 지정한 속성 #id로 지정한 속성 .클래스, :추상클래스로 지정한 속성 (추상 클래스> 클래스) 태그 이름으로 지정한 속성 상위 객체에 의해 상속된 속성 이 순서입니다. 만약 모든 순서가 다 같다면 제일 나중에 선언된 스타일이 적용됩니다.

css로 정렬시키는 방법이 여러 가지 있는데, 오늘은 float에 대해서 정리해볼게요. float만의 특징이 있기 때문에, 조심해서 사용해야 합니다. 단어의 뜻 그대로 '뜨다'라는 성질이 있기 때문에 태그들이 나란히 있다가 그중 하나가 float 속성이 들어가면, 그 사이에서 붕 뜨게 됩니다. display:block 속성을 무시하는 거죠 float는 left 정렬과 right 정렬이 있는데 (inherit, none 제외) float이 설정된 요소는 브라우저가 높이를 인지를 못하는 큰 문제점이 있습니다. 이때 float 끊기라는 것을 해주면 되는데, 여러 가지 방법이 있습니다. float의 부모에게 강제적으로 높잇값 주기 -> 반응형일때 자동 높이값 설정 불가능 float의 부모에게 overflow:h..

웹폰트란? 방문자의 로컬 컴퓨터의 폰트 설치 여부와 상관없이 온라인 특정 서버에 위치한 폰트를 다운로드하여 화면에 표시해주는 웹 전용 폰트입니다. @font-face를 사용하여 웹페이지 제작자가 원하는 폰트를 사용할 수 있게 합니다. font-face 규칙은 css3에서 새롭게 추가된 규칙입니다. html 문서에서 웹폰트를 적용할 때 사용하는 규칙으로, 웹 서버에 저장되어 있는 글꼴을 내려받아 화면에 표시해 주는 방식입니다. 간단히 말해서 웹브라우저에게 다운받은 서체의 이름과 위치를 알려주는 거죠 *작성법 @font-face { font-family: src: [, ]*; font-weight: ; font-style: ; } font-family : 폰트명을 지정합니다. : 폰트의 위치를 나타내는 UR..

오늘은 일하면서 자주 썼던 input type 에 대해서 정리해볼게요. 인풋태그의 타입은 굉장히 다양하지만, 저는 아직 몇가지 타입밖에 써보질 못했어요. 제일 많이 사용하는 타입 순서대로 나열해보자면, 이렇게 5가지 정도 됩니다. 1, input type="text" 말 그대로 text 타입이다. 한줄의 입력필드가 생성된다. 2, input type="checkbox" 클릭하면 체크되고, 다시 클릭하면 체크가 풀리는 체크박스 name = 전달할 값의 이름 value = 전달한 값 checked = 선택된 상태로 표현된다. * 체크박스는 여러개 선택 가능 * label태그와 같이 쓸 경우엔 input 의 id 와 label 의 for를 동일하게 줘야한다. 그래야 라벨태그 클릭했을때 체크박스에 체크가 들어간..

css를 구성하면서 자주쓰게 됐던 인접선택자와 일반선택자에 대해 정리해볼께요. 형제 선택자에는 두가지 종류가 있습니다. 첫번쨰, 인접 형제 선택자 (adjacent sibling selector) 두번쨰, 일반 형제 선택자 (general sibling selector) 두 선택자의 공통점은 '같은 부모를 가진다'입니다. 차이점을 정리해볼께요. ⭐️ 인접 형제 선택자 작성법 ( '.class'는 임의입니다. ) .class1 + .class2 {속성: 속성값;} 같은 부모를 가진 .class1 바로뒤에 오는 2에게 스타일을 적용한다. ex) p1 + p2 {color:red;} 이 경우에 p1바로 뒤에있는 p2의 color가 red 로 나옵니다. ⭐️ 일반 형제 선택자 작성법 ( '.class'는 임의입..