본문 바로가기
반응형

HTML5, CSS23

[CSS] 반응형에서 css width 작성법(max-width) 안녕하세요 반응형웹에 width 작성법 소개드립니다. 보통 반응형일때 width값을 %로 지정을 해주는데요. 메인 비주얼 값을 적용할때도 이미지가 꽉 들어 차야하므로 width:100%; 를 주게됩니다. 그런데 창을 너무 크게 하면 이미지가 계속 커져서 이미지로 가득해지는 화면을 보실수 있으실겁니다. 그때 max-width를 같이 넣어주면 됩니다. 일반적인 메인 비주얼 구조 css .visual{width:100%;margin:0 auto; max-width:1200px;} .visual img{width:100%;} html visual 클래스에 max-width:1200px; 을 작성해 주면서 최대 넓이는 1200px로 지정이 됩니다. 1200px 이상으로 커질시에는 width:1200px; 해준값과.. 2022. 10. 7.
[CSS] z-index 사용 html을 작성할때, 내가 원하는 컨텐츠가 가려지거나 더위에 보이게 하고 싶을때가 있다. 그럴때 z-index를 사용해 컨텐츠의 우선순위를 정해줄 수 있다. 사용방법 z-index : 숫자(높을수록 우선순위가 높으며 음수값을 설정할 수 있다.) CSS img{position:absolute;top:0;left:0;z-index:-1;} .box{width:30px;height:30px;background:red;} HTML img에 position:absolute, top, left를 0값으로 주어 맨왼쪽 위에 고정시켰다. box클래스 div에는 30px의 빨간 정사각형이 이미지 위에 올라오게 작성하기 위해 img에 z-index값을 -1로 지정해 주었습니다. 이미지 img값이 z-index값이 음수가 .. 2022. 10. 5.
[HTML] 이미지맵 (imagemap) 사용법 이미지맵(imagemap)이란? html에서 이미지에 부분적으로 링크를 걸때 사용한다. 예를들면 큰 이미지가 있을때 큰 이미지 전체에 링크를 거는것이 아닌 일정 부분에만 링크를 걸고 싶을때 사용합니다. 구조 위는 이미지맵 구조인데, 주의할 점은 이미지의 usemap과 map태그의 name값을 맞춰 주어야 합니다. 이미지맵 좌표 얻는 방법 저는 이미지맵 해당 사이트를 이용하는데요, 포토샵, 그림판등으로 좌표를 얻을수 있지만 번거롭고 불편하더라구요. 밑에 사이트로 편하게 좌표를 얻어 올수 있습니다. http://maschek.hu/imagemap/imgmap/ maschek.hu - Online Image Map Editor maschek.hu 사이트 사용방법 사이트에 접속하시면 위와 같은 화면이 나오는데,.. 2022. 9. 30.
[html] 따라다니는 이미지 버튼 만들기 홈페이지 양옆 또는 맨아래에 따라다니는 이미지 만드는 방법입니다. 버튼에 position:fixed를 주면 현재 화면에 버튼이 고정되며, 스타일에서 top,left 등으로 위치를 정해주면 됩니다. html 부분 html 부분은 btn이라는 클래스로 잡아두고 간단히 작성했습니다. css부분 .btn{ position:fixed; right:10px; bottom:30px; } css 부분은 btn에 position만 fixex 해두고 오른쪽에서 10px 떨어진곳, 바닥에서 30px 떨어진 쪽에 버튼이 고정됩니다. 2022. 9. 22.
반응형

티스토리툴바