미디어 쿼리(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 로 설정된 요소 안에서는 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자가 모두 무시된다..

브라우저란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome, Safari, Edge, Firefox 등을 말한다. 브라우저는 웹에서 페이지를 찾아서 보여주고, 사용자가 하이퍼링크를 통해 다른 페이지로 이동할 수 있도록 하는 프로그램이다. 브라우저는 사용자가 원하는 페이지에서 필요한 자원을 서버로부터 받아와서 유저에게 보여준다. 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함한다. 브라우저는 받아온 자원들(페이지, 이미지, 비디오)을 렌더링 과정을 통해 사용자에게 보여준다. 렌더링이란? 서버로부터 HTML, CSS, Javascript 등 제공받은 파일들을 가공하여 브라우저에 보여준다. 브라우저의 기본 구조 브라우저의 주요 구성 요소는 아래와 같다. 1. 사용자 인터페이스 주소표시줄, 이..

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; } 타입 ..