Language

HTML + CSS/기본 7

애니메이션 - Animation

■ 애니메이션 (Animation) 기본○ 애니메이션 정의애니메인션은 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시킴애니메이션은 애니메이션을 나타내는 CSS 스타일과애니메이션의 중간 상태를 나타내는 키프레임들로 이루어진다. ○ 애니메이션 하위 속성- animation-name : 중간 상태를 지정, 중간 상태는 @keyframes 규칙 이용 - animation-duration : 한 싸이클의 애니메이션이 얼마에 걸쳐 일어날지 지정 - animation-timing-function : 중간 상태들의 전환을 어떤 시간간격으로 진행 - animation-delay : 로드 되고 얼마만큼의 시간이 지난 후 실행될지 설정 - animation-iteration-count : 애니메이션이 몇 번 반복될지 ..

HTML + CSS/기본 2024.08.13

레이아웃 기본

■ 레이아웃(Layout)○ 레이아웃이란?- 구성요소를 공간에 효과적으로 배열하는 기술- CSS 레이아웃은 웹 요소를 올바른 장소에 배치하는 기술- CSS 레이아웃 기술은 형제 요소들을 가지런히 정렬할 수 있게 해주며요소가 컨테이너 내부에서 어떤 위치에 놓이게 될지 결정할 수 있다. ■ 대표적인 레이아웃 기술○ 일반적인 문서 흐름 ○ box모델 ○ display 속성 ○ position 속성 ○ flex box ○ grid layout

HTML + CSS/기본 2024.08.12

포트폴리오 기본

■ HTML, CSS 기본 ○ HTMLHypertext Markup Language의 약자로 웹 페이지를 만드는 데 사용하는 언어또한 HTML은 마크업 언어로써, 여러 가지 태그를 이용하여 제목이나 문단 등을 구분해 정보를 구조화할 수 있다.마크업 언어는 주어진 데이터를 구조화하고 형식을 나타낸다는 점에서변수나 함수 등을 이용해 기능을 구현하는 프로그래밍 언어와 차이가 있다.      ○ CSSCSS는 Cascading Style Sheets의 약자로 기본적인 스타일이 이미 지정된 HTML 요소를개발자가 직접 다양한 스타일로 디자인할 수 있는 언어.     ○ 시맨틱 태그 (Semantic Tags)시맨틱 태그는 태그 이름 자체만으로도 해당 태그가 페이지 내에서어떤 역할을 하는지 알 수 있도록 의미가 담..

HTML + CSS/기본 2024.08.12

Image, background-image 기본

자동 이미지 사이트 : lorem picsumhttps://picsum.photos/id/237/200/300id를 변경하면 다른 이미지가 나옴뒤에는 너비와 높이 변경https://picsum.photos/200/300랜덤한 이미지 나옴  ■ img 태그○ img 태그- 자체 닫는 태그로 끝에 별도의 닫는 태그가 필요하지 않는다.- 기본 display = inline-block 임 ○ 주요 속성- src(source) : 이미지의 url을 지정* 절대 url : https://www.abc.com/image.jpg * 상대 url : img/image.jpg (현재 페이지에서 img폴더내 jpg파일 참조) - alt(alternative text)* 이미지가 표시되지 않을때 사용자에게 보여질 텍스트* 검..

HTML + CSS/기본 2024.08.12