01) sass - sass는 css의 전처리기로 해석되어 css로 컴파일되는 스크립트 언어임. - 변수 정의를 허용하며, 변수는 $기호로 시작되고 변수 할당은 콜론(:)으로 마무리. - sassScript는 4가지 자료형 int, string, color, boolean을 지원함. 02) SCSS - sass의 3버전에서 등장한 언어. css와 비슷한 구문을 가지고 있고 css와 완전히 호환되도록 새로운 구문을 도입한 css의 상위 호환 스타일시트임. - sass 기능을 지원하며 css와 거의 같은 문법으로 사용된다는 점에서 퍼블리셔들에게 각광받음.
3. CSS - 박스 모델
1) 박스 모델(box model) 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부름. 박스 모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분함. 1. 내용(content) : 텍스트나 이미지가 들어있는 박스의 실질적인 내용 부분임. 2. 패딩(padding) : 내용과 테두리 사이의 간격임. 패딩은 눈에 보이지 않음. 3. 테두리(border) : 내용과 패딩 주변을 감싸는 테두리임. 4. 마진(margin) : 테두리와 이웃하는 요소 사이의 간격임. 마진은 눈에 보이지 않음. 1-1) HTML 요소의 높이와 너비 구하기 위의 그림에서 전체 너비(width)를 계산해 보면..
2. CSS - 기본 속성
1) CSS 색 표현 방법 1-1) 색상 이름으로 표현 1-2) RGB 색상값으로 표현 모니터나 스크린은 빨간색(Red), 녹색(Green), 파란색(Blue)을 혼합하여 색을 표현함. 따라서 HTML에서도 이 세가지 색을 가지고 색을 표현하는 RGB 색상을 사용함. RGB 색상의 기본색(Red, Green, Blue)은 각각 0부터 255까지의 범위를 가짐. 1-3) 16진수 색상값으로 표현 RGB 색상의 기본색(Red, Green, Blue)은 각각 00부터 FF까지의 범위를 가짐. 예를 들어 녹색을 나타내는 RGB 색상값 rgb(0, 255, 0)은 16진수 색상값으로는 #00FF00이 됨. 2) CSS 배경 CSS에 사용할 수 있는 background 속성은 다음과 같음 1. background-..
1. CSS - 문법 및 적용
1) CSS 문법 CSS의 문법은 선택자(selector)와 선언부(declaratives)로 구성됨. 선택자는 CSS를 적용하고자 하는 HTML 요소(element)를 가리킴. 선언부는 하나 이상의 선언들을 세미콜론(;)으로 구분하여 포함할 수 있으며, 중괄호({ })를 사용하여 전체를 둘러쌈. 각 선언은 CSS 속성명(property)과 속성값(value)를 가지며, 그 둘은 콜론(;)으로 연결됨. 이러한 CSS선언(declaration)은 언제나 마지막에 세미콜론(;)으로 끝마침. 2) CSS 주석(comments) 문법 : /* 주석내용 */ 3) CSS 적용 및 문법은 HTML 카테고리쪽 확인