Sass (Synthetically Awesome StyleSheets) CSS 전처리기 변수, 상속, 혼합, 중첩 등의 다양한 기능 제공 다만 전처리기로 작성한 코드는 CSS로 컴파일을 거친 뒤 실행 가능 CSS 전처리기(preprocessor) : 자신만의 특별한 문법을 통해 CSS를 생성하는 프로그램 SCSS == Sass SCSS는 Sass의 모든 기능을 지원하는 Superset Sass와 SCSS의 차이점 Sass : 중괄호가 아닌 들여 쓰기를 사용 (like Python) SCSS : CSS처럼 {}와 ;을 사용 (like Javascript) 1. Data Types 다양한 데이터 타입을 정의하고 있기 때문에 이를 변수처럼 활용 가능 Numbers 숫자 1, .82, 20px, 2em… St..
설명 🔖 화면에 어떻게 드러나게 할지를 결정하는 속성 요소 크기를 어떻게 결정할것인가 속성값 속성값 설명 none 노출되지 않게 설정 block 가로 한 블록 전체를 사용 inline 컨텐츠를 감쌀 정도의 크기 inline-block 기본적으로 inline, 임의로 크기 변경 가능 none 화면에서 사라지고 크기 자체도 차지하지 않음. block (default) width가 자신의 컨테이너의 100% 가로 한 줄을 다 차지 inline 컨텐츠를 딱 감쌀정도의 크기 block태그와 다르게 줄바꿈이 되지 않고, 반드시 컨텐츠를 감싸게 되고, 크기를 변화시킬 수 없음 inline-block inline과 block의 특성을 합쳐놓은 속성 inline의 속성을 지니고 있지만, 임의로 크기를 바꿔줄 수 있음.
설명🔖 공백 문자 제거속성값 속성값설명normal연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시nowrap자동 줄바꿈이 일어나지 않음pre연속된 띄어쓰기와 들여쓰기, 줄바꿈이 있는 그대로 유지pre-wrap==pre , 텍스트 안에 긴 행이 있을 때 해당 행에서 자동 줄바꿈pre-line줄바꿈 문자만 있는 그대로 처리해주고 연속된 띄어쓰기와 들여쓰기는 무시하고 모두 띄어쓰기 한 번으로 처리break-spaces잘 안쓰이는 값normal (default)연속된 띄어쓰기, 들여쓰기 그리고 줄바꿈 문자가 모두 무시부모 요소의 가로폭을 넘어갈 때는 자동으로 줄바꿈두 칸이상 연속으로 띄어쓰기를 하거나 들여쓰기를 하는 것도 불가능( 와 같은 HTML 엔티티(entity)를 사용하여 2칸 이상 ..
설명🔖 HTML 문서 상에서 요소가 배치되는 방식속성값속성값설명staticHTML에 작성된 순서 그대로(static) 브라우저 화면에 표시relative요소를 원래 위치를 기준으로 상대적(relative)으로 배치absolute부모 요소에서 relative를 자식 요소에서 absolute를 사용하여 자식이 부모 기준으로 배치fixed요소를 항상 고정된(fixed) 위치에 배치sticky위치가 화면 상단에 끈적하게(sticky) 붙어서 스크롤링이 되더라도 움직이지 않음static (default)HTML에 작성된 순서 그대로 브라우저 화면에 표시top, left, bottom, right 속성값은 position 속성이 static일 때는 무시relative요소를 원래 위치에서 벗어나게 배치 가능요소를 ..
권장 작성순서 순서유형속성1레이아웃display, float, position2박스 모델width, height, margin, padding, border3배경background4폰트font, color, text-align, vertical-align5그 외 속성 적용 우선순위속성 값 뒤에 !important를 붙인 속성HTML에서 style을 직접 지정한 속성#id로 지정한 속성.class로 지정한 속성태그이름 (body 등)으로 지정한 속성
