JavaScript 태그 생성해서 붙여넣기

새로운 HTML 요소를 생성하여 기존 웹페이지에 동적으로 추가하는 방법에 대해서 이야기 합니다. 이 방법은 3 단계로 나눠지는데, 새로운 요소 생성하는 파트, 더미 요소를 지우는 파트, 그리고 생성한 요소를 넣는 파트로 구현됩니다. 각각의 파트에서 사용되는 메소드들을 알아봅니다.

CSS 실제 동작하는 버튼, 팝업창 만들기

자바스크립트를 사용하지 않고, CSS만을 이용하여 실제로 동작하는 버튼을 만들 수 있다. 버튼을 클릭시 팝업창을 띄우는 예제를 만들어 봅니다. 버튼 클릭시 checkbox가 체크되고, CSS의 checked 상태 선택자에 의해 팝업창이 보이게 됩니다.

CSS Table로 코드입력창 만들기 예제

table 태그를 이용하여 예쁜 코드창을 직접 만들어 봅니다. 첫 번째열은 줄의 숫자를 넣고, 두 번째 열은 코드를 넣습니다. 간단하면서 깔끔한 코드창을 만들어서 직접 웹사이트에 사용해봐요.

CSS float: center 구현 방법

CSS의 float: center라는 것은 없지만, 마치 HTML 요소들을 가로 가운데 정렬을 하는 효과를 줄 수 있는 것처럼 효과를 줄 수 있습니다. 이는 여러 방법으로 구현할 수 있지만, 이 포스트에서는 가장 기본적인 방법이 테두리선 가이드 전략에 대해서 알아봅니다.

UTF-8 유니코드란?

UTF-8 유니코드의 개념을 설명합니다. 쉽게 말해서, 한글을 표시하기 위해서는 UTF-8 인코딩 설정이 필요합니다. 이러한 동작 원리를 설명하기 위해 비트, 바이트, 아스키 코드의 개념도 함께 다뤄집니다.

【CSS】 글자 세로 가운데 정렬하는 4가지 방법

CSS로 글자를 세로 가운데 정렬시킬 수 있는 방법에 대해서 이야기합니다. 가로 가운데 정렬은 쉬운 반면, 세로 가운데 정렬은 조금의 작업이 더 필요합니다. 각각의 구현방법의 장단점을 알아봅시다.

【CSS】 width: auto와 height: auto 당신이 몰랐던 작동 원리

CSS width와 height 기본 속성값 중 auto에 대해서 알아봅니다. auto로 설정되었을 때 HTML 요소를 이동시킬 때 에러가 발생할 수 있는 경우에 대해서 알아봅니다. 특히 top과 transform: translate의 동작에 차이점 있는데, 이 점에 대해서도 다뤄집니다.

CSS만으로 div 순서를 바꿀 수 있나요?

정해진 HTML요소들의 순서를 CSS만을 이용하여 바꿀 수 있습니다. 이 포스트에서는 이렇게 해야하는 경우들에는 무엇이 있는지, 그리고 어떻게 구현할 수 있는지 다뤄집니다.