'CSS' 태그의 글 목록 (6 Page)

[css] 도형을 회전시키는 애니메이션을 만들어보자

css 만으로도 약간의 애니메이션 기능을 넣을 수 있답니다. 신기하죠? 그럼 바로 시작해볼까요? 1. transform div:hover{ transform: rotate(45deg); } transform 기능을 이용해 도형을 회전시켜보겠습니다. 사실 css의 속성 이름은 굉장히 직관적입니다. 영어라서 괜히 어려워 보이는 것뿐이랍니다. 한글로 써본다면 조금 더 이해하기 쉬울 겁니다. div:hover{ 변형 : 회전 (45도) } 영어가 동사라 정확한 번역은 아니지만 중요한 부분이 아니니 넘어가겠습니다. 의미는 같으니까 말입니다. 어떠신가요? 한글로 보니까 조금 더 이해하기 쉽지 않나요? 변형하는데 45도로 회전하겠다는 의미라는 게 잘 보이죠. 2. 실제 적용 See the Pen WNxWMyz by ..

coding/html + css · 2020. 11. 22. 07:30

[html] html을 대충 이해해보자

안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지를 만들 때 쓰는 언어예요. 웹페이지의 뼈대를 만드는 언어죠. 티스토리를 하다 보면 종종 만날 기회가 있죠. 완벽한 비유는 아니지만 그림으로 표현하자면 이런 느낌이랄까요. html은 스케치 css는 색칠이라고 생각하면 좀 더 이해하기 쉬우실 거예요. 약속한 구조를 지키는 규칙이 있기도 한데 이거는 우선은 넘어가도록 해요. 2. 열기 닫기 아무말 html에는 열기랑 닫기가 있어요. 위의 코드를 보면 아시겠나요? 가 여는 부분이고 가 닫는 부분이에요. 조금 더 자세히 볼까요?..

coding/html + css · 2020. 9. 29. 07:30

[css] css 속성 강제 적용하기 (우선 적용)

안녕하세요. 플입니다. 오늘은 css를 강제로 적용해볼게요. 코드를 바로 확인하실 분은 3번으로 넘어가 주세요! 1. 기존 css 확인 오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요. 다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다. 먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠? 오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다. 기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 .sto{ background:#fff5bf; } 라고 생각하고 진행할게요. 색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~ https://ssimplay.tistory.com/243 [css] linea..

coding/html + css · 2020. 9. 17. 07:30

[css] 긴 문장의 단을 나눠보자

안녕하세요. 플입니다. 오늘은 단을 나눠볼 거예요. 1. 단 우선 단이란 무엇일까요? 이미지에서 빨간 부분이 보이시나요? 그 부분을 한 단 이라고 합니다. 잡지에서 저렇게 세로로 한 뭉텅이를 단(column/칼럼)이라고 부르고 단을 나눈다는 말은 단을 여러 개로 만들어 문장을 쪼개서 넣는다는 의미예요. 이미지를 보면 총 네 단으로 있는 것을 알 수 있죠. 2. 웹에서 단 나누기 잡지에서는 알았는데 그럼 웹에서는 단을 어떻게 나눌까요? 일단 예제를 위해 의미 없는 문장을 가득 채워줄게요. https://ssimplay.tistory.com/179 [html] 의미 없는 문장 채우기 안녕하세요. 플입니다. 샘플로 한 문단 정도 아무런 말이나 채우고 싶을 때가 있죠. 그럴 때 어떤 방법을 사용할까요? 1. 문..

coding/html + css · 2020. 9. 4. 07:30

[css] 텍스트 줄 바꿈 단어 단위로 하기

css로 텍스트 줄 바꿈 단위를 자동으로 단어 단위로 끊어서 하게 만들어보겠습니다. 1. 텍스트 준비 일단 텍스트를 준비합니다. 이런 줄 바꿈이 엉망징창이군요. 만약 pc에서만 작동하는 홈페이지를 만든다면 간편하게 태그를 사용해도 무리가 없지만 반응형을 제작하는 사람이라면 모바일이나 화면이 줄어들 때마다 태그를 이동시킬 수도 없으니 고민이 많을 거예요. 오늘은 그런 줄 바꿈을 깔끔하게 만드는 방법을 알아볼 거예요. * 태그는 줄 바꿈을 위한 태그로 줄 바꿈하고 싶은 위치 맨 마지막에 적어주면 그다음 글자부터 아래줄로 내려가게 된다. 2. word-break p{ word-break:keep-all; } word-break을 넣어주면 단어를 기준으로 줄 바꿈을 해줍니다. 좀 더 정확히 말하자면 띄어쓰기를 ..

coding/html + css · 2020. 6. 12. 07:30

CSS 56