본문 바로가기

분류 전체보기182

220712 터미널 창에서 node로 전환되지 않을때 터미널 창 옵션에 node가 뜨지 않아서 시작 npm 버전에서 오는 이슈일수도 있다는 이야기에 버전 체크 하지만, 버전 관련한 이슈가 아니었고 팀원 분의 정보 제공으로 npm 버전 업글을 하려 하였으나, 똑같이 따라하였음에도 터미널창의 파워셀과 cmd에서 둘다 저런 메시지 다른 분께서 알려주시기를 내가 터미널 창에서 bash를 사용해서 npm run 할때 자동적으로 바뀌는 node 창이 안 뜨는 것 같다 하심! 그래서, 그 말에 근거하여 파워쉘에서 다시 npm run을 하니 정상적으로 자동으로 node로 바뀜 !!!!!!!!! 역시 집단지성의 힘. 2022. 7. 12.
MGS Day-11 ECMA 스크립트(ES) cf. ECMA : 유럽 컴퓨터 협회의 약어로 자바스크립트를 표준화해주는 국제 표준화 기구. 우리가 보통 지칭하는 자바스크립트의 정확하게 표준화된 명칭은 에크마 스크립트이다 ! ex. ES6, ES2015 (2015년 버전, 6번째 버전, 표현만 다르지 둘다 같은 버전을 의미) ... 자바스크립트(에크마 스크립트)의 버전 지칭 https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8 ECMA스크립트 - 위키백과, 우리 모두의 백과사전 ko.wikipedia.org parcel bundler를 통해 index.html 기준으로 로컬에 내부 서버를 하나 연다. script에 작성된 내용을 npm run 명령으로 실.. 2022. 7. 12.
MGS Day-10 Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임(프로그래밍 언어가 동작하는 환경!) 우리는 웹브라우저를 동작시켜주는 JS도 이해를 해야겠지만, 그런 웹브라우저에서 동작되는 웹페이지를 만드는 우리의 컴퓨터 환경을 제어해주는 JS도 이해를 해야한다. JavaScript라는 프로그래밍 언어의 문법을 배우게 되면 웹브라우저를 동작하는 내용도, 컴퓨터를 제어하는 내용도 같이 배울 수 있게 된다. 순수하게 HTML, CSS, JS만 가지고 작업할 경우 최종적으로 완성은 할 수 있지만, 비효율적인 과정이므로 보통 우리가 개발하는 컴퓨터 환경에다가 개발들을 도와주는 여러가지 모듈들을 설치해 이용하여 도움을 받아 개발한다. 하지만, 이런 모듈들은 실제적으로 직접적인 웹브라.. 2022. 7. 11.
MGS Day 09 git, gitHub, git flow로 협업하기 실습 1. 팀장이 깃헙에 organization 을 새로 만든다. cf. New repository를 만들어 팀원들을 초대할 순 있지만, 그렇게 되면 팀장(만든 이)에게 귀속되기 때문에 New organization을 만드는 게 바람직하겠다 ! 2. 팀원을 이메일이나 username(깃헙 계정의 경우)으로 초대한다. 3. 팀장이 프로젝트를 진행할 작업 repository를 생성한다. cf. 무료 서비스를 선택했으므로, private으로 설정시 제약이 생기므로 public으로 설정 gitignore는 웹 프론트엔드 개발을 할 것이므로, 거기에 사용되는 Node 파일로 설정 README file 체크 설정 (이 3가지는 선택사항) 4. 프로젝트 세팅 Issu.. 2022. 7. 8.
반응형 웹 사이트 만들기 어떤 기기에서도 동일한 레이아웃을 가지면서 기기의 특성에 맞게 웹 문서가 표현되려면 문서 안의 각 요소의 너비를 백분율과 같은 가변 값으로 지정하면 된다. 가변 그리드 레이아웃(fluid [grid] layout) : 사이트의 레이아웃을 백분율로 지정하는 것 가변 그리드 레이아웃 만들기 ① 전체를 감싸는 요소 확인하기 가변 그리드는 웹 컨텐츠 전체를 감싸는 요소의 너비(ex. 960px)를 기준으로 각 요소의 너비를 계산한다. 전체를 감싸는 요소(wrapper나 container)가 화면에 가득 차게 표시하고 싶으면 너비를 100%, 화면 양 옆에 여백을 살짝 두고 싶으면 너비를 96%로 지정하겠다. ② 각 요소의 너비 값 계산하기 요소의 너비를 전체를 감싸는 요소를 기준으로 백분율로 정한다. cf. %.. 2022. 7. 6.
MGS Day 08 margin : 요소의 외부 여백(공간)을 지정하는 단축 속성 cf. margin-방향(상하좌우) - 개별 속성 음수를 사용할 수 있다 ! 속성값으로 auto를 주게 되면, 브라우저가 여백을 계산 cf. 가로(세로) 너비가 있는 요소의 가운데 정렬하는 데에 활용한다 ! 단축속성이기 때문에 1개의 값을 설정하면 순서대로 top & bottom & left & right의 값을 의미 ex. margin : 10px; => 상, 우, 하, 좌의 값이 모두 10px 2개의 값을 설정하면 순서대로 top & bottom, left & right의 값을 의미 ex. margin : 10px 20px; => 상하의 값이 10px, 좌우는 20px 3개의 값을 설정하면 순서대로 top, left & right , bo.. 2022. 7. 6.
MGS Day 07 DOM이란 Document Object Model(문서 객체 모델)의 줄임말로, HTML 문서를 구조화하여 접근할 수 있는 객체로 만들어 놓은 것. 브라우저가 HTML 문서를 해석한 결과라고 말하기도 함. DOM API란 이런 DOM에 접근해 우리가 원하는대로 HTML 요소를 수정, 추가, 삭제할 수 있도록 만들어져 있는 함수들. CSS에서의 단위 1. px (픽셀) 디바이스 화면에서 표현하는 하나의 점 (갯수) 2. % (퍼센트) 특정 요소의 부모 요소 크기를 기준으로 하는 백분율 cf. margin이나 padding에 %를 사용할 경우 해당 %는 가로 크기를 기준으로 한다. ex. 요소 상단에 여백을 줬을 때, 화면이 가로로 늘어나면 해당 요소의 세로 여백도 늘어나게 된다 ! 3. em (이엠) 특정.. 2022. 7. 6.
HTML-CSS 가상 요소 선택자(Pseudo-Elements) 1. ABC::before 가상 요소 선택자 선택자 ABC 요소의 내부 앞에 내용을 삽입. 가상의 인라인(글자) 요소(ex. 앞!)를 만들어서 선택자 태그의 내부의 앞에 삽입됨 ! cf. 인라인 요소는 가로, 세로 값을 설정해도 적용되지 않는 특성이 있다 ! => 가로, 세로 값 적용해주고 싶으면 가상 요소 선택자를 블록 요소로 설정해주면 가능하다. !! display: block; 2. ABC::after 가상 요소 선택자 선택자 ABC 요소의 내부 뒤에 내용을 삽입. 가상의 인라인(글자) 요소(ex. 뒤!)를 만들어서 선택자 태그의 내부의 뒤에 삽입됨 ! !! ::before와 ::after 가상 요소 선택자를 사용할 때는, 내용이 삽입하려는 내용이 있든 없든 반드시 content: " ";를 작성해.. 2022. 7. 4.
HTML-CSS 가상 클래스 선택자(Pseudo-Classes) 동작을 나타내는 가상 클래스 선택자 1. ABC:hover 가상 클래스 선택자 선택자 ABC 요소에 마우스 커서가 올라가 있는 동안 선택. 2. ABC:active 가상 클래스 선택자 선택자 ABC 요소에 마우스를 클릭하고 있는 동안 선택. cf. hover 와 나타나는 모습은 똑같지만 마우스를 클릭하고 떼고 있지 않는 동안에만 이벤트 발생 3. ABC:focus 가상 클래스 선택자 선택자 ABC 요소가 포커스(가 활성화)되면 선택. cf. 포커스가 될 수 있는 요소는 input, button, label, select 요소 등과 같은 HTML 대화형 콘텐츠. 그 외, tabindex 속성을 사용한 요소도 포함. cf. tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있다. Tab .. 2022. 7. 4.

티스토리툴바