퍼블리싱/HTML&CSS (23) 썸네일형 리스트형 CSS로 삼각형안에 이미지 넣기 CSS를 이용해 삼각형안에 이미지 넣는 방법에 대해 적어봅니다. 간단히 설명하면 border를 이용해 삼각형을 만들고, 그 뒤에 background-image를 통해 이미지를 넣는 방식입니다. 완성 샷! 조금 무섭긴 한데, css로 세모안에 원숭이 이미지를 넣어봤습니다. html 1 2 cs css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 .triangle{ width: 0; height: 0; border-left: 100px solid #fff; border-right: 100px solid #fff; border-bottom: 200px solid transparent; z-index: 1; } .triangle::after{ width: 200px; height:.. [CSS/JQUERY] 풀스크린 메뉴( 화면 꽉찬 메뉴) 만들기 햄버거메뉴를 누르면 화면을 꽉채우는 메뉴가 나오고, Close버튼은 누르면 다시 없어지 메뉴를 만들어 보려고 합니다. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 메뉴01 메뉴02 메뉴03 메뉴04 Colored by Color Scripter cs HTML는 크게 두개의 div로 나눠져 있습니다. div.header부분은 메뉴 햄버거버튼이 있는 부분이고, div.fullscreen_menu는 풀스크린 메뉴를 감싸는 div입니다. 메뉴 아이콘은 무료 사이트에서 가져왔어욤. CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 .. CSS 적용 우선 순위 및 !important 사용법 웹사이트를 계속 유지보수 하다보면 웹사이트를 계속 유지보수 하다보면 파일이 많아지고 어디에 무엇을 썼는지 찾기 힘들어지고, CSS가 안먹히는 경우가 종종생기고 합니다. 그럴때 중요한 것중에 하나가 CSS 우선순위 일것 같습니다. 우선순위에서 밀리면 CSS가 적용되지 않기 때문이예요! 요건 CSS적용 안될 때 해볼 만한 것들에 적었던 포스팅이예요! 2020/03/16 - [퍼블리싱/HTML&CSS] - [CSS]CSS가 안먹을때 해볼만한 것들 [CSS]CSS가 안먹을때 해볼만한 것들 유지보수를 하다 보면 내가 정확히 쓴 것 같은데 CSS가 안 먹힐 때가 많다. 그럴 때 해볼 만 것들을 적어보려고 한다. CSS가 안먹을 만한 이유 01. 캐시문제 02. 그전에 쓰였던 CSS와 충돌 03. 겹쳐서 �� ddo.. [CSS]background-image 안나올때 "background-image 맞게 쓴거 같은데 왜 안나오는 거지?" background 이미지를 넣을때 분명 제대로 넣은 것 같은데 안나올 때가 가끔 있습니다. 그럴때 확인해 볼 만것 들에 대해 적어보려고 합니다! 체크해보자! 안되는 경우의 수가 여러 있겠지만 이런 경우 안되지 않을까 싶습니다. 1. 배경이미지가 들어갈 공간에 높이가 설정되어있는지? 2. 배경이미지의 경로를 제대로 설정했는지? 3. 단축 속성과 혼용하지 않았는지? 1. 배경이미지가 들어갈 공간에 높이가 설정되어있는지? 박스 안에 이미지를 나오게 할때, 이미지로 나올 것인지 배경이미지로 넣을 것인지에 따라 크기를 인지 하는지 차이가 있습니다. 배경이미지로 넣을때는 박스의 가로값, 세로값을 설정해줘야 합니다. 또는 가로 세로 값이 있는 .. [CSS] 배경이미지로 아이콘 한번에 넣기 아이콘이 많이 들어가거나 중복되는 아이콘이 많은 경우, 이미지를 하나씩 넣다보면 관리하기도 힘들고 또 용량이 많이들어가니깐(아이콘들 작아서 괜찮나(?)) 그때 이미지 하나로 넣어주면 간편하게 사용할 수 있다. 01. 하나의 이미지로 만들어준다. 들어가야 하는 아이콘은 적당히 여백을 주고, 하나의 이미지로 만들어준다. 너무 빡빡하게 아이콘을 붙여놓으면 조정하다가 다른 아이콘이 보여서 다시 만들어야 하는 경우가 있으니, 여백을 좀 주는게 좋다. EX) * 아이콘은 무료 아이콘들이 많은 flaticon에서 가지고 왔는데, 쓸모 있을진 모르겠지만 귀여운 아이콘들이 많다. 02. HTML 버튼(아이콘)이 만들어질 html를 만들어준다. 버튼이 눌려야 하니 a태그로 감싸준다. 1 2 장바구니 계산하기 cs 03. .. [CSS]배경이미지에만 OPACITY 적용(multiple효과) '배경만 흐리게 또는 배경에 색상필터를 줄 수 있는 방법이 없을까?' '배경만 살짝 어둡게 해서 글씨가 더 잘보이게 하고 싶은데 어떻게 하면 좋을까?' 고민하면 발견한 방법에 대해 적어봅니다. 문제점! : OPACITY를 주면 글씨도 같이 적용됨 HTML 1 2 3 배경만 투명하게 cs CSS 1 2 3 4 5 .box01{width: 500px;height: 300px; background: url(https://cdn.pixabay.com/photo/2020/06/28/00/04/chicago-5347435_960_720.jpg); background-size: cover; opacity: 0.5; } .box01 h1{color: rgb(121, 68, 219);text-align: center;l.. [CSS]박스사이징(box-sizing) 활용하기 레이아웃을 만들다보면, 테두리, 패딩등 때문에 사이즈가 헷갈리기 시작한다. 그 때 css속성으로 'box-sizing' 과 'clac()'를 활용하면 좋을 것 같다. 2020/03/13 - [퍼블리싱/HTML&CSS] - [CSS]div 3개 레이아웃 만들기( calc() 사용법) [CSS]div 3개 레이아웃 만들기( calc() 사용법) html로 레이아웃을 짜다보면 객체들에게 똑같은 가로값을 주고 싶은데 계산하기 쉽지 않을때가 많습니다. 또 반응형으로 웹사이트를 만들다보면, 값을 딱 지정해 놓으면 브라우저 크기마다 다르 ddorang-d.tistory.com 1 .box{box-sizing: content-box / border-box} cs - box-sizing:content-box : 기본값,.. [CSS] 콘텐츠 화면 정가운데 정렬하기 창크기를 변경해도 가운데에 있게 만들 수 있는 방법입니다. 로고를 대문으로 또는 임시 안내문구등을 넣을때 활용하면 좋을것 같아요. 먼저 html를 만들어줍니다. HTML 1 2 3 Colored by Color Scripter cs CSS 1 2 3 html{height: 100%;} body{position: relative;width: 100%;height: 100%;} .logo_box{position: absolute;top: 50%;left: 50%;margin:-150px 0 0 -150px} cs 아주 간단하다. 가운데 정렬하고 싶은 콘텐츠를 position:absolute를 주고, 부모에게 position:relative를 준다. 컨텐츠를 top에서 50%만큼 left에 50%만큼 밀어낸 .. 이전 1 2 3 다음
