CSS3 Media Query를 이용하여 반응형 웹 구현하기 Media Query란? 예전에는 웹 페이지를 PC 환경에서만 접근했지만, 요즘은 다양한 기기에서 웹 페이지에 접근하고 있다. 따라서 다양한 기기의 화면 크기에 따라 웹 페이지 내 컨텐츠의 크기를 조절할 필요가 있다. 이 때, 특정 조건에서만 CSS 코드를 적용시키는 Media Query를 사용하면 이를 구현할 수 있다. 사용 방법 위와 같이 CSS 부분에 @media(조건){내용} 형태로 적어주면 된다. 예를 들어 위 코드의 경우 window 너비가 800px 이상일 경우 div 태그를 보이지 않게 한다는 뜻이다. 너비가 800px가 넘어가면 div로 구분한 부분이 사라지는 것을 볼 수 있다. 이렇게 괄호 안의 CSS 코드가 실행될 최소 너비를 지정하는 것 뿐만 아니라 다음과 같이 다양한 조건이 가능하.. 2020. 8. 2. CSS Box Model이란? CSS Box Model이란? CSS 박스 모델은 HTML element가 웹 페이지에서 차지하는 공간을 정의한 모델이다. HTML element들은 각각 자신만의 영역을 갖고 있으며, 각 영역은 다시 여러개의 작은 영역으로 나뉜다. 각 element는 가운데 실제 element의 내용이 담긴 부분(content), element를 감싸는 경계(border), border와 content 사이의 영역(padding), border 바깥의 영역(margin)으로 구성된다. 각 영역들은 CSS의 property로 구현되어 있기 때문에 원하는 속성을 불러와 원하는 값을 넣어주면 된다. 이렇게 구현한 내용은 크롬에서 F12를 눌러 확인할 수 있다. 우리가 지정해준 CSS 속성들을 표시해줄 뿐 아니라 그림으로도 .. 2020. 7. 23. Cascading Style Sheets (CSS) CSS란? CSS는 HTML 만으로 표현할 수 있는 디자인의 한계를 극복하기 위해 만들어진 언어이다. 물론 새로운 디자인을 위해서 HTML에 새로운 태그를 추가하는 방법도 있다. 하지만 디자인의 한계 외에도 태그로 구성된 HTML 문법으로는 극복할 수 없는 한계가 존재한다. HTML CSS JavaScript 예를 들어 위와 같이 3개의 목록을 가진 리스트가 있다고 하자. 지금은 사용되지 않는 font 태그를 이용하여 각각의 아이템의 글자를 검은색으로 설정하였다. 이 때, 모든 아이템의 글자색을 빨간색으로 바꾸려면, 아이템 하나하나의 속성을 바꿔주어야 한다. 위 리스트의 경우, 아이템이 3개 뿐이기 때문에 짧은 시간 안에 바꿀 수 있지만, 아이템이 1억개라면 단순한 작업임에도 엄청난 시간이 소모될 것이다.. 2020. 7. 21. 이전 1 다음
