손에서 손으로

레이어 가운데 정렬 수평 : transform:translateX(-50%); 수직 : transform:translateY(-50%); 수평,수직 : display:flex; justify-content:center;align-items:center; 수평 정렬 사용예시(수직 정렬도 비슷한 방법으로 상요하면 됨) #disp { width:200px; position:relative; left:50%; } => 레이어의 왼쪽 모서리가 화면의 50% 에서부터 시작하여 출력됨 #disp { width:200px; position:relative; left:50%; transform:translateX(-50%); } => 레이어의 왼쪽 모서리가 화며의 50% 에서 width 값의 -50% 인 100px 만큼..

정해진 틀안에서 글을 출력해야 되는 경우등이 있을때 사용하는 CSS 속성들 잘 사용을 하지 않다보니 작업할때마다 찾아서 사용할려고 스크랩 해둡니다. white-space 속성값 normal : 기본값으로 글자 줄이 자동으로 바뀝니다. 콘텐츠가 요소의 너비를 초과할 경우 다음 줄로 바뀝니다. nowrap : 줄 바꿈이 실행되지 않습니다. 즉, 콘텐츠가 다음 줄로 바뀌지 않습니다. pre : 줄 바꿈과 기타 공백이 유지됩니다. (이 속성값은 !DOCTYPE 선언에서 표준 준수 모드를 지정할 경우에 지원되고 !DOCTYPE 선언에서 표준 준수 모드를 지정하지 않으면 이 값을 검색할 수는 있지만 렌더링에 양향을 주지 않으며 normal 값처럼 동작합니다. pre-line : 줄 바꿈 시퀀스가 유지됩니다. pre..