본문 바로가기
728x90
반응형

CSS30

[html] html을 대충 이해해보자 안녕하세요. 플입니다. 오늘은 html에 대해서 이해해보도록 해요 1. html html은 "Hyper Text Mark-up Language"의 약자입니다. 하지만 이렇게 말하면 너무 어렵고 무슨 소리인지 모르겠죠. html은 웹페이지를 만들 때 쓰는 언어예요. 웹페이지의 뼈대를 만드는 언어죠. 티스토리를 하다 보면 종종 만날 기회가 있죠. 완벽한 비유는 아니지만 그림으로 표현하자면 이런 느낌이랄까요. html은 스케치 css는 색칠이라고 생각하면 좀 더 이해하기 쉬우실 거예요. 약속한 구조를 지키는 규칙이 있기도 한데 이거는 우선은 넘어가도록 해요. 2. 열기 닫기 아무말 html에는 열기랑 닫기가 있어요. 위의 코드를 보면 아시겠나요? 가 여는 부분이고 가 닫는 부분이에요. 조금 더 자세히 볼까요?.. 2020. 9. 29.
[css] css 속성 강제 적용하기 (우선 적용) 안녕하세요. 플입니다. 오늘은 css를 강제로 적용해볼게요. 코드를 바로 확인하실 분은 3번으로 넘어가 주세요! 1. 기존 css 확인 오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요. 다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다. 먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠? 오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다. 기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 .sto{ background:#fff5bf; } 라고 생각하고 진행할게요. 색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~ https://ssimplay.tistory.com/243 [css] linea.. 2020. 9. 17.
[css] 긴 문장의 단을 나눠보자 안녕하세요. 플입니다. 오늘은 단을 나눠볼 거예요. 1. 단 우선 단이란 무엇일까요? 이미지에서 빨간 부분이 보이시나요? 그 부분을 한 단 이라고 합니다. 잡지에서 저렇게 세로로 한 뭉텅이를 단(column/칼럼)이라고 부르고 단을 나눈다는 말은 단을 여러 개로 만들어 문장을 쪼개서 넣는다는 의미예요. 이미지를 보면 총 네 단으로 있는 것을 알 수 있죠. 2. 웹에서 단 나누기 잡지에서는 알았는데 그럼 웹에서는 단을 어떻게 나눌까요? 일단 예제를 위해 의미 없는 문장을 가득 채워줄게요. https://ssimplay.tistory.com/179 [html] 의미 없는 문장 채우기 안녕하세요. 플입니다. 샘플로 한 문단 정도 아무런 말이나 채우고 싶을 때가 있죠. 그럴 때 어떤 방법을 사용할까요? 1. 문.. 2020. 9. 4.
[css] 텍스트 줄바꾼 단어단위로 하기 안녕하세요. 플입니다. 오늘은 텍스트 줄 바꿈 설정을 바꿔볼 거예요. 1. 텍스트 준비 일단 텍스트를 준비합니다. 이런 줄 바꿈이 엉망징창이군요. 만약 pc에서만 작동하는 홈페이지를 만든다면 간편하게 태그를 사용해도 무리가 없지만 반응형을 제작하는 사람이라면 모바일이나 화면이 줄어들 때마다 태그를 이동시킬 수도 없으니 고민이 많을 거예요. 오늘은 그런 줄 바꿈을 깔끔하게 만드는 방법을 알아볼 거예요. * 태그는 줄 바꿈을 위한 태그로 줄 바꿈하고 싶은 위치 맨 마지막에 적어주면 그다음 글자부터 아래줄로 내려가게 된다. 2. word-break p{ word-break:keep-all; } word-break을 넣어주면 단어를 기준으로 줄 바꿈을 해줍니다. 좀 더 정확히 말하자면 띄어쓰기를 기준으로 줄바꿈.. 2020. 6. 12.
[css] transform을 이용해 뒤집는 애니메이션 만들기 안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러스 + rat(쥐) 조합이 마음에 들었죠. 블루는 정말 단순한 작명이라고 생각하고는 있어요. Q.1 뒤집는 애니메이션을 만들 때 중요한 포인트는 앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 에 넣은 클래스를 주목해주세요. front와 back로 앞뒤를 구분해주었어요. 이게 뒷면 이게 앞면이에요. 기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요. 2. 포지션 li{ position:relative; } .front{ position:absolu.. 2020. 5. 26.
[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.. 2020. 5. 25.
[html] 마우스를 올리면 나타나는 버튼 만들기 안녕하세요. 플입니다. 마우스를 올리면 나타나는 버튼을 만들어볼게요. 1. 전체 html 한 방울 두 방울 오늘은 html 코드만 우선 진행할게요. 먼저 전체 코드를 보여드릴게요. 2. 코드 하나씩 뜯어보기 한 방울 마우스를 올리면 태그가 나타나게 만들 거예요. 그래서 태그와 태그를 나란히 넣어줬어요. 저는 여러 개를 만들 예정이기 때문에 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요. 3. css 보러 가기 준비 중 그럼 이만. 총총. 2020. 5. 22.
[개발자 도구] css 체크박스 활용 안녕하세요. 플입니다. 오늘은 개발자 도구 중 css 체크박스 활용을 해볼게요. 1. css 체크박스 이것을 css 체크박스라고 부르는지는 잘 모르겠으나 제가 가리키는 것은 이 부분입니다. style탭에서 보면 홈페이지에 적용된 css를 쭉 볼 수 있어요. 각각 css 값 앞에 마우스를 올리면 체크박스가 나타납니다. 그 체크박스를 활용해볼게요. 2. 체크박스 활용 본격적으로 어떻게 활용하는지 알아볼게요. 먼저 홈페이지의 원래 상태예요. 적용된 css 중 아무거나 하나를 해제해볼게요. 바뀐 게 보이시나요? 이런 식으로 하나씩 체크를 해제해보면서 어떤 기능을 하는지 알아볼 수 있어요. 어디가 문제인가 하면서 하나씩 체크를 해제했다 체크했다가 하면서 찾을 수 있어요. 그럼 이만. 총총. 2020. 5. 20.
[css] 배경 이미지 고정하기 안녕하세요. 플입니다. 오늘은 배경 이미지를 고정해볼게요. 1. 배경 이미지 고정 배경 이미지가 고정된다는 말이 무슨 말이냐면 아마 위의 이미지처럼 스크롤을 내릴 때 이미지가 같이 내려오는 것이 아니라 그 자리에 고정된 채로 움직이지 않는 모습을 본 적이 있으실 거예요. 그런 효과를 주는 css를 넣어줄 것입니다. 글로는 조금 이해하기 어려우시다면 아래 링크에서 확인해주세요. 포스팅하고 있는 지금은 아직 완성된 페이지가 아니긴 하지만 예시로 올려둘게요. https://ssimplay.github.io/paintdrop/ paint drop 우당탕탕 좌충우돌 물감친구들의 신나는 일상이야기. 톡 떨어진 물감에서 태어난 물감찍이는 궁금한게 너무나 많다. 세상에는 모르는 것과 신기한 것들 투성이. 여기저기 안가.. 2020. 4. 22.
728x90
반응형