페이지 설정

이전 다음 

페이지 배경

웹브라우저의 전체영역에 대한 배경을 지정하는 곳입니다.

배경색

페이지의 배경색을 RGB포맷으로 지정합니다.

배경이미지

배경색과 배경이미지를 동시에 설정하는 경우 배경색 위에 배경이미지가 보이게 됩니다.

반복설정

  • repeat : 지정한 이미지를 가로,세로 반복해서 페이지 영역 전체에 채웁니다.
  • repeat-x : 가로 방향으로만 반복해서 이미지를 채워 보여줍니다.
  • repeat-y : 세로 방향으로만 반복해서 이미지를 채워 보여줍니다.
  • no-repeat : 반복해서 보여주지 않습니다.

스크롤 설정

  • scroll : 화면 스크롤에 따라 배경이미지도 같이 따라 스크롤됩니다.
  • fixed : 스크롤 되더라도 페이지의 배경이미지는 웹브라우저 해당 위치에 그대로 고정되어 보여집니다.

위치

위치는 left/right, top/bottom 조합으로 설정 가능하며, 추가로 셀 좌측 상단을 기준으로 한 특정 위치를 지정할 수 있습니다. 우선순위는 특정위치 설정이 높습니다.

크기 설정

기본적으로 배경이미지는 셀의 크기에 관계없이 원본크기로 보여줍니다. 필요에 따라 다음과 같이 크기를 지정할 수 있습니다.

  • auto : 기본값으로 배경이미지의 원래 크기로 보여줍니다. 값이 없으면 auto 로 간주합니다.
  • cover : 해당 영역 안에 빈 공간이 없이 배경이미지를 리사이징 한다. 만약 배경이미지의 비율과 영역의 비율이 맞지 않는 경우 넘쳐나는 이미지 영역은 짤리게 된다.
  • contain : 해당 영역 안에서 이미지가 짤리지 않게 비율을 맞춰 리사이징 한다. 이 경우에는 배경이미지의 비율과 영역의 비율이 맞지 않으면 영역에 빈공간이 생기게 된다.
  • 절대 크기 : width height 값을 직접 지정. 예) "300px" 또는 "500px 250px"
  • 비율 : 배경이미지를 포함한 영역의 % 값을 계산하여 width, height 값을 지정. 예) "50%" 또는 "50% 80%"
백문이 불여일견이죠, CSS 배경 속성 데모 바로가기

컨테이너

홈페이지의 최상위 셀을 설정하는 곳으로, 홈페이지의 전체 넓이 및 정렬을 설정하는 곳입니다.

Page 넓이

  • "자동할당" 체크를 해제후 고정사이즈로 넓이를 지정하거나,
  • "자동할당" 체크를 해서 웹브라우저의 넓이에 꽉 차게 구성할 수 있습니다. 이경우에는 최소 및 최대 넓이를 옵션으로 설정 가능합니다. 페이지에서 한 부분이라도 웹브라우저에 꽉차게 보여줄 셀이 필요하다면 "자동할당"체크를 해야겠죠.
    또한 컨테이너 배경색 또는 배경이미지를 지정한 경우는, 최소넓이를 지정해야 브라우저의 좌우 스크롤이 생긴 상황에서 스크롤로 가려진 우측의 영역에도 배경색 및 이미지가 채워지게 됩니다.

Page 높이

페이지 높이는 보통 자동할당으로 하지만, 페이지 레이아웃 디자인에 따라 높이를 지정할 수 있습니다.

정렬

Page 넓이 또는 최대넓이가 설정된 경우 홈페이지의 정렬을 설정할 수 있습니다.

내부여백

셀의 테두리와 내용 사이의 여백을 설정합니다.

외부여백

셀의 테두리 기준 외부 여백을 설정합니다. 즉, 셀과 셀간의 여백을 의미하며 인접한 셀에 모두 외부여백이 설정된 경우는 CSS 중첩여백 규칙에 따라 둘 중 큰 숫자의 여백값만 적용됩니다. 외부여백은 셀의 크기에 포함되지 않습니다.
외부여백의 경우 음수로 지정 가능합니다. 음수인 경우는 인접할 셀 또는 부모셀과의 거리를 벌리는게 아니라, 반대로 겹쳐보이게 합니다.
CSS 박스 모델 자세히 알아보기

내부/외부 여백 반응형 설정

필요시 브라우저의 넓이 변화에 따른 여백값을 설정할 수 있습니다. 값을 지정하지 않은 항목은 위에서 설정한 값을 따릅니다.

셀 크기보다 큰 내용처리

컨테이너의 넓이 또는 크기가 고정사이즈 또는 최대사이즈가 지정된 상태에서 내용이 컨테이너 사이즈를 초과하는 경우,

  • visible : 컨테이너 범위를 벗어나는 내용도 보여줍니다.
  • hidden : 컨테이너 범위를 벗어나는 내용은 보이지 않습니다.
  • scroll : 스크롤바가 항상 나타납니다.
  • auto : 컨테이너 범위를 벗어나는 내용이 있는 경우만 스크롤바가 보입니다.

