본문 바로가기

코딩

(62)
[css] css 속성 강제 적용하기 (우선 적용) 안녕하세요. 플입니다. 오늘은 css를 강제로 적용해볼게요. 코드를 바로 확인하실 분은 3번으로 넘어가 주세요! 1. 기존 css 확인 오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요. 다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다. 먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠? 오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다. 기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 .sto{ background:#fff5bf; } 라고 생각하고 진행할게요. 색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~ https://ssimplay.tistory.com/243 [css] linea..
[Brackets] 브라켓에서 코드를 연속 복사 해보자 안녕하세요. 플입니다. 오늘은 브라켓 팁을 가져와봤어요. 1. 코드 작성 처음부터 *(곱하기)를 이용해서 만들어주면 좋긴 한데 항상 그렇게 마음대로 되는 게 아니거든요. 간혹 새로 추가해야 할 때가 발생합니다. 그것도 여러 개를! 그럴 때 사용하면 좋습니다. 먼저 복사할 코드를 작성해주세요. 오늘은 태그를 이용해볼게요. 링크 2. Ctrl + D 커서를 코드 아무 곳이나 두고 Ctrl + D를 눌러주세요. 이 단축키의 장점은 커서가 코드 앞이든 뒤든 중간이든 코드 근처에 있기만 해도 가능하다는 거예요. 그리고 복사하지 않고도 연속해서 사용할 수 있어요. 아마 일러스트레이터를 사용하셨던 분들이라면 연속 복사 단축키가 익숙하실 거예요. 그럼 연속으로 3개를 더 만들어볼까요? 이렇게 간단하게 코드를 복사할 수..
[brackets] 브라켓에서 여러줄을 한번에 이동시켜보자 안녕하세요. 플입니다. 오늘은 브라켓 활용방법이에요. 1. 앞으로 이동 코드를 복사해오면 가끔 이렇게 너무 많이 밀려난 경우를 볼 수 있을 거예요. 이럴 때 한 줄씩 앞으로 당겨오려면 너무 힘이 들어요. ... 사실 힘들진 않지만 귀찮잖아요. 한 번에 이동시켜볼까요? 옮길 만큼 드래그로 잡아주세요. 그다음 Shift + Tab을 눌러주세요. 아까보다 앞으로 왔죠? 이렇게 한 번에 옮길 수 있답니다. 꼭 Shift 키를 먼저 눌러주세요. 2. 뒤로 이동 위에서 왜 Shift키를 먼저 누르라고 했냐면 Tab키만 누르면 뒤로 가기 때문이에요. 뒤로 이동을 해볼게요. 앞으로 이동했던 거랑 똑같습니다. 일단 드래그로 영역을 잡아주시고 이번엔 Tab키를 눌러주세요. 이번엔 뒤로 움직였죠? 이렇게 간편하게 코드를 정..
[jQuery] 제이쿼리 가져오기 안녕하세요. 플입니다. 오늘은 제이쿼리 스크립트를 가져와볼게요. 1. jQuery CDN https://code.jquery.com/ jQuery CDN The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been tampered with. Use of SRI is recommended as a best-practice, whenever libr code.jquery.com 제이쿼리로 뭔가 만드는 포스팅만 올렸었지 기본적으로 어떻게 가져오는지는..
[brackets] 브라켓에서 여러개의 태그 한번에 입력해보자 안녕하세요. 플입니다. 오늘은 브라킷에서 태그 여러 개를 한 번에 입력해볼게요. 1. 브라킷 브라킷은 이렇게 생긴 에디터 프로그램이에요. 코딩을 도와주는 도구라고 생각해주시면 됩니다. 2. 태그 여러 개 넣기 각설하고 바로 본론으로 넘어가 볼게요. 만약 태그를 3개 넣고 싶으시다면 li*3 처럼 적어주시고 Tab키를 눌러주시면 됩니다. 여기서 *기호는 코딩에서 x(곱하기)를 의미해요. 그러니까 li x 3이라고 생각해주시면 됩니다. 에디터 프로그램에게 "나는 태그가 3개 필요해" 하고 알려주시는 거예요. tab으로 명령을 전달하면.. 이렇게 한 번에 3개를 만들 수 있습니다. 일일이 입력하지 않아도 되어서 간편하죠? 에디터 프로그램의 이런 장점이 코딩을 빠르게 할 수 있게 도와준답니다. 다른 에디터 프로..
[brackets] 브라켓 템플릿을 불러와보자 안녕하세요. 플입니다. 오늘은 브라킷에서 템플릿을 불러와볼게요. 1. 템플릿 일단 템플릿 기본 형태는 위의 사진과 같아요. 아주 간단하게 구조를 잡아주고 필요한 부분은 넣어주면 될 것 같아요. 필요하다면 언어도 한국어로 바꿔주시면 된답니다. 은근히 쓰기 귀찮은 코드인데 간편하게 쓸 수 있다는 점이 에디터 프로그램의 장점 같아요. 2. !(느낌표) 자 그럼 이제 템플릿이 뭔지 알았으니 불러와봅시다. !(느낌표)를 입력하고 탭키를 눌러주세요. 간단하죠? 이렇게 간편하게 불러올 수 있답니다. 이제 저 표시된 빈 공간에 html 코드를 짜주시면 된답니다. 그럼 이만. 총총.
[jQuery] 버튼 누르면 리스트 나오게 안녕하세요. 플입니다. 오늘은 버튼을 누르면 보이지 않던 리스트를 나오게 만들어볼게요. 1. 준비 이 더보기 버튼을 누르면 아래로 리스트가 더 나오는 작업을 해줄 거예요. 저는 구분하기 쉽게 나중에 나타나는 리스트 즉, 태그에 class를 적어주었어요. 2. 클릭 $(function(){ $('.more').click(function(){ }) }); 먼저 더보기 버튼에 클릭 메서드를 넣어줄 거예요. .click()이 클릭 메서드예요. 말은 어렵지만 클릭을 하면 이러이러한 작업을 실행해줘 라는 명령어라고 생각하시면 된답니다. 클릭 뒤에 오는 함수 function()은 이제부터 함수 안에 있는 것을 실행하겠다는 말이에요. 여러 기능을 그룹으로 묶는다고도 생각할 수 있겠네요. .more은 뭔가요? .more..
[css] 텍스트 줄바꾼 단어단위로 하기 안녕하세요. 플입니다. 오늘은 텍스트 줄 바꿈 설정을 바꿔볼 거예요. 1. 텍스트 준비 일단 텍스트를 준비합니다. 이런 줄 바꿈이 엉망징창이군요. 만약 pc에서만 작동하는 홈페이지를 만든다면 간편하게 태그를 사용해도 무리가 없지만 반응형을 제작하는 사람이라면 모바일이나 화면이 줄어들 때마다 태그를 이동시킬 수도 없으니 고민이 많을 거예요. 오늘은 그런 줄 바꿈을 깔끔하게 만드는 방법을 알아볼 거예요. * 태그는 줄 바꿈을 위한 태그로 줄 바꿈하고 싶은 위치 맨 마지막에 적어주면 그다음 글자부터 아래줄로 내려가게 된다. 2. word-break p{ word-break:keep-all; } word-break을 넣어주면 단어를 기준으로 줄 바꿈을 해줍니다. 좀 더 정확히 말하자면 띄어쓰기를 기준으로 줄바꿈..
[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..
[html] 마우스를 올리면 나타나는 버튼 만들기 안녕하세요. 플입니다. 마우스를 올리면 나타나는 버튼을 만들어볼게요. 1. 전체 html 한 방울 두 방울 오늘은 html 코드만 우선 진행할게요. 먼저 전체 코드를 보여드릴게요. 2. 코드 하나씩 뜯어보기 한 방울 마우스를 올리면 태그가 나타나게 만들 거예요. 그래서 태그와 태그를 나란히 넣어줬어요. 저는 여러 개를 만들 예정이기 때문에 태그를 이용했습니다. 나란히 두는 것이 중요한 부분이에요. 3. css 보러 가기 준비 중 그럼 이만. 총총.