나만의 코딩 일지

반응형 웹 - 미디어 쿼리(media query) 반응형 웹을 구현하기 위해 가장 많이 사용하는 방법으로, 기기의 종류와 화면의 크기의 조건에 따라 스타일을 작성할 수 있는 쿼리문 min-width 최소 넓이 값(넓이 값 ~ 부터) / 지정한 사이즈 보다 넓은 경우 화면 사이즈 기준 100%에서부터 화면 사이즈를 줄일 때 최소 ~ 유지하겠다는 뜻이다. min-height 최소 높이 값 요소의 높이에 최소 높이 설정 max-width 최대 넓이 값(넓이 값 ~ 까지) / 지정한 사이즈 보다 작을 경우 화면 사이즈 기준 0px부터 화면 사이즈를 줄였을 때 최대 ~ 유지하겠다는 뜻이다. max-height 최대 높이 값 요소의 높이에 최대 높이 설정 미디어 쿼리 구문 ※(주로 스타일 시트를 따로 빼서 진행) ..

반응형 웹(RESPONSIVE WEB) - 가변 그리드 다양한 디바이스의 등장으로 웹 페이지 구현 방법을 위해 고안된 것으로, 하나의 웹 페이지를 데스크탑, 태블릿, 그리고 모바일 등의 다양한 기기에서 최적화된 화면으로 볼 수 있다는 것 반응형 웹의 장점 모든 스마트 기기에서 접속 가능 가로 모드에 맞추어 레이아웃 변경 가능 사이트 유지/보수에 용이 다양한 기기에서의 호환 (사용성을 높임) 가변 그리드 - Fluid Grid 화면 사이즈에 따라 가변이 가능한, 즉 자유롭게 변형이 가능한 그리드를 말하며, 퍼센트(%)로 제작하는 방법 [단위] px : px 사용 시 반응형에서 기기의 너비에 따라 고정되면 안 되기 때문에 레이아웃 설정 시 지양한다. (가변이 가능하지 않다. = 고정 값) % : 비율에 따른..

animation(애니메이션 속성) 동적인 다양한 스타일 전환을 표현하기 위해 사용하는 속성 (부드럽게 스타일 변화) @keyframes(키 프레임) animation 속성과 함께 사용하는 속성 키 프레임 내에 특정한 시간에 따라 표현해야 할 요소의 스타일을 표기 애니메이션이 변경되는 지점 설정 0% -> 시작 구간 30% ~ 50% -> 중간 구간 100% -> 끝 구간 사용 방법 @keyframes 이름{ from, 0%{시작 스타일을 표기} to, 100%{끝 스타일을 표기} } animation 속성의 종류 animation-name : 애니메이션 이름 지정, ex) aa animation-delay : 애니메이션 효과에 대한 지연 시간 지정, ex) 1s -> 1초 후 시작 animation :..

transition 선택자가 변화되거나 혹은 동작이 있을 때 시간의 흐름을 부여하여 변화시키는 속성 transition과 함께 사용 가능한 속성들 사이즈 관련 : width, height, mergin, padding 선 관련 : border-width, border-color, border-radius 색상 관련 : color, background-color, opacity 변환 관련 : transform 위치 관련 : top, left, right, bottom transition 속성 transition-delay : 지연 값, 변환되는 시간을 지연시키는 속성 ex) transition-delay: 1s -> 1초 후 실행 transition-duration : 몇 초 동안 재생할지, 변환되는 시간..

transform html 요소의 형태나 위치 등을 자유롭게 바꿀 수 있는 변형 가능한 값 transform 속성 translate : 요소를 축을 중심으로 이동에 대한 변환 표현 가능한 속성 translate(x축, y축) : 특정한 위치로 이동 translateX(x축) : x축만큼 이동 translateY(y축) : y축만큼 이동 translateZ(z축) : z축만큼 이동 translate3d(x, y, z) scale : 요소를 축의 중심으로 확대 혹은 축소의 변환 표현 가능한 속성 scale(x축, y축) : 사이즈 확대, 축소 ( 0.9 < 1 < 1.5 ) scaleX(x축) : x축 값만큼 확대, 축소 scaleY(y축) : y축 값만큼 확대, 축소 scaleZ(z축) : y축 값만큼 확..

위치 속성 어디에 위치할지 지정하는 속성 함께 적용 가능한 속성들 top : y 축 상단 기준 bottom : y축 하단 기준 left : x축 좌측 기준 right : x축 우측 기준 z-index : z축 위치 상 우선순위 변경( z-index : 숫자가 클수록 상위 순서에 배치 1 ~ 9999까지 존재) 위치 지정의 중요한 값들 static 부여하지 않아도 적용되는 기본 값(정적 위치 지정 방식) 다른 박스에 영향을 주며 작성한 순서대로 나열(위치 지정 불가) top, left, right, bottom의 영향을 받지 않음 relative 상대 좌표와 함께 위치를 지정(상대 위치 지정 방식) 태그가 만들어진 순서대로 나열 다른 박스에 영향을 주며 작성한 순서대로 나열(위치 지정 가능), 부모 박스의..

웹 폰트 webfont : 어떤한 링크, 도메인, 브라우저와 상관없이 웹 페이지 내에서 폰트가 연결되는 것이다. 일반적으로 스타일을 이용해서 연결하는 방법 - 내 컴퓨터 내에 설치된 폰트가 존재 웹 폰트를 적용하지 않았을 때 웹 폰트 - 어떤한 링크, 도메인, 브라우저와 상관없이 웹 페이지 내에서 폰트가 연결되는 것이다. - 일반적으로 스타일을 이용해서 연결하는 방법 > 내 컴퓨터 내에 설치된 폰트가 존재 웹 폰트를 적용했을 때 웹 폰트 - 어떤한 링크, 도메인, 브라우저와 상관없이 웹 페이지 내에서 폰트가 연결되는 것이다. - 일반적으로 스타일을 이용해서 연결하는 방법 - 내 컴퓨터 내에 설치된 폰트가 존재 webfont: cdn 즉 링크를 이용해서 서버상의 폰트를 가져와서 웹 페이지에 전달하는 방법 ..

form 웹 페이지에서의 입력 양식을 의미 회원가입 등 사용자가 정보 등을 입력받아 웹 서버로 전송하는 일을 하며, 전달받은 정보는 웹 서버로 전송되는데 세부적인 작업은 개발자의 담당이다. 정확한 정보를 전달하여 연결하기 위해서는 정보에 맞는 명확한 폼 양식이 필요하다. from 웹 페이지에서 입력양식의 그룹 원하는 정보를 연결하여 전달받기 위한 명확한 폼 양식 form 관련 속성 action : 폼을 전송할 서버 쪽 스크립트 파일을 지정 / 폼 데이터가 전송되는 경로 ex) name : 폼을 식별하기 위한 이름을 지정 / 폼의 이름(id를 부여하기도 한다.) ex) 아이디 : target : 서버로 제출된 내용이 열릴 위치를 명시 ex) method : 폼을 서버에 전송할 http 메소드를 지정 / 폼..