'coding' 태그의 글 목록 (8 Page)

[brackets] 브라켓에서 여러개의 태그 한번에 입력해보자

안녕하세요. 플입니다. 오늘은 브라킷에서 태그 여러 개를 한 번에 입력해볼게요. 1. 브라킷 브라킷은 이렇게 생긴 에디터 프로그램이에요. 코딩을 도와주는 도구라고 생각해주시면 됩니다. 2. 태그 여러 개 넣기 각설하고 바로 본론으로 넘어가 볼게요. 만약 태그를 3개 넣고 싶으시다면 li*3 처럼 적어주시고 Tab키를 눌러주시면 됩니다. 여기서 *기호는 코딩에서 x(곱하기)를 의미해요. 그러니까 li x 3이라고 생각해주시면 됩니다. 에디터 프로그램에게 "나는 태그가 3개 필요해" 하고 알려주시는 거예요. tab으로 명령을 전달하면.. 이렇게 한 번에 3개를 만들 수 있습니다. 일일이 입력하지 않아도 되어서 간편하죠? 에디터 프로그램의 이런 장점이 코딩을 빠르게 할 수 있게 도와준답니다. 다른 에디터 프로..

coding/editor · 2020. 8. 31. 07:30

[jQuery] 버튼 누르면 리스트 나오게

안녕하세요. 플입니다. 오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요. 1. 준비 이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요. 저는 구분하기 쉽게 나중에 나타나는 리스트 즉, 태그에 class를 적어주었어요. 2. 클릭 $(function(){ $('.more').click(function(){ }) }); 먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요. .click()이 클릭 메서드예요. 말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다. 클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요. 여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요. .more은 뭔가요? .more..

coding/JavaScript · 2020. 6. 22. 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] transform을 이용해 뒤집는 애니메이션 만들기

안녕하세요. 플입니다. 오늘은 css를 이용해 애니메이션 효과를 넣어볼게요. 1. html Q. 이름의 의미 A. 이름은 색과 연관지어서 지었어요. 시트렛은 시트러스색보다는 형광색에 가깝지만 시트러스 + rat(쥐) 조합이 마음에 들었죠. 블루는 정말 단순한 작명이라고 생각하고는 있어요. Q.1 뒤집는 애니메이션을 만들 때 중요한 포인트는 앞쪽과 뒤쪽을 모두 만들어주는 것이에요. 일단 한글로 적힌 내용은 신경 쓰지 말아 주시고 에 넣은 클래스를 주목해주세요. front와 back로 앞뒤를 구분해주었어요. 이게 뒷면 이게 앞면이에요. 기본은 뒷면인 상태로 나오고 마우스를 올리면 앞면이 나오도록 만들 거예요. 2. 포지션 li{ position:relative; } .front{ position:absolu..

coding/html + css · 2020. 5. 26. 07:30

[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..

coding/html + css · 2020. 5. 25. 07:30

coding 89