코드노트

Normalize CSS Normalize.css: Make browsers render all elements more consistently. Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing. necolas.github.io reset CSS CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like d..

마크업 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지. 마크업 개발의 실질적 의미는!? 웹 페이지의 뼈대를 구성하는 HTML 화면 디자인을 코드로 나타내는 CSS 를 개발을 의미 웹 서비스의 규모가 클수록, 디자인 복잡도 상승 = 마크업 복잡도 상승 디자인 관리를 위해 생겨난 디자인 시스템을 개발 및 유지하기 위해서는 결국 마크업 의 역할이 가장 중요 HTML HTML의 사전적 정의 하이퍼 텍스트 마크업 언어(Hyper Text Markup Language) 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공 Block div, h1, p Inline span, img,..

@media screen and {max-width: 300px} { } @media {max-width: 300px} { } - 가로길이가 300px이하일때 바뀌게 설정 - all == screen @media {min-width: 200px} and {max-width: 300px} { } @media {min-width: 200px}, {max-width: 300px} { } - 가로길이가 200px 이상 300px이하일때 바뀌게 설정. @media screen and {arientation: landscape} { } - 가로모드일때 변경 - 세로보다 가로길이가 더 클 때

grid Layout - 웹페이지를 위한 이차원 레이아웃 시스템 - 콘텐츠들을 행과 열에 배치할 수 있으며, 복잡한 레이아웃을 직관적으로 구축할 수 있는 기능들이 있다. - 그리드는 수평선과 수직선으로 이루어진 집합체로, 디자인 요소를 정렬할 수 잇는 대상 패턴을 생성 - 하나의 그리드는 columns, rows로 구성 되며, 각 행과 열 사이에 공백이 있다. 이를 gutters라고 부른다. 한줄 작성 - grid : 명시 row / 명시 columns - grid : 명시 row, columns / 암시 row, columns /* values */ grid: none; grid: "a" 100px "b" 1fr; grid: [linename1] "a" 100px [linename2]; grid: "a..

문제 설명 더보기 정수 배열 자릿수로 표현되는 큰 정수가 주어집니다. 여기서 각 자릿수[i]는 정수의 i번째 자릿수입니다. 숫자는 왼쪽에서 오른쪽 순서로 최상위에서 최하위 순으로 정렬됩니다. 큰 정수에는 선행 0이 포함되지 않습니다. 큰 정수를 1씩 증가시키고 결과 배열을 반환합니다. - 간단하게 말하면 배열로 들어오는 수에 1을 더한값에 1을 더해서 배열로 반환하면 되는 문제 ex ) [ 9, 9 ] 가 들어오면 99에 1을 더해서 [ 1, 0, 0 ] 을 반환하면 된다. - 처음에 접근할때는 간단하게 생각했다. - 들어오는 배열의 길이는 최대 100이다. 그렇기 때문에 자바스크립트에서 최대정수 범위를 생각해야한다. * 9007199254740991 ~ -9007199254740991 - split, ..

justify-content - item요소들을 컨테이너의 기본축과 그리드 컨테이너의 인라인 축의 공간을 분배하는 속성 /* Positional alignment */ justify-content: center; /* 중앙으로 정렬 */ justify-content: start; /* 주축이 시작되는 위치부터 정렬 */ justify-content: end; /* 주축이 끝나는 위치에 정렬(순서가 바뀌는게 아니라 오른쪽에 붙음) */ justify-content: flex-start; /* Pack flex items from the start */ justify-content: flex-end; /* Pack flex items from the end */ justify-content: left; /*..

Flexbox - 행과 열 형태로 항목 무리를 배치하는 1차원 레이아웃 메서드 - 항목은 부족한 공간에 맞추기 위해 축소되거나 여분의 공간을 채우기 위해 변형 display : flex; flex container : 부모요소 flex item : 자식요소 main axis : 메인이 되는 축 cross axis : 메인과 다른 교차되는 축 display - 블록, 인라인 요소 중 어느 쪽으로 처리할지, flow,grid, flex 처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정 - 형식적으로 요소의 내부와 외부 디스플레이 유형을 설정 외부 - block - lnline 내부 - flow : - flow-root - table - flex - grid flex-direction / container ..

animation 여러 스타일을 전환하는 애니메이션을 적용. ex ) transition = A -> B / animation = A -> B -> C -> ... animation - CSS: Cascading Style Sheets | MDN The animation shorthand CSS property applies an animation between styles. It is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animati dev..

transform - 요소의 회전, 크기조절, 기울이기, 이동 효과를 부여할 수 있다. * scale : 크기에 대비해서 크기 조절 * rotate : 방향을 회전 시킴 / deg, turn * translate : 기준점에서 이동 * skew : 각도를 기울이는 효과 * transform-origin : 기준점을 변경할 수 있다. /* 키워드 값 */ transform: none; /* 함수 값 */ transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: perspective(17px); transform: rotate(0.5tu..

레이아웃 Layout display - inline, block, inline-block inline요소 : ex ) span.. - 영역의 크기가 내부 콘텐츠 크기로 정해진다. - margin, padding 의 top/bottom은 제외하고 지정할 수 있다. ( 위, 아래 는 지정 불가) - 여러 요소가 가로 배치가 된다. block요소 : ex ) div.. - 영역의 크기를 width, height 를 지정할 수 있다. - width를 지정하지 않으면 가로 전체를 차지한다. - 여러 요소가 세로 배치가 된다. inline - block요소 : ex ) input... - 영역의 크기를 width, height 를 지정할 수 있다. - 여러 요소가 가로 배치가 된다. display : block; ..