웹 색상 표현법

w3school.com Color picker

웹디자인 시 텍스트, 배경 등에 색상을 추가할 때는 16진수(HEX), RGB, RGBA 와 같은 색상 표현법을 사용합니다. 

아임웹은 사용자가 색상 표현법을 몰라도, 디자인 모드 곳곳에 배치된 컬러픽커(Color Picker)를 통해 직접 색상을 선택할 수 있도록 제작되었습니다. 또한, 한 번 색상을 사용하면, 선택한 색상들이 히스토리에 최대 8개까지 기록되어 이전에 사용한 색상을 다시 찾아보지 않아도 되는 편리함도 갖추고 있습니다. 

다만 색상 표현법을 이해하고, 또 어떻게 사용하는지 알아두면 다양한 부문에서 응용이 가능합니다. 예를 들어 우리 회사의 정확한 브랜드 웹 컬러값을 알아두면, 블로그, 카페, Facebook 페이지 등을 꾸밀 때 일관된 색상으로 브랜드 아이덴티티를 유지해갈 수 있습니다.

16진수(HEX)

16진수는 웹에서 가장 많이 사용되는 색상 표현법입니다. 특수 기호 #을 입력하고, 그 뒤에 여섯 자리의 16진수를 입력하여 표기합니다. 예를 들어 토마토색은 #FF6347 로 표현할 수 있습니다.

RGB와 RGBA

