CSS Sprite 기법을 배우면서 또 하나 같이 배운 것은 '레티나 디스플레이' 대응법이다. 레티나 디스플레이는 애플에서 제조하는 아이패드나 아이폰, 맥에서 쓰는 LCD 디스플레이인데 이 디스플레이들은 좀 특별(?)해서, 화면에 이미지를 보여줄 때 약간의 노력이 필요하다. 왜냐하면 같은 이미지 파일이 레티나 디스플레이에선 아래와 같이 흐릿하게 나올 수도 있기 때문이다. 이렇게 레티나 디스플레이에서는 이미지가 다르게 보이는 이유는 바로 "논리픽셀"(우리가 알고 있는 CSS에서 자주쓰는 그 px)과 "물리픽셀"(디바이스에서의 px)이 다르기 때문이다. 즉, 브라우저는 CSS나 html 태그에 표기한 우리가 알고있는 그 px대로 렌더링을 하지만, 브라우저를 보고 있는 디바이스에서의 px값은 우리가 표기한 p..

HTML과 CSS를 이용해서 코딩 시 이미지를 넣어야 할 때가 많다. 그때 보통 쓰는 방법이 태그에 src로 이미지 URL을 넣거나 css에서 backgroud url을 넣거나 한다. 그런데 웹페이지에 들어가는 이미지 파일들을 경로로 이용하여 하나하나 넣어주다 보면, 사용자가 웹페이지에 접속했을 때 브라우저에서는 사용된 이미지 파일들을 하나하나 다 다운로드 받아야 한다. 그런데 CSS Sprite 기법을 쓰면, 이미지 파일을 하나 하나 다운받을 필요가 없어 렌더링 속도가 향상된다. 사용되는 이미지 파일들을 한 이미지 파일에 다 모아놓았기 때문이다. 위에 보이는 것처럼 네이버도 사용되는 이미지들을 저렇게 한 파일에 모아서 필요한 이미지 부분만 보이는 CSS Sprite 기법을 사용하고 있다. 스프라이트 기..

IR이란? Image Replace 기법. 말그대로 이미지를 대처한다. 웹페이지에 이미지가 보이지 않게 되더라도 스크린리더나 브라우저가 관련 정보를 읽을 수 있도록 텍스트 내용을 적어두고 숨겨놓는 것이다. 중요한 것은, 단순히 "눈에 보이지 않도록 숨기는 것" 에 초점을 두고 단순히 겉모습을 구현하는 것이 아니라 "접근성"과 "검색 엔진"을 고려해야 한다는 것이다. 카카오/네이버/쿠팡과 같은 회사들은 저마다 각각 다른 IR 기법을 사용하고 있다. 여러가지 IR 기법들 중에 지양해야할 것들도 분명 있다. Display : none; 이 속성은 확실히 가시적으로 보이지는 않지만 정보도 표기되지 않는다. 즉 스크린리더나 브라우저에는 "없는 것"과 마찬가지이므로 사용자에게 전달되지 않는다. visibility ..

CSS의 설계기법은 막 써내려갔던 CSS를 좀 더 "구조화"해서 설계하는 기법이다. 대표적으로 세가지의 CSS 설계기법이 있다. 말 그대로 "대표"기법이지 항상 통용되는 것은 아니다. 중요한건 회사의 컨벤션에 따르는것! 1. OOCSS(Object Oriented CSS) 레고처럼 여러가지 모듈을 만들어서 조합하는 방법론. 구조(structure)와 스킨 분리 구조에는 레이아웃과 관련된 속성들이 포함된다. (padding, margin, width, height 등) 스킨에는 레이아웃에 영향을 미치지 않는 시각적인 요소들이 포함된다. (color, background-color, border 등) .btn { width: 200px; height: 80px; font-size: 30px; } .btn-c..

