본문 바로가기

CSS

 (30)
플렉스 박스 항목 배치 1. justify-content 속성 : 주축 기준의 배치 방법 지정하기 justify-content : flex-start | flex-end | center | space-between | space-around 1️⃣ flex-start : 주축의 시작점을 기준으로 배치한다. 2️⃣ flex-end : 주축의 끝점을 기준으로 배치한다. 3️⃣ center : 주축의 중앙을 기준으로 배치한다. 4️⃣ space-between : 첫 번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치한다. 5️⃣ space-around : 모든 플렉스 항목들을 같은 간격으로 배치한다. 1️⃣ flex-start 주축을 가로로 지정되어 있기 때문에 플렉스 항목이 시작점..
플렉스 박스 레이아웃 1. Flex Box Layout : 플렉스 박스 레이아웃이란? 그리드 레이아웃을 기본으로 하여 플렉스 박스를 원하는 위치에 배치하는 레이아웃을 말한다. 플렉스 박스 레이아웃은 플렉스 항목이 플렉스 컨테이너로 묶여 있는 형태로 존재한다. 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향이 설정되어 있는데 왼쪽에서 오른쪽으로 향하는 주축과 위에서 아래로 향하는 교차축이 있다. 1️⃣ 플렉스 항목 : 플렉스 컨테이너에 담기는 웹 요소 2️⃣ 플렉스 컨테이너 : 웹 요소를 플렉스 박스 레이아웃에 적용하기 위해 묶는 틀 3️⃣ 주축 : 플렉스 컨테이너 안에서 플렉스 항목을 배치하는 기본 방향(왼 👉 오) 4️⃣ 교차축 : 교차축은 주축과 교차하는 방향(위 👉 아래) 2. display 속성 : 플렉스 컨..
미디어 쿼리 1. 미디어 쿼리란? 미디어 쿼리는 사용자가 사이트에 접속하는 미디어 유형에 따라 적용하는 CSS 를 별도로 주기 위하여 사용하는 모듈이다. @media [only | not] 미디어 유형 [and 조건] * [and 조건] 1️⃣ and : 조건을 두 가지 이상을 작성할 때에 구분자로 사용하는 키워드이다. 2️⃣ , 쉼표 : 동일한 스타일 유형을 사용할 미디어 유형 또는 조건이 있다면 쉼표로 추가한다. 3️⃣ only : 미디어 쿼리를 지원하는 브라우저에서만 조건을 인식하게 한다. 4️⃣ not : not 다음에 지정된 미디어 유형은 제외한다. 📌미디어 유형의 종류 자주 사용하는 미디어 유형은 다음과 같다. 1️⃣ print : 인쇄 장치 : [ctrl + p] 화면에서 볼 수 있는 화면의 CSS를 지..
가변 그리드 레이아웃 1. 고정 그리드와 가변 그리드 웹 사이트에서의 레이아웃을 정할 때에는 '그리드 시스템(grid system)' 을 기준다. 보통 12 컬럼(칸)으로 화면을 분할하여 배치 요소를 규칙적으로 배열할 수 있다는 장점을 가진다. 고정 그리드는 화면의 너비를 특정한 값으로 고정해서 사용하는 것으로 너비가 항상 일정하게 유지되기 때문에 원하는 레이아웃을 만들기에 쉽다는 장점이 있지만 화면의 너비가 변하는 경우에는 적절히 변할 수 없다는 단점이 있다. 이로 인하여 능동적으로 너비의 변화에 레이아웃을 변경하는 가변 그리드를 사용하기도 한다. 너비의 값을 특정한 값으로 고정하지 않고 백분율을 활용하여 너비의 변화에 반응한다는 특징이 있다. 2. 고정 그리드 만들기 고정 그리드는 픽셀 등의 단위를 이용하여 특정한 값을 ..
CSS Diner : selector 연습하기 (21 ~ 32번) 21. Select all even plates 정답 : plate:nth-of-type(even) 해설 : 이번 문제는 짝수 번째에 있는 접시를 선택하는 문제이다. plate 태그 타입의 짝수 번째에 있는 요소를 선택하기 위해 nth-of-type 선택자에서도 even 키워드를 사용하여 짝수 번째를 지정하면 된다. 홀수를 지정하고 싶다면 even 대신 odd 키워드를 사용하면 된다. 22. Select every 2nd plate, starting from the 3rd 정답 : plate:nth-of-type(2n+3) | plate:nth-child(2n+3) 해설 : 이번 문제는 3번째 접시에서 시작해서 짝수 번째에 있는 접시를 선택하는 문제이다. 위치에 관련된 것이기 때문에 nth 선택자를 사용..
CSS Diner : selector 연습하기 (11 ~ 20번) 11. Select everything on a plate 정답 : plate * 해설 : 이번 문제는 접시 위의 모든 요소를 선택하는 문제이다. 모든 요소 * 중에서도 접시를 조상 또는 부모로 가지고 있어야 하기 때문에 공백을 이용하여 조상 또는 부모로 plate 를 명시해준다. 12. Select every apple that's next to a plate 정답 : plate + apple 해설 : 이번 문제는 접시 다음에 있는 사과를 선택하는 문제이다. 즉, 크기와 상관없는 사과를 선택할 것인데, 그 사과 중에서도 접시를 인접 형제로 가지고 있는 사과만 선택하는 것이다. 인접 형제를 선택하는 선택자는 + 로 구분하여 '접시를 인접한 형제로 가진 + 사과' 처럼 사용할 수 있다. 13. Select..
CSS Diner : selector 연습하기 (1 ~ 10번) 1. Select the plates 정답 : plate 해설 : 테이블 위의 모든 접시를 선택해야 하는 단계이다. 접시 태그에 class 또는 id 식별자가 없기 때문에 태그명으로 선택한다. 태그명에 일치하는 모든 태그가 선택된다. 2. Select the bento boxes 정답 : bento 해설 : 테이블 위의 물건 중 도시락만 선택해야 하는 문제이다. 모두 식별자가 없기 때문에 태그명으로 선택하였다. 3. Select the fancy plate 정답 : #fancy 해설 : 테이블 위의 물건 중 파란 테두리가 있는 접시만 고르는 문제이다. 해당 요소에는 id 식별자가 주어져 있기 때문에 해당 식별자로 선택한다. id 식별자는 이름 앞에 # 을 붙여서 표기한다. 4. Select the app..
애니메이션 1. 애니메이션 트랜지션과 비슷하지만 수도 클래스를 사용하지 않고 적용할 수 있다는 점에서 차이점이 있다. 특정 지점을 변경 지점(keyframe)으로 잡아 일정한 스타일의 변화를 주게 된다. 2. @keyframes 속성 : 애니메이션 변경 지점 설정하기 @keyframes { {}} 애니메이션은 진행율에 따라 0% 부터 100%까지 지정되며 세부 지점을 따로 지정할 수 있다. 또는 from(0%) , to(100%) 로도 지정이 가능하다. 위의 예시는 진행율이 0% 즉 시작할 때에는 배경 색상이 파란색에 테두리가 검정색이고 형태는 사각형으로 시작한다. 하지만 애니메이션이 3초간 진행이 되면서 100% 로 향해갈 때에 배경 색상은 하늘색에 테두리는 파란색 형태는 원형으로 변형이 되고 애니메이션이 끝나면..

티스토리툴바