본문 바로가기

coding/css

(31)
[css] 텍스트 줄바꾼 단어단위로 하기 안녕하세요. 플입니다. 오늘은 텍스트 줄 바꿈 설정을 바꿔볼 거예요. 1. 텍스트 준비 일단 텍스트를 준비합니다. 이런 줄 바꿈이 엉망징창이군요. 만약 pc에서만 작동하는 홈페이지를 만든다면 간편하게 태그를 사용해도 무리가 없지만 반응형을 제작하는 사람이라면 모바일이나 화면이 줄어들 때마다 태그를 이동시킬 수도 없으니 고민이 많을 거예요. 오늘은 그런 줄 바꿈을 깔끔하게 만드는 방법을 알아볼 거예요. * 태그는 줄 바꿈을 위한 태그로 줄 바꿈하고 싶은 위치 맨 마지막에 적어주면 그다음 글자부터 아래줄로 내려가게 된다. 2. word-break p{ word-break:keep-all; } word-break을 넣어주면 단어를 기준으로 줄 바꿈을 해줍니다. 좀 더 정확히 말하자면 띄어쓰기를 기준으로 줄바꿈..
[css] transform을 이용해 뒤집는 애니메이션 만들기 안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러스 + rat(쥐) 조합이 마음에 들었죠. 블루는 정말 단순한 작명이라고 생각하고는 있어요. Q.1 뒤집는 애니메이션을 만들 때 중요한 포인트는 앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 에 넣은 클래스를 주목해주세요. front와 back로 앞뒤를 구분해주었어요. 이게 뒷면 이게 앞면이에요. 기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요. 2. 포지션 li{ position:relative; } .front{ position:absolu..
[css] 마우스 올리면 나타나는 버튼 만들기 안녕하세요. 플입니다. 마우스 올리면 나타나는 버튼의 css를 진행해볼게요. 1. html 보고오기 2020/05/22 - [Try/coding] - [html] 마우스를 올리면 나타나는 버튼 만들기 2. 전체 css li{ float:left; width:30%; margin:0 1%; height:218px; border:3px dashed $sub_color; a{ display:none; position:relative; width:100%; height:218px; text-align:center; background: $sub_color; line-height: 218px; color:$main_color; font-size:28px; font-family:'NanumBarunpen'; fon..
[css] 배경 이미지 고정하기 안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가..
[css] linear-gradient 반반무많이 2탄 안녕하세요. 플입니다. liner-gradient를 사용할 때 주의할 점이 있어서 2탄으로 돌아왔습니다. 1. liner-gradient https://ssimplay.tistory.com/239 [css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요?.. ssimplay.tistory.com 배경색 반나누는 1탄은 링크로 남겨둘게요. 2. 그라데이션이 되는 이유 아 퍼센트를 조정하면 두가지색으로 나눌 수 있겠군! 하고 신나서 만들었는데 그라데이션이 된 경우가 있으신가요? div{ background:linear-gradien..
[css] 배경색 반반 무많이 안녕하세요. 플입니다. 오늘은 배경색을 반씩 나눠서 두 가지 색으로 만들어볼게요. 1. 크기 정하기 이렇게 이미지가 색 경계에 걸쳐있을 때가 있어요. 코딩 안된다고 시안을 막 뜯어고치는 건 너무 슬프잖아요? 심지어 내가 만든 시안이 아닐 때는 더욱더 난감하겠죠. css3가 된 뒤로는 코딩으로도 만들 수 있으니 배경을 나눠봅시다! .visual{ height:1000px; border:1px solid red; } 먼저 배경이 들어갈 영역의 크기를 정해주세요. 저는 한 1000px 정도 줬고요. 테두리는 아래가 흰색이라 잘 보이라고 넣어줬습니다. 테두리는 없어도 괜찮아요. 2. linear-gradients .visual{ background: linear-gradient( #fff5bf 80%, #fff..
[css] 최우선 적용 안녕하세요. 플입니다. css 선언 방법 중 최우선 적용되는 방법은 어떤 방법일까요? 1. inline inline 방법은 html에서 태그에 직접 style을 입력하는 방법이에요. 태그에 직접적으로 입력해서 가장 최우선으로 적용돼요. 다만 유지보수가 힘들어서 권장하는 방법은 아니에요. html 코드가 길어지면 style 하나를 고치기 위해 엄청 긴 코드를 일일이 뒤져야 할 테니까요. 2. intermal inline보다 유지보수가 수월한 internal 방법이에요. p{ color:yellow; } external 방식은 가장 권장하는 방식이에요. 태그에 css파일을 연결해서 불러오는 방식이라 html 문서에서 style을 작성할 필요가 없어요. css 파일을 새로 만들어서 필요한 html문서에 연결만..
[css] z-index 안녕하세요. 플입니다. z-index에 대해 그려봤어요. 2. z-index z-index z-index는 겹치는 요소들 간의 순서를 정리해줄 때 사용해요. 위쪽으로 올리고 싶은 요소에 값을 더 크게 적어주는데 z-index: 30; 위처럼 숫자를 값으로 입력하고, 숫자가 높을수록 위쪽으로 올라온답니다. 포토샵의 레이어와 동일하다고 여기면 조금 더 쉽게 이해할 수 있죠. 포토샵을 몰라도 괜찮아요. 이렇게 생각해보면 어떨까요? 1층보다는 2층이 위에 있죠. 숫자는 그런 의미랍니다. 일반적으로 요소들이 겹치는 일은 거의 없지만 position을 사용하면 이야기가 달라져버립니다. 한 요소에만 position을 사용한다면 상관없겠지만 사람 일이라는 게 그렇게 마음대로 되지는 않다는 걸 저희는 이미 알고 있죠. ..