미디어 쿼리(Media Query, @Media)미디어 쿼리는 화면 해상도, 기기 방향 등의 조건으로 HTML 에 적용하는 스타일을 전환할 수 있는CSS3 의 기능이다. 반응형 웹 디자인에서 보통 사용하며 기기 및 크기마다 적용할 스타일을전환할 수 있다. 반응형 웹(Responsible Web)웹 사이트 내용을 그대로 유지하면서 다양한 디바이스, 창, 화면 크기에 맞게 렌더링 되는걸 반응형 웹이라 한다.예를 들어 스마트폰의 크기와 태블릿 크기는 달라 고정 크기로 해놓았을 경우 화면이 깨질수 있다.이러한 문제로 인해 크기에 따라 화면 스타일을 적용하여 깨지지 않도록 할 수 있다.즉, 디바이스마다 레이아웃 크기를 다르게 설정하기 위해 미디어 쿼리를 사용한다. @media (min-width: 320px) {..

calc()CSS 에서 수치화된 숫자값을 사칙 연산자를 사용하여 계산할 수 있도록 해주는 함수이다.보통 % 로 되어 있는 것을 px 값으로 연산할 때 유용하다.사용 가능한 사칙 연산자는 +(더하기), -(빼기), *(곱하기), /(나누기) 가 있다. 구문calc(수치 - 수치);calc 함수의 주의사항은 덧셈과 뺄셈은 수치와 사칙연산 사이에는 무조건 띄어쓰기가 있어야 한다.곱셈과 나눗셈은 띄어쓰기가 존재하지 않아도 된다. 예시)width: calc(100% - 100px);left: calc(50% - 320px);font-size: (100% - 10px); 예제) LEFT 입니다. RIGHT 입니다. CENTER 입니다.

CSS 를 이용하여 순서대로 나열되는 데이터들에게 일련 번호를 붙일 수 있다. 이때 사용하는 속성은 counter-reset 과 counter-increment 속성이다. 부모 요소에 counter-reset 으로 시작하는 번호 및 변수를 생성하고, 일련 번호가 붙을 요소에 counter-increment 로 증가량을 정한다. 또한 content 속성과 counter 와 counter-reset 으로 정의한 변수를 사용하여 일련번호와 뒤 내용을 설정한다. counter-reset 속성 // 문법 요소 { counter-reset: 카운터 이름 / 숫자 } * "/" 는 구분을 위한 값, 실제 사용 시 제외 // 속성값 initial | 카운터 이름 / 숫자 | none * initial 초기화 * 카운터..

웹 개발을 진행하다보면 HTML 문서 내에서 띄어쓰기를 여러 번 하더라도 한번만 띄어쓰기가 되고, 들여쓰기나 줄바꿈이 무시되는 현상을 한번쯤은 경험했을 것이다. 이러한 현상은 CSS 의 white-space 속성을 이용하여 쉽게 변경할 수 있다. white-space 는 공백 문자를 처리하는 CSS 속성이다. 예시) 위처럼 태그에 띄어쓰기와 줄바꿈 등을 넣었다. 하지만 예상과는 다르게 아래와 같다. white-space 속성 옵션 종류 normal 위와 같이 공백을 무시하는 현상이 발생하는 이유는 white-space 속성을 별도로 지정해주지 않으면 normal 값이 적용되어 있다. white-space 속성이 normal 로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 모두 무시된다..

CSS 선택자 HTML 문서에 CSS 로 스타일을 주기 위해 특정 요소들을 선택하여 스타일을 적용시키는 기술 선택자 종류 1. 전체 선택자(*) * { margin: 0 auto; text-align: center; } 전체 선택자는 HTML 페이지 내부의 모든 요소(태그)에 같은 CSS 속성을 적용한다. 그렇기 때문에 위 코드 처럼 margin 이나 padding 값을 초기화하는 기본적인 설정할 때 사용한다. 하지만 전체 선택자는 HTML 페이지 모든 요소를 읽어야 하기 떄문에 로딩 속도가 느려질 수 있다. 2. 타입 선택자(Type Selector, 태그 선택자) /* CSS (타입 선택자 또는 태그 선택자) */ p { background-color: black; color: white; } 타입 ..

Flex는 Flexible Box, Flexbox 라고 부르기도 합니다. Flex는 레이아웃 배치 전용 기능으로 고안되었습니다. ​ Flex 레이아웃을 만들기 위한 기본적인 HTML 구조는 아래와 같다 flex1 flex2 flex3 ​ //class .container{ display: flex; } ​ 부모 요소인 div.container를 Flex Container(플렉스 컨테이너)라고 부르고, 자식 요소인 div.item들을 Flex Item(플렉스 아이템)이라고 부릅니다. ​ - Flex 배치 방향 설정 (flex-direction) .container{ flex-direction: row; /* flex-direction: column; */ /* flex-direction: row-rever..