전체 글

웹의 3대 요소 HTML / CSS / JavaScript html : 웹 문서의 큰 틀 (뼈대) css : 스타일 (색상, 테두리, 디자인 등등) Javascript : 웹 문서 상에 이벤트가 발생했을 때 실행해야 할 동작들을 처리 (동적인 효과) 자바스크립트와 자바는 아예 연관이 없음 스크립트 언어란 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 해주는 용도 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안됨 자바스크립트란 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 인터프리터 방식의 스크립트 언어 컴파일 방식과 인터프리터 방식 컴파일 방식 (자바) 컴파일 거치고 나서 실행됨 코드상에 문법적인 문제가 있으면 빨간줄로 알려줌 인터프리터 방식 (자바스크립트) 컴파일 거치지 않고 곧바로..

display : flex 요소를 통해 레이아웃 구성시 별다른 사이즈, 크기, 정렬을 지정하지 않아도 유연하게 처리하는 속성 item (내부요소)을 감싸는 요소의 형식을 flex로 변경함 item에 자동으로 지정된 margin 요소가 모두 사라지고 content 영역 만큼의 크기만 가지게 됨 item에 별도에 높이, 너비가 지정되어 있지 않다면 item의 높이는 flex-container의 높이/너비와 같아지게 됨 (flex-container 정렬 방향에 따라 다름) flexbox 요소의 정렬되는 방향, 순서, 요소간의 간격을 수치적으로 처리하지 않아도 알아서 유연하게 처리해주는 형식 flexbox 이용할 때 알아야 하는 것 flexbox의 구성 flex-container : 정렬이 필요한 요소들을 감싸..

애니메이션 속성을 점차적으로 변화시켜 움직이는 효과를 내는 기법 트랜지션과 비교했을 때 시작스타일과 종료스타일을 부드럽게 이어주는 기능을 하는것은 같음 단 애니메이션은 중간에 원하는 위치에 @keyframes를 이용하여 중간스타일도 지정 가능 @keyframes 애니메이션 시작지점과 종료지점의 스타일을 정하고 keyframes의 이름 지정 시작지점과 종료지점 두개만 설정할 경우 from{ }to{ }로 설정하면 되고 중간에 하고싶은 작업이 있다면 %로 구분하여 지정 @keyframes 키프레임명{ 선택자 {스타일;} } 시작지점과 종료지점 두개만 설정할 경우 .anitest1:checked+div{ width:200px; animation-name:ani; /* 애니메이션명 지정 */ animation-..