이제하네

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

box-shadow, text-shadow - 요소의 그림자 만들기 블록 요소와 텍스트에 그림자 효과 적용 box(text)-shadow: (가로축) (세로축) (퍼짐 정도) (색상)

CSS 초기화하기 모든 태그에는 고유의 여백,크기등이 기본 설정이 있으므로 원하는 값으로 세밀하게 조정하기 위해서는 CSS를 초기화 해줘야한다. See the Pen CSS 초기화하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. float - 블록 요소 좌우로 배치하기 블록 요소는 자동 줄 바꿈하는 특징때문에 한 줄에 하나의 블록 요소만 넣을수 있음 2개 이상의 블록 요소를 한줄에 배치하기 위해서는 float속성을 사용 예시1 : 일반적으로 블록 요소 안에 자식 요소를 넣으면 부모의 블록 요소에는 높잇값을 지정 X 예시1 : 부모 요소가 자식 요소의 높잇값을 자동으로 인지하여 감싸줌 예시2 : wrap2에 있는 section요소가 좌우로 배치되었지만 부모요소인 .wrap2가 ..

배경색 지정하기 background-color 속성을 사용해 태그에 배경색을 직접 지정 폰트색상처럼 영어 색상명, RGB, 16진법 표기법 사용가능 See the Pen 배경색 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 배경 이미지 삽입하기 배경 이미지를 삽입할 때는 여러개의 속성값을 같이 지정해야함 background-image : 배경 이미지 삽입 속성값 : url(이미지 경로) background-repeat : 배경 이미지 반복 속성값 : repeat,repeat-x(y),no-repeat background-positon : 배경 이미지 위치를 지정 속성값 : 가로축, 세로축 background-size : 배경 이미지의 크기를 지정 속성값 : contai..

너비와 높이 지정하기 width,height 속성을 사용해 너비값과 높잇값 설정가능 px: 너비값과 높이값을 px단위로 지정 %: 부모 태그를 기준으로 너비값과 높이값을 %단위로 지정 vw: 웹 브라우저의 너비를 기준으로 너비값과 높잇값을 백분율로 지정 vh: 웹 브라우저의 높이를 기준으로 너비값과 높잇값을 백분율로 지정 See the Pen 너비와 높이지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 바깥쪽 여백 지정하기 margin 속성을 사용해 태그의 바깥쪽 여백 설정 px: 태그의 바깥쪽 여백을 px단위로 지정 %: 부모 태그 기준으로 태그의 바깥쪽 여백을 %단위로 지정 vw: 웹 브라우저의 너비를 기준으로 태그의 바깥쪽 여백을 백분율로 지정 vh: 웹 브라우저의 ..

폰트 굵기 바꾸기 font-weight 속성을 사용해 간단하게 변경 가능 속성값으로는 normal,bold등이 있다. See the Pen 폰트 굵기 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 폰트 크기 바꾸기 font-size 속성을 사용해 크기 변경 가능 px: 픽셀 단위로 폰트 크기 설정 rem: 최상위 부모인 을 기준으로 폰트 크기 설정 em: 부모 요소를 기준으로 폰트 크기를 설정 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. 폰트 모양 바꾸기 font-family 속성을 사용해 폰트 모양 변경 가능 한글 폰트는 큰 따옴표로 감싸서 표기 영어 폰트는 큰 따옴표로 감싸지 않아도됨 See the P..

전체 선택자 - 모든 HTML 요소 한꺼번에 선택하기 전체 선택자는 HTML파일의 태그를 포함하여 태그 전체를 선택 전체 선택자 기호는 * 이고 { }로 그룹으로 지정 태그를 포함아여 그 안에 있는 모든 자식 태그에 적용 See the Pen 전체선택자 by 신범식 (@ulqsqjpw-the-solid) on CodePen. 태그 선택자 - 태그명을 이용하여 선택하기 태그 선택자는 HTML 파일의 특정 태그 요소를 선택 See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen. 자손 선택자 - 자식과 하위 요소를 모두 선택하기 자손 선택자는 특정 HTML 요소의 자식 요소를 포함하여 그 하위에 있는 모든 요소를 선택 See the Pen 자손선택자 by..

HTML 파일에 외부 CSS파일 연결하기 에디터에서 외부 CSS 파일 입력하기 태그 안에 어디든 link:css입력 CSS 파일 경로 수정하기 my-project 폴더안에 css폴더 생성 거기안에 style.css파일 생성 href 속성을 css/style.css 로 변경 CSS 파일의 문자 인코딩 방식 지정 style.css파일 1행에 @charset "utf-8"; 입력

- 오디오 파일 재생하기 태그를 이용하면 확장기능 없이 다양한 오디오 파일을 웹페이지 삽입 가능 태그에 적용할수 있는 속성 controls : 오디오 파일을 재생하는 컨트롤 패널 생성 autopaly : 웹 페이지를 열면 자동으로 재생 loop : 오디오 파일을 무한으로 반복 preload : 오디오 파일을 재생하기전 파일을 미리 불러옴 - 동영상 파일 재생하기 태그를 사용하면 웹 브라우저에 동영상 재생가능 태그에 적용할수 있는 속성 controls : 동영상 파일을 재생하는 컨트롤 패널 생성 autoplay : 웹 페이지를 열면 자동으로 동영상 파일 재생 lool : 동영상 파일을 무한으로 반복하여 재생 muted : 동영상에서 소리가 나지 않도록 설정 preload : 동영상 파일을 재생하기 전에 모..