새 일정 캘린더 화면 작업 - 작성중

- 작업 결과물

1)div안에 icon-button, button-button이 있을때 top.js의 linear layout안에 작성하면

부모 div에서 "display : inline-block"이 먹히지 않아서 각각의 element를 linear layout으로 감싸주었다.

div로 감싸지 않아도 "display : inline-block"이 먹히는지는 추후에 확인해 볼 예정

 

- CSS 에서 새로 알게 된 것

1) ::placeholder, :before등의 사용방식이 있다는 사실을 알게 되었다.

2) icon의 content를 url(../../파일경로) 방식으로 세팅 가능하다는 것을 알게 되었다.

  - http get 방식으로 아이콘을 가져온다. 어떻게 각 아이콘 파일로 라우팅이 가능한지는 확인해보자

  - 경로도 실제 리소스 경로와 약간 다르다. target 의 경로와 비슷한지도 확인해봐야 할 것 같다

// 중요 체크박스 글자 높이조정
top-checkbox#TScheduleAddDetailTab1Title_CheckBox_Important .top-checkbox-text span {
    vertical-align: -4px;
}
//취소, 만들기 버튼 오른쪽으로 정렬
top-linearlayout #calendarEventCreate_TailLayout.top-linearlayout-root {
	text-align: right;
}
//텍스트 필드 font-size 조정
input#TScheduleAddDetailTab1Title_TextField{
	font-size: 13px;
}
input#TScheduleAddDetailTab1AddLocation_TextField{
	font-size: 13px;
}
//텍스트 필드 hint 글자색, size 조정 --> 사이즈는 적용되는데 색깔 적용안되는 이유 파악 못함
input#TScheduleAddDetailTab1Title_TextField::palceholder{
    color: #c1c1c1;
    font-size: 13px;
}
input#TScheduleAddDetailTab1AddLocation_TextField::palceholder{
    color: #c1c1c1;
    font-size: 13px;
}
//ICON class에서 가져올 수 없어서, url 경로로 넣어 놓음
/*TOP팀에서 기획에서 나온 디자인으로 아이콘 추가해주기전에 .svg 파일로 임시로 넣어놓음*/
span#TScheduleAddDetailTab1StartDate_Icon		 		{ content: url(../../res/calendar/calendar.svg);}
span#TScheduleAddDetailTab1AddMembers_Icon		 		{ content: url(../../res/calendar/member.svg);}
span#TScheduleAddDetailTab1AddLocation_Icon				{ content: url(../../res/calendar/location.svg);}
span#TScheduleAddDetailTab1Color_Icon					{ content: url(../../res/calendar/color.svg);}
span#TScheduleAddDetailTab1AddNotification_Icon			{ content: url(../../res/calendar/alarm.svg);}
span#TScheduleAddDetailTab1AddFile_Icon					{ content: url(../../res/calendar/attach.svg);}
span#TScheduleAddDetailTab1AddDescription_Icon			{ content: url(../../res/calendar/description.svg);}

 

- 크롬 개발자 도구

1) New Style Rule을 통해서 inpector stypesheet를 추가해서 css를 적용해 볼 수 있다

 2) Delete 버튼으로 element를 삭제해가면서 확인해 볼 수 있다