컨테이너 배경

컨테이너의 배경 및 배경이미지를 지정합니다. 적용 범위만 다를뿐 "페이지 배경"과 설정방법은 같습니다.

컨테이너 테두리

테두리 스타일

A solid(실선) border.

A dotted(점선) border.

A dashed(파선) border.

A double(이중선) border.

A groove border.

A ridge border.

An inset border.

An outset border.

No border.

A mixed border.

테두리 두께

정수 또는 실수로 지정 가능합니다.

px
필셀단위의 절대적인 크기를 지정..
em
font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
rem
루트 태그(html)의 크기를 기준으로 함.
pt
point, 일반문서(워드등)에서 많이 사용하는 단위.
%
percent, 기본글꼴의 크기에 대하여 상대적인 크기를 가짐.
vw, vh
웹브라우저의 넓이(vw) 또는 높이(vh)의 100분의 1을 기준으로 함.
vmax, vmin
웹브라우저의 넓이 및 높이중 큰값(vmax) 또는 작은값(vmin) 을 기준으로 함.

CSS 단위 자세히 알아보기

컨테이너 효과

둥근 모서리 효과

상하좌우 모두 25px 만큼 설정 시
각 모서리의 둥근정도를 설정합니다.

불투명도

셀 자체의 불투명도를 숫자로 지정합니다. 설정 시 셀 안에 등록된 모듈의 내용 자체에 투명도가 적용됩니다.

그림자 효과

  • Offset-X : 그림자가 떨어져 보일 가로 사이즈. 음수로도 지정 가능.
  • Offset-Y : 그림자가 떨어져 보일 세로 사이즈. 음수로도 지정 가능.
  • Blur : 그림자 선명도. 0이면 선명, 숫자가 클수록 희미하게 처리됩니다.
  • 크기 : 그림자의 두께.
  • Inset : 그림자를 셀 테두리 기준 안쪽으로 보여줍니다.
  • 색상 : 그림자의 색상.

그라데이션

[컨테이너 배경]탭에서 지정한 배경색으로부터 설정한 배경색으로 자연스럽게 변하는 효과를 줄 수 있습니다.

Classes

컨테이너 셀에 추가적인 CSS Class 를 지정할때 사용합니다. 즉, 별도의 스타일 파일을 페이지에 삽입시 해당 스타일에 정의해 놓은 클래스를 셀에 지정할때 사용합니다. 또는 Animation Class Effect를 적용할때 사용할 수 있습니다.

Attributes

컨테이너 셀에 별도의 속성값을 지정하여 사용할 수 있습니다. 예를들어 Stellar.js를 이용하여 배경 스크롤 효과를 줄때 적용시킬 셀에 필요한 속성을 지정하여 구현 가능합니다.

헤더

페이지 HTML 코드에서 Head 에 들어갈 추가적인 내용을 설정합니다.

Language

페이지에 사용된 언어를 선택 또는 직접 지정합니다. 해당값을 지정하면 검색로봇등이 페이지 접근시 어떤 언어로 작성된 페이지인지 이해하는데 도움을 줍니다.

사이트 제목

웹브라우저 타이틀 또는 탭부분에 보일 제목을 지정합니다. 설정하지 않는 경우 기본적으로 메뉴명이 제목으로 보여집니다.(단, 메인페이지는 홈페이지주소로 보여짐)

메타 태그

페이지가 어떤 내용을 담고 있는지를 "사이트 설명"란에 지정하고, 페이지의 핵심 키워드를 "사이트 키워드"란에 입력합니다.

검색사이트에 노출이 되기 위해서는 "사이트 제목/사이트 설명"은 필수로 지정하세요.

Viewport

뷰포트를 사용하면 모바일장치에서 전체 페이지를 축소시켜 모두 보여주지 않고, 모바일장치의 해상도만큼만 화면에 보여주고 남는부분은 터치(화면이동)를 통하여 보여지게 됩니다.
그러므로 모바일용 페이지 작업시는 항상 해당 옵션을 사용해야겠죠.
또한 모바일용 페이지의 넓이는 자동으로 설정해서 모바일화면에서 가려지는 부분이 없도록 하는게 좋습니다.(물론 페이지안에 들어있는 이미지등의 넓이도 모바일장치의 해상도보다 작거나 자동으로 설정해야 화면상에서 가려지는 부분이 없겠죠.)

  • initial-scale : 초기 확대/축소시켜 보여줄 비율입니다. 특별한 이유가 없는한 "1"로 지정합니다.
  • maximum-scale : 모바일 장치에서 화면 확대할 수 있는 최대 비율을 지정합니다(옵션).
    보통 maximum-scale 값은 지정하지 않지만 초기값과 최대값을 같은 값으로 설정하는 경우 모바일 장치를 가로/세로 회전시 페이지 레이아웃이 모바일 넓이에 맞게 새로고침되는 장점도 있습니다.

