SCSS/CSS

1) CSS Preprocessor 웹페이지를 만들면서 CSS를 이용해 웹 페이지에 스타일링을 적용하며 관리할수 있다는 장점이 있지만 문법이 불편해서 막상 적용하기 힘든 부분과 코드의 가독성이 떨어진다는 문제점이 있다. 이러한 불편함을 개선하기 위해서 나온 기술이 CS

CSS의 선언방식은 내장방식, 링크방식, 인라인방식, @import 방식 총 4가지로 구분되어 있다.1\. 내장방식 : style 태그를 사용해 내용(Content)을 HTML 내부 안에서 스타일을 작성하는 방식사용 예) HTML 내부에서 사용하는 방법 - style

마우스를 올려 놓고 있을동안에 선택이 되는 가상 클래스사용 예)\-> 마우스를 올려놨을때 a태그의 Text 색상은 빨간색으로 적용되고, 사이즈가 transition이 1초에 30px로 커짐 마우스 hover를 해제하면 다시 원래 크기로 돌아옴마우스를 클릭하고 있을동안에

상속되는 CSS 속성 내용들font-style : 글자 키우기font-weight : 글자 두께font-size : 글자 크기line-height : 줄 높이font-family : 폰트(서체)color : 글자 색상text-align : 정렬\-> 모두 글자/문자(인

1) CSS 우선순위란? 같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법을 말한다.2) 명시도란? CSS의 우선순위의 점수를 계산하는 것을 말한다.점수가 높은 선언이 우선시 됨점수가 같으면 가장 마지막에 해석된 선언이

width : 가로너비height : 세로높이CSS에서 Box 요소의 가로/세로 너비는 width, height으로 지정해서 사용할 수 있다.(1) auto : 브라우저가 자동으로 너비를 계산해서 출력 (기본 값)(auto는 기본값으로 요소에 이미 들어있는 속성의 값이

1) CSS 단위 CSS에서 각 요소(블록 & 인라인)마다 스타일링을 부여하기 위해 사용하는 개념을 단위라고 한다. 2) CSS 단위 종류 > - px : 픽셀 (width : 300px) % : 상대적 백분율 (height : 1% ~ 100%) em : 요소의 글

Margin 이란? Box 요소의 바깥쪽으로 여백을 주는 것을 말하며 Margin을 사용할 수 있는 기준은 다음과 같다1) Margin : 10px;\-> 위, 오른쪽, 아래, 왼쪽 모두 10px씩 적용함2) Margin : 10px 20px;\-> 위, 아래는 10p

Padding 이란? Box 요소의 내부 공간(여백)을 지정하는 단축 속성을 말한다(요소 내부에 여백이 생기기 때문에 요소의 크기가 커지게 된다)기본 : 0(내부 여백이 없으며 별도의 단위를 사용하지 않아도 적용은 되지만 만약 값이 1이라면 1px로 써야한다.)단위 :

Box 요소에 테두리 선을 지정하는 단축 속성을 말한다.(border는 주로 요소의 크기가 커지는 특징이 있다.)사용 예)Box 요소에 테두리(border)를 1px 두께의 검정색 실선을 적용하겠다는 뜻으로 이해하면 됨border 예제 1)medium = border-

border-radius는 Box 요소의 모서리를 둥글게 깎는 기능을 수행한다.사용 예)Box 요소의 테두리(border)를 5px 만큼 둥글게 깎겠다고 이해하면 됨border-radius 기본 값)0 : 둥글게 없음단위 : px, em, vw등 단위로 지정border

box-sizing 이란? Box 요소의 계산 기준을 지정하는 기능을 수행한다. (좀더 명확히 설명하면 요소의 내용만으로 크기를 계산하는 것인데, padding이나 border 같이 요소의 크기가 커지는 속성이 적용됐을때 별도로 수동으로 일일이 수정해야 하는 번거로움이

overflow는 요소의 크기 이상으로 내용이 넘쳤을때, 보여짐을 제어하는 단축 속성을 말한다.visible : 넘친 내용을 그대로 보여줌hidden : 넘친 내용을 잘라냄scroll : 넘친 내용을 잘라내고 스크롤바 생성auto : 넘친 내용이 있는 경우에만 잘라내고

요소의 화면 출력 특성을 지정하는 것을 말한다. 즉, 결과적으로 어떻게 보여지는지에 대한 특성이라는 뜻이다.block : Box(상자 : 레이아웃) 요소 (예 : div)inline : 글자(text) 요소 (예 : span)inline-block : 글자 + 상자 요

text는 줄 바꿈, 정돈 및 정렬, 공백 처리 및 텍스트 변환 같은 텍스트 조작을 수행하는 법을 정의하는 속성이다(1) Color텍스트의 색깔을 지정해주는 방식rgb(0,0,0) : 검정색색상 : 기타 지정 가능한 색상(2) text-align문자를 각각의 위치로 정

색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 한 번에 지정하는 속성이다.(1) Background-color요소의 배경 색상을 정하는 속성이다transparent : 투명함색상 : 지정 가능한 색상(red, blue..등등)2) Background-ima

1) position요소의 위치를 직접적으로 지정하는 것이 아닌 그 지정을 위한 어떤 기준을 작성해주는 속성을 말한다static : 기준 없음relative : 요소 자신을 기준absolute : 위치 상 부모 요소를 기준fixed : 뷰포트(ViewPort) 기준st

1) transition 요소의 전환(시작과 끝) 효과를 지정해주는 단축 속성을 말한다.(다만, 단축형으로 작성할땐 필수로 포함되어야 할 속성이다!)transition 속성 종류)transition-propertytransition-durationtransition-t

(1) transform트랜스폼은 요소의 변환 효과를 부여하기 위한 속성을 말한다.참고사항)transform은 2D 변환 함수와 3D 변환 함수로 나눠서 운영된다.예1) - 2D 변환 함수1\. 픽셀 - pxtranslate(x,y) : 이동(x축, y축)transla

하나의 플렉스 아이템이 자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성을 말한다.1) displayFlex Container의 화면 출력 특성을 말한다.flex : 블록 요소와 같이 Flex Container 정의inline-