web study

CSS가 어떻게 발전되어 왔는지 정리해보고자 한다. 목차 CSS CSS 전처리기 BEM CSS Module (CSS in CSS) CSS in JS CSS (Cascading Style Sheet) HTML을 시각적으로 꾸미기 위해 사용하는 스타일 언어이다. 단점 - 순수 CSS의 경우 파일 간 값을 공유하지 못한다. 따라서 코드의 재사용이 어렵다. - 중복 코드가 많다. CSS SCSS CSS 전처리기 보통 CSS 전처리기에는 SCSS(SASS), LESS, Stylus가 있다. 그중에도 SCSS가 가장 많이 사용된다. 특징 CSS에 비해 중복되는 코드가 줄어든다. import 구문을 사용하여 다른 CSS를 불러와 사용할 수 있어 유지보수성이 향상된다. 물론 CSS도 여러 파일을 사용할 수 있지만, 빌..

png이미지를 갖다 쓰는 게 아닌 CSS로 직접 삼각형 그리는 법을 알아보려고 한다. 이 방법을 사용하면 삼각형 영역에만 링크를 걸 수도 있고 작은 이미지에서 화질이 깨져보이는 현상도 없앨 수 있다. 그리고 퍼블리싱 기술 면접에도 종종 나오는 질문이기도 하니 이번 기회에 제대로 알아두는 게 좋겠다. 기본 원리 너비 100px, 높이 100px의 사각형이 있다고 생각해보자. 그 사각형에 테두리 10px을 준다. 테두리는 top, bottom, left, right로 나뉘어져 있는 건 누구나 아는 사실일 것이다. 저 상태에서 사각형의 너비와 높이를 0으로 바꾸면, 테두리만 남는데 이 모양이 삼각형이다. 1번 삼각형을 원한다면 border-top을 제외한 나머지 테두리 색을 투명으로 바꾸면 된다. 이 과정이 ..

HTML을 구성하는 모든 요소들은 사각형의 형태로 되어있다. 마치 박스 모양같은 형태인데, 때문에 '박스 모델' 또는 '상자 모델'이라고 불린다. 웹 디자인에서도 박스 모델은 정말 중요하고도 기본적인 개념인데 이 박스 모델은 어떤 구조로 이루어져 있는지 알아보려고 한다. 목차 Box Model box-sizing Box Model 우리가 개발자 모드에서 자주 보는 이 이미지가 바로 박스 모델의 전부다. 박스 모델은 실제 콘텐트(Content), 패딩(Padding), 테두리(Border), 마진(Margin)으로 이루어져 있다. 브라우저에서 렌더링을 할 때, 이 박스 모델의 크기, 위치, 속성을 인지하고 반영한다. 요소 설명 콘텐트(Content Area) 이미지, 글, 영상 등의 실질적 요소들이 나타나..

우리 퍼블리싱을 배울 때 캐스케이딩에 대해 직접적으로 알려주는 사람은 잘 없다. 때문에 간과하기 쉽지만 CSS에도 작성 규칙이 존재한다는 사실을 꼭 알고 있어야 한다. 하나의 프로젝트에 여러 작업자가 협업하는 경우가 많기 때문에 이러한 기본적인 규칙을 지키면서 작업해야 효율적인 작업이 가능하다. 잘 알고 있겠지만 큰 프로젝트일수록 더 많은 퍼블리셔와 디자이너, 개발자와의 협업으로 진행된다. 작업의 결과만 중요한 게 아니라 과정도 중요하다는 사실을 염두에 두자. 목차 CSS 구체성 CSS 상속 캐스케이딩 CSS 구체성 요소를 선택할 때 더 구체적으로 선언된 선택자가 우선적으로 적용된다. 이 규칙을 CSS 구체성(Specificity Calculator)이라고 하며, 이는 수치화되어 값이 클수록 구체성이 높..

모바일 사용자가 점점 늘어나면서 반응형 브라우저의 중요성이 날로 커지고 있다. 반응형 웹 작업을 할 때에는 CSS 미디어 쿼리가 필수인데, 미디어 쿼리 작성 방법에도 종류가 있다. 어떤 디바이스를 우선으로 할 것이냐에 따라서 크게 나뉘는데 각 방법을 알아보고 상황에 맞게 작성하는 것을 추천한다. 목차 뷰포트 Viewport 모바일 퍼스트 Mobile first 데스크탑 퍼스트 Desktop first Overriding(덮어쓰기) 없이 해상도마다 지정 뷰포트 Viewport 우선 반응형 웹페이지를 작업하기 전에 꼭 준비해야 하는 사항이 있는데, 바로 Viewport이다. head 태그 사이에 meta viewport 태그를 넣어주어야 한다. Viewport를 작성하는 이유는 웹 페이지를 여러 디바이스 크..