Language

전체 글 78

애니메이션 - 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

반응형 레이아웃 기본

■  레이아웃(Layout)전체적인 디자인 콘셉트와 계획에 따라 서체와 이미지 등 각각의 시각적 요소들을 한정된 공간 안에 적절하게 배치하는 것을 의미 인터페이스 디자인에서 레이아웃이란 화면의 전체적인 구도를 파악하고 심미적 요소들을 화면에 배치하는 것을 의미 시각적 인터페이스의 레이아웃을 결정하는데 있어서의 핵심은정보의 분류와 위계, 체계 등의 정보 설계, 즉 콘텐츠 구조임 레이아웃을 구성할 때에는 그리드가 명확해야 하며, 페이지 간의 일관성이 뛰어나 사용자가 어떤 페이지에 머물든지 간에 원하는 정보를 빠르게 찾을 수 있어야 한다. 그러나 모든 페이지가 일관적이기만 하면 페이지의 인상이 지루해질 수 있기 때문에일관성을 유지 하면서도 약간의 변화와 다양성을 줄 수 있어야 한다.레이아웃은 웹사이트의 심미성..

포트폴리오 기본

■ 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

Web 3 24-08

■ 8월 8일 - 1일차 ■ 반응형 웹 기본 ○ 반응형 웹 기본오늘날 다양한 기기와 해상도를 통해 웹 문서를 열람하고 있는데이로 인해 특정 기기, 브라우저에 국한 되지 않고다양한 환경에서 동일한 경험을 제공할 수 있는 웹 문서를 만들어야 한다.이것을 반응형 웹 이라고 함.  ○ 반응형 웹이란?다양한 기기나 브라우저의 크기에 맞게 구성이나 크기를 변경해 가며반응하는 웹문서 또는 이를 위해 사용하는 기법 스마트 모바일 기기 등장 및 태블릿 등장으로 웹문서 설계에 변화가 필요함모바일 전용 URL 제공, 데스크톱 전용 URL 따로 제공하는 방식도 있음. 그러나 기기의 유형의 다양해 짐에 따라 한계가 드러날 수 밖에 없음그로인해 사용하는 기기에 적절하게 맞춰지는 사이트를 개발 하는 것이 바람직해졌고가변성을 유지 ..