FRONT-END110

• 

  HTML 관련 모음집 HTML 기초 - [HTML #1] 태그 - [HTML #2] 속성 과 링크 , - [HTML #3] 태그 중첩 조합 , , - [HTML #4] 기본구조 및 폰트 깨짐방지 , - [HTML #5] DOCTYPE - [HTML #6] 새로운 게시글 만들기 , - [HTML #7] img 태그 (src를 CSS로 대체 하는 방법) - [HTML #8] 표 , , , , , Visual Studio 관련 - 맥북 Visual Studio Code한글 패치방법 및 한글 씹힐 때 해결법 FRONT-END/HTML 2022. 7. 24.

• 

  (CSS) display: flex에 여러 요소가 있을때 좌우 정렬 하는 방법 오늘은 HTML의 부모 클래스가 display: flex일 때, 자식 클래스를 좌우로 떨어뜨려 정렬하고 싶을 때 어떻게 하는지 알아보도록 하겠습니다. display flex 좌우 정렬 방법 우선, 부모 클래스가 display: flex이고 justify-content: flex-start로 우측에 정렬되어있다고 가정해보겠습니다. See the Pen Untitled by 서근 (@seogun95) on CodePen. 그럼 위와같이 이미지가 우측으로 딱 달라붙어 정렬되게 됩니다. 이때, left-img 요소를 좌측으로 정렬하려면 .left-img에 margin-right: auto; 만 넣어주게 되면 완벽하게 좌측으로 붙는 것을 확인할 수 있습니다. 마진을 오른쪽에 줘서 왼쪽으로 붙게 하는 방식이라고 .. FRONT-END/CSS 2022. 7. 7.

• 

  이미지 드래그 & 오른쪽 마우스 막는 방법 이미지 드래그 & 오른쪽 마우스 블로그나 기타 웹사이트를 운영하다 보면, 이미지를 블로그에 업로드하는 경우가 빈번하게 일어납니다. 이때, 블로그에 올려둔 img 파일의 오른쪽 마우스와 드래그를 막는 방법을 소개해드리고자 합니다. 방법은 매우 간단합니다. 단순히 아래 코드를 CSS파일에 적용하면 되는데, 티스토리의 경우에는 HTML 스킨 편집 CSS탭에 코드를 추가하면 됩니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 만약 이미지를 선택할 수 없게 하고 싶다면 아래 코드를 적용하면 됩니다. img.. FRONT-END/CSS 2022. 7. 5.

• 

  (CSS) background-size에 hover transition animation 적용 안될때 해결방법 오늘은 background image를 hover시 확대되는 효과와 자연스러운 transition 애니메이션 효과를 간단하게 해결해보도록 하겠습니다. background-size transition animation CSS에서 background 이미지에 마우스를 올려 hover 효과를 주고 싶을 때가 있습니다. 보통은 transform: scale(1.1)처럼 사용하게 되면 transition효과가 적용되어 자연스럽게 커지는 효과를 받을 수 있지만, transform scale이 적용되지 않은 경우가 종종 있습니다. 먼저, 효과는 아래처럼 적용해주려고 합니다. 컨텐츠 요소에 마우스를 hover 시키면 이미지가 확대되는 형식인데, background-size를 사용한 방법입니다. 우선 이미지의 backg.. FRONT-END/CSS 2022. 7. 3.

• 

  (Javascript)개발자 도구 콘솔창 차단 방법 - 사이트 이동 본 게시글은 Ukjin Yang님의 코드를 가져와 기능을 추가한 게시글입니다. 개발자 도구 콘솔 창 차단 오늘은 브라우저의 개발자 도구 콘솔 창을 차단하는 방법에 대해 알아보고 티스토리에 적용하는 방법에 대해 다뤄볼까 합니다. 개발자 도구를 차단하는 이유는 보통 보안 또는 HTML 및 CSS를 숨기고자 하는 이유가 대부분이겠지만 사실은 콘솔 창을 막는 방법은 정상적인 방법이 아닙니다. 그래서 이 기능을 사용하더라도 어떻게는 뚫리기 마련이므로 간단히 사용하는 정도로만 알아두시면 좋을 것 같습니다. 콘솔 창 차단 코드 삽입 위치 Stack Overflow등에도 많은 콘솔 창 차단 코드가 존재하지만, 브라우저가 업데이트되면서 대부분의 코드가 막혀있는 상태입니다. 그렇게 구글링을 한 결과 감사하게도 Ukjin .. FRONT-END/JAVASCRIPT 2022. 7. 3.

• 

  (티스토리) 태그 쉼표 제거 하는 방법 - Javascript 티스토리 스킨을 꾸미다 보면 태그 부분 뒤에 쉼표( , )가 나타나는 경우가 있는데, 오늘은 이 태그 쉼표를 제거하는 방법에 대해 알아보겠습니다. (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 태그 쉼표 제거 방법 태그 클래스 찾기 방법은 아주 간단합니다. 우선, 티스토리 스킨 편집 HTML 부분에서 찾기로 태그 클래스를 찾아줘야 합니다. 보통은 티스토리 태그 치환자인 를 찾아주신뒤, 해당 부분의 클래스가 있다면 그 클래스를 복사하시고, 클래스가 없다면 클래스명을 추가해주시면 됩니다. 제 스킨의 경우.. FRONT-END/JAVASCRIPT 2022. 7. 2.

• 

  (Javascript) HTML SVG파일에 원하는 색상 적용하는 방법 HTML SVG파일 색상 변경 코드 Html에서 Img 태그에 SVG파일을 업로드하고 난 후, 색상을 변경하고 싶을 때가 있는데, 그때 CSS Filter 효과를 통해 원하는 색상을 입혀줄 수 있습니다. 먼저, 원하는 HEX 코드가 필요합니다. HEX 코드는 다양한 경로를 통해 알 수 있는데 아래 사이트에서 Color Picker를 통해 알아내거나, 원하는 이미지를 업로드해서 HEX코드를 따올 수 있습니다. 👍 Color Picker online | HEX Color Picker | HTML Color Picker Color Picker:Color Picker: With this online tool you can upload an image or provide a website URL and get t.. FRONT-END/JAVASCRIPT 2022. 6. 30.

• 

  (티스토리) 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 (플로팅버튼) 저번에 플로팅 버튼 생성하는 방법에 대해 알아보았는데, 이번에는 버튼 클릭 한 번으로 내가 원하는 위치로 이동하는 방법에 대해 알아볼까 합니다. 정말 간단해서 포스팅해야 될지 고민도 했지만, 모르시는 분들을 위해서 작성하니 참고 부탁드립니다 :) 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 버튼 클릭 한 번으로 내가 원하는 위치 이동하는 방법 플로팅 버튼을 저번에 만들었으니 그것을 응용해볼까 합니다. 만약, 플로팅.. FRONT-END/JAVASCRIPT 2022. 3. 25.

• 

  클릭가능한 요소에 따라 변하는 커서 만드는 방법 (mix-blend-mode) 이번에는 제 블로그에도 적용되어있는 기능인데, 클릭 가능한 요소에 마우스를 올리면 커서가 작아졌다가 커지면서 대비 효과를 가지는 커서를 적용하는 방법에 대해 알아보려고 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 따라 하기 쉬우니 본문을 꼼꼼히 읽어주셔서 진행해주세요. 커서 변경 방법 프리뷰 진행하기 앞서 어떤 식으로 보이는지 미리보기를 통해 확인해보겠습니다. 클릭이 가능하지 않은 요소 에서 가능한 요소.. FRONT-END/JAVASCRIPT 2022. 3. 21.

• 

  (티스토리) 블로그 하단에 원하는 버튼 기능 만드는 방법! (플로팅 버튼) 이번에는 블로그 하단에 원하는 기능을 넣을 수 있는 버튼을 생성하는 방법에 대해 알아보도록 하겠습니다. 이 버튼은 최하단에 고정됩니다. 이곳에 홈버튼, 방명록 버튼, 최상단으로 이동, 카카오톡 1:1 채팅 바로가기 등.. 다양한 기능을 넣을 수 있습니다. 블로그에 플로팅 버튼 만드는 방법 이 기능을 사용하기 위해서는 약간의 스킨 변경 지식이 있어야 합니다. 만약 티스토리 스킨 편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com HTML 사.. FRONT-END/CSS 2022. 3. 20.

• 

  타이핑 하고 지우는 Javascript 이번에는 타이핑을 하고 지우는 효과를 javascript로 만들어 보도록 하겠습니다. 타이핑하는 자바스크립트 이 스크립트는 제 블로그 홈에 사용됐는데 아래와 같이 활용 가능합니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 우선 커서가 깜빡이는 것부터 만들어보겠습니다. 커서 만들기 html 부분에 typeText 클래스를 하나 생성해줍니다. 안녕하세요 그리고 CSS에 애니메이션과 함께 커서를 추가합니다. .typ.. FRONT-END/JAVASCRIPT 2022. 2. 22.

• 

  (티스토리) 코드블럭에 클립보드로 복사 버튼 추가 이번에는 블로그에 코드블럭을 넣으면서 복사버튼이 코드블럭안에 나타나 버튼을 클릭시 클립보드로 복사가 되는 스크립트를 구현하고 티스토리에 적용 시켜볼까 합니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 클립보드 복사 버튼 만들기 티스토리를 이용하는 많은 분들이 콘텐츠를 무단으로 복사할 수 없도록 플러그인을 사용하여 마우스 사용을 막아놓았습니다. 하지만 코드를 자주 사용하는 블로그인 경우 아주 난감합니다...! 그.. FRONT-END/CSS 2022. 1. 21.

• 

  (티스토리) 코드블럭 - 언어명 표시 / 접기 / 펼치기 이번에는 티스토리에서 코드블럭을 사용할때 상단에 어떤 언어를 사용하고 있는지를 확인할 수 있는 스크립트를 구현하고 적용하는 방법에 대해 알아보겠습니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 seons-dev.tistory.com 코드블럭 언어명 표시 및 접기 버튼 추가 사용법은 아주 간단합니다. 아래 코드를 바로 위에 로 감싸서 넣어주기만 하면 됩니다. 사용방법 ... 코드 스타일 설정 이제 사용자의 스킨에 맞게 코드블럭 언어창의 색을 변경해줄 .. FRONT-END/CSS 2021. 4. 16.

• 

  (티스토리) 본문에 형광펜 효과 주는 방법 본문에 형광펜 효과 주기 HTML 태그 중에는 B, I, U, S 태그가 있습니다. 글씨를 굵게 / 기울임꼴 / 밑줄 / 취소선을 표현하는 태그입니다. 티스토리 블로그에서는 이 태그를 활용하여 특정 문구를 강조하는 형광펜 효과를 낼 수 있습니다. 태그명 우선 각자의 태그 명을 알아보도록 하겠습니다. 굵게 단축키 : (윈도우) 컨트롤 + B / (맥) 커멘드 + B .tt_article_useless_p_margin>p>b 기울임꼴 단축키 : (윈도우) 컨트롤 + i / (맥) 커멘드 + i .tt_article_useless_p_margin>p>i 밑줄 단축키 : (윈도우) 컨트롤 + U / (맥) 커멘드 + U .tt_article_useless_p_margin>p>u 취소선 단축키 : (윈도우) 컨트.. FRONT-END/CSS 2021. 4. 15.

• 

  (HTML/CSS/Javascript) 코드 정리해주는 사이트 모음 HTML / CSS / Javascript 코드 정리해 주는 사이트 아래 사이트를 참고하여 깔끔하고 보기좋은 코드를 정리할 수 있습니다 :) 1. ⭐️ Online JavaScript Beautifier : 사용자에게 맞게 코드를 정렬해주는 사이트 Online JavaScript beautifier HTML , formatting: Keep indent level of the tag Add one indent level Separate indentation beautifier.io 2. Cleancss : CSS 코드 정리 CSS Formatter Format your CSS to clean it up and beautify it. Make your CSS easier to read and validat.. FRONT-END/CSS 2021. 4. 15.