FRONT-END/CSS17

• 

  [CSS] Pseudo-elements (placeholder, selection, first-letter) CSS에서 많이 사용하는 Pseudo-elements 3가지에 대해 간단하게 알아보도록 하겠습니다. Pseudo-elements 이 pseudo-elements는 실제로 존재하는 element는 아니지만, 스타일링을 할 수 있게 해 줍니다. ::placeholder ::placeholder는 placeholder의 스타일을 제어할 수 있습니다. ::placeholder { color: blue; font-size: 1.5em; } See the Pen placeholder by 서근 (@seogun95) on CodePen. ::selection ::selection은 텍스트를 마우스를 통해 드래그해 선택할 때 나타나는 효과를 제어할 수 있습니다. p::selection { color: red; back.. FRONT-END/CSS 2022. 10. 6.

• 

  [CSS] 결합/연결자 - Combinators CSS에서 유용하게 사용되는 결합자(combinators)에 대해 알아보도록 하겠습니다. Combinators CSS에서 선택자를 결합하는 방법에는 여러 가지가 존재하고 사용하는 결합자에 따라 결과도 다르게 보입니다. 자손 결합자 (Descendant Selector) 부모 그리고 자식 관계 "" 공백 결합자는 첫 번째 요소의 자손인 노드를 선택합니다. 자손 선택은 지정된 요소의 자손인 모든 요소와 일치합니다. 안녕하세요 서근 개발 노트입니다. 블라블라블라1 블라블라블라2 블라블라블라3 블라블라블라4 블라블라블라5 div p { background-color: yellow; } 자식 결합자(Child Selector) 부모 + 자식 관계 > 결합자라고도 칭합니다. 자식 결합자는 첫 번째 요소의 바로 아래.. FRONT-END/CSS 2022. 10. 6.

• 

  [CSS] Collapsing-Margin (마진 겹침 현상) CSS로 작업을 하다보면 마진이 겹치는 현상을 발견할 수 있습니다. 오늘은 이 Collapsing-margin 현상에 대해 알아보도록 하겠습니다. Collapsing-Margin 마진 상쇄 현상을 MDN에서는 다음과 같이 정의하고 있습니다. 블록의 top 및 bottom 마진은 크기가 마진 중 가장 큰(또는 동일한 경우 하나만) 단일 마진으로 결합(상쇄)되며, 이를 마진 겹침 상쇄라고 합니다. 하지만 floating 및 position absolute 요소의 마진은 절대 축소되지 않습니다. -MDN 즉, 마진 상쇄는 어떤 두 개 이상의 블록(block)의 top 그리고 bottom의 마진이 겹칠 때 어느 한쪽 값만 적용하는 브라우저 자체의 규칙입니다. 마진 상쇄 현상은 죄(left) 우(right)에서는.. FRONT-END/CSS 2022. 10. 6.

• 

  [CSS] 적용 우선 순위 CSS 적용 우선순위 CSS에는 태그에 속성이 중복되어 설정될 수 있습니다. 이럴 때 어떤 속성이 우선되어 적용되는지 우선순위를 보면 다음과 같습니다. 우선순위는 아래와 같습니다. !important inline style (HTML내부에 사용된 style 속성) #id .class tag 상위 객체에 의해 상속된 속성 같은 우선순위에 있는 경우에는 부모 클래스가 우선 적용되며, 모든 설정이 같은 경우 CSS 스타일 시트에서 나중에 선언한 것이 우선되어 적용됩니다. !important 만약 우선순위를 무시하고 적용해야 하는 속성이 존재한다면, 속성 값 뒤에 !important 를 붙여서 적용시켜 줄 수 있습니다. .normal { color: blue } .compulsion{ color: black !.. FRONT-END/CSS 2022. 9. 5.

• 

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

• 

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

• 

  (티스토리) 코드블럭에 클립보드로 복사 버튼 추가 이번에는 블로그에 코드블럭을 넣으면서 복사버튼이 코드블럭안에 나타나 버튼을 클릭시 클립보드로 복사가 되는 스크립트를 구현하고 티스토리에 적용 시켜볼까 합니다. 만약 티스토리 스킨편집에 대한 기초 지식이 없으시다면 아래 글을 먼저 읽고 와주세요! (티스토리) 스킨 편집 기초 상식 안녕하세요. 제 블로그에는 티스토리에서 스킨을 적용하기 위해 다양한 포스팅이 존재합니다. 이번에는 티스토리에서 어떻게 스킨을 어떻게 편집하는지 아주 간단하게 알아보려고 합니다. 스 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.

• 

  (티스토리) 스크롤시 부드럽게 이동하기 이 방법은 최신 브라우저가 아니면 적용이 되지 않을 수 있고 브라우저 설정에 따라 액션이 달라질 수 있으므로 아직은 완전한 방법이 될 수 없습니다. 그래도 간단히 적용하고 싶으신 분들은 하셔도 괜찮습니다. 참고로 CCZ스킨은 이 방법을 이용하였습니다. 스크롤 시 부드럽게 이동 CSS 우선 방법은 아주 간단합니다. HTML편집기로 들어가서 CSS에디터를 선택하여 아래 코드를 넣어줍니다. /*부드러운 스크롤 효과*/ html { scroll-behavior: smooth; } 브라우저별 호환성 표 jQuery 티스토리 스킨은 대부분 jQuery를 사용하고 있기 때문에 바로 사용할 수 있습니다. 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 에디터 에 들어갑니다. 그리고 body태그 안쪽.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 본문에 TOC 목차 넣기 Toc toc 란 toc는 table of contents를 의미하고, markdown으로 작성한 글의 header를 모아서 보여주는 용도로 사용됩니다. 제가 적용한 toc는 tocbot이고, 기본 스타일도 깔끔하지만 제 블로그 스킨에 맞게 CSS를 건드려 봤습니다. toc code 적용 방법 당연히 tistory skin을 html로 수정을 해야하기 때문에 약간의 html, javascript개발에 대한 지식이 필요합니다. 아래 각 부분을 위치에 맞게만 넣고, javascript 부분만 조금 수정을 하면 크게 문제 없이 적용 가능할 것 같습니다. 이 외에도 toc에 제목을 넣어주기 위해 tistory 기본 스킨 부분을 수정한 것도 있고, 브라우저 개발자 도구로 하나씩 찾아가면서 뜯어 고친 부분도 몇 있.. FRONT-END/CSS 2021. 4. 14.

• 

  (티스토리) 마우스 오버시 썸네일이 움직이는 애니메이션효과 이번에는 마우스를 이미지에 올리면 애니메이션 효과를 가지고 좌우로 움직이는 코드를 만들어 보겠습니다. 마우스 오버 시 애니메이션 효과 우선 제가 적용한 부분은 메인화면의 썸네일 부분입니다. TIP 사용자 스킨에 따라 썸네일의 class가 다르기 때문에 크롬에서 오른쪽 마우스 클릭 후 검사를 통해 정확한 위치를 파악하는 것이 좋습니다. 제 스킨의 경우는 thumbnail이네요. 여러분들도 정확한 위치를 찾으셨다면, 우선 애니메이션을 만들어주셔야 합니다. 적용 하기 CSS /*썸네일 애니메이션*/ @keyframes post-ani { 25% { transform: rotate(2deg) scale(1.01); } 50% { transform: rotate(0deg) scale(1); } 75% { tran.. FRONT-END/CSS 2021. 4. 14.