본문 바로가기

HTML／CSS87

[HTML] Progress step 만들기 오늘은 회원가입 등 다양한 곳에서 사용 될 수 있는 Progress Step 을 구현해보도록 하겠습니다. 1 2 3 4 Prev Next const progress = document.getElementById("progress"); const prev = document.getElementById("prev"); const next = document.getElementById("next"); const circles = document.querySelectorAll(".circle"); let currentActive = 1; next.addEventListener("click", () => { currentActive++; if (currentActive > circles.length) { curr.. 2022. 6. 19.
[HTML / CSS] 범위 슬라이더 (range slider) 사용해보기 오늘은 range slider 를 사용해보겠습니다. 먼저 가장 기본적인 형태를 만들어보겠습니다. 태그의 type 속성을 "range" 로 설정하면 아래와 같은 형태의 range slider 가 만들어집니다. 이제 css 를 입혀 보겠습니다. Value: type 이 "range" 이고, id 가 "myRange" 이며 class명이 "slider"인 엘리먼트를 만듭니다. 최댓값과 최솟값을 각각 1, 100으로 지정하고, 초기값은 100으로 설정합니다. 그리고 class명이 "slidecontainer"인 태그로 감싸줍니다. 그리고 다음과 같은 css 코드를 작성합니다. body { margin: 0 auto; width: 50%; } .slidecontainer { width: 100%; margin-t.. 2022. 5. 23.
[HTML / CSS] css border 속성을 이용해서 삼각형 도형 만들기 CSS border 속성을 이용해서 삼각형 도형을 그려보겠습니다. border 속성은 내용(content)과 패딩(padding) 영역을 둘러싸는 테두리의 스타일을 설정합니다. 그리고 top, right, bottom, left 각각의 border 속성을 따로 지정해줄 수 있습니다. ex) 아래의 정사각형은 class 가 "triangle"인 요소이고, top, right, bottom, left 테두리 속성을 각기 다른 색깔로 지정했습니다. 위에서는 border 의 두께를 모두 3px으로 줬는데, 만약 두께를 증가시키면 어떻게 될까요? 두께를 50px 로 설정해보겠습니다. 테두리 두께가 아주 많이 늘어났고 각 변의 테두리의 경계가 대각선으로 나타나는 것을 보실 수 있습니다. 만약 요소의 width, h.. 2022. 5. 10.
[HTML / CSS] 3D 텍스트 만들기 안녕하세요 오늘은 텍스트를 3D로 만들어보겠습니다. *결과 1. text-shadow css 함수 중에서 text-shadow 를 사용하면 텍스트에 그림자 효과를 적용할 수 있습니다. text-shadow: offset-x offset-y blur-radius color | none | initial | inherit offset-x : 그림자의 수평 거리를 정합니다. (필수) offset-y : 그림자의 수직 거리를 정합니다. (필수) blur-radius : 흐림 정도를 정합니다. (선택 : 값을 정하지 않으면 0) color : 색을 정합니다. (선택 : 값을 정하지 않으면 브라우저 기본값) none : 그림자 효과를 없앱니다. initial : 기본값으로 설정합니다. inherit : 부모 요소의.. 2022. 4. 20.
[HTML / CSS] 슬라이드 아이콘 만들기 안녕하세요 오늘은 홈페이지에서 슬라이드 아이콘을 만들어 보겠습니다. 마우스를 올리면 아이콘이 슬라이드 됩니다. 밀어서 입장하기 입장! 위 코드 중에서 아래와 같이 left 100% 로 설정하면 마우스를 올렸을 때 버튼이 오른쪽으로 움직이게 됩니다. .btn-slide:hover span.circle { left: 100%; margin-left: -45px; background-color: #36f355; } * 참고로 span태그는 p태그, div 태그와 비슷하지만 다릅니다. 차이점을 비교해보자면 아래와 같은 결과를 볼 수 있습니다. 코드로 보시면 아래와 같습니다. div{border:1px solid blue;} p{border:1px solid red;} span{border:1px solid gr.. 2022. 2. 8.
[HTML/CSS] 버튼 태그, 이미지 태그 예제 안녕하세요 오늘은 웹페이지를 꾸밀때 사용되는 버튼태그와 이미지 태그 예제에 대하여 알아 보겠습니다. 버튼 또는 텍스트를 클릭하면 원하는 페이지로 이동 할 수 있게 구현 할 수 있습니다. 관련 코드는 아래 스틱코드 링크를 참고해주세요 https://stickode.com/detail.html?no=2229 https://stickode.com/detail.html?no=2229 stickode.com *결과 1. 버튼 태그 사진보기 위와 같이 버튼 태그 코드를 한줄만 적으면 매우 간단하게 '웹 페이지 이동'을 구현 할 수 있습니다. 미리 만들어 놓은 text.html 페이지로 이동 하게 되는 것이죠. 여기서 href는 무슨 뜻일까요? href는 hypertext reference의 약자입니다. 다른 웹 페.. 2022. 1. 25.
[HTML/CSS] 탭 메뉴바 예제 안녕하세요 오늘은 탭 메뉴바로 사용 할 수 있는 예제 를 만들어 보겠습니다. *결과 해당 코드는 아래 스틱코드 링크에서 참고해주세요 https://stickode.com/detail.html?no=2720 스틱코드 stickode.com 1. 탭에 마우스를 올리면 color 가 바뀌는 것을 확인 할 수 있습니다. .tabs ul li a:hover { border-color: rgb(214, 241, 207); color: #90f383; } 여기서 color 값을 변경해주면 비활성화 된 탭에 마우스를 올렸을때 border와 text 가 원하는 color로 변경됩니다. 2. 꼭지점 둥글게 각도 조절하기 .tabs ul li a { background: #f6f6f6; font-weight: bold; t.. 2022. 1. 13.
[HTML/CSS] 좌우,상하로 움직이는 텍스트만들기 marquee태그를 사용해 텍스트를 우에서 좌로, 아래에서 위로 움직여 보겠습니다. 가로세로 여백 속성과, 움직이는 방향속성, 스크롤되는 양속성을 활용했습니다. ex) hspace="100" vspace="100" direction="up" scrollamount="2" -> 수평,수직여백100, 움직이는방향 위, 2픽셀씩 스크롤 해라 marquee의 속성입니다. 속성값을 활용해 다양하게 옵션을 활용할수 있습니다. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee 브라우저 호환성을 확인하고 사용하세요, 지원하지 않는 브라우저에서는 사용이 불가능합니다. behavior 선택 윤곽 내에서 텍스트가 스크롤되는 방식을 설정합니다. 가능한 값은 .. 2022. 1. 9.
[HTML/CSS] 검색어 입력상자 예제 만들기 안녕하세요 오늘은 웹페이지에서 자주 보았던 검색어 입력상자를 만들어보겠습니다. css 코드로 검색상자를 아래와 같이 커스텀 할 수 있습니다. css 코드는 아래 스틱코드 링크에서 확인해주세요 https://stickode.com/detail.html?no=2699 스틱코드 stickode.com 예제로 사용된 css 파일은 위와 같이 링크를 참조 하고 있습니다. 이 링크를 타고 가면 여러가지 스타일을 가져 올 수 있기 때문입니다. 예를 들어 버튼에 활용된 이미지 또한 저 링크를 타고 온 것입니다. 좀 더 자세히 설명드리면 아래 코드에서 .d1 button:before { content: "\f002"; font-family: FontAwesome; font-size: 16px; color: #F9F0DA.. 2022. 1. 2.

티스토리툴바