코드노트

마크업 마크업 언어는 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한가지. 마크업 개발의 실질적 의미는!? 웹 페이지의 뼈대를 구성하는 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} { } - 가로모드일때 변경 - 세로보다 가로길이가 더 클 때

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..

font-size 폰트의 크기를 지정합니다. 폰트 크기를 바꾸면 em 과 ex 단위로 계산된 다른 항목들의 크기를 바꿉니다. /* 값 */ font-size: xx-small; font-size: x-small; font-size: small; font-size: medium; font-size: large; font-size: x-large; font-size: xx-large; /* 값 */ font-size: larger; font-size: smaller; /* 값 */ font-size: 12px; font-size: 0.8em; /* 값 */ font-size: 80%; /* 전역 값 */ font-size: inherit; font-size: initial; font-size: unset; ..