Language/CSS

환경에 따른 반응형 웹 페이지는 어떻게 할까?      미디어 쿼리 (Media Query) --미디어 쿼리는 반응형 웹 페이지를 만드는 주요 기술 중 하나로화면 크기, 해상도, 디바이스 특성에 따라 스타일을 변경하는 기능이다. 기본 형식@media (조건) { /* 조건이 충족될 때 적용할 스타일 */}@media and () () { /* 조건이 충족될 때 적용할 스타일 */} only는 대부분의 최신 브라우저에서 의미가 없으므로 잘 사용되지 않는다.미디어 쿼리가 적용될 미디어 타입을 명시하는 것으로생략하지 않으면 반드시 다음에 and 연산자가 와야 한다.미디어 쿼리가 적용될 미디어 조건을 정의하는 것으로반드시 괄호() 안에 작성되어야 한다.  예시 코드@media not screen..

2차원 레이아웃은 어떻게 설계할까?      그리드 레이아웃 속성 --그리드 레이아웃 속성은웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성으로가로(row)와 세로(column)를 같이 사용해서 레이아웃을 설계한다.그리드를 사용하면 플렉스 박스보다 더욱 폭넓게 설계가 가능하다. 구성 요소 그리드 레이아웃을 확인하는 방법은시각적으로 확인하기 위해서는 크롬 브라우저의 개발자 도구의 Elements 탭에서그리드 컨테이너로 지정된 태그에 있는 그리드 아이콘을 누른다.--    기본 속성 --display 속성그리드 레이아웃을 지정하는 속성으로그리드 컨테이너를 정의할 때 사용한다. 기본 형식display: flex;/* 또는 */display: inline-flex;flex  :  적용된 요..

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. 초록색 박스는 왜 ..