DIV설정

■ DIV 수정

편집화면에서 D아이콘 클릭 > 수정을 클릭했을 때 나오는 화면입니다.

 

 

1. 행박스 

① 특징 

- D아이콘이 검은색이고, 마우스를 오버했을 때 검은색 테두리가 나타납니다.  
 

- 행박스는 아래쪽 방향으로 나열됩니다.

- 열박스들을 하나로 감싸는 역할을 합니다. 

 

② DIV속성

- class="ABA-wrap-box AB-cr" 라고 적혀있습니다.

- DIV종류에서 행박스에 체크하면 속성이 자동으로 입력됩니다. 

 

③ DIV에 스타일(style) 넣는 방법 

- D아이콘클릭 > style 클릭 > 원하는 탭 선택 > 추가할 속성에 체크 후 값을 입력하세요.

 

 

 

2. 열박스 

① 특징 

- D아이콘이 초록색이고, 마우스를 오버했을 때 초록색 테두리가 나타납니다.  
 

- 행박스의 안쪽에 위치합니다. 행박스의 바깥쪽에는 만들 수 없습니다.

- 열박스는 오른쪽 방향으로 나열됩니다.

- 컨텐츠박스들을 하나로 감싸는 역할을 합니다. 
 

 

② DIV속성

- class="ABA-container-box-100" 라고 적혀있습니다.

- DIV종류에서 열박스에 체크하면 속성이 자동으로 입력됩니다. 

- 맨 뒤의 숫자부분에는 열의 가로사이즈를 입력하세요.
   예시) class="ABA-container-box-552" : 가로사이즈 552px짜리 열박스 

- 모바일일 경우에는 맨 뒤의 숫자를 수정한 뒤 소문자 p를 붙이면 %로 들어갑니다.
   예시) class="ABA-container-box-50p" : 가로사이즈 50%짜리 열박스 

 

③ 열박스와 열박스 사이에 여백(margin)넣는 법 

- style="margin-right:50px;" 속성을 추가하면 열박스 오른쪽으로 50px만큼 여백이 생깁니다.
   예시) class="ABA-container-box-100" style="margin-right:50px;"  

 

 

 

3. 컨텐츠박스 

① 특징 

- D아이콘이 빨간색이고, 마우스를 오버했을 때 빨간색 테두리가 나타납니다.  
 

- 열박스의 안쪽에 위치합니다.

- 컨텐츠박스의 안쪽에 컨텐츠박스를 중복해서 만들 수 없습니다.

- 컨텐츠박스는 아래쪽 방향으로 나열됩니다.

- 나열된 항목들을 하나로 감싸는 역할을 합니다. 

- 컨텐츠박스에는 기본적으로 아래여백이 있습니다. 제거하려면 style="margin-bottom:0;" 을 입력하세요.

 

② DIV속성

- class="ABA-content-box" 라고 적혀있습니다.

- DIV종류에서 컨텐츠박스에 체크하면 속성이 자동으로 입력됩니다.