CSS 참조

CSS(Cascading Style Sheet)는 웹사이트 및 앱의 스타일과 레이아웃을 제어합니다. App Maker에서 CSS를 사용하여 위젯의 색상, 글꼴, 테두리 등을 지정하여 앱의 모양을 맞춤설정할 수 있습니다.

페이지 편집기의 오른쪽 메뉴에서 스타일 탭에 CSS를 추가합니다. 예를 들어 Button1이라는 버튼을 주황색으로 바꾸려면 페이지에서 이 버튼을 선택하고 스타일 탭에 다음 코드를 추가합니다.

.app-NewPage-Button1 {
      background-color: orange;
    }
    

기본 CSS

글꼴

효과 CSS/스타일 원본 스타일 적용 후 가능한 값
굵게 font-weight: bold; 샘플 텍스트 샘플 텍스트 normal, bold
기울임꼴 font-style:italic; 샘플 텍스트 샘플 텍스트 normal, italic
취소선 text-decoration: line-through; 샘플 텍스트 샘플 텍스트 underline, line-through, overline
텍스트 색상 color: red;
color: #ff0000;
샘플 텍스트 샘플 텍스트 색상 이름 또는 HTML 색상 코드
텍스트 크기 font-size:20px; 샘플 텍스트 샘플 텍스트 픽셀 크기 또는 em 단위
텍스트 정렬 text-align: right; 샘플 텍스트 샘플 텍스트 left, center, right

패널, 버튼 등

테두리

효과 CSS/스타일 원본 스타일 적용 후
테두리 추가 또는 변경 border: 1px red solid;
테두리 삭제 border: none;

둥근 테두리

효과 CSS/스타일 원본 스타일 적용 후
모든 모서리를 둥글게 border-radius:5px;
개별 모서리를 둥글게 border-top-right-radius: 0px;
border-top-left-radius: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 15px;
샘플 텍스트
샘플 텍스트

배경 색상

효과 CSS/스타일 원본 스타일 적용 후
** 색상 추가 또는 변경 ** background-color: lightgreen;
색상 지우기 background: none;

커서

효과 CSS/스타일 원본 스타일 적용 후
포인터(클릭 가능한 요소) cursor: pointer; 샘플 텍스트 샘플 텍스트
화살표(클릭할 수 없는 요소) cursor: default; 샘플 링크 샘플 링크

오버플로 콘텐츠 처리

앱의 콘텐츠가 컨테이너에 비해 너무 큰 경우가 있습니다. 텍스트가 라벨 위젯에 비해 너무 길거나 위젯 그룹이 패널에 딱 맞지 않는 등 콘텐츠가 컨테이너를 오버플로할 경우 앱이 응답하는 방식을 CSS로 정의할 수 있습니다.

오버플로 콘텐츠 숨기기

효과 CSS/스타일 원본 스타일 적용 후
오버플로 콘텐츠 자르기
overflow: hidden;
CSS IS AWESOME
CSS IS AWESOME
스크롤 사용
overflow: auto;
CSS IS AWESOME
CSS IS AWESOME
너무 넓은 콘텐츠 자르기
overflow-x: hidden;
CSS IS AWESOME
CSS IS AWESOME
너무 긴 콘텐츠에 스크롤 사용
overflow-y: auto;
CSS IS AWESOME
CSS IS AWESOME

오버플로 텍스트에 생략 부호 사용

효과 CSS/스타일 원본 스타일 적용 후
생략 부호 overflow: hidden;
text-overflow: ellipsis;
다국어 지원
다국어 지원

표준 브라우저 효과 변경

브라우저에는 대부분의 대화식 요소를 표시하는 표준 방법이 있습니다. 예를 들어 이미 방문한 링크는 일반적으로 밑줄이 그어져 있고 자주색으로 표시됩니다. CSS 의사 선택기를 사용하여 이러한 스타일을 재정의할 수 있습니다.

마우스 오버

마우스를 특정 요소 위로 가져가는 것을 마우스 오버라고 합니다. 버튼과 링크에는 마우스 오버 효과가 내장되어 있지만 입력 필드와 패널을 포함한 모든 App Maker 위젯에도 마우스 오버 효과를 추가할 수 있습니다.

CSS/스타일 원본 스타일 적용 후
.blueButton {background-color: blue;}
.blueButton:hover {background-color: pink;}
.testClass {}
.testClass:hover {background-color: #FFA500;}
샘플 텍스트
샘플 텍스트

포커스 지정 및 !important 한정자

특정 요소와 상호작용하면 해당 요소에 포커스가 지정됩니다. 예를 들어 입력 상자를 클릭하면 텍스트 커서가 나타납니다. 포커스가 있으면 모든 키보드 입력이 포커스가 지정된 요소로 곧바로 이동합니다.

스타일이 브라우저 또는 App Maker 테마에 정의된 스타일과 충돌하는 경우가 있습니다. CSS가 렌더링에 실패할 경우 브라우저 또는 테마 스타일로 인해 스타일이 재정의되지 않도록 스타일에 !important 한정자를 추가해 보세요. 하지만 한정자를 너무 넓게 적용하지는 마세요. 그러면 중요한 내장 스타일이 재정의될 수 있습니다.

CSS/스타일 원본 스타일 적용 후
.inputClass {}
.inputClass:focus {border:1px solid red;}
.inputClass1 {}
.inputClass1:focus {border:1px solid red !important;}

다음 단계