css30

• 

  [CSS] hover Media query CSS의 Media query에 대해 알아보다가 몰랐던 기능인 @media(hover: hover)가 유용하다고 느껴 이것에 대해 알아보고자 합니다. hover hover은 데스크톱에서 특정 요소에 마우스를 올렸을 때 행동을 취하는 기능을 제공합니다. a:hover { background-color: red; } 여기서 문제는 '데스크톱'이라는 것입니다. 만약 모바일 이라면? 기존 hover을 사용하면 모바일에서 아주 잠시 동안 데스트톱에서 보이던 hover 효과가 보이게 되고 이것은 모바일 사용자에 있어 부정적인 경험을 주게 됩니다. 당연하게도 모바일에서는 마우스를 올려놓는 행위를 하는 것이 아니라 터치를 하는 행위를 하기 때문입니다. 이때 이것을 해결할 수 있는 방법이 바로 Media query를 사.. TIP/CSS & Tistory 2022. 10. 7.

• 

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

• 

  [JS] Input이 활성화 될 때, 커서 자동 Focus 하는 방법 Auto Focus Display:none인 태그가 포함된 요소가 JS를통해 나타나게 해줬을때 커서가 자동으로 input에 foucs 되게 하는 방법에 대해 알아 보겠습니다. Input 생성 우선 텍스트를 입력할 수 있는 태그를 생성해줍니다. 버튼 클릭 시 input 보이기 위에 만들어놓은 태그를 display:none으로 없애준 뒤에, 특정 버튼을 누르면 다시 이 보이도록 자바스크립트를 통해 코드를 작성합니다. $(document).ready(function () { var target = $('.container'); $(document).on('click', '.showInput', function (e) { $('.showInput').hide(); target.fadeIn(100).addClas.. FRONT-END/JAVASCRIPT 2022. 9. 15.

• 

  [JS] 닫기버튼을 만들어 부모 태그 없애기 (display: none) 복잡한 자바스크립트 없이 HTML의 button을 사용하여 클릭 한 번 만으로 부모클래스를 사라지게 하는 방법에 대해 알아보도록 하겠습니다. Close button 버튼을 만드는 방법은 다양한데 이번에는 태그를 사용하여 구현해볼까 합니다. HTML 속성 추가 HTML에 임의의 Container를 생성하고 그 안에 button 태그를 입혀보겠습니다. × Javascript button태그 안의 onclick에 자바스크립트를 직접 넣어준 형태인데, 살펴보자면 아래와 같습니다. this : "자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수" parentElement : "노드의 부모 요소를 반환하는데, 부모가 없거나 부모가 DOM 요소가 아니라면 null을 반환한다" style : ".. FRONT-END/JAVASCRIPT 2022. 9. 13.

• 

  [JS] 티스토리 카테고리 괄호 제거 방법 티스토리 카테고리에는 각각 몇개의 게시글이 있는지 개수가 표시되어있는데 괄호 안에 넘버가 들어가 있습니다. 오늘은 티스토리 카테고리의 괄호를 제거하는 방법에 대해 알아보겠습니다. 카테고리 태그 찾기 우선, 티스토리 카테고리의 태그를 찾고 그 안의 id 네임을 찾아줘야 합니다. 자신의 블로그에서 사이드바를 오픈한 상태로 개발자 도구에 들어가 준다. (더보기 > 개발자 도구) 콘솔창 1번 아이콘을 누른 뒤, 사이드바의 카테고리 부분을 선택해준다. 콘솔창의 카테고리 부분의 id 값을 복사해준다. (저의 경우 id="sidebar-category") 만약 id 값이 없다면, 스킨 편집 > HTML > 에서 id 값을 직접 넣어준다. 다시 1번 아이콘을 선택하고 괄호가 포함된 게시글 개수 부분을 선택한다. 선택한.. TIP/CSS & Tistory 2022. 9. 12.

• 

  [JS] 페이지 로딩시 스크롤 막는 방법 페이지 로딩 시 스크롤 막는 방법 페이지가 로딩될때 스크롤을 막아야 하는 경우가 있는데, 오늘은 로딩시 스크롤을 막는 방법에 대해 알아보겠습니다. body overflow hidden 우선 Html의 body 부분의 스크롤을 막아주는 스타일을 입혀야 합니다. CSS에 다음과 같이 코드를 추가해줍니다. body.no-scroll { overflow: hidden !important } 코드 네임의 .no-scroll은 사용자가 원하는 네임으로 변경해도 됩니다. body class 추가 body에 .no-scroll이라는 class를 추가해주겠습니다. Javascript 추가 body에 클래스를 추가해줬다면 이제 모든 페이지에서 스크롤이 작동되지 않습니다. 왜냐하면 CSS에 body의 overflow를 hi.. FRONT-END/JAVASCRIPT 2022. 9. 10.

• 

  [HTML #8] 표 table, tbody, tr, td, thead, caption HTML 에서 간단하게 태그를 통해 표를 만드는 방법에 대해 알아보겠습니다. Table 태그는 이름 그대로 표를 생성해주는 HTML 태그입니다. 의 태그는 아래와 같습니다. 태그 속성 설명 테이블을 생성하는 태그 각 열의 제목을 정의 테이블의 행 (세로) 테이블의 열 (가로) / 하나의 테이블 셀을 정의 테이블을 하나의 그룹으로 묶을 때 사용 테이블의 헤더 부분을 그룹화 테이블 캡션을 붙일때 태그 바로 뒤에 사용 태그 속성 사용 그럼 위 태그를 을 사용해보도록 하겠습니다. 시작은 로 시작하고 행과 열을 와 태그로 정해 주면 됩니다. 바로 위에 사용된 표를 그대로 HTML로 작성해보려고 합니다. 가로가 7줄, 세로가 2줄로 정해주고, 태그를 총 7개, 그리고 태그 안에 태그를 총 2개씩 넣어주면 됩니다. .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #7] 이미지 img (src를 CSS로 대체 하는 방법) Img 태그는 이미지를 삽입할 수 있게 해주는 HTML 태그 입니다. 오늘은 HTML에서 태그 속성을 사용하는 방법과 CSS로 src를 대체하는 방법에 대해 알아보았습니다. Img 태그는 웹페이지에 이미지를 삽입할 수 있게 도와주는 태그인데, 이 속성으로는 src, width, height, alt, title로 총 5가지가 존재합니다. src : 이미지의 경로 width : 이미지의 가로 크기 height : 이미지의 세로 크기 alt : 이미지가 표시되지 않거나, 잘못된 경로일 때 출력되는 메시지 title : 이미지의 간략적인 정보 표기를 위한 말풍선 태그 사용 방법 태그는 닫는 태그 없이 속성만으로 사용이 가능합니다. 만약, 경로에 오류가 있거나 삭제 또는 존재하지 않는 이미지 일시에는 alt에 .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #6] 새로운 게시글 만들기 a, html 오늘은 HTML을 통해 특정 페이지로 이동할 수 있도록 하는 사이트를 간단하게 만들어 보도록 하겠습니다. HTML 게시글 이동 하이퍼링크로 지정된 텍스트를 클릭했을 때, 특정 페이지로 넘어가도록 해주려고 하는데, html 파일을 3개 만들어 놓고 시작하도록 하죠. 여기서 index.html은 메인 페이지가 되겠고, 숫자로 되어있는 .html 파일은 이동 시킬 페이지가 되겠네요. 우선, index.html에 구조를 간단하게 만들어주고 1.html을 태그 링크와 함께 연결시켜보도록 하겠습니다. 웹사이트 만들기 첫 번째 페이지로 이동 이렇게 태그 안에 '첫 번째 페이지로 이동'을 클릭하면 1.html 페이지로 넘어가게 됩니다. 그럼 리스트를 만들어놓고 다른 페이지도 꾸며보도록 하죠. 웹사이트 만들기 HTML을.. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #5] DOCTYPE - !doctype html HTML을 디버깅 하다보면 상단에 과 같은 선언을 보게 되는데 오늘은 이것에 대해 간단하게만 알아보려고 합니다. HTML DOCTYPE HTML에 들아가는 문자인 은 줄 여말 해 DTD라고 불리기도 하며, Document Type Declaration의 약자 입니다. 직역해보면 문서 형식 선언이라고 보면 되겠네요..! DTD란 HTML을 작성할 때, 작성된 코드가 어떤 방식의 HTML 코드로 선언되었는지 브라우저에게 알려주는 문자라고 볼 수 있습니다. HTML5은 구조상 DTD로 충분히 정의될 수 없으나 표준 문서를 명시할 필요성이 있으므로 아래와 같은 문서 형식 선언을 갖게 됩니다. DOCTYPE은 복잡하게 생각할 필요 없이, HTML으로 웹을 만들 때 최상단에 을 선언해주시기만 하면 됩니다. 참고로 .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #4] 기본구조 head, body 및 폰트 깨짐방지 HTML에서 가장 기본이 되는 구조와 폰트가 웹사이트에서 깨졌을때 해결하는 방법에 대해 알아보도록 하겠습니다. HTML 구조 HTML에는 기본적으로 가장 핵심이 되는 태그가 존재합니다. 위처럼 은 최상단에서 웹사이트를 만드는 기준이 되고, 태그는 본문이라고 생각하면 됩니다. 그렇다면 태그는 무엇일까요? 기본적으로 HTML에서는 몇 가지 정해놓은 약속 같은 것이 존재하는데, 에 만 들어가야 하는 태그들과 그 외적인 태그들을 특정 태그 안에만 넣도록 정해놓았습니다. 본문이 아닌 태그들은 태그 안에 넣어주면 되는데, 대표적으로 , 태그 등이 있습니다. 태그는 태그 위에 위치시켜주면 됩니다. 태그는 위에서 언급했듯이 본문이라고 생각하면 됩니다. 위키백과에서 개발자 도구를 열어 구조를 살펴보면 다음과 같습니다. .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #3] 태그 중첩 조합 li, ul, ol HTML에서는 태그를 중첩해서 사용하는 경우도 빈번한데 이번에는 왜 태그를 중첩해서 사용해야 하는지 알아보도록 하겠습니다. HTML 중첩 태그 대표적으로 중첩 태그를 흔하게 사용하는 것은 바로 리스트입니다. 태그를 사용해 보면서 중첩 태그란 무엇인가에 대해 알아보죠. 리스트형식인 텍스트를 정렬하고 싶을 때는 태그를 사용하여 쉽게 정렬해줄 수 있습니다. 서근 미진 희진 유진 만약 섹션이 있는 리스트를 만들고 싶다면 태그를 중첩 사용해야 합니다. 예를 들어 아래와 같이 단순히 공백만 준다고 해도 HTML에서는 이를 인식하지 않고 그대로 나열된 상태로 출력하게 됩니다. 서근 미진 희진 유진 HTML CSS JS 이를 해결하기 위해서는 태그를 중첩 사용 하면 됩니다. See the Pen Untitled by .. FRONT-END/HTML 2022. 7. 24.

• 

  [HTML #2] 속성 과 링크 a, href="" target="_blank" 이 번에는 HTML의 속성이라는 문법과 링크라는 가장 중요한 두 가지 기능을 어떤식으로 표현할 수 있는지 알아보도록 하겠습니다. HTML 속성 및 링크 하이퍼링크로 지정된 텍스트를 클릭하면 특정한 웹사이트로 이동하게 되는 속성을 사용하고 링크로 연결시킬 수 있습니다. 여기서 라는 태그를 먼저 알 아야 합니다. A는 Anchor이라는 약자입니다. 즉, 어떠한 문자가 링크에 Anchor(고정, 연결) 되어 있다는 의미로 사용된 것으로 보입니다. 그렇다면 이 태그를 어떻게 사용할 까요? Href See the Pen Untitled by 서근 (@seogun95) on CodePen. 전 게시글에서도 말했듯, 태그에 href 속성을 통해 링크를 페어링 시켜줄 수 있습니다. 태그만으로는 정보가 부족하다고 HTM.. FRONT-END/HTML 2022. 7. 24.