본문 바로가기

CSS

[Css] 위아래로 움직이는 사진,그림,이미지 만들기 & 예제 움직이는 사진,그림,글자 만들기 정적인 글자,그림(사진)에 동적인 효과를 주면 어떨까? 글쓰기 에디터는 글자나 이미지에 동적인 움직임을 주는 기능이 없는 정적임만이 존재하지만 간단한 코드 단 몇 줄로 텍스트 또는 이미지 등 모든 요소에 동적인 힘을 실어줄 수 있다. 이번 주제 강의 포인트 이번 주제 강의 포인트는 css 속성인 animation과 keyframes에 있다. animation과 @keyframes 사용법 예를들어 그림에 동적인 효과를 주려면 그림 요소에 animaton속성을 주어야한다. animation : up-down 1.4s infinite ; 속성 : 키프레임 초단위 반복 이런 식으로 3가지 이상 속성효과를 적용할 수 있다. 그리고 빨간 밑줄로 표시된 키프레임은 앞에 @를 써서 애니.. 더보기
[CSS] 마우스 올릴때 점점 늘어나는 네모칸 상자 만들기 네모난 상자에 마우스를 올리면 상자가 점점 커지는 텍스트 이미지 상자 만드는 방법 평범한 네모칸인데 평범하지 않다? html css에서 '마우스를 올릴때'를 말하는 속성은 Hover 이다. 즉, 다시말해 '마우스를 올릴때' 어떠한 반응을 하게 해주는 속성이다. 이 속성은 어떻게 사용하느냐 어떤 속성들과 조합해서 사용하느냐에 따라 천차만별로 다양한 효과를 만들어 낼 수 있는 아주 유용한 속성이다. Hover 사용 방법 hover는 텍스트(글자), 이미지(사진) 등 골고루 쓰일 수 있는 css 속성이다. 예를들어 div요소에 hover를 사용하고자 한다면, div : hover 라고 써줘야 한다. 아래에서 hover 속성이 어떤식으로 쓰이는지 코드를 보면 더 쉽게 이해가 간다. 활용 예제 아래 네모칸에 마우.. 더보기
[CSS] 코드로 회전하는 '로딩중...'표시 만드는 법 Html,Css만을 이용하여 코드로 회전하는 '로딩' 표시 만들기 스피어란? 로딩중일때 표시되는 모양은 주로 원형 모양으로 제자리에서 무한회전하는 모습이다. 이 모습을 본따 로딩 표시 기능을 '회전하다'를 의미하는 영단어인 '스피어'라고도 한다. 수 많은 웹페이지에서 서핑을 하다보면 웹페이지내 용량이 많아 로딩이 길어지거나 짧은 로딩에도 인위적으로 디자인적인 요소를 주기위해 '로딩중'표시를 넣는 경우가 많다. 스피어 사용 예시 -여러 색깔로 변하며 무한회전하는 스피어 흔히 자주 보는 원형 모양의 스피어 코드 적용하기 HTML-------------------------- CSS------------------------------ $green: #008744; $blue: #0057e7; $red: #d.. 더보기
[Css] 툴팁이란? 흔히 보는 툴팁 사용 예 마우스 포인터를 텍스트(글자) 위에 올릴때 나타나는 팁(설명) 나타내기 툴팁이란? 마우스 포인터를 특정 텍스트나 이미지 같은 요소에 올릴때 나타나는 팁(설명)입니다. 주로 div요소나 position요소를 사용하여 나타냅니다. 툴팁 사용 예시1 -div요소로 만들어진 기본 툴팁 마우스를 아래 텍스트 위에 올려보세요. ▶여기에◀ 툴팁입니다 마우스를 아래 텍스트 위에 올려보세요. ▶여기에◀ 툴팁입니다 툴팁 사용 예시2 -position요소로 만들어진 말풍선 모양 툴팁 마우스를 아래 텍스트 위에 올려보세요. ▶이곳에◀ 말풍선모양 툴팁 마우스를 아래 텍스트 위에 올려보세요. ▶이곳에◀ 말풍선모양 툴팁 툴팁 사용 예시3 -기타 요소를 사용해 스타일 변화를 준 툴팁 마우스를 아래 글자 위에 올려보세요. ▶이곳에◀ .. 더보기
[CSS] 글자,이미지 중앙 가운데 정렬하는 방법 html,css 이미지 중앙 정렬하는 방법들 총정리 글자와 이미지,사진 가운데 정렬하기를 중심으로 정렬하기에 대한 속성들을 정리해보았습니다. 1. 글자 가운데 정렬하기 text-align: center; 2. 사진 가운데 정렬하기 - margin 속성 display: block; margin-left: auto; margin-right: auto; margin: 0; margin-left: auto; margin-right: auto; - line-height / inline-block 속성 line-height: 200px; height: 200px; text-align: center; line-height: 1.5; display: inline-block; vertical-align: middle; .. 더보기
[Css] float을 이용한 정렬,개념 & 예제 안녕하세요. 키미추입니다. 이번 강좌에서는 div를 정렬하기에 가장 편리한 Float의 속성과 개념을 배워볼텐데요. margin padding 값을 일일이 수동으로 조정할 필요없이 더욱 더 심플하게 float을 이용한 정렬,배치를 알아보겠습니다. 1. 실제 사용되는 구조와 패턴들 사이트를 보면 뉴스,광고,블로그,쇼핑몰 등 항상 사진 옆에 텍스트가 있는 형태를 많이 보았을 거예요. 쉽게 말하면 같은 행인데 글자와 사진이 2열로 나뉘어 양옆으로 나란히 있죠. 2-1. float의 개념 float의 사전적 의미는 '뜨다,부유키시다'이면서 Css에서 글자나 이미지와 같은 덩어리를 정렬해주는 기능입니다. Html에서 내용을 쓰면 내용이 위에서 아래로 내려가 단순하게 보여질뿐인데, 화면에 다양한 배치와 정렬을 하기.. 더보기
[Css] 글자,텍스트에 그라데이션 만들기 & 예제 안녕하세요. 키미추추입니다. 이번에 [코딩_첫강좌]로 CSS로 글자에 그라데이션 만들기를 오픈하였습니다. 이미지와 설명,예제를 통해 누구나 쉽게 따라할 수 있는 코너로 개설되었으니 설명을 잘 읽어주세요. [Htrml강좌] 클릭시 특정 위치로 이동하기와 예제보기 키미추추 블로그 제목에 마우스를 갖다대면? 저는 마우스를 갖다댈때 그라데이션 효과가 나타나도록 따로 속성을 주었기 때문에 텍스트에 핑크색에서 파랑색으로 자연스럽게 이어지는 예쁜 그라데이션 효과가 나옵니다. 우선 css,html에서 글자에 색상을 입히는 방법은 매우 쉽습니다. color: #색상코드;만 써주기만 하면 내가 원하는 색상으로 글자색이 쉽게 바뀌는데 반면 한 가지 단색으로만 되니 그라데이션 효과주기는 어려웠을 거예요. 1.코드 적용하기 일.. 더보기

티스토리툴바