aura component 기본구조

* aura component의 기본 구조

• TestCmp.cmp

<!-- aura 컴포넌트를 사용하는 경우 제일 바깥에 wrap이라는 class를 줌 (필수는 아님) -->
<div class="wrap"> 
	<h1 class="title">test</h1>
</div>

• TestCmp.css

.THIS .title{
	color: #282828;
}
/* 적용됨 */
.THIS.wrap{
	background-color: beige;
}
/* 적용 안 됨*/
.THIS .wrap{
    background-color: blue;
}

* component

화면에서 직접 확인 할 때 (크롬 등으로) 둘러싸인 제일 상위의 div에 c+컴포넌트 명이 자동으로 붙는다.
만약 wrap이라는 class로 감싸지 않고, div를 여러번 선언하는 경우 다음과 같이 나온다.

<div class="con01 cTestCmp"></div>
<div class="con02 cTestCmp"></div>
<div class="con03 cTestCmp"></div>

wrap이라는 class로 감싸고 div를 여러번 사용하는 경우가 상대적으로 깔끔하기 때문에 아래와 같은 구조로 시작한다.

<div class="wrap cTestCmp">
  <div class="con01"></div>
  <div class="con02"></div>
  <div class="con03"></div>
</div>

* css

화면에서 직접 확인 할 때 .THIS는 .c+컴포넌트 명으로 바뀌어 적용된다. 위의 예시같은 경우 .cTestCmp로 확인 가능하다.