RGB는 R(적), G(녹), B(청) 색상을 혼합하여 색상을 표현하는 방법입니다. rgb를 선언한 다음 괄호 안에 각 R, G, B 값을 0~255 사이로 입력해 표기합니다. 예를 들어 rgb(255, 99, 71)을 입력하면, 위에서 입력한 토마토색(#FF6347)과 같은 색상을 표현할 수 있습니다.

RGBA는 기본 RGB 값에 알파(A)값이 더해진 색상 표현법입니다. 알파(A)값은 투명도를 가리키며, 0에서 1 사이 숫자 또는 소수점을 입력하여 투명도를 조절할 수 있습니다.

위 토마토 색상을 30% 불투명하게 표현하려면 rgb(255, 99, 71, 0.3)으로 입력합니다. 아임웹 컬러픽커에서는 색상 입력칸 위에 투명도 슬라이더를 움직여 조절할 수도 있습니다. 컬러픽커로 투명도 조절하기

• 알파(A) 값을 0으로 지정하면 100% 투명한 상태를 의미합니다. 색상이 숨겨집니다.
• 알파(A) 값을 1로 지정하면 100% 불투명한 상태를 의미합니다.
• 알파(A) 값을 소수점으로도 입력할 수 있습니다. 예를 들어 0.1은 10% 불투명한 상태를 의미합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

우리는 사이트에 상품을 등록하거나 페이지를 디자인 할 때, JPG, JPEG, PNG, GIF와 같은 형식의 이미지들을 종종 사용하게 됩니다. 보기에는 다 같은 이미지인데, 무엇이 다른 걸까요?

이 도움말에서는 웹 디자인 시 주로 사용하는 이미지 형식들의 차이점에 대해 알아봅니다.

JPEG/JPG

JPEG는 Joint Photograph Experts Group의 약자로, 인터넷에서 가장 많이 사용되는 그래픽 형식 중 하나입니다. JPEG와 JPG는 파일의 확장자명만 다를 뿐 같은 형식으로, 실제 JPEG 확장자명을 JPG로 바꿔도 그대로 사용할 수 있습니다. 형식명을 읽을 때는 '제이펙' 또는 '제피이지' 라고 발음합니다.

JPEG는 주로 사진 이미지에 사용합니다. JPEG와 함께 많이 사용되는 GIF의 경우 256색만 표현할 수 있는 데 반해 JPEG는 1,600만 개의 색을 표현할 수 있으며, 그럼에도 데이터의 압축 효율이 무척 좋아 고화질의 사진에 적합하기 때문입니다. 이에 따라 사이트에 사진 이미지를 삽입하는 경우 JPEG를 많이 권장합니다.

단, 글자나 로고, 아이콘과 같이 단순하고 날카로운 면이 주를 이루는 이미지의 경우, 이미지가 다소 손상되어 보이는 경향이 있습니다.

GIF

GIF는 Graphics Interchange Format의 약자로, 네트워크 상에서 빠른 이미지 전송을 목적으로 개발되었습니다. 국내에서는 '기프' 또는 '지아이에프' 라고 발음합니다.

GIF는 256색 밖에 표현할 수 없고 압축률도 매우 낮아 어쩜 지금의 인터넷 속도 및 고해상도 디스플레이에 어울리지 않는 그래픽 형식으로 보입니다. 그러나 쉽게 애니메이션 제작이 가능하고, 배경을 투명하게 처리할 수 있다는 점에서 세계적으로 여전히 많이 사용되고 있습니다.

웹사이트에서 특정 상품 또는 내용을 강조할 때 애니메이션으로 종종 사용되곤 합니다.

PNG

PNG는 Portable Network Graphics의 약자로 무손실압축 방식에 32비트 트루컬러 처리가 가능한 그래픽 형식입니다. 일반적으로 '피앤지'라고 읽습니다. 대개의 경우 JPEG 대비 파일 크기가 다소 크지만, 경우에 따라 더 뚜렷하게 표현하는 장점이 있으며, 날카로운 면 표현에도 적합합니다.

웹사이트에 로고, 텍스트, 아이콘, 도형 등의 단순 이미지를 삽입할 때 권장하며, 페이지에 반투명 이미지 사용 시 거의 유일한 방법이기도 합니다. 예를 들어 스마트폰 아래 그림자를 입히고, 배경을 투명하게 처리하여 페이지에 삽입하는 방법 등이 있습니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

비트맵(Bitmap) 그래픽

비트맵 그래픽은 간단히 말해 서로 다른 점(픽셀)들의 조합으로 그려지는 이미지 표현 방식입니다. 비트맵 이미지는 정교하고 화려한 표현이 가능하여, 주로 사진 이미지에 주로 사용됩니다. 비트맵 이미지는 크기를 늘리거나 줄이면 원본 이미지에 손상이 가는 것이 특징이며, 우리는 흔히 이것을 '이미지가 깨졌다'라고 표현합니다.

Photo from Unslash.com

비트맵 이미지는 이미지를 표시하는 방식에서 컴퓨터에 부담을 덜 주는 구조를 갖고 있기 때문에, 웹에서 이미지를 표시할 때는 주로 비트맵 이미지를 사용합니다. 우리가 흔히 보고 다루는 .jpg, .jpeg, .png, .gif 가 모두 비트맵 방식입니다.

벡터(Vector) 그래픽

벡터 이미지는 점과 점을 연결해 수학적 원리로 그림을 그려 표현하는 방식을 말합니다. 벡터 이미지는 그 특성 상 이미지의 크기를 늘리고 줄여도 손상되지 않는 장점이 있지만, 사진과 같은 복잡한 그림을 표현하려면 컴퓨터에 엄청난 부담을 주곤 했기에 웹에서는 잘 사용되지 않았습니다.

Photo from freepik.com

다만, 최근에는 컴퓨터 하드웨어의 발달로 웹사이트의 로고 및 아이콘 표시에 벡터 그래픽이 사용되고 있습니다. 자주 접할 수 있는 벡터 파일의 형식에는 .ai, .eps, .svg 가 있습니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

텍스트의 줄 간격은 공통 디자인 설정에서 지정한 값을 따릅니다. 만약 특정 텍스트의 줄 간격을 변경해야 하는 경우, 아래의 두 가지 방법을 사용해 볼 수 있습니다.

설정방법

방법1: 텍스트 설정에서 조절하기 

이 방법은 텍스트 위젯으로 작성된 텍스트의 전체 줄 간격 변경 시 유용합니다. 문장 또는 문단마다 부분 조절하려면 아래의 방법2를 참고해 주세요.

1.  디자인 모드에 접속합니다. 접속방법
2. 텍스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴에서 텍스트 설정을 클릭합니다.
4. 객체 항목에서 줄간격 옵션을 수정합니다. 기본값은 Auto 입니다. 예를 들어, Auto를 삭제하고, 숫자 2.2를 입력할 수 있습니다.
5. 텍스트 설정 바깥 영역을 클릭해 적용을 완료합니다.
6. 텍스트 줄 간격이 정상적으로 변경되었는지 확인합니다.

방법1: 텍스트 설정에서 조절하기

텍스트 에디터로 글 작성 중, 문장마다(또는 문단마다) 줄 간격 조절이 필요할 때 이 방법을 사용할 수 있습니다.

1.  텍스트 위젯의 텍스트 에디터 또는 게시물 텍스트 에디터에서, 줄 간격을 조절할 문장을 마우스로 드래그하여 선택하고, 텍스트 도구에서 줄 높이 아이콘을 클릭합니다. 2. 아래 그림과 설명을 참고해 기본, 단일, 1.15, 1.5, 더블 중 하나를 선택합니다. 
   • 기본: 공통 디자인 설정에서 지정한 줄 간격으로 표시됩니다.
   • 단일: 한 줄 간격으로 표시됩니다.
   • 1.15: 1.15배(115%) 간격으로 표시됩니다.
   • 1.5: 1.5배(150%) 간격으로 표시됩니다.
   • 더블: 2배(200%) 간격으로 표시됩니다.

3. 텍스트 에디터 바깥 영역을 클릭해 텍스트 작성을 완료합니다.

4. 텍스트 줄 간격이 정상적으로 변경되었는지 확인합니다.

관련 도움말

• 텍스트 줄간격 조절 방법 (코드, 고급)
• 게시판 게시물의 텍스트 줄간격 조절 방법 (코드, 고급)
• 상품 상세페이지에서 이미지 간격 없애기 (코드, 초급)

도움말에 찾으시는 답변이 없으신가요? 문의하기

시작에 앞서

웹사이트 상단에 디스플레이 배너를 표시할 수 있습니다. 이 튜토리얼에서는 템플릿 파일을 사용해 기본적인 형태의 상단 배너를 제작하는 방법에 대해 알아봅니다.

1단계: 상단 배너 이미지 만들기.

상단 배너에 추가할 배너 이미지를 준비합니다. 필요에 따라 다음의 템플릿을 내려받아 수정해 사용할 수 있습니다. 배너 이미지가 이미 준비된 경우 이 단계는 건너뜁니다.

1. 상단 배너 템플릿 파일을 내려받습니다. 템플릿 다운로드
2. 내려받은 파일의 압축을 풀고, 폴더 3개(PNG, PSD, Reference)를 확인합니다.
3. PSD 폴더를 더블-클릭해 열어줍니다.
4. top_ban_pc_by_imwebcampus.psd 파일을 열어줍니다.

5. 레이어 창을 열어 각 레이어에 포함되어야 할 내용을 확인합니다.

•  타이틀 레이어: 제목 타이틀 텍스트를 변경할 수 있습니다.
• 서브-타이틀 레이어 : 부제목 타이틀 텍스트를 변경할 수 있습니다.
• 배경 레이어 : 배경이미지를 더하거나 색상을 변경할 수 있습니다.

6. 가로 길이는 1280px, 1440px, 1920px, 2560px 정도로 설정하고, 세로는 자유입니다. 템플릿의 경우 1280x88픽셀(px)로 설정되어 있습니다. (참고: 사실 정해진 크기는 없습니다. 사이트의 본문폭 및 콘셉트에 따라 자유롭게 지정해 주세요.) 

7. 배너 이미지 제작을 완료하면, 웹용 이미지로 저장합니다. (파일 형식: JPG, JPEG, PNG) 

2단계: 상단 배너 설정하기

데스크톱(PC) 전용 상단 배너를 설정합니다.

1.  내 사이트 관리자 페이지에 접속합니다. 접속방법
2. 왼쪽 메뉴에서 [환경설정 > 팝업/배너 관리]를 클릭합니다.
3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
4. 팝업 옵션을 설정합니다.

• 제목: 제목을 입력합니다. 방문자에게는 보이지 않으며, 배너 구분을 위해 입력합니다.
• 기간: 배너가 표시되는 기간을 설정합니다.
• 대상기기: 상단 배너가 표시될 기기를 선택합니다. 지금은 데스크톱만 선택합니다. 모바일용 상단 배너는 이 도움말 하단의 '모바일 상단 배너 만들기'를 참고해 주세요.
• 노출 페이지: 상단 배너를 표시할 페이지(들)를 선택합니다.
• 적용 조건: 모든 방문자 또는 로그인한 회원에게만 표시하도록 선택할 수 있습니다.
• 위치/형태: 상단 배너를 선택합니다.
• 이미지: 제작한 이미지 파일을 업로드합니다.
• 이미지 링크: 상단 배너 클릭 시 이동할 주소(URL)를 입력합니다.
• PC 높이: PC 배너가 표시될 영역의 높이를 설정합니다. 템플릿 크기를 그대로 사용하는 경우 88로 입력합니다.

• 배경색: 배너 이미지와 같은 색상값을 입력하여, 이미지가 닿지 않는 바깥 영역의 배경색을 입력합니다. 템플릿을 사용하는 경우 #eeeeee 색상값을 입력합니다.

  주의: 배경색을 설정하지 않는 경우 상단 배너 좌우로 공백이 생겨날 수 있습니다.

  
• 닫기 버튼색: '1일 동안 보지 않음' 텍스트 및 닫기 아이콘 색상을 변경합니다. 

5. 저장 버튼을 클릭해 적용합니다.

6. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

7. 상단 배너가 적절하게 표시되는지 확인합니다.

8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

모바일 상단 배너 만들기

PC용으로 제작한 상단 배너 이미지는 모바일에서 너무 작기 때문에 그림 및 텍스트의 가독성이 떨어질 수 있습니다. 이 경우 모바일 전용 팝업을 하나 더 만들어 주는 것이 제작 및 관리에 더 효과적일 수 있습니다.

1.  아래 그림을 참고해 모바일용 상단 배너 이미지를 제작합니다. 필요에 따라 위 1단계에서 내려받은 템플릿 중 reference_top_ban_mob_by_imwebcampus.psd 를 제작에 활용할 수 있습니다. 

   참고: 아래 이미지에서 빨간 점선 영역은 닫기 아이콘이 표시되는 영역입니다.

   
2. 내 사이트 관리자 페이지의 [환경설정 > 팝업/배너 관리]로 이동합니다.
3. 오른쪽 상단의 팝업 추가 버튼을 클릭합니다.
4. 위 2단계를 참고해 팝업 옵션을 설정합니다. 단, 아래의 옵션들은 다음과 같이 설정합니다.
   • 대상기기: 모바일만 선택합니다.
   • PC 높이: 대상기기를 모바일만 선택했으니 이 옵션은 무시하고 건너뜁니다.
   • MOBILE 높이: 모바일 배너 이미지 세로 크기를 입력합니다. 템플릿 크기를 그대로 사용하는 경우 200으로 입력합니다.
5. 저장 버튼을 클릭해 적용합니다.

관련 도움말

팝업 추가하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

지금까지 배운 위젯 배치 및 그리드 조절방법을 응용해 다음과 같은 페이지를 디자인할 수 있습니다.

이번 튜토리얼에서는 이미지와 텍스트만 사용되었으나, 소유한 콘텐츠에 따라 다른 위젯을 사용할 수도 있습니다. 예를 들어 특정 이미지 위젯 대신 동영상 위젯을 사용하거나, 단일지도, 갤러리 위젯 등으로 대체할 수 있습니다.

이 튜토리얼을 진행하기에 앞서 모든 이전 튜토리얼을 미리 실습해보신 후 진행하시길 권장해 드립니다.

실습진행

1단계: 한 줄 3열 위젯 배치하기

한 줄에 여백, 텍스트, 이미지 위젯을 배치하고, 이미지 위젯이 차지하는 그리드 수를 조절합니다. 어려움이 있는 경우 다음 3x1 위젯 배치하기 튜토리얼을 참고하세요.

1. 새로운 메뉴를 추가합니다. 메뉴 추가방법
2. 여백, 텍스트, 이미지 위젯을 1개씩 추가합니다. 위젯 추가방법
3. 위젯들을 왼쪽부터 여백, 텍스트, 이미지 순으로 한 줄에 3열이 되도록 배치합니다.
4. 배치한 위젯들의 그리드 수를 위 그림처럼 여백(3칸), 텍스트(3칸), 이미지(6칸)으로 조절합니다. 그리드 조절방법

2단계: 한 줄 4열 위젯 배치하기

한 줄에 텍스트와 이미지 위젯을 4열로 배치합니다. 문제가 있는 경우 4x2 이미지, 텍스트 여백 배치하기 튜토리얼을 참고해 볼 수 있습니다.

1. 텍스트와 이미지 위젯을 각각 2개씩 추가합니다.
2. 위젯들을 왼쪽부터 텍스트, 이미지, 이미지, 텍스트 순으로 한 줄에 4열이 되도록 배치합니다.

3단계: 한 줄  2열 위젯 배치하기

한 줄에 여백과 이미지 위젯을 2열로 배치하고, 텍스트 위젯을 이미지의 하단에 맞춰지도록 여백의 높이를 조절합니다.

1.  여백, 이미지, 텍스트 위젯을 각각 1개씩 추가합니다.
2. 다음 애니메이션을 참조하여, 위젯들을 배치하고, 그리드 수를 조절합니다.

            1. 이미지 위젯을 여백 위젯의 오른쪽으로 이동합니다.

            2. 텍스트 위젯을 왼쪽 여백 위젯의 바로 아래로 이동합니다.

            3. 여백 위젯 최하단 끄트머리에 마우스 포인터를 올립니다.

3. 마우스를 클릭한 다음, 마우스를 아래로 드래그합니다. 여백의 높이가 길어지며, 적당하다 싶으면 마우스를 놓습니다.

4. 이미지 위젯과 여백 위젯 사이 마우스 포인터를 올리고, 드래그하여 이미지 위젯의 그리드 수를 8칸으로 늘립니다. 여백과 텍스트 위젯은 자동으로 4칸으로 줄어듭니다.

4단계: 텍스트 입력 및 이미지 추가하기

1. 텍스트 위젯을 마우스로 더블-클릭합니다.

2. 텍스트 편집기로 전환되면 글자를 입력합니다.
   참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.

3. 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

4. 설정 창 왼쪽 상단에 마우스 포인터를 올립니다.

5. 내 PC에서 이미지를 업로드하거나, 무료 이미지 버튼을 클릭해 이미지를 추가합니다.

6. 설정창 오른쪽 상단 닫기를 클릭해 설정 창을 끕니다.

7. 남은 텍스트와 이미지 위젯에도 콘텐츠를 추가합니다.

5단계: 디자인 확인 및 게시하기

1. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
2. 의도한 디자인으로 나타나는지 확인합니다.
3. 문제가 없다면 아임웹 디자인 모드로 돌아가 게시하기를 클릭해 적용합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

이미지, 텍스트, 버튼 위젯을 활용해 다음처럼 목록형 레이아웃을 제작할 수 있습니다. 이 레이아웃은 제품 또는 서비스에 대한 상세 설명 또는 멤버 목록 표시 등에 사용될 수 있습니다.

새로운 게시물이 수시로 업로드 되거나, 게시물 수가 많은 경우 게시판 위젯을 사용하실 것을 권장합니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법

2. 다음의 위젯들을 추가합니다. 위젯 추가방법

• 이미지 위젯: 2개
• 텍스트 위젯: 2개
• 버튼 위젯: 2개

3. 이미지 위젯들이 2열이 되도록 배치합니다. 

4. 텍스트 위젯을 배치합니다.
주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다.

1. 텍스트 위젯을 왼쪽 이미지 위젯 바로 오른쪽에 배치합니다.
2. 나머지 텍스트 위젯은 오른쪽 이미지 위젯의 오른쪽에 배치합니다.

5. 버튼 위젯을 배치합니다.
주의: 검은 줄이 반드시 텍스트 위젯 너비 만큼 표시 됐을 때 마우스를 놓아야 합니다. 

1. 버튼 위젯을 왼쪽 텍스트 위젯 아래 배치합니다.
2. 나머지 버튼 위젯은 오른쪽 텍스트 위젯 아래 배치합니다.

6. 위 2번~5번 방법을 반복하여 다음 동영상처럼 목록 형식으로 반복해 배치합니다. 

7. 텍스트 위젯을 더블-클릭해 글자를 작성하고, 이미지 및 버튼 설정을 열어 내용을 추가합니다. 위젯 설정하기
참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.

8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.

9. 배치된 위젯들을 확인합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

3x2 배치, 3x3 지그재그 배치 방법을 응용해 다음과 같은 레이아웃을 만들어 볼 수 있습니다. 이전 실습을 진행하지 않은 경우 앞서 기초 배치 방법을 익혀주세요.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 다음의 위젯들을 추가합니다. 위젯 추가방법
   • 여백 위젯: 5개
   • 텍스트 위젯: 3개
   • 이미지 위젯: 4개
3. 타이틀로 사용할 텍스트 위젯을 상단으로 이동합니다. 첫 번째 텍스트 위젯을 마우스 클릭 후, 클릭을 유지한 채로 최상단 여백 위젯 바로 아래로 이동합니다. 아래 애니메이션을 참조할 수 있습니다.
4. 남은 텍스트 위젯 두 개를, 여백 위젯의 오른쪽 및 왼쪽에 배치합니다. 아래 애니메이션을 참조하세요.
5. 이미지 위젯 두 개를 여백과 텍스트 위젯 사이로 이동합니다. 다음 애니메이션을 참조합니다.
6. 위 5번과 같은 방법으로, 남은 이미지 위젯 두 개를 다음 줄의 여백과 텍스트 위젯 사이로 이동합니다. 다음 그림처럼 구성됩니다.
7. 이미지를 삽입하고, 텍스트를 입력해 콘텐츠를 추가합니다.
   참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.
8. 디자인 모드 오른쪽 상단 미리보기  아이콘을 클릭합니다.
9. 배치된 위젯들을 확인합니다.
10. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

관련 도움말

• 페이지에 이미지 추가하기
• 페이지에 텍스트 추가하기

도움말에 찾으시는 답변이 없으신가요? 문의하기

이미지 위젯을 왼쪽에, 텍스트 위젯을 오른쪽에 2열 배치하고, 다음 줄부터는 반대로 배치합니다. 이를 반복하면 이미지와 텍스트가 지그재그로 배치됩니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 이미지 위젯과 텍스트 위젯을 한 개씩 추가합니다. 위젯 추가방법

3. 이미지 위젯의 오른쪽에 텍스트 위젯을 배치합니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.

          1. 텍스트 위젯 하나를 마우스로 클릭합니다.

          2. 첫 번째 이미지 위젯의 오른쪽으로 텍스트 위젯을 드래그합니다.

          3. 첫 번째 이미지 위젯의 오른쪽에 검은 줄이 생기면, 마우스를 놓습니다.

4. 이미지 위젯과 텍스트 위젯을 새로 추가하고, 이번에는 텍스트 위젯을 이미지 위젯의 왼쪽에 배치합니다. 다음 애니메이션을 참조할 수 있습니다. 

5. 필요한 만큼 이미지 위젯과 텍스트 위젯을 추가해, 좌우 교대로 다르게 배치해봅니다.

6. 이미지 설정을 열어 이미지를 추가하고, 텍스트 위젯을 마우스 더블-클릭해 글자를 추가합니다.
참고: 별도로 작성한 글이 없는 경우 다음 한글입숨 사이트를 활용해 예시 한글 문장을 복사해 사용해볼 수 있습니다. 옵션을 선택하고, 생성하기 버튼을 클릭해 복사해 주세요.

7. 디자인 모드 오른쪽 상단의 미리보기  아이콘을 클릭합니다.

8. 배치된 위젯들을 확인합니다.

9. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

도움말에 찾으시는 답변이 없으신가요? 문의하기

한 줄에 이미지 위젯 3개를 3열로 배치하고, 각 이미지 위젯에 텍스트 위젯을 더할 수 있습니다. 이미지를 설명하는 설명문구를 추가할 때 유용합니다.

실습진행

1. 디자인 모드에 접속합니다. 접속방법
2. 이미지 위젯 3개를 추가합니다. 위젯 추가방법
3. 이미지 위젯 3개를 한 줄에 3열로 배치합니다. 위젯 3열 배치방법
4. 텍스트 위젯 3개를 추가합니다.
5. 첫 번째 텍스트 위젯을 가운데 이미지 위젯 바로 아래배치합니다. 자세한 배치방법은 아래 애니메이션과 함께 지침을 확인합니다.

           1.텍스트 위젯을 마우스 클릭합니다.

           2.마우스 클릭을 유지한 채로 가운데 있는 이미지 위젯 바로 아래로 드래그합니다.

           3.이미지 위젯 아래 위젯 너비만큼의 검은 줄이 생겨나면, 마우스를 놓습니다.

6. 남은 텍스트 위젯들도 각 이미지 위젯의 아래 배치합니다.

추가 도움말

텍스트 위젯에 글자를 작성하려면 마우스로 더블-클릭합니다. 텍스트 편집기가 열리면, 글자를 입력할 수 있습니다. 텍스트 편집도구를 활용해 글자의 크기, 굵기, 색상 등을 변경할 수 있습니다.

내 사이트에 텍스트 추가하기

도움말에 찾으시는 답변이 없으신가요? 문의하기