'style'에 해당되는 글 3건

  1. 텍스트가 div 범위 밖으로 나가는 현상 해결하기(줄바꿈 처리하기) (2)
  2. CSS 가로뿐만이 아니라 세로로도 가운데 정렬하기
  3. 새로운 IOS7 스타일의 아이클라우드(ICloud) 와 Pages, Numbers, Keynote

div 태그에 width를 직접 정해주면 텍스트가 자동으로 줄 바꿈을 하지 못하고 div 범위를 벗어나는 경우가 있습니다.

텍스트가 div 범위 밖으로 나가는 현상 해결하기

이 문제를 해결하는 방법은 간단합니다. div의 스타일을 정해주는 부분에 "word-break:break-all;" 를 추가하면 됩니다.


word-break:break-all;


예시)


가로 방면에서 가운데를 정렬하게 하는 방법은 잘 알려졌지만, div 안에서 세로로도 가운데 정렬하는 건 약간 더 까다로운 편입니다. 텍스트가 여러 줄이 되어도 비율을 맞춰 가운데 정렬하게 할 수 있습니다.


 

CSS 가로뿐만이 아니라 세로로도 가운데 정렬하기


CSS 부분

<style>


.outer {
display: table;
width: 300px;
margin-top: 24px;
}

.tablerow {

display: table-row;

}

.content {

width:300px;
height: 300px;

vertical-align: middle;
display: table-cell;

}

</style>


HTML 부분

<div class="outer">
<div class="tablerow">
<div class="content">

가운데에 있을 내용
</div>
</div>
</div>


자신의 사진이나 문서등을 다른 저장장치 없이 자유롭게 올리고 내려받을수 있는 아이클라우드(iCloud)는 특히 애플 제품 맥이나, 아이폰, 아이패드같은 제품에서 연동이 자유롭게 되 편리했는데요.
최근 공개된 IOS7의 컨셉에 맞춰 아이클라우드도 IOS7의 스타일로 변경되었습니다.

단순한 스타일 변경이 아닌 대대적인 기능 개선, 특히 iWork부분이 마이크로소프트 오피스를 위협할  수 있는 존재가 되었다는 것입니다.



새로운 IOS7 스타일의 아이클라우드(ICloud) 와 Pages, Numbers, Keynote

 


먼저 과감하게 질감을 빼고 단순화했고 IOS7처럼 아이콘이 바뀌었습니다. IOS7아이콘에는 논란이 많은데요,
개인적으로 IOS7의 아이콘은 배경화면의 영향을 많이 받는거 같습니다.


기존 IOS의 앱 레이아웃을 과감하게 버리고 편의 위주로 변경된 것을 확인할 수 있습니다.

 

상단의 앱 제목을 클릭하면 홈을 거칠 필요 없이 다른 앱으로 손쉽게 이동할 수 있도록 변경된 것이 특징입니다.


바뀐 연락처의 모습입니다. 기존에 책을 펼쳐놓은것 같은 스큐어모픽 형태를 벗어난 모습입니다. 아마 OS X가 디자인이 바뀐다면 이런 형태의 모습으로 바뀌지 않을까 합니다.

 
달력도 마찬가지로 기존의 다이어리같은 스타일을 버리고 바뀐 모습입니다.

 
노트도 마찬가지로 기존의 수첩같은 디자인을 버리고 바뀌었는데, 기존에 수첩같은 모습을 하기 위해 존재했던 덮개가 불편해 보였는데 변경되었습니다.

<리스트를 가리는 덮개>

 
미리 알림입니다. 이것도 상당히 심플해졌습니다.


ICloud Beta의 새로운 앱들을 보고 나니, 차세대 OSX의 디자인을 일부 예측할 수 있게 되었습니다.
기대에 맞게 심플하게 나오면 좋겠네요.(지금 OS X도 나쁘지 않습니다.)

새롭게 바뀐 ICloud는 아래 주소에서 체험해 볼 수 있습니다.

http://beta.icloud.com

iWork Beta(Pages, Numbers, Keynote)

기존에는 아이클라우드에서 뷰어 정도의 역할밖에 하지 못했던 iWork 기능이 마이크로소프트 오피스를 위협할 정도로 새롭게 바뀌었습니다.



 문서 편집 추가가 가능해졌습니다.


또한 놀라운 점은 웹이기 때문에 윈도우도 지원하는데요 .그런데 아직 베타버전이라서 그런지 몰라도 인터넷 익스플로러에서 일부 버그가 있으나, 그동안 iWork는 맥에서만 보고 편집이 가능했는데 이젠 언제 어디서나 어떤 운영체제, 브라우저로 편집하든 구애가 없다는 점에서 놀라운 발전인 것 같습니다.(IE 는 일부 기능이 안됩니다.)


Numbers입니다. 네이티브와 거의 비슷한 기능을 제공하는거 같습니다.



키노트는 일부 디테일한 애니매이션을 제외하면 편집과/ 발표에 큰 이상이 없는 듯 합니다.(Beta라서 그런 이유도 있긴 하겠지만)


애플 제품에서만 보고/ 수정이 가능하다는 점 때문에 항상 ppt로 작성하거나 키노트를 동영상으로 바꾸는 작업을 했었는데 앞으로는 그럴 필요가 없을지도 모르겠습니다.

아이클라우드 iWork의 정식 버전을 기대해봅니다.


도움이 되셨나요?
그럼 손가락을 눌러주세요.