HTML17 HTML_기업은행홈페이지_2024-08-08 기업은행홈페이지1) 목표 설정 : 만들고 싶은 홈페이지의 종류와 기능을 명확히 정의합니다.2) 구조 설계 : 페이지 구성, 메뉴 구성, 콘텐츠 배치 등을 미리 계획합니다.3) 디자인 구상 : 전체적인 디자인 컨셉, 색상, 글꼴 등을 정합니다. 그림부분을 라이브러리로 작업합니다. (요구사항)1) 라이브러리 : https://swiperjs.com/, https://bxslider.com/2) 그림 무료사용 : pxels(픽셀), pixabay(픽서베이)3) 닷홈에 홈페이지 배포(deployment) index1.html 개인뱅킹 .. 2024. 8. 8. HTML(홈페이지만들기_주의사항)_2024-08-01 계획 세우기목표 설정: 만들고 싶은 홈페이지의 종류와 기능을 명확히 정의합니다.구조 설계: 페이지 구성, 메뉴 구성, 콘텐츠 배치 등을 미리 계획합니다.디자인 구상: 전체적인 디자인 컨셉, 색상, 글꼴 등을 정합니다. 코딩 시 주의사항문법 오류: 각 언어의 문법 규칙을 정확히 지켜야 합니다.세미콜론: JavaScript에서는 세미콜론을 꼭 붙여야 합니다.따옴표: 속성 값은 항상 따옴표로 감싸야 합니다.닫는 태그: 모든 시작 태그에는 반드시 닫는 태그가 있어야 합니다.ID와 클래스: 중복되지 않는 고유한 ID와 클래스를 사용해야 합니다.인라인 스타일: 되도록이면 외부 스타일 시트를 사용하여 코드를 정리하고 관리해야 합니다.주석: 코드에 주석을 달아 가독성을 높입니다. 성능 최적화이미지 최적화: 이미지 크기.. 2024. 8. 1. HTML_현대자동차홈페이지_2024-07-15 현대자동차홈페이지1) 목표 설정 : 만들고 싶은 홈페이지의 종류와 기능을 명확히 정의합니다.2) 구조 설계 : 페이지 구성, 메뉴 구성, 콘텐츠 배치 등을 미리 계획합니다.3) 디자인 구상 : 전체적인 디자인 컨셉, 색상, 글꼴 등을 정합니다. 그림부분을 라이브러리로 작업합니다. (요구사항)1) 라이브러리 : https://swiperjs.com/, https://bxslider.com/2) 그림 무료사용 : pxels(픽셀), pixabay(픽서베이) 3) 닷홈에 홈페이지 배포(deployment) car.html 회사소개 모델 이 달의 추천 문의하기 .. 2024. 7. 16. HTML(media_query)_2024-07-12 미디어 쿼리(media query)CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다.예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있습니다.CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다.미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않.. 2024. 7. 14. HTML(Animation)_2024-07-10 AnimationCSS3에서는 animation 속성을 사용하여 요소의 현재 스타일을 다른 스타일로 천천히 변화시킬 수 있습니다.CSS2에서는 이러한 효과를 표현하기 위해서는 자바스크립트나 플래시 등의 외부 플러그인을 사용해야만 했습니다.하지만 CSS3에서는 이러한 애니메이션 효과를 손쉽게 적용할 수 있게 되었습니다. @keyframes 규칙CSS3에서 애니메이션 효과를 사용하기 위해서는 우선 애니메이션에 대한 키 프레임(keyframe)을 정의해야 합니다.키 프레임(keyframe)에는 특정한 시간에 해당 요소가 가져야 할 CSS 스타일을 명시합니다.@keyframes 규칙 안에 이렇게 CSS 스타일을 설정해 놓으면, 해당 요소의 스타일은 특정 시간까지 현재 스타일에서 설정해 놓은 새로운 스타일로 천천.. 2024. 7. 11. HTML(transition)_2024-07-10 전환(transition)전환(transition)을 위해 제공되는 속성(property)는 다음과 같습니다.1. transition2. transition-delay3. transition-duration4. transition-property5. transition-timing-function transition 속성transition 속성은 다음과 같은 순서로 정의할 수 있습니다.1. 해당 요소에 추가할 CSS 스타일 전환(transition) 효과를 설정합니다.2. 추가할 전환 효과가 지속될 시간을 설정합니다.다음 예제는 해당 요소에 마우스를 올려놓으면 해당 요소의 너비가 1초 동안 3배로 늘어나는 예제입니다.예제 또한, 해당 요소의 여러 속성을 동시에 변경할 수도 있습니다.다음 예제는 해당 요소.. 2024. 7. 10. 이전 1 2 3 다음
