크롬에서는 font size에 최소 크기가 정해져 있다. 현재 최소 크기는 10px이며 font-size 속성만 변경해서는 절대로 10px 미만의 크기로는 변경할 수 없다. 즉 font-size 속성에 1~10px 사이의 값이 들어가도 10px로 변경되어 표시된다. 예전 글들을 보다 보면 -webkit-font-size-adjust 속성을 사용하여 해결했다는 내용이 있는데, 현재 크롬은 해당 속성을 제공하지 않고 있다. 여기서 텍스트의 크기를 10px 보다 작게 보이도록 우회할 수 있는 편법이 있다. transform 속성을 사용하는 것이다. transform: translate(-22%, -50%) scale(0.5); display: inline-block; 편법이라고 말한 이유는 폰트의 크기를 조정..
* 아래 내용에서 테스트하여 작성한 px 값들은 크롬에서 테스트하여 작성했다. * 크롬에는 폰트 크기에 최소 크기가 정해져있다. 참고 : font size 최소 크기 폰트 크기의 단위 별 차이를 알아보기 전에 폰트 크기의 기본 값을 알아둘 필요가 있는데, 보통 브라우저의 기본 값은 16px이며, 크롬의 기본 값 또한 16px이다. 기본 값을 확인하는 방법으로는 medium, 1rem, 1em이 있는데 아래 내용을 참고하여 구해야 한다. * 1em의 경우 부모 요소의 폰트 크기에 영향을 받는다. * 1rem의 경우에는 HTML 태그의 폰트 크기에 영향을 받는다. px 폰트의 크기를 나타낼 때 가장 기본적인 단위이며, font-size 속성에 어떤 단위를 사용하던 이렇게 저렇게 계산된 후 마지막에 브라우저가..
CSS의 속성 중 position의 속성 중 fixed는 요소의 위치를 viewport에 상대적으로 지정한다. 때문에 페이지가 스크롤되더라도 사용자가 보는 화면에서 움직이지 않고 고정된 자리를 가지게 된다. 이러한 fixed 속성을 가지는 요소의 부모 요소에 transform 속성을 추가해서 좌표를 변경하게 되면 페이지가 스크롤될 때 움직이지 않아야 할 요소가 움직이게 된다. 이렇게 고정하려고 fixed을 사용했는데 움직이는 이유는 부모 요소에 transform이 적용되면 해당 요소의 영역에 새로운 viewprot가 설정되고 이러한 viewport에 자식 요소가 position: fixed 속성을 가질 때 영향을 받기 때문이다. 아래의 테스트 코드로 테스트해보면 position: fixed 요소가 원하는..
Sass는 CSS의 상위에 있는 메타 언어로 CSS의 전처리기(pre-processor)이다. Sass를 그대로 사용하는 것이 아니라 Sass 문법으로 작성된 코드를 CSS 코드로 변환해 준다. Sass에는 sass문법과 scss문법이 있는데 scss문법이 css의 문법과 동일한 방식으로 진행되기 때문에 권장되고 있다.(아래 예제들은 모두 scss문법을 따르고 있다.) CSS는 쉽게 작성할 수 있지만 변수나 함수가 없어 코드를 재활용할 수 없기 때문에 점점 커지고 복잡해질 수록 유지보수하기가 어려워진다. Sass는 변수나 함수를 사용하여 CSS의 반복되는 부분을 줄여 더 빠르고 효율적으로 코드를 작성하고 쉽게 유지보수 할 수 있도록 만들어준다. 기본 적인 문법에 대해서는 아래에 설명을 하겠지만 일단 예를..
FlexBox는 CSS3에서 제공하는 레이아웃을 지정할 수 있는 방식 중 하나이다. FlexBox를 사용할 때는 두 단계의 태그가 필요하다. 첫 번째는 부모 태그이고 두 번째는 자식 태그이다. 부모 태그는 자식 태그를 감싸는 태그로 자식 태그를 배치하고 정렬 시킬 수 있고 컨테이너라고 부르기도 하며 부모 태그 안에 있는 모든 태그는 자동으로 자식 태그가 되며 아이템이라고 부르기도 한다. FlexBox는 main-axis와 cross-axis라는 두개의 축을 가지고 있으며 FlexBox에 기본적으로 main-axis는 가로이고 cross-axis는 세로이다. 각 축은 시작 점과 끝 점을 가지고 있는데 main-axis의 시작 점과 끝 점은 아이템이 배치되는 방향이고 cross-axis의 시작 점과 끝점은 ..
CSS란 마크업 언어로된 문서들(ex. HTML, SVG, XML, XUL)을 꾸밀 때 사용이 된다고 한다... 여기서는 HTML을 기준으로 설명한다. (HTML에서만 사용해 봤기 때문....) CSS를 사용할 때 얻을 수 있는 장점은 브라우저에 표시할 정보와 해당 정보를 꾸미기 위한 내용이 있을 때 정보와 꾸미기 위한 내용을 분리하여 관리할 수 있기 때문에 유지보수가 쉬우며 꾸미는 내용에 대한 중복을 줄여줄 수 있고 하나의 CSS로 여러 문서를 꾸밀 수 있다는 것이다. CSS에도 단점이 있는데 잘못된 내용이 작성되어도 무시가 되기 때문에 오류를 찾는데 힘들 수 있다. CSS가 적용되는 과정을 보면 브라우저가 우선 HTML 문서를 파싱한 후 HTML 문서에 스타일 정보(CSS)가 있으면 스타일 정보를 파..