Etc

HTML 코드상의 Head 에 들어갈 추가적인 사용자 코드를 입력합니다.
올바르지 않은 헤더는 페이지의 구조를 망가트릴 수 있으므로 주의하세요.

다운방지

마우스 오른쪽 클릭 차단 / 마우스 드래그 텍스트 선택 차단 / 이미지 드래그 차단 설정을 할 수 있습니다.
편리상 해당 기능은 홈페이지에서만 적용되어 보이고 빌더 작업화면에는 적용되지 않습니다.
해당 설정을 한다고 해서 페이지의 내용을 복사해가지 못하는것은 아닙니다. HTML 소스보기등을 통하여 내용을 복사해갈 수 있습니다.

Animated

셀이나 이미지에 특정 class 를 추가하여 스크롤 또는 마우스오버시 애니메이션 효과를 줄 수 있도록 스타일 파일을 헤더에 추가합니다.
자세한 클래스 설정은 애니메이션 클래스 설정을 참고하세요.

  • Offset : "스크롤시 애니메이션(onscroll)" 클래스 이용시에는 클래스를 설정한 셀 또는 이미지가 숨겨지게 됩니다. 숨겨진 상태에서 해당 영역이 웹브라우저 하단으로부터 지정한 Offset 값만큼 거리가 생길때 나타나게 합니다.
  • Mobile : 애니메이션 효과를 모바일장치에서도 사용할지 여부를 설정합니다.

Refresh / Redirect

페이지 접속 후 자동으로 지정된 시간이 지난후 설정한 링크로 이동하게 합니다. "링크"가 지정되지 않으면 현재 페이지를 새로고침하게 됩니다.

접속 IP 제한

페이지 접근 자체를 특정 IP 대역으로 제한하고자 할때 콤마(,)로 구분하여 접근을 허용할 IP주소들을 설정할 수 있습니다.
119.70.처럼 입력하면 해당 IP로 시작하는 모든 IP에 대하여 허용합니다.
현재 당신의 접속 IP는 54.152.77.92 입니다.
잘못 설정하여 관리자도 접속하지 못하는 상황이 발생할 수 있으니 꼭 필요한 경우만 주의해서 설정하세요.

머리말

HTML 소스에서 <body> 태그 바로 뒤에 추가될 HTML 코드를 지정할 수 있습니다.

꼬리말

HTML 소스에서 </body> 태그 바로 앞에 추가될 HTML 코드를 지정할 수 있습니다.

적용범위 설정

"페이지 설정" 정보를 여러 페이지에 똑같이 적용하고 싶을때 적용범위를 설정한후 저장할 수 있습니다.
우측과 같은 사이트맵에서 현재 위치가 [CEO 인사말] 이라고 가정할때,

  • 해당 페이지에만 적용합니다 : 현재 페이지에만 적용.
  • 같은 서브페이지로 한정 : "CEO 인사말" 이 속한 "회사소개"의 서브 페이지만을 대상으로 적용합니다. 이때 상위 페이지인 "회사소개"페이지도 적용대상에 포함됩니다.
  • 같은 메뉴그룹내의 페이지로 한정 : "CEO 인사말" 페이지가 속한 "기본메뉴"그룹에 있는 페이지만을 대상으로 적용합니다.
  • 모든 페이지에 대해 적용합니다 : "페이지 성격"이 같은 "PC" 성격인 모든 페이지를 대상으로 적용합니다. 즉, "페이지 성격"이 "Mobile"인 페이지는 적용대상에서 제외됩니다.

다른 페이지에도 적용시 다음과 같은 추가 옵션을 지정합니다.

  • 헤더-Etc,머리말,꼬리말이 같은 페이지만 적용 : 적용범위에 포함되는 페이지에서도 "Etc, 머리말, 꼬리말"의 사용여부 및 설정정보가 같은 페이지에 한해서 적용합니다.
  • 적용항목 : 똑같이 적용할 항목범위를 선택합니다.
  • 제외 항목 : 적용항목에 포함되더라도 예외적으로 제외시킬 적용항목을 선택합니다. 보통 사이트제목 및 메타태그를 페이지별로 다르게 설정해야하므로 적용항목에서 제외하는게 좋겠죠.
페이지 성격메뉴그룹메뉴명
PC기본메뉴회사소개
 CEO 인사말
 회사연혁
 오시는 길
 제품안내
 고객센터
 고객의 소리
 자주하는 질문
 채용정보
 채용안내
 인사/복지제도
 커뮤니티
 공지사항
 질문과답변
PC상단보조메뉴Home
 로그인
 회원가입
 사이트맵
Mobile모바일회사소개
 CEO 인사말
 ...
이전 다음 
go top