레이아웃 구성할 때 필요한 더미 텍스트, 이미지 사용 방법

더미 텍스트와 이미지는 레이아웃 구성할 때 필요합니다. 어느 정도 내용이 있어야 구조가 잡히기 때문입니다. 모든 에디터에서 사용 가능하며 손쉽게 사용할 수 있습니다. 함께 알아보겠습니다.

 

더미 텍스트

자신이 사용하고 있는 에디터에 가서 lorem을 입력하고 Tab키를 눌러보면 더미 텍스트가 나옵니다. 또한, lorem숫자를 입력하면 그 숫자만큼의 단어가 나옵니다. 예를 들어 lorem100이라고 입력하면 100 단어의 더미 텍스트가 나옵니다.

 

더미 이미지

 

이미지를 생성해주는 placeholder 사이트에 들어가면 사용방법과 함께 에디터에 적용할 수 있습니다.

 

See the Pen dummy text, image by Cho-YoungHo (@choyoungho-web) on CodePen.

/350은 가로, 세로 모두 350px인 정사각형 모양의 이미지를 생성합니다. 만약, 세로 길이를 변경하고 싶으면 /350x100 이런 식으로 x뒤에 값을 넣어주면 됩니다. 또한, 색상을 기본에서 변경하고 싶으면 HEX형태의 값을 넣어주면 됩니다. 이런 식으로 주소 뒤에 자신이 이미지에 변경하고자 하는 것을 값으로 표현하여 변경할 수 있습니다.

 

주소/가로값/세로값/배경색/글자색?text=텍스트