알아두면쓸데있는신기한잡학사전/고군분투흔적들34 [Web] FE - JavaScript 조건문, 반복문 자바스크립트(JavaScript, 줄여서 JS)란? 자바스크립트는 프로그래밍 언어로, HTML 상에서 쓸 수 있는 언어이다. Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나? A. 불가능한 이야기는 아니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 응답(response) 데이터로 주게 되어있다. Q. Java와 Javascript는 어떤 차이가 있나? A. 인도와 인도네시아.. 바다와 바다코끼리.. 처럼 아무 관련 없다. 자바스크립트 맛보기 띄어놓은 페이지의 크롬 개발자도구 콘솔창에서 자바스크.. 2022. 8. 22. [Web] FE - Javascript 연산 Javascript의 연산 산술연산 자바스크립트는 HTML, CSS와는 다르게 다양한 산술, 대입 등의 연산자를 통해 숫자, 문자 등을 출력할 수 있다. //연산 var x, y; x = 5; y = 9; y++; //10 x--; //4 --x; //3 ++x; //4 x = x + 2; //6 x += 2; //8 document.write(x, ' '); x *= 2; //16 document.write(x, ' '); var 이름 = '성이름'; var 나이 = 10; document.write('제 이름은 ' + 이름 + ' 제 나이는 ' + 나이 + '입니다.' , ' '); document.write(`제 이름은 ${이름}입니다. 제 나이는 ${나이+나이} 입니다.`); 비교연산 객체의 크고.. 2022. 8. 22. [Web] FE - JavaScript 변수 선언, 자료형 변수 변수란? 변수는 '변할 수 있는 수', '변할 수 있는 정보'라는 뜻이다. 변수는 선언하고, 할당하고, 사용할 수 있으며, 변수는 '변할 수 있는 수'이므로 지정된 값을 계속 바꿀 수 있다. - let 뒤에 원하는 변수 이름을 적고 = 뒤에 값을 적으면 된다. // 변수의 왼쪽 x와 오른쪽 3 값은 모두 메모리 상에 올라간다. let x = 3 // x라는 변수에 3이라는 값을 넣겠다. - 콘솔창에서 직접 코드를 입력할 때는 변수 이름만 적고 엔터를 쳐도 값을 확인할 수 있다. num // 10이 출력됨 - 변수를 한 번 선언하고 나서는 그 값을 바꾸어줄 수 있다. 새 값을 넣어줄 때는 앞에 let을 쓰지 않는다. let num = 20 num// 20 num = 2 num// 2 - 변수 선언을 .. 2022. 8. 19. [Web] FE - JavaScript 기초 Computational Thinking Computational Thinking은 문제에 체계적으로 접근하여 컴퓨터가 수행할 수 있도록 해결책을 만드는 과정이다. JavaScript JavaScript란? 웹페이지에서 동작하는 프로그램을 만들 때 사용된다. brave 브라우저? (https://brave.com/ko/download/) - HTML, CSS를 프로그래밍적으로 제어할 수 있다. - 웹브라우저가 해석해서 실행할 수 있는 유일한 프로그래밍 언어 (였지만 몇 년 전 웹어셈블리 새롭게 등장) - 요즘은 브라우저가 아닌 환경에서도 자바스크립트를 실행할 수 있게 되면서 게임 프로그래밍, 서버 프로그래밍 등 다양한 분야에서 쓰여지고 있다.~ 정적인 웹에서 동적인 웹으로 - 자바스크립트의 원래 명칭은 .. 2022. 8. 19. [Web] CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 CSS 레이아웃 - Grid, Flex 차이 및 기본 개념 레이아웃으로 Flex, Grid가 가장 많이 사용된다고 한다. Flex와 Grid가 대충 어떤 느낌인지 알기 위해 작성한 글이다. Flex : 한 방향 레이아웃 시스템 (1차원) Flex는 1차원으로 수평, 수직 영역 중 하나의 방향으로만 레이아웃을 나눌 수 있고, Grid : 두 방향(가로-세로) 레이아웃 시스템 (2차원) Grid는 2차원으로 수평, 수직을 동시에 레이아웃을 나눌 수 있다. Flex : 한 방향 레이아웃 시스템 (1차원) 부모 요소인 div.container를 Flex Container(플렉스 컨테이너) 자식 요소인 div.item들을 Flex Item(플렉스 아이템) Flex 컨테이너 안(태그 안)에 있는 item들의 방향들.. 2022. 8. 18. [Web] FE - 부트스트랩 부트스트랩이란? 트위터에서 개발한 무료 프론트엔드 프레임워크, 쉽고 빠른 반응형 웹 디자인을 만들 수 있다. - 마치 위에서 스타일 태그의 내용을 CSS 파일로 분리해놓은 것처럼, 미리 정해진 클래스들을 다양하게 꾸며 CSS 파일로 정리한 것을 HTML에서 불러와 쓰는 것! 다만 이 CSS 파일이 로컬환경에 있는 것이 아니라 온라인에 있는 것을 가져오는 것이다. - 같은 HTML 파일로 화면의 크기에 따라 다르게 보이도록 디자인할 수 있다. 모바일/태블릿/데스크탑 등 다양한 사용환경에 최적화되어 다르게 보이도록 하는 처리가 부트스트랩에서 미리 되어 있다. 부트스트랩 불러오기 부트스트랩을 사용하기 위해서는 아래 4개의 링크를 HTML 파일 head에 포함해야한다. 첫 번째 줄은 클래스들이 정의되어 있는 C.. 2022. 8. 18. [Web] HTML & CSS 1. HTML과 CSS HTML: Hyper Text Markup Language의 약자 Hyper Text(하이퍼텍스트)는 링크로 연결된 페이지, Markup Language(마크업 언어)는 태그 등을 이용해서 문서를 작성하도록 도와주는 언어를 의미한다. 확장자명은 .html이다. CSS: Cascading Style Sheets의 약자 웹 페이지의 전반적인 스타일을 작성해 저장해두는 시트를 의미한다. 확장자명은 .css이다. 2. HTML의 기본 형태 XHTML과 HTML5 XHTML이란, 웹 페이지를 제작하기 위해 사용되는 HTML4(지금 사용하고 있는 HTML5의 이전 버전)을 XML에 맞도록 재정의한 언어이다. HTML5보다 조금 더 구조화된 형식과 엄격한 문법을 가지고 있다. - DOCTYPE.. 2022. 8. 17. [Web] FE - CSS 연습 CSS 연습 Q1. 아래와 같은 페이지 만들기 참고) 이미지 위에 텍스트 정가운데에 넣는 방법[https://developer0809.tistory.com/56] background-size에서 contain, cover 원본비율, 중앙비율에 대하여[https://rgy0409.tistory.com/2994] 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 A. 정답 코드 로그인 페이지 아이디, 비밀번호를 입력해주세요 ID: PW: 로그인하기 Q2. 로그인 화면을 가운데로 가져오기 핵심) .wrap { /* margin 속성값을 auto로 설정하면, 웹 브라우저가 수평 방향 마진(margin) 값을 자동으로 설정한다. margin: 외부여백; 테두리 바깥에 얼마나 여백을 줄 것인지.. 2022. 8. 17. [Web] FE - CSS CSS 선택자(selector) - 선택자(selector)의 개념: class 값으로 태그를 선택(select)해서 꾸미기 - 무엇을 꾸민다는 것은, 일단 '선택(select)해야' 가능한 일이다. 그래서 CSS에선 class값으로 '이름표'를 달아준다. - 예를 들어, mytitle이라고 이름표를 달아준 뒤, "mytitle 이름표가 붙은 부분들의 글씨를 빨간색으로 바꿔라"라고 하는 것이다. 잠깐! 선택자(selector) 이름 잘 짓기(naming) 선택자 이름은 자유롭게 지을 수 있다. 어떤 역할을 하기 위한 선택자인지 잘 알 수 있게 이름을 정하는 것이 중요하다. 예를 들어, 화면에서 기사 제목을 꾸미기 위한 class를 만들었다면, 이름을 'news-title'로 하면 된다. 안에 로 공간을 .. 2022. 8. 17. 이전 1 2 3 4 다음
