이제하네

자바스크립트로 HTML 요소의 스타일 제어 ※이미 CSS 파일로 지정된 HTML 요소의 스타일을 JS로 변경가능

document.querySelector() - 요소 선택하기 document.querySelectorAll() - 요소를 모두 선택하기 for of 문을 활용하면 여러 개의 요소를 편하게 반복하며 코드를 실행할수 있지만 반복되는 요소의 순섯값을 코드 내부에서 활용하기 위해서는 for 문을 활용하는것이 좋다! 부모,자식,형제 요소 선택하기 자식 요소를 선택하기 부모 요소 선택하기 제일 가까운 상위 부모 요소 선택하기 형제 요소 선택하기

자바 스크립트를 사용하는 방법 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 : 키프레임 모션을 실행할 때 ..