본문 바로가기

전체 글203

[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.
[VSC] 자동 줄바꿈 설정하는 방법 Visual Studio Code / 자동 줄바꿈 설정하는 방법1. [File - Preferences - Settings]를 클릭한다.2. word wrap으로 검색한 후 on으로 변경한다.3. 끝~! 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.
[Web] Network 동작방식/front-end, back-end 동작 방식 Network 동작 방식 인터넷은 어떻게 구성되어 있을까? - 이름 URL, 도메인 => www.naver.com - 주소 IP => 223.130.200.104 * 이름과 주소는 같다. - 문 PORT http://paullabedu.synology.me:5000/ http://paullabedu.synology.me:80/ * 뒤에 붙는 숫자에 따라 문이 다르다. - http - https https://mangkyu.tistory.com/98 - Switch - Router: 경로 잡아줌 - DNS: Domain Name Server - NAT: Network Address Translation * https://docs.microsoft.com/ko-kr/azure/rtos/netx-duo/net.. 2022. 8. 16.
[Web] FE - HTML HTML HTML이란? HTML이란, Hypertext Markup Language의 줄임말로, 브라우저 화면에 표시되는 문서를 작성하는데 쓰는 Markup 언어이다. - HTML은 tag라고 불리는 요소들을 이용해 화면을 분할하고 텍스트와 이미지, 하이퍼링크 등을 배치할 수 있다. - 크롬 브라우저에서 화면 우클릭 > 검사를 누르면 개발자 도구에서 Elements 탭에서 웹페이지를 구성하는 HTML 요소들을 확인할 수 있다. F12 또는 Ctrl+Shift+I(윈도우즈) 단축키를 이용할 수도 있다. - 각 태그들을 보통 시작 태그 와 종료 태그 의 한 쌍으로 이루어져있다. - HTML 각 태그에 style 속성을 부여하여 크기, 정렬, 글꼴, 색 등을 정해 꾸며줄 수도 있지만, CSS(Cascading.. 2022. 8. 10.
[Web] FE - 웹 기초(서버/클라이언트/웹의 동작 개념) 웹 기초 서버/클라이언트/웹의 동작 개념 1. 네이버 웹페이지 해킹해보기 네이버 메인 페이지의 메뉴에서 메일에 마우스를 두고 우 클릭하여 검사를 눌러보면 "메일"이라는 것을 볼 수 있다. 더블 클릭하여 원하는 단어로 바꿀 수 있는데... 네이버 페이지에서 "메일"이 "Mail"로 바뀐 것을 볼 수 있다....! 오 흥미로워... F5를 누르게 되면 새로고침이 되면서 다시 돌아오는 것을 확인할 수 잇다. 2. 웹의 동작 개념(HTML을 받는 경우) 우리가 보는 웹페이지는 모두 서버에서 미리 준비해뒀던 것을 "받아서", "그려주는"것이다. 즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 뿐이다. 그래서 우리가 받은 HTML을 아무렇게나 수정 가능하고("메일"을 "Mai.. 2022. 8. 10.

티스토리툴바