(image 출처 : https://yabatadesign.github.io/afterglow-theme/) packagecontrol.io install process 1. http://www.sublimetext.com/ 접속후, 다운로드 합니다. 2. 설치 후, Sublime Text 3 클릭하여 open 합니다. 3. https://packagecontrol.io/installation 접속후 , Sublime Text 3 의 View > View > Show Console menu 열어서 아래 SUBLIME TEXT 3 아래 내용을 복사하여 붙여넣고 Enter ! 4. package Control 클릭 >package Control : install package > Emmet, BracketH..
CSS 단위 부모나 기타 요소들에 영향을 받지 않고 항상 일정한 크기를 유지하는 단위이다. % : 기본크기에 대한 비율 em : 글꼴 높이의 배수 ex : 소문자 높이의 배수 px : 픽셀 단위를 생략할 때의 디폴트이다. pt : 포인트 pc : 파이카(12포인트와 같음) in : 인치 cm : 센티미터 mm : 밀리미터 CSS 색상 색상값을 표현하는 여러가지 색상 모델을 지원한다. #RRGGBB : 빨강, 초록, 파랑의 강도를 16진수 두 자리로 지정한다. 각 요소별로 256단계를 표현할 수 있으며 총 1600만 가지 색을 사용할 수 있다. #RGB : 빨강, 초록, 파랑의 16진수 한자리로 지정한다. 색상 요소별로 16단계밖에 강도를 지정할 수 없어 잘 사용되지 않는다. rgb(r, g, b) : 빨..
이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표 종류 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 속성입니다. 공백과 줄을 인식한다는 것은 마크업에서 두 칸, 세칸, 두 줄 등을 표시하면, 화면에서도 그대로 출력된다는 것을 의미합니다. 속..
블록 요소 & 인라인 요소(Block/inline) 블록 요소는 박스, 인라인 요소는 텍스트를 의미합니다. 블록 엘리먼트(Block Element) 독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있습니다. 블록 요소에는 블록 요소와 인라인 요소를 포함 할 수 있습니다. , , , , 인라인 엘리먼트(Inline Element) 독립된 텍스트 영역으로, 한 줄에 여러 개의 인라인 요소를 표현 할 수 있습니다. 인라인 용소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 할 수 있습니다. , , , , image출처 : https://cdn.dribbble.com/users/103909/screenshots/3311170/sixbase-preview-04.png