유니의 코딩공부

익명 함수 : 이름 없는 함수 즉시 실행 함수, 변수 할당 후 실행 가능 - 익명 함수는 변수에 할당 할 수 있음 화살표 함수 1. 매개변수가 없는 경우 매개변수 => 실행하려는 명령어 맨 끝에 ;을 붙여주면 됨 중괄호 안에 실행할 명령이 하나 뿐인 경우 중괄호 생략 가능 2. 매개변수가 있는 경우 중괄호 안에 문장이 하나인 경우 중괄호 생략 가능, 매개변수 안에 매개변수 하나인 경우에도 괄호 생략 가능 3. 매개변수가 2개 이상인 경우 문장이 하나이므로 중괄호 생략 가능, 매개변수 2개이상이므로 괄호 생략 불가 return도 생략 가능 매개변수 a,b가 사용되는 함수이고, a + b값을 반환한 값이 sum에 들어간다는 의미

1) var를 안붙여서 전역변수로 사용하는 경우가 있는데, 함수 밖에서 값을 변경시켜 버리는 경우가 생김 2) 같은 변수 이름이 나왔는데 재사용이 가능하면 문제가 생길 수 있음 호이스팅 : 끌어 올린다 y변수가 선언 되지 않았지만 undefined로 나오는 이유는 앞에 선언 된것처럼 끌어서 인식 함 var 예약어를 사용해서 변수를 사용하는 것보다 let로 사용 추천 let 변수의 특징 scope : block에 국한되어 있음 for문에 있는 i변수는 for문에서만 사용 가능 let sum은 calcSum 함수 내에서만 사용 가능. let를 빼면 sum을 전역 변수로 사용 가능 명확하게 블록 내에서만 사용 할 수 있게 제한 되어있음 var와 차이점: 재선언 불가 let는 호이스팅 안되서 오류 메세지 나타냄

간단한 입출력 방법 결과값을 표시하는 출력 방법 alert() confirm() : 확인 , 취소 버튼이 있음. 사용자의 선택 여부에 따라 결과 값이 달라지게 프로그래밍 할 때 사용 prompt() : 사용자에게 값을 입력할 수 있도록 한 줄짜리 text필드가 표시 됨 사용자가 입력한 값이 변수에 저장 document.write() : 출력 결과를 웹브라우저 화면에 표시 console.log() : 콘솔창에 내용 표시 ctrl + shift + J 자료형 리터럴 템플릿 문자열과 변수를 연결할때 +없이 사용하기 위해 나옴 백틱` 사용

transform : 웹 요소의 위치나 크기를 바꿈으로써 시각적인 효과를 만들어 줌 위치를 옮길경우 : translate 함수 사용 크기 조절할 때 : scale 함수 사용 rotate : 회전시키는 함수 양수 : 시계 방향 음수 : 시계 반대 방향

개발자 도구에서 확인 할 수 있음

background-color - 배경색 지정 background-image : url('폴더 경로'); -배경 이미지 지정 옵션을 주지 않으면 웹 화면에 가득하게 표시되는 것이 기본 옵션 background-repeat : 가로로만(repeat-x), 세로로만(repeat-y) 반복하게 하고 싶은 경우 사용하는 옵션 background-position : 배경이미지 위치 변경 background-attachment : 배경 이미지

둘 이상의 선택자를 연결해서 특정한 요소를 선택하는 방법 id값이 containter인 요소와 이 요소를 부모로 하는 하위의 모든 p요소 자식 요소 : 자식에만 적용 시킴 컨테이너 밑에 있는 자식p에만 적용됨 형제 선택자 h1 ~ p h1다음 첫번째p 태그에만 적용시키고 싶은 경우 인접 형제 선택자 : h1 + p 속성 선택자 href가 있는 속성에만 스타일을 지정하고 싶은 경우 href="#"인 경우에 cursor를 마우스로 하고 싶은 경우 가상 클래스 링크에 많이 사용 됨 :link :visited :hover :active 순서를 지켜주어야 한다. 순서를 지키지 않으면 적용되지 않는 경우가 있음 link와 visited를 똑같이 묶어서 지정 hover 마우스를 올렸을때 마우스 오버하면 배경은 짙은색..

float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 float 속성: 왼쪽, 오른쪽으로 떠 있게 할 수 있음 사이드 바를 이용해서 왼쪽, 오른쪽에 배치할 때 많이 사용 해지하고 싶은경우 clear box4는 float영향을 받지 않게 됨 position : 요소 위치 지정할때 사용 margin : 20px auto(좌우를 auto로 주면 화면의 중앙에 둘 수 있); static : 기본. 웹 소스가 나열된 순서대로 화면에 나열 relative : 소스 작성 순서대로 배치 & 위치 값 지정 가능 absolute : 부모, 상위 요소에서 postion:relative가 기준점이 됨. 소스 위치와 상관 없이 위치 값 지정 fixed : 위치값 고정

블록 레벨 요소 : 자체가 브라우저 화면에서 한 줄을 차지 인라인 레벨 요소 : 필요한 영역만 차지 box-sizing : box모델의 넓이 계산할때 보더박스까지 계산을 포함해서 넓이가 200px이라는 의미 첫번째 박스 크기 : 260 (200+양쪽20+양쪽10) 두번째 박스 : box-sizing 200으로 설정했기 때문에 padding과 border까지 포함해서 200인 것을 알 수 있음 각각 따로 지정할 때 가장먼저 border-style지정 필요. 없으면 테두리 그려지지 않음 한꺼번에 지정하는 border속성인 경우는 순서 상관 없음. border-width : 5px(top,bottom) 10px(right, left)

글꼴 지정할 때 모든 사람의 컴퓨터에 있는 글꼴로 지정필요 웹 폰트 사용. 상대방이 폰트를 다운로드해서 사용할 수 있게끔 폰트파일 업로드 필요 em : 대문자 M의 폭 크기가 1em 웹폰트 1) 사용자 시스템에 설치 되어 있지 않은 폰트를 내가 사용하려고 할 때, 폰트 정보를 서버에 올려놓고 사용자가 사이트에 접속했을때 다운받아 사용 2) 웹상에 있는 폰트정보를 링크로 사용 가능. 네트워크에 영향 받아 사이트 속도가 떨어질 수 있음 select this style하면 @import가 보임 첫번째 글꼴을 가져올 수 없을 경우에 , 두번째 글꼴을 사용하라고 지정해줌 text-align text-decoration : 텍스트 링크를 만들면 밑줄이 생기는데, 없앨 때 많이 사용 그림자 가로5px 세로5px 번지..