flex와 grid의 차이 flex는 컨텐츠이고, grid는 컨테이너다. 즉, flex는 1차원 레이아웃 시스템(수직, 수평 중 택 1)이고 grid는 2차원 레이아웃 시스템(수직, 수평 둘 다 가능)으로 분류된다. flex는 항목을 한 방향으로 레이아웃을 할 수 있고, grid는 항목을 두 방향으로 레이아웃 할 수 있다. 복잡한 레이아웃 설계가 필요할 때 grid를 사용하면 좋다. flex Flexbox라 불리는 Flexible Box module은 flexbox 인터페이스 내의 아이템 간 공간 배분과 강력한 정렬 기능을 제공하기 위한 1차원 레이아웃 모델 로 설계되었다. 뷰포트나 요소의 크기가 불명확하거나 동적으로 변할 때에서 효율적으로 요소를 배치, 정렬, 분산 할 수 있는 방법을 제공하는 css3..

transform 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있음 시각적 서식 모델의 좌표 공간을 변경 키워드 none 또는 하나 이상의 transform-function값을 사용해 지정할 수 있음 요소에 변형을 오른쪽부터 왼쪽으로 하나씩 순서대로 적용하는 것과 같음 크기-scale scale, scale X, scale Y scale(x,y) 소숫점도 사용가능함 회전-rotate 각에 대한 숫자 하나만 받을 수 있음 90deg=100grad=0.25turn 180deg=200grad=0.5turn 이동-translate 두가지 값을 사용하면 앞은 x, 뒤는 y 한가지 값만 입력하면 x축으로만 이동함 length와 percentage 사용가능 기울이기-skew 값을 하나 또는 2개 입력..

기본 선택자 ● * 전체 : 모든 요소를 선택함 ● div 요소 ● . 클래스 ● # 아이디 ● [attr] 특성 그룹 선택자, 결합자 ● , 그룹 선택자 ● 한 칸 공백은 자손결합자 ● > 자식 결합자 ● ~ 일반 형제 결합자 ● + 인접 형제 결합 가상 클래스 선택자 ● 선택자에 추가하는 키워드로, 선택한 요소가 특별한 상태여야 만족할 수 있음 ● :hover, :focus, : active, :checked ● :disabled 약간 색이 빠진 색깔로 나옴 ● &:first-child(), &:last-child(), &:nth-child(), &:only-child() 가상 요소 선택자 ● ::before, ::after, ::placeholder 단축속성 ● margin과 padding의 단축속..

CSS란 ● 종속형 시트 또는 캐스케이딩 스타일 시트 ● 마크업 언저가 실제 표시되는 방법을 기술하는 스타일 언어 ● Style sheet 언어 ● css문법 ○ 선택자{정의} ○ 선택자{속성: 속성값;} ○ p{color: red;} CSS속성들 ● background, border, bos-sizing, display, bottom, font, margin 등등 핵심 CSS 속성과 작성팁 ● 위에서 선언한것이 밑에 선언한것을 덮어쓰기 때문에 순서를 지켜주는것이 좋음 CSS Box Model ● border-box를 선언하지 않으면 기본으로 content-box로 되어있음 position ● absolute는 기준이 바로 위에 있는 부모가 됨 ● relative는 기준이 브라우저가 됨 ● fixed는 ..

transform 속성 ● ui를 브라우저에 그리는 순서를 만드는 방법 ○ dom-tree ○ layout: width, height ○ paint: color ○ camposite: transform 복잡한 애니메이션이 필요할 때 - animation 속성 ● wiggle 사용하기 마우스 움직임 추적하기 ● mousemove로 마우스 추적하기 x : , y : ● 커서의 위치에 따라 div의 위치 바꾸기 x : , y : ● transform으로 커서 따라 움직이기 x : , y : ● 마우스의 움직임에 따라 글씨 쓰기 안녕하세요! 째재입니다. #targetBox { width: auto; display: inline-block; border: 1px solid red; position: relativ..

CSS 애니메이션 첫 걸음 -transition ● transiton: 어떤 속성이 변할 때 얼마만큼의 시간을 사용할지 설정가능 ● ease-in: 천천히 가다가 빠르게 감 ● ease-ont: 빠르게 가다가 천천히 감 ● ease-in-out: 천천히 가다가 빠르게 가다가 천천히 감 HTML에서 Javascript 사용하기 ● 로 영역 만들어주기 ● console.log(); 로 콘솔 창에 출력하기 JavaScript로 선택하는 HTML 태그 ● js는 태초부터 웹 ui를 제어하기 위한 언어였음 ● js로 제어하고 싶은 html 태그를 선택 ● 어떤 이벤트가 발생했을 때 제어할 것인지 선택 ● css 변경 ● . 을 ~으, ~에 로 해석 ● var, let, const 로 변수 만들기 addEventL..