HTML & CSS - [CSS] 요소 정렬하기

서론 원하는 레이아웃을 만들고 요소를 배치하는 과정에서 정렬은 필수적인 요소입니다. CSS에서 정렬을 하는 방법은 정말 다양하고 상황에 따라 적절하게 사용할 줄 알아야 합니다. 또한 부모 요소들이 변경되는 과정에서 정렬을 잘못 사용하게 되면 유지보수가 힘들어질 수 있기 때문에 정렬을 하는 다양한 방법에 대해 숙지하고 적절하게 사용하도록 합시다. 요소 수평(가로) 중앙 배치하기 - margin 이용 block요소는 margin속성을 이용해서 손쉽게 중앙으로 정렬이 가능합니다. 사실 중앙으로 정렬한다기보다는 중앙으로 요소를 배치하는 방법입니다. block요소는 자동으로 줄 바뀜이 일어나는 특징이 있습니다. 따라서 좌우의 여백 값이 동일하다면 자연스럽게 요소는 가운데로 옵니다. 자동으로 margin속성을 균일..

2022.06.12

컴퓨터/HTML&CSS

Commnet

내맘대로 티스토리 스킨 1 - 서론 및 초기 준비

서론 내 블로그 스킨 만들기 프로젝트 처음부터 끝까지 손수 블로그 스킨 만들기! 목표도 기간도 없습니다. 그냥 배우면서 하나씩 덕지덕지 만들어보려고 하고 있습니다. 가능하면 순수 HTML & CSS & Javascript만을 사용하려 하고 있습니다. GitHub - Gon-91/TISTORY-SKIN Contribute to Gon-91/TISTORY-SKIN development by creating an account on GitHub. github.com index.xml 우선 index.xml파일을 다른 기본 스킨들에서 가지고 와서 만들었습니다. 우선 메인 url의 커버쪽을 만들기 위한 데이터와 기본 정보에 대한 데이터를 정의했습니다. Compact_Blog 1.0 https://github.co..

2022.06.12

컴퓨터/Projects

Commnet

Javascript - typeof 연산 ( 변수의 원형 파악하기)

서론 C나 Java 등의 언어에서는 자료형과 함께 변수를 선언합니다. 하지만 Javascript에서는 동적인 할당으로 인해서 특정 변수의 자료형을 확인하기가 쉽지 않습니다. 또한 다양한 메서드나 함수들로 호출되는 결괏값 또한 어떤 자료형인지 파악하기가 힘든 경우가 있습니다. 이를 간단하게 typeof 연산을 통해서 알아볼 수 있습니다. Javascript에서도 다양한 자료형이 존재합니다. 변수를 선언할 때 자료형을 표시하지 않는 것뿐이지 Javascript에서도 자료형은 존재합니다. 본문에서는 자료형에 따른 자세한 내용은 설명하지 않지만, 어떤 것들이 있는지 먼저 살펴봅시다. 자료형 Undefined Null Boolean Number BigInt String Symbol Object Function O..

2022.06.09

컴퓨터/Javascript

Commnet

Javascript - 요소의 추가 및 제거 하기 (+ 복사)

서론 Javascript로 요소를 추가하고 제거하는 것은 동적인 웹페이지를 만들기 위한 기본적인 요소중 하나입니다. 본문에서는 이 방법을 알아보도록 합시다. 요소를 생성하자 - document.createElement 우선 특정 위치에 새로운 요소를 추가하고 싶다면, 요소를 먼저 만들어주어야 합니다. 요소를 만들어주기 위해서는 document객체에 createElement 메서드 호출하여 만들 수 있습니다. const newel = document.createElement('h1'); 새로운 Element 객체를 반환하며, 만약 tagName이 존재하지 않는 다면 HTMLUnknownElement객체를 반환합니다. 요소의 위치를 정해주자 1 - Node.appendChild() 새로운 요소를 만들어 주었..

2022.06.09

컴퓨터/Javascript

Commnet

Javascript - onscroll(스크롤 이벤트 / 예제 - 스크롤 위치 찾기)

서론 Javascript를 이용하면 동적인 웹페이지를 효과적으로 만들 수 있습니다. 그중 웹페이지 또는 어떤 스크롤을 할 수 있는 객체에서 스크롤을 하면 ~동작을 하는 기능 등을 말이죠. 가령 블로그나 아티클들을 제공하는 웹페이지를 보면 TOC(Table of contents)라는 자동 목차 생성 및 추적이 가능한 편의 기능을 볼 수 있습니다. 이런 기능들이 바로 스크롤이 동작하는 과정을 처리하기 때문입니다. 본문에서는 스크롤이 동작하는 과정을 Javascript에서 어떻게 처리할 수 있는지 알아보고 지난 포스트들에서 배웠던 내용들을 가지고 특정 본문이 있는 웹 문서의 스크롤 위치를 추적하는 예제를 하나 만들어 보도록 하겠습니다. Object.oncroll 각각의 객체에는 onscroll 이벤트 메서드를..

2022.06.08

컴퓨터/Javascript

Commnet

Javascript - 요소 선택하기 2 (Element, HTMLCollection, NodeList)

서론 지난 포스트에서 요소를 선택하는 방법을 알아봤습니다. 다양한 방법으로 요소들을 선택할 수 있고 각각의 방법마다 Element, HTMLCollection, NodeList의 형태로 반환을 하고 있습니다. 이 각각의 형태들마다 활용하는 방법에 차이가 존재합니다. 본문에서는 하나씩 살펴보면서 차이점과 사용방법에 대해서 알아보도록 하겠습니다. Element 객체 (단일 요소) 가장 기본적으로 DOM객체에서 요소를 받아오는 객체입니다. 대표적으로 아래와 같은 메서드를 통해서 Element객체를 받아옵니다. . getElementById('id') . querySelector('CSS query') 위의 메서드를 통해 알 수 있듯이 단일 요소들을 Element객체로 반환합니다. DOM(document)에서 ..

2022.06.07

컴퓨터/Javascript

Commnet