개발 걸음마 중

DOM(Document Object Model)이란? - DOM은 HTML 문서의 내용을 트리 형태로 구조화하여 웹 페이지와 프로그래밍 언어를 연결시켜주는 역할을 합니다. 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕습니다. - DOM은 프로그래밍 언어는 아니지만 DOM이 없다면 자바스크립트 언어는 웹 페이지 및 요소들과 관련된 모델이나 개념들에 대한 정보를 갖지 못하게 됩니다. - 문서의 모든 요소는 문서를 위한 Document Object Model의 한 부분이기 때문에 이러한 요소들을 DOM과 스트립팅 언어를 통해 접근하고 조작할 수 있습니다. ※ 문서를 트리 형태로 구조화하는 것을 DOM 파싱(parsing)이라고 합니다. * DOM 트리에 접근하기 - document 객체..

Mixin이란? - 코드를 재사용하기 위해 만들어진 기능입니다. - 중복되는 코드를 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include 합니다. - 코드 반복을 줄여줍니다. * Mixin 사용하기 - 앞에 @mixin을 쓰고 이름을 정해준 후, 중괄호{ } 안에 중복되는 코드를 넣습니다. - 스타일을 적용하고자 하는 요소 앞에 @include를 작성해 주면 됩니다. - mixin 파일을 만들어서 import 하여 사용하거나, 사용할 파일 내에서 선언 후 사용할 수 있습니다. /* SASS */ @mixin box { width: 100px; height: 100px; } .card { @include box; background-color: blue; } .profile { @in..

Sass란? - CSS로 컴파일되는 스타일 시트의 확장 언어이며 CSS 전처리기의 하나입니다. - Sass 기반으로 개발한 후, CSS로 익스포트 하는 후작업을 거쳐야 합니다. - 브라우저가 Sass 파일을 직접 읽지 못합니다. - 웹 업계에서 실제로 많이 사용하는 전처리기입니다. * Sass 작성 방식 .sass .scss => 다른 파일 확장자를 사용합니다. ※ 일반적으로 CSS와 더 유사한 SCSS를 사용합니다. CSS와 동일하게 중괄호로 작성하기 때문입니다. ✏️ 전처리기 처리 과정(Sass to CSS)을 위해 VSCode에서 'Live Sass Compiler' 확장프로그램을 설치해야 합니다. * 파일을 더 편하게 관리하는 방법 파일을 스타일, 기능, 레이아웃 별로 분리하여 사용하기 위해서 각..

HTML / CSS 이미지 확장자 SVG, Canvas * svg - 확장 가능한 벡터 그래픽(scalable vector graphics)으로 XML 기반의 2차 그래픽이다. - HTML 태그의 집합으로 이루어져 있다. => CSS와 js로 컨트롤할 수 있다. - 단순한 아이콘, 로고, 도형 등을 구현할 때 많이 사용한다. 장점 - 아무리 확대를 해도 이미지가 깨지지 않는다. - 이미지의 크기를 키워도 용량이 늘어나지 않는다. 단점 - 복잡한 이미지의 경우 파일 사이즈가 커진다. 코드로 이루어져 있기 때문! 사용방법 1. 이미지 태그 2. CSS background p { background: url(./icon-cat.svg) no-repeat 50% 50% / contain; } 3. 인라인 - 이..

HTML * iframe - inline frame을 줄여 쓴 것이다. - 현재 웹페이지에 다른 HTML 페이지를 포함시켜 중첩시키는 기능을 한다. - iframe 속성 src : 삽입될 문서의 주소 width : 너비 지정 (px, %) height : 높이 지정 (px, %) frameborder : 테두리 표시 여부 (0: 테두리 있음, 1: 테두리 없음) scrolling : 스크롤바 표시 유무 (yes, no, auto) longdesc : 내용을 설명하는 페이지 marginwidth : left(좌), right(우), 여백공간(margin) align : 정렬 (top, middle, button, left, right) allow : iframe에서 허용할 기능들을 지정한다. allowfu..

HTML 비디오(video) & 오디오(audio) * video 💭과거에는 동영상을 플래시 플레이 기반으로 개발했다. 플래시를 대체하여 영상을 삽입할 수 있는 video 태그가 탄생한 후, 현재는 비디오 태그를 사용하여 영상을 재생하는 것이 당연해졌다. - video 태그의 속성 autoplay : 동영상을 자동으로 재생한다. controls : 재생, 정지 등 조작 메뉴를 노출한다. loop : 동영상을 반복해서 재생한다. poster : 동영상 재생 전에 보여줄 이미지를 설정한다. preload : 페이지를 열 때 무엇을 로드할지 결정한다. src : 동영상 주소를 명시한다. type : 동영상 타입을 나타낸다. : 혹은 요소의 자식으로 자막과 같은 시간 기반 텍스트 데이터를 보여주고자 할 때 사용..

HTML 표(table) * table - 테이블을 생성할 때 사용한다. - 은 테이블 데이터의 컨테이너 요소이다. * caption - 테이블의 제목이나 설명이다. - 의 첫 번째 자식으로 사용해야 한다. - 표의 목적을 명확하고 상세하게 설명해야 한다. - 해당 요소를 제공하여 사용자가 표 콘텐츠를 확인할지, 넘어갈지 결정할 때 도움을 줄 수 있다. - caption-side: top, bottom으로 위치를 설정할 수 있다. 설명 테이블 내용 * thead - 테이블의 머리글 / 행 블록 내에 제목칸 열 그룹을 구성할 경우 사용한다. * tbody - 테이블의 본문 / 행 블록 내에 테이블 데이터로 구성할 때 사용한다. * tfoot - 테이블의 바닥글 / 행 블록 내에 열 요약을 표기할 때 사용한..

CSS 애니메이션 🤔 transition vs animation - transition : 요소의 상태가 변경되어야 애니메이션을 실행할 수 있다. - animation : 요소의 상태 변화와 관계없이 애니메이션을 실행할 수 있다. * transition - CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것을 말한다. - 단축 속성이다. - transition-property | transition-duration | transition-timing-function | transition-delay .transition { transition: width 2s linear 1s; } /* width 속성을 | 2초 동안 | 처음부터 끝까지 일정한 속도로 | 1초 지연시킨 뒤에 효..