본문 바로가기

풀스택 개발 학습 과정/프론트엔드18

[자바스크립트] 함수 - 1 자바스크립트의 함수- 자바 스크립트의 함수는 function literal (값) 으로 처리 된다. - 함수가 표현함수, 선언함수가 존재- 모든 선언은 표현식(실행문)보다 앞에 있어야 한다. 함수의 정의 (선언적 함수)function 함수이름 (파라미터 선언부){ 실행문; [return data] }호출 (call) function add (a,b){ let result = a+b; return result;}// JS hoisting : 정의부를 실행문보다 위로 올리는 것// 실행문let c = add(10,20); console.log(c);콘솔 결과 = 30 func();- 변수처럼 사용 가능하다function substract(a,b){ ret.. 2024. 3. 2.
[자바스크립트] 연산자, 반복문과 제어문, defer 연산자 - 자바 스크립트 연산자종류 산술연산자+ - * / % **(거듭제곱)증감연신자++ --비교연산자== (===) != (!==) > = 논리연산자&& || !(단항)삼항연산자조건 연산자 (조건식) ? 참 : 거짓- 참, 거짓 위치에 실행문을 넣을 수 있다.typeof단항연산자. 오른쪽의 데이터(변수)의 타입을 알려줌비트연산자>> 은 0으로 0은 1로 변경 : 1의 보수 연산자)대입연산자LV = RV복합대입연산자+= 등등전개연산자(spread operator)새롭게 추가된 연산자로 배열, 객체에 포함된 요소들을 펼치는 연산자- 함수의 파라미터에서 사용되는 경우- 대입연산자에서 사용되는 경우 let a = 3;console.log('3의 3제곱의 결과' + a **3);let x = '3';conso.. 2024. 3. 2.
[HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치 Float 이용 배치 Float을 이용한 Layout-2 (1) float을 적용한 예 Box-1 Box-2 Box-3 Box-4 Box-5 (2) float을 적용한 예2 Box-1 Box-2 Box-3 Box-4 Box-5  Flex 를 이용한 배치 Flex을 이용한 Layout (1) flex을 적용한 예 1 Box-1 Box-2 Box-3 Box-4 Box-5 (2) flex-direction : row(default), column, r.. 2024. 2. 25.
[자바스크립트] 데이터 타입, 변수선언, Scope 자바스크립트란- 사이에 코드를 입력해야 한다.  - head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다.- 단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다. alert() : 경고창 자바스크립트 시작 <script> 와 </script> 사이에 코드를 입력해야 한다. head 태그 사이나 bady 태그 사이 어느 곳에 있어도 괜찮다. 단, script 에서 dom에 접근하려면 dom이 완성된 이후에 접근해야 한다.  데이터 타입자료형종류내용문자열대한민국", '대한민국'숫자형정수, 실수, 모두포함된 숫자 boolean 형true, false (0을 제외한 모든 숫자가 tru.. 2024. 2. 25.
[HTML + CSS]CSS 3 - Position Position종류내용기본값 : static / relative형제들에게 영향을 주지 않는다. top, left 이동시 원래 자리를 기준으로 이동한다.absoliute형제들에게 영향을 준다. 브라우저 기준으로 이동한다. Position을 이용한 배치 하나 둘 셋 넷 다섯 코드 결과 Position 수정종류내용position : static  top, bottom, left, right 적용 안됨position :  relativetop, bottom, left, right 적용 되지만, 아래 태그들은 영향을 받지 않는다. position : absolute- top, bottom, left, right 적용 되지만, 아래 태그들도 영향을 받는다.- 부모중에서 relativ.. 2024. 2. 25.
[HTML + CSS] CSS 2 - 텍스트 스타일, 배경색과 이미지, Display, Float 텍스트 관련 스타일Font종류역할font-family 글꼴지정 - 대중적인 글꼴 사용, 웹 폰트 사용(구글 폰트 등)font-size 글꼴 크기 지정font-style글꼴 꾸밈(이탤릭체, 볼드체) 지정font-weight굵기(100~900까지 100씩 늘어나도록, 400 : 디폴트), bold, bolder 등font-varient영문기준 소문자 크기의 대문자로 표현 Text종류역할color글꼴 색상 지정text-decoration글꼴 꾸밈(overline, underline, line-throug, none)text-transform영문자일 경우 대소문자 지정text-shadow글꼴 그림자 지정white-space공백 처리 방법 지정line-spacing, word-spacing자간 조정text-ali.. 2024. 2. 25.
[HTML + CSS] CSS 1 - CSS 선택자 종류 css 를 배우기 전 우리가 글 형식을 꾸미던 방식은 태그 안에서 style 이라는 옵션을 사용하여 형식을 꾸미는 것이었다. 일부 글자만 스타일을 적용하고자 할때 사용 하지만 해당 방식은 css의 우선순위를 가져가 디자인이 제대로 이용되지 않는다는 단점이 존재하였다. 태그 아래에  http://meyerweb.com/eric/tools/css/reset/  v2.0 | 20110126 License: none (public domain): CSS 의 형식을 모두 초기화하는 css 이다. 모두가 사용할 수 있도록 공개해 놓았다.html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acr.. 2024. 2. 17.
[HTML + CSS] HTML 태그 - 2 영역 분할 태그브라우저 내에서 공통된 역할을 담당하는 요소들을 집합시켜 다른 요소와 구별하고그룹화된 요소를 브라우저의 특정 위치에 배치시키도록 하기 위한 태그영역분할 태그블럭 요소- 위에서 아래로 쌓이는 구조이다.- 경계가 있다. (boder-box)- 너비와 높이가 적용된다. (css를 이용해 너비와 높이 그리고 위치를 조정할 수 있다.)- div 태그 : 영역분할에 사용되는 대표적인 태그- 너비와 높이가 있다.(인라인 요소는 너비와 높이를 조정할 수 없다.) - 외에도 sementic 태그인 header, footer, section, article hn,p, ol, ul, dl 등이 있다.인라인 요소- 왼쪽에서 오른쪽으로 쌓이는 구조이다.- 경계 속성이 없다.- 인라인 요소는 너비와 높이를 줄 수 .. 2024. 2. 17.
[HTML + CSS] HTML 태그 - 1 FRONTRND1) HTML (HyperText Markup Language) : 웹문서의 구조 2) CSS (Cascading Style Sheet) : 웹문서의 표현 3) JavaScript : 웹문서의 로직담당 (동적인 기능)html : https://www.javatpoint.com/html-5-tags HTML 5 Tags - javatpointHTML 5 tags with examples, forms, input, text, anchor, image, heading, marquee, textarea, paragraph, title, quotes, code etc.www.javatpoint.comHTML텍스트 콘텐츠 태그텍스트 콘텐츠를 표기하는 태그hn 태그 - Heading제목을 표기하는 태그.. 2024. 2. 15.

티스토리툴바