코드노트

마크업 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지. 마크업 개발의 실질적 의미는!? 웹 페이지의 뼈대를 구성하는 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; ..

박스모델(Box Model) 크기 - width, heigth width : 요소의 너비 설정 heigth : 요소의 높이 설정 - 초기값 : auto - 상속되지 않음 - 인라인요소에서는 지정되지 않음, display속성으로 block을 지정해주어야함 max - width, min - width, max - heigth, min - heigth -최대, 최소 크기를 지정 margin - 네 방향 바깥 여백 영역을 설정 /* 네 면 모두 적용 */ margin: 1em; margin: -3px; /* 세로방향 | 가로방향 */ margin: 5% auto; /* 위 | 가로방향 | 아래 */ margin: 1em auto 2em; /* 위 | 오른쪽 | 아래 | 왼쪽 */ margin: 2px 1em 0..