본문 바로가기

coding

(103)
[css] css 속성 강제 적용하기 (우선 적용) 안녕하세요. 플입니다. 오늘은 css를 강제로 적용해볼게요. 코드를 바로 확인하실 분은 3번으로 넘어가 주세요! 1. 기존 css 확인 오늘은 예시로 전에 만들었던 홈페이지를 가져와볼게요. 다시 보니 뜯어고치고 싶어 지네요. 좀 덜 바빠지면 대대적으로 리뉴얼을 해야겠습니다. 먼저 화살표로 표시한 부분을 봐주세요. 연한 노란색이죠? 오늘은 이 노란색 배경색을 바꿔보는 것으로 해보겠습니다. 기존의 코드는 표시된 부분이고요 반씩 나눠져 있기 때문에 linear-gradient로 되어있지만 그냥 .sto{ background:#fff5bf; } 라고 생각하고 진행할게요. 색을 반 나누는 방법이 궁금하시다면 아래 링크를 확인해주세요~ https://ssimplay.tistory.com/243 [css] linea..
[Bootstrap] 부트스트랩 테마를 찾아보자 (무료편) 안녕하세요. 플입니다. 오늘은 무료 부트스트랩 테마를 찾아볼게요. 1. Free Bootstrap Themes https://startbootstrap.com/themes/ Free Bootstrap Themes & Templates - Start Bootstrap Free themes for Bootstrap 4 that are open source, MIT licensed, and free to download - these pre-designed themes are easy to customize and ready to publish startbootstrap.com 검색창에 bootstrap free templates라고 검색하시면 바로 뜰 거예요. 귀찮으신 분들은 위에 링크를 이용해주세요. 이런..
[Bootstrap] 부트스트랩 테마를 찾아보자 (유료편) 안녕하세요. 플입니다. 오늘은 부트스트랩 유료 템플릿을 구경해볼게요. 1. tnemeforest https://themeforest.net/ WordPress Themes & Website Templates from ThemeForest Discover 1000s of premium WordPress themes & website templates, including multipurpose and responsive Bootstrap templates, email templates & HTML templates. themeforest.net 검색창에 테마포레스트를 검색하시거나 위의 링크로 접속해주세요. 이런 화면이 뜨는데요. 부트스트랩 테마 말고도 워드프레스 테마도 다운로드할 수 있고 디자인만 따로 다운..
[Brackets] 브라켓에서 코드를 연속 복사 해보자 안녕하세요. 플입니다. 오늘은 브라켓 팁을 가져와봤어요. 1. 코드 작성 처음부터 *(곱하기)를 이용해서 만들어주면 좋긴 한데 항상 그렇게 마음대로 되는 게 아니거든요. 간혹 새로 추가해야 할 때가 발생합니다. 그것도 여러 개를! 그럴 때 사용하면 좋습니다. 먼저 복사할 코드를 작성해주세요. 오늘은 태그를 이용해볼게요. 링크 2. Ctrl + D 커서를 코드 아무 곳이나 두고 Ctrl + D를 눌러주세요. 이 단축키의 장점은 커서가 코드 앞이든 뒤든 중간이든 코드 근처에 있기만 해도 가능하다는 거예요. 그리고 복사하지 않고도 연속해서 사용할 수 있어요. 아마 일러스트레이터를 사용하셨던 분들이라면 연속 복사 단축키가 익숙하실 거예요. 그럼 연속으로 3개를 더 만들어볼까요? 이렇게 간단하게 코드를 복사할 수..
[Bootstrap] 부트스트랩을 이용해 아이콘을 불러와보자 안녕하세요. 플입니다. 오늘은 아이콘을 불러와볼게요. 1. 위치 확인 뭘 해볼 거냐면요 하단에 이런 식으로 sns 바로가기 아이콘 같은 게 있는걸 많이 보셨을 거예요. 오늘은 여기 인스타그램이라는 글자 앞에 인스타그램 아이콘을 넣어볼게요. 아이콘을 따로 만들지 않고 부트스트랩을 이용해서 불러올 겁니다. 2. font awesome https://www.bootstrapcdn.com/fontawesome/ Font Awesome The recommended CDN for Font Awesome www.bootstrapcdn.com 검색창에 font awesome 4 cdn이라고 검색해주시거나 위의 링크를 클릭해주세요. 그러면 들어가자마자 바로 링크를 줄 거예요. 이 링크를 복사해주세요. 그리고 이런 식으로..
[brackets] 브라켓에서 여러줄을 한번에 이동시켜보자 안녕하세요. 플입니다. 오늘은 브라켓 활용방법이에요. 1. 앞으로 이동 코드를 복사해오면 가끔 이렇게 너무 많이 밀려난 경우를 볼 수 있을 거예요. 이럴 때 한 줄씩 앞으로 당겨오려면 너무 힘이 들어요. ... 사실 힘들진 않지만 귀찮잖아요. 한 번에 이동시켜볼까요? 옮길 만큼 드래그로 잡아주세요. 그다음 Shift + Tab을 눌러주세요. 아까보다 앞으로 왔죠? 이렇게 한 번에 옮길 수 있답니다. 꼭 Shift 키를 먼저 눌러주세요. 2. 뒤로 이동 위에서 왜 Shift키를 먼저 누르라고 했냐면 Tab키만 누르면 뒤로 가기 때문이에요. 뒤로 이동을 해볼게요. 앞으로 이동했던 거랑 똑같습니다. 일단 드래그로 영역을 잡아주시고 이번엔 Tab키를 눌러주세요. 이번엔 뒤로 움직였죠? 이렇게 간편하게 코드를 정..
[css] 긴 문장의 단을 나눠보자 안녕하세요. 플입니다. 오늘은 단을 나눠볼 거예요. 1. 단 우선 단이란 무엇일까요? 이미지에서 빨간 부분이 보이시나요? 그 부분을 한 단 이라고 합니다. 잡지에서 저렇게 세로로 한 뭉텅이를 단(column/칼럼)이라고 부르고 단을 나눈다는 말은 단을 여러 개로 만들어 문장을 쪼개서 넣는다는 의미예요. 이미지를 보면 총 네 단으로 있는 것을 알 수 있죠. 2. 웹에서 단 나누기 잡지에서는 알았는데 그럼 웹에서는 단을 어떻게 나눌까요? 일단 예제를 위해 의미 없는 문장을 가득 채워줄게요. https://ssimplay.tistory.com/179 [html] 의미 없는 문장 채우기 안녕하세요. 플입니다. 샘플로 한 문단 정도 아무런 말이나 채우고 싶을 때가 있죠. 그럴 때 어떤 방법을 사용할까요? 1. 문..
[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개를 만들 수 있습니다. 일일이 입력하지 않아도 되어서 간편하죠? 에디터 프로그램의 이런 장점이 코딩을 빠르게 할 수 있게 도와준답니다. 다른 에디터 프로..
[Bootstrap] 부트스트랩 클래스를 찾아보자 안녕하세요. 플입니다. 오늘은 부트스트랩에서 쓰는 여러 클래스들을 찾아볼 거예요. 1. 부트스트랩 사이트 http://bootstrapk.com/ 부트스트랩 · 세상에서 가장 인기있는 모바일 우선이며, 반응형인 프론트엔드 프레임워크. 프리프로세서 부트스트랩은 평범한 CSS 로 제공합니다만, 그것의 소스코드는 2개의 인기있는 CSS 프리프로세서인 Less 와 Sass 를 사용합니다. 신속하게 프리컴파일된 CSS 로 시작하거나 소스를 빌드 bootstrapk.com 일단 위의 주소로 부트스트랩 홈페이지에 접속해주세요. 한국 사이트랍니다. 2. 콤포넌트 그리고 위쪽 메뉴 중 네 번째쯤에 있는 콤포넌트를 클릭해주세요. 뭔가 다양한 것들이 나오고 오른쪽에는 종류가 잔뜩 나올 거예요. 콤포넌트란 무엇인가요? 콤포넌..