![]()
1차원 레이아웃은 어떻게 설계할까? 플렉스 박스(Flex box) 레이아웃 --플렉스 박스 레이아웃은1차원(단일 방향) 방식으로 레이아웃을 구성할 때 유리한 방식으로주로 가로(row) 또는 세로(column) 방향으로 배치하여 레이아웃을 설계하는 데 사용된다. 레이아웃 확인 방법은일반적으로 웹 브라우저에서 지원하는 방법을 통해 플렉스 레이아웃을 확인할 수 있다.ex. 크롬에서는 개발자 도구를 통해 "Elements"탭에 작성된 코드르 보면플렉스 박스 레이아웃이 적용된 HTML 요소 옆에 "flex 아이콘"이 존재한다.-- 기본 구성 --핵심 속성 display 속성모든 플렉스 박스 레이아웃은display 속성값을 "flex"나 "inline-flex"로 지정하는 것으로 시작된다. 기본 형..
![]()
폰트는 어떻게 사용할까? 웹 폰트 --웹 폰트는인증된 기관 또는 회사에서 웹 서버에 공유해 놓은 폰트를 의미하고웹 폰트를 사용하여 시스템에 없는 글꼴들을 추가해서 사용할 수 있다. 구글 폰트 예시Lorem ipsum dolor, sit amet consectetur adipisicing elit.Lorem ipsum dolor, sit amet consectetur adipisicing elit.-- 아이콘 폰트 --아이콘 폰트는다양한 아이콘을 웹 폰트를 사용하는 것처럼 간단하고 쉽게 사용하는 것을 말한다. 아이콘 폰트 예시 사용 (feat. Font Awesome) Font Awesome를 사용하는 방법은 2가지 존재한다.1. 해당 사이트에서 아이콘 폰트 라이브러리를 다운로드하여..
![]()
요소 자체를 컨트롤하는 속성은 무엇일까? transform 속성 --요소의 특정 변형 효과를 지정하는 속성이다. 기본 형식transform: 함수; 예시 코드 확대 or 축소기울기회전 -- transform-origin 속성 --변형의 기준점을 변경하는 속성이다. 요소가 변형될 때 각 변형을 시작하는 기준점이 존재한다.(ex. 요소가 회전할 때는 요소의 중심을 기준으로 회전) 기본 형식transform-origin: x축 위치 y축 위치;위치는 %단위 또는 키워드를 사용한다. --
![]()
속성 값을 애니메이션처럼 자연스럽게 전환하려면 어떻게 할까? 애니메이션 속성 --기존 전환 효과 속성보다 더 정확하고 부드럽게 전환 효과를 제어하는 속성이다. 주요 문법 구성으로애니메이션을 적용할 "스타일 속성"과 "키 프레임(@keygrames)"이다. 키 프레임애니메이션은 정지된 이미지를 연속적으로 보여줘서 움직이는 것처럼 보이게 한다. 즉, 키 프레임 애니메이션이 진행되는 과정에서특정 시점에 발생해야 하는 여러 작업을 정의하는 문법이다.(시작과 종료에 해당하는 최소 2개 시점에 대한 스타일로 정의) 기본 형식@keyframes 키 프레임명 { 0%{/* CSS 코드 */} n%{/* CSS 코드 */} 100%{/* CSS 코드 */}}특정 시점은 %로 지정한다.- 애니메..
![]()
동적으로 기존 속성 값을 변경은 어떻게 할까? 전환 --전환은한 요소에 적용된 스타일 속성값을 다른 속성값으로 변하게 하는 것이다. 예시 코드 위 방법처럼 :hover를 통해 빨간색 박스에 마우스를 올리면 파란색 박스로 변하는 것을 전환이라고 하는데이러한 전환 효과를 직접 속성으로 지정할 수 있게 "전환 효과 속성"이 존재한다. -- transition-property 속성 --전환 효과를 적용할 대상 속성을 지정하는 속성이다. 기본 형식transition-property: 속성값; 속성 값에는 전환 효과의 대상이 되는 속성명 or 정해진 키워드를 사용한다.속성명none : 전환 효과 속성을 지정 X (기본 값)all : 모든 속성을 전환 효과 대상으로 지정 예시 코드/* ba..
![]()
요소는 어떻게 배치할 수 있을까? position 속성 --HTML 요소를 기본 흐름에서 벗어나 좌푯값에 따라 배치하는 속성이다. 기본 형식position: 속성값; 좌표는 (x, y, z-index)로 존재한다.x : 가로y : 세로z-index : 앞, 뒤 순서 (어떤 요소가 앞에 보이고, 어떤 요소가 뒤에 가려지는지)모든 요소의 z-index 기본 값은 0이다. relativestatic처럼 요소의 기본 흐름에 따라 배치된 후, 배치된 현재 위치를 기준으로 좌표 속성을 통해 추가 이동할 수 있다. 예시 코드 absolute좌표의 기준점은 가장 가까운 부모 요소의 위치(현재 위치)가 기준점이다. 예시 코드 1. 초록색 박스는 왜 ..
![]()
배경은 어떻게 구성할까? background-color 속성 --요소의 배경에 색상을 넣는 속성이다. 기본 형식background-color: 색상값; 예시 코드div { width: 100px; height: 100px; background-color: red;}-- background-image 속성 --요소의 배경에 이미지를 넣는 속성이다. 주의 사항- 요소의 배경 너비, 높이를 지정해야 한다. (배경에 무엇을 삽입하려면)- 요소의 배경 크기가 이미지 크기보다 작으면 이미지는 잘리고, 크면 이미지가 반복하여 나온다. 기본 형식background-image: url('이미지 경로'); 예시 코드div { width: 200px; height: 100px; bac..
![]()
박스 모델은 무엇인가? 박스 모델 --CSS의 박스 모델은모든 HTML 요소가 하나의 박스로 표현되는 개념으로각 요소는 여러 개의 영역으로 구성되며, 이를 이해하면 "여백", "테두리", "크기 조정" 등을 쉽게 다룰 수 있게 된다. margin : 요소의 외부 여백을 의미border : 요소의 테두리(경계선)를 의미padding : 요소의 내부 여백을 의미content : 요소의 내용을 의미 크롬 브라우저의 개발자 도구(F12)를 통해 박스 모델 확인하기-- margin 영역 --margin은 요소의 외부 여백을 의미한다. 기본 형식/* margin의 각 영역 정의하기 */margin-top: 크기;margin-right: 크기;margin-bottom: 크..
