이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표 종류 PC web Mobile Web Mobile App GIF 기본 사용가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GIF를 사용한다. 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것. Save for web 기준 : Original 혹은 JPG Quality 90 이상 JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다. JPG로 저장 시 압축률..
background-color 백그라운드 색상을 설정합니다. background-color : #fff; - 백그라운드 색을 설정합니다. background-color : transparent; - 백그라운드 색을 투명하게 설정합니다. background-image 백그라운드 이미지를 설정합니다. background-image : none; - 백그라운드 이미지 속성을 설정하지 않습니다. background-image : url(이미지경로); - 백그라운드 이미지를 설정합니다. background-position 백그라운드 위치를 설정합니다. background-position : left top background-position : left center background-position : left..
overflow 지정한 영역에 요소들이 벗어났을 때 속성을 설정합니다. overflow 속성 overflow : visible : 지정한 영역에 요소들을 보이게 합니다. overflow : hidden :지정한 영역에 넘쳐난 요소들을 안보이게 합니다. overflow : scroll :지정한 영역에 무조건 스크롤 바를 생기게 합니다. overflow : auto : 지정한 영역에 요소들이 넘치면 자동으로 스크롤 바가 생깁니다. overflow : inherit : overflow-x의 속성 값을 상위요소한테 상속받습니다. overflow-x축 속성 visible : 지정한 영역에 요소들을 보이게 합니다. hidden : 지정한 영역에 넘쳐난 요소들을 안보이게 합니다. scroll : 지정한 영역에 무조건..
text-align 요소의 위치를 설정합니다. text-align : left; - 텍스트의 정렬을 왼쪽으로 설정합니다. text-align : right; - 텍스트의 정렬을 오른쪽으로 설정합니다. text-align : center; - 텍스트의 정렬을 중앙으로 설정합니다. text-align : justify; - 텍스트의 정렬을 양쪽으로 설정합니다.(자동 줄바꿈시 오른쪽 경계선 부분 정리) text-transform 대문자로 또는 소문자로 바꾸는 속성입니다. text-transform: none; - 입력된 그대로 출력합니다. text-transform: capitalize; - 단어의 첫번째 글자를 대문자로 바꿉니다. text-transform: uppercase ; - 모든 글자를 대문자로 바..
white-space 줄바꿈, 공백, 줄 속성을 설정합니다. 정의(Definition) white-space 속성은 줄바꿈, 공백, 줄 속성을 설정합니다. pre속성과 pre태그는 마크업을 그대로 보여주는 속성을 갖고 있습니다. pre 태그를 많이 사용하기 때문에 CSS 속성은 잘 사용하지 않습니다. 기본적으로 마크업을 하고 화면에 출력하면, 마크업에서 공백 한 칸은 화면에서 한 칸으로 인식합니다. 두 칸, 세 칸도 공백 한 칸으로 인식합니다. 한 줄은 한 줄 조차 인식할 수 없습니다. 이런 공백과 줄을 인식시켜주는 속성이 pre, pre-wrap, pre-line 속성입니다. 공백과 줄을 인식한다는 것은 마크업에서 두 칸, 세칸, 두 줄 등을 표시하면, 화면에서도 그대로 출력된다는 것을 의미합니다. 속..