이제하네

자바 스크립트를 사용하는 방법 HTML 파일 내부에 스크립트 코드 작성 외부에 자바 스크립트 파일을 만들어서 HTML 파일과 연결 ※ 자바 스크립트 문법은 마지막에 세미콜론(;)을 붙여서 명령문이 끝났다고 표시! ※ 만약 자바스크립트의 호출 위치가 HTML 태그를 출력하는 영역보다 앞에 작성되어 있다면 HTML 은 파일을 입력한 순서대로 코드를 읽기 때문에 HTML 의 요소를 제어해야하는 자바 스크립트 구문을 영역보다 먼저 실행한다면 자바스크립트는 아직 생성되지도 않은 HTML 요소를 제어할수 없으므로 문제가 발생! ※원래라면 의 마지막행에 적어야 하지만 헤드 부분에 외부 자바스크립트를 연결하고 defer을 지정하면 자바스크립트 해석기가 를 해석하면서 동시에 외부 자바스크립트 파일을 가져옴

flex-grow - 요소의 안쪽 여백 확대하기 flex-grow 속성을 사용하면 요소의 크기를 키웠을때 요소 안쪽 여백의 확대되는 비율 지정 flex-grow 은 요소 안쪽 여백만 비율로 조정 전체 요소의 너빗값 비율 변경 X 전체 요소의 너빗값 변경하고 싶으면 flex 속성을 사용 See the Pen flex-grow: by 신범식 (@ulqsqjpw-the-solid) on CodePen. flex-shirink - 요소의 안쪽 여백 축소하기 flex-shirink 속성을 사용하면 요소의 크기를 줄였을 때 안쪽 여백의 감소 비율을 지정 flex-grow 속성과 다르게 크기가 클수록 비율이 작아짐 See the Pen flex-shirink by 신범식 (@ulqsqjpw-the-solid) on ..

order 속성을 사용하여 요소의 순서를 지정 See the Pen order.gap by 신범식 (@ulqsqjpw-the-solid) on CodePen. ※flex gap 속성을 사용하여 flex 아이템 사이의 간격을 조정가능

justify-content - 기본 축으로 정렬하기 justify-content flex-start : 자식 요소에 시작 방향으로 정렬 flex-end : 자식 요소를 종료 방향으로 정렬 center : 자식 요소를 가운데 정렬 space-between : 자식 요소의 좌우 여백만 균일하게 정렬 space-around : 자식 요소의 여백을 균일하게 정렬 space-evenly : 자식 요소의 여백을 양끝까지 균일하게 정렬 See the Pen content by 신범식 (@ulqsqjpw-the-solid) on CodePen. align-content, align-items - 반대 축으로 정렬하기 align-content은 자식 요소가 여러 개라서 줄 바꿈이 필요할 때 사용 align-items ..

flex 의 속성과 속성값 display flex : 자신은 블록 속성을 유지하며 자식 요소에는 flex 환경 설정 inline-flex : 자신을 인라인 속성으로 변경하면서 자식 요소에 flex 환경 설정 flex-direction row : flex의 기본축을 가로로 지정 column : flex의 기본축을 세로로 지정 row-reverse : 자식 요소 콘텐츠를 가로 역순으로 정렬 column-reverse : 자식 요소 콘텐츠를 세로 역순으로 정렬 flex-wrap nowrap : 자식 요소의 줄 바꿈 X wrap : 자식 요소의 줄 바꿈 O flex-flow row wrap : flex-direction, flex-wrap 속성의 축약문 display - 자식 요소의 배치 방법 지정하기 부모 요..

CSS3의 기능 중 미디어 쿼리를 사용하여 사용자가 보는 웹 브라우저의 너비를 판단하여 CSS를 다르게설정가능 이러한 기법을 반응형 웹이라함 See the Pen media by 신범식 (@ulqsqjpw-the-solid) on CodePen.

비트맵 이미지와 백터 이미지의 차이 비트맵 이미지는 수많은 픽셀 단위로 구성 사진처럼 많은 색상을 표현하면 비트맵을 사용 벡터 이미지는 좌푯값을 수식으로 연결해 선을 그림 아이콘 모양같이 명확하고 표현할 색상 수가 적으면 벡터 사용 SVG 파일을 웹 브라우저에 출력하기 viewBox : x의좌푯값, y의좌푯값, 영역의 너빗값, 영역의 높잇값 See the Pen SVG by 신범식 (@ulqsqjpw-the-solid) on CodePen. SVG의 path 스타일 변경 fill : 배경 색 stroke : 선의 색 stroke-width : 선의 굵기 See the Pen SVG path by 신범식 (@ulqsqjpw-the-solid) on CodePen. 패스의 stroke-dasharray와 s..

animation 속성으로 미리 지정한 조건에 맞게 자동으로 반복 @keyframes : 애니메이션의 시작과 끝을 등록하여 사용자 모션등록 0%는 시작지점, 100%는 끝지점 중간 지점은 여러개 추가 가능 단계별로 동작 방식을 지정해서 특정 이름을 붙여 키프레임 등록가능 animation-name : 키프레임으로 등록한 모션 이름 호출 animation-duration : 키프레임 모션 한 세트를 얼마동안 동작하게 할지 초 단위로 등록 animation-timing-function : 키프레임 모션을 실행할때 가속도 설정(transition 속성과 같음) animation-iteration-count : 키프레임 모션 한 세트가 동작 회수 설정 animation-delay : 키프레임 모션을 실행할 때 ..

transition속성을 이용해 인터랙션을 구현 transition 속성은 요소의 속성값이 변경될때 시간을 지정하여 일정시간동안 부드러운 모션처리가능 transition-property : CSS속성명 지정 (all을 입려하면 전체 속성 사용가능) transition-duration : 전환 효과가 발생할 때 지속할 시간 transition-delay : 전환 효과가 발생할 때 지연할 시간 (지연 시간 이후에 전환 효과가 나타남) transition-timing-function : 전환 효과의 가속도 linear : 등속 효과 ease : 가속 효과 ease-in : 모션 시작시 가속 ease-out : 모션 종료시 가속 ease-in-out : 모션 시작, 종료시 모두 가속 cubic-bezier : ..

CCS3의 transform 속성을 사용해 HTML 요소를 다양하게 변형 transform (2D) scale : 선택한 요소의 크기를 확대,축소 skew : 선택한 요소를 x축 또는 y축으로 비틀어서 변형 translate : 선택한 요소를 현재 위치 기준으로 x,y축으로 이동 rotate : 선택한 요소 회전 transform (3D) rotateX , rotateY : 선택한 요소를 x,y축으로 입체감 있게 회전 translateZ : 선택한 요소를 z축으로 입체감있게 이동 perspective px : 3D가 적용된 요소가 입체감 있도록 부모 요소에 perspective속성 적용해 원근감 부여 transform-style preserve-3d : 3D 효과가 적용된 요소의 모션 처리를 하면 3D효..