멋쟁이사자처럼 프론트엔드 수업 중 과제 하나가 바로 '벤딩머신' 만들기였다. 이때는 아직 자바스크립트 진도를 나가기 전이라 우선 HTML/CSS만으로 구현했는데 크롬 브라우저, 삼성 갤럭시폰(내폰), 사파리에서는 아래와 같이 출력이 제대로 되었는데, 남자친구 폰(아이폰)으로 카카오톡 링크를 보내고 확인해보니 각각의 태그로 구성되어 있는 콜라 버튼들이 아래로 내려가는 현상을 발견했다. 아이폰 사파리앱에서는 정상적으로 구현되는 걸 보면, 아이폰 기기 자체 문제가 아니라 카카오톡 링크 문제인 것 같았다. 확인해보니 flex 속성을 주었을 때, width가 1px 줄어드는 문제가 있었다. 안에 있는 태그 넓이를 width: 94px로 값을 주었기 때문에 생기는 문제로 보인다. 이를 해결하기 위해 넓이가 아닌 넓..

CSS에서 레이아웃 끝판왕 Grid. Flex와 비슷한 점이 많지만 확실히 다르다. flex는 1차원 (한방향 레이아웃)이고 grid는 2차원 (양방향)이기 때문이다. 참고로 Grid는 IE 10 , 11 버전에서 구버전 스펙으로 지원된다. 참고로 현재까지는 레이아웃을 위한 기능으로 grid보단 flex를 훨씬 더 많이 사용한다. (flex 사용량은 80% 가까이, grid는 10%채 안된다...) https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com grid가 쉽게 이해되는 재미있는 게임. 꼭 플레이 해보시길... Grid에 필요한 용어 및 개념 grid도 flex와 마찬가지로 컨테이너..

https://flexboxfroggy.com/#ko Flexbox Froggy A game for learning CSS flexbox flexboxfroggy.com 생각보다 재미있었던 개구리 flex게임 Flex flexbox 혹은 flexible box라 불리는 flex는 아이템 공간 배분/정렬 기능을 제공하기 위한 기능이다. (1차원 레이아웃 모델) + Flex 기능을 이용하여 Holy grail layout을 만들 수 있다. flex가 있기 전에는 로 했었다는 끔찍한 전설이.... 우선, Flex를 사용하기 위해서는 꼭! Container역할을 하는 요소가 있어야 한다. 요롷게 부모 역할의 container가 있어야 한다. 이 때, item의 width는 콘텐츠 크기로 정해지고, 높이는 con..

원래 내가 알고 있었던 CSS의 선택자들은 빙산의 일각이었다.... 12일째 날에는 css 선택자(selector)에 어떤 것들이 있는지 그리고 항상 눈으로 봐와서 어떤건지만 대~충 알고 있었던 "가상 클래스 선택자"와 "가상 요소 선택자"를 좀 더 자세히 알게 되었다. 그리고 드디어 CSS의 하이라이트, Flex 진도를 나가게 되었다... 무서워... https://www.w3schools.com/cssref/css_selectors.asp CSS Selectors Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular sub..

이전에는 CSS에서 인라인 요소 / 블록 레벨 요소가 가지는 기본적인 위치 지정 속성에 대해서 배웠다면 더 나아가 float, grid, flex 3형제가 있다. (나한텐 참 복잡하다...) float에 대해 정리해 보고 float가 가는곳엔 항상 따라다니는 overflow에서도 정리해보려 한다. Float 이전 글에서 언급했다시피 html에서 블록 레벨 요소는 한줄을 다 차지 하여 다음 요소는 바로 밑줄에 내려 오게 된다. 이러한 블록 레벨 요소들을 다른 요소들과 어울리며 정렬 시켜 주는 것이 'float' 속성. float:left float:right로 블록 레베 요소들을 좌측, 우측 정렬할 수 있다. float:right의 속성을 줄 경우, 오른쪽에 해당 블록 요소가 위치하게 되고 나머지는 박스의..