Web Study

가상 클래스 :root에 대해 간략하게 공부하는 시간을 가져 봤습니다. 이것도 좀 생소한 개념이라고 할 수 있었네요.(요런게 있었다니!) 일단 사용 방법은 가상클래스 :root 써준뒤 css 변수를 선언하여 입력 해주는 방식 입니다. 그러면 다른 클래스에서 쓸 때, 변수를 그대로 가져와서 써주면 됩니다. 일단 위의 사용 예시는 일괄 처리 방식에 도입 했습니다. 저런 방식으로 :root를 써주면 이 클래스에서 값만 바꾸면 되는 편리한 방식으로 쓰일 수 있네요. 일일이 수정을 거치치 않아도 되니 활용도가 꽤 괜찮은 것 같습니다. 그리고 자료를 찾아 봤을 때 가상 클래스 :root는 문서 구조 단계에서 가장 상위의 부모요소라고 하네요. 즉, html에서 :root는 html요소이고 중요한 점은 css로 간주되..

얼마 전 수업시간에 선생님을 통해 BEM의 개념을 대락적으로 듣게 되었고 또 개발자 유튜브 영상(프론트 / 엔드 로드맵 관련)을 보던 중 또 다시 언급된 용어...BEM...이것은 어떤 용도로 쓰이고 또 어떤 개념을 가졌는지 한 번 짧은 시간이나마 공부를 해보기로 했습니다. 라고 다른 전문가께서 말씀 하셨습니다. 저는 무슨 말인지는 잘 모르겠는데, 자료를 대략 살펴보니 보기도 편하고 작업도 편한 효율적인 클래스명 짓기!라는 의미로 받아 들였네요. 각 개념을 살펴보면 일단 BEM의 기본 구조는 Block, Element, Modifier를 뜻하며 이 3가지로 구성된 이름을 짓는 방법입니다. 그리고 각각 _ _와 - -로 구분 합니다. 위의 코드에서 header는 Block, naviagtion은 Eleme..

인터넷 서핑을 하다보면 간혹 어떤 사이트에서는 이미지가 한 번에 열리지 않고 제 각각 따로 시간을 두고 열리게 되는 불편한 현상을 겪으신 경험이 있으실 겁니다. 이런 부분을 방지 하기 위해서 이미지를 한 번에 모아두고 찾아서 사용하게끔 만들어 놓은 것을 스프라이트 이미지(Sprite Image)라고 합니다. 이런 현상의 주 원인은 아무래도 할당된 traffic(데이터의 양)을 초과해서 그렇지 않나 싶은데요. 그렇기 때문에 이용자가 많은 사이트에서는 저렇게 이미지를 모아 놓은 방식을 활용하여 용량을 줄이는 것으로 알고 있습니다. 저는 사이트 클론 코딩을 연습 할 때 너무 유용하게 잘 쓰고 있네요. 사용 방법은 1. 크롬에서 f12를 눌러 사이트 개발자 도구를 연다 2. 해당되는 이미지를 shift+ctrl..

레이아웃 정렬에 효과적인 플렉스 박스(flex box) 공부하기 정식 명칭은 플렉서블 박스(flexible box)라고 하며 플렉스 박스(flex box)라고 부르기도 한다. 이 레이아웃은 다양한 디바이스 환경에서 언제나 똑같은 레이아웃을 유지시켜 줌으로써 반응형 웹 사이트에 유용하게 쓰일 수 있다. 기존에 float을 통한 정렬 방식을 사용 해왔지만, 좀 더 유동적인 레이아웃 구성이 가능해 현재 가장 보편화된 방식으로 쓰이고 있다. 플렉스 박스(flexible box)의 구성은 플렉스 컨테이너(flex container) - 플렉스 요소(flex item)로 이루어진다. 기본적으로 쓰이는 플렉스 박스(flex box)의 속성은 다음과 같다 속성 설명 1. display HTML 요소에 대한 박스의 타입..