본문 바로가기

분류 전체보기

 (92)
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - Javascript 자바스크립트와 첫 만남 자바스크립트로 무엇을 할까 다양한 라이브러리를 사용할 수 있다. D3.js - 정보시각화 라이브러리. tensorflow.js - 머신러닝 라이브러리. React, Angular, Vue 서버를 구성하고 서버용 프로그램을 만들 수 있다. node.js - 프런트엔드 개발에 사용하던 자바스크립트를 백엔드 개발에서 사용할 수 있게 만든 프레임워크. 간단한 입출력 방법 alert, confirm, prompt document.write console.log 자바스크립트 스타일 가이드 자바스크립트 소스를 작성할 때 지켜야 할 기본 규칙 코드를 보기 좋게 들여쓴다. Tab 키나 스페이스바를 눌러 2칸이나 4칸을 들여씀 최근에는 공백 2칸 들여쓰기를 많이 사용함 세미콜론으로 문장을 구분한다...
[Tmux] MacOS에서 Tmux 설치 및 사용하기 MacOS에서 Tmux 설치하기 brew install tmux https://github.com/tmux/tmux/wiki/Installing 참고) 오류 해결 설치 중 아래와 같은 오류가 발생하였다. Error: The following directories are not writable by your user: /usr/local/share/man/man8 You should change the ownership of these directories to your user. sudo chown -R $(whoami) /usr/local/share/man/man8 And make sure that your user has write permission. chmod u+w /usr/local/share..
node_modules/node-sass: Command failed. 오류 해결 하기 안녕하세요. 오늘 새로운 프로젝트를 세팅 중에 오류가 발생하여 해결하였던 내용을 공유해보려고 합니다😊 문제 발생 기존에 있던 프로젝트를 가져와서 사용을 하게 되었는데, yarn install 명령어 실행 시 오류가 발생하였습니다. yarn install /Users/user/Documents/workspace/.../node_modules/node-sass: Command failed. ... 1 error generated. make: *** [Release/obj.target/binding/src/binding.o] Error 1 gyp ERR! build error gyp ERR! stack Error: `make` failed with exit code: 2 gyp ERR! stack at Chi..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 반응형 웹과 미디어 쿼리 뷰포트 뷰포트 지정하기
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 트랜지션과 애니메이션 변형(transform, 트랜스폼) 웹 요소의 위치나 크기를 바꿈으로써 시각적인 효과를 만드는 것 2차원 변형 x축, y축 좌우, 위아래로만 변형이 일어나면 2차원 변형 3차원 변형 x축, y축, z축 앞, 뒤로 이동 추가. 원근감이 추가됨. 보는 사람 쪽으로 다가올수록 값이 더 커짐 transform 속성 뒤에 원하는 함수를 추가해주면 됨. transform: translateX(50px); /* x축(가로 방향)으로 50px 이동 */ transform: translateY(50px); /* y축(세로 방향)으로 50px 이동 */ transform: translate(10px, 20px); /* x축(가로 방향)으로 10px, y축(세로 방향)으로 20px 이동 */ transform: scaleX..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - CSS 고급 선택자 연결 선택자 하위 선택자: container 안에 있는 모든 p 태그 #container p 자식 선택자: container의 자식 요소인 p태그에만 적용 #container > p #container > div > p 형제 선택자: h1 다음에 오는 형제 요소들 중 모든 p태그에 적용 h1 ~ p 인접 형제 선택자: 바로 다음에 있는 형제 p태그에만 적용 h1 + p 속성 선택자 href 속성이 있는 a태그에만 적용 li a[href] href 값이 #인 a태그에만 적용 li a[href="#"] { cursor:default; } 가상 클래스와 가상 요소 가상 클래스 링크에 사용 가능한 가상 클래스 :link :visited - 방문했던 링크 :hover - 마우스를 올렸을 경우 :active - 마..
[동영상 강의] Do it! HTML + CSS + 자바스크립트 웹 표준의 정석 - 이미지와 그라데이션 효과로 배경 꾸미기 Background background-color: 배경색 지정. 색상명, RGB, HSL, 16진수 모두 사용 가능. background-image: 배경 이미지 적용. 웹 브라우저에 가득 차도록 가로 세로로 계속 반복해서 보여줌. ex) url('image/bg1.jpg'); background-repeat: 반복 여부 지정. ex) no-repeat, repeat-x, repeat-y, repeat; background-position: 이미지 위치 변경. ex) bottom, center... background-attachment: 고정시킬 때 자주 사용 ex) fixed background: 위에 4가지 속성을 묶어서 표현 가능. 속성 값의 순서는 상관없음. background: url('im..
[동영상 강의] Do it! HTML+CSS+자바스크립트 웹 표준의 정석 - 레이아웃을 구성하는 CSS 박스 모델 블록 레벨 요소와 인라인 레벨 요소 블록 레벨 요소 한 줄을 다 차지 p 태그 인라인 레벨 요소 필요한 영역만큼만 차지 span 태그 박스 모델 실제 콘텐츠 영역, 패딩, 박스의 테두리, 마진의 요소로 구성됨. 개발자 도구의 computed 탭에서 확인 가능 박스 모델의 4개의 방향 값을 한 번에 지정할 때는 방향 순서를 지켜야 함(top -> right -> bottom -> left) 콘텐츠 영역 실제 내용이 들어가는 영역 크기는 width와 height로 지정 box-sizing 속성 박스 모델의 전체 너비 값은 콘텐츠 영역만이 아니라 패딩, 테두리 너비에 의해 영향을 받게 됨 그래서 나온 속성 border-box: 테두리와 패딩을 포함해서 너비를 정해줌 계산이 더 편리해짐 테두리 스타일 지정하기 ..

티스토리툴바