solsol

*그리드 레이아웃 웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 스타일 2차원 방식이란 가로(row)와 세로(column)를 같이 사용해 레이아웃을 설계하는 방식 그리드 레이아웃의 기본 속성 display 속성 그리드 레이아웃은 항상 display 속성값을 grid나 inline-grid로 지정 display:grid; /* inline-grid */ 해당 속성이 지정된 요소는 그리드 컨테이너, 자식 요소는 그리드 아이템 grid-template-columns와 grid-template-rows 속성 3열 X 2행 만들기 상대적인 크기를 지정하는 fr 단위 그리드 레이아웃의 행과 열을 크기를 지정 할 때 픽셀(px)를 사용하는 경우 크기가 항상 고정되므로 반응형 웹 디자인에 적합하지 ..

*플렉스 박스 레이아웃 1차원 방식으로 효과적인 레이아웃을 설계할 수 있도록 고안된 스타일 속성 가로(row)나 세로(column)중 한 방향으로만 레이아웃을 설계하는 방식 플렉서블은 ‘신축성 있는’, ‘유연한’이라는 뜻이므로 다양한 상황에서 유연하게 레이아웃을 구성할 수 있도록 제공한다는 의미 display 속성 display:flex; /* inline-flex */ 적용된 요소의 다음 요소가 항상 줄 바꿈되고, inline-flex는 다음 요소가 주변에 배치 display 속성이 지정된 요소는 플렉스 컨테이너, 자식 요소는 플렉스 아이템 flex-direction 속성 플렉스 박스 레이아웃의 주축 방향을 결정 flex-wrap 속성 플렉스 아이템이 컨테이너 영역을 벗어날 때 어떻게 처리 할지 결정 ..

*전환 요소에 적용된 스타일의 속성값이 다른 속성값으로 변하게 하는 것 트랜지션과 속성 -transition 속성으로 한 번에 지정하기 애니메이션 속성으로 전환 효과 제어하기 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어 키 프레임 정의하기 애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다. animation-name 속성 animation-name 속성은 특정 요소에서 적용할 키 프레임명을 지정 animation-duration 속성 애니메이션 지속 시간을 설정 animation-delay 속성 애니메이션 실행을 지연 animation-iterator-count 속성 애니메이션은 기본으로 1회 실행되고 종료 상황에 따라 애니메이션을 반복해서 보여 줘야 하는 경우 ..

*필수속성 단위 -절대단위 : px 한가지 -상대단위 vw, vh vw 단위는 뷰포트 너비를 기준으로 상대적인 크기를 진다. 1vw는 뷰포트 너비의 1/100 크기를 의미하며 뷰포트의 기본 너비는 900px를 의미 1vh는 뷰포트 높이의 1/100 크기를 의미하며 뷰포트의 기본 높이는 400px를 의미 색상 표기법 키워드 표기법 키워드 표기법은 색상의 영문명을 속성값으로 사용하는 방법 사용하기 쉽지만 의외로 실무에서는 자주 사용 되지 않는다. (150여개의 색상이름 제공) RGB 색상 표기법 RGB는 Red, Green, Blue를 의미 알파값은 투명도 HEX 표기법 Red, Green, Blue에 해당하는 값을 각각의 16진수로 표현 하는 방법 예) h1 { color: #f00 } h2 { color..

*CSS의 기본 CSS는 HTML과 함께 웹 표준의 기본 개념 HTML이 텍스트, 이미지, 표 같은 요소를 웹 문서에 넣어 뼈대를 만드는 역할을 한다면 CSS는 텍스트나 이미지, 배경의 크기나 배치 방법 등의 요소를 이용하여 디자인을 담당 CSS 문법 형식 선택자와 선언부로 구분 선택자는 CSS 스타일을 적용할 HTML 태그(요소)를 선택하는 영역 선언부는 선택자에서 선택한 태그에 적용할 스타일을 작성하는 영역으로, 중괄호{} 넣는다. 전체 선택자 전체 선택자는 HTML에서 사용할 수 있는 모든 요소를 한 번에 선택자로 지정하는 방법으로 * 기호를 사용 태그 선택자 HTML 태그명으로 선택자를 지정하는 방법 태그 선택자는 선택자에 지정된 태그명과 일치하는 모든 요소를 한번에 선택 클래스 선택자 태그(타입..