책 리뷰 - 새로운 CSS 레이아웃
하단의 참고 사이트를 읽고 이해한 것을 정리 하였으며, 천천히 차근 차근히 정독 하셔야 이해가 될 것이라 예상 됩니다, 그리고 혹시 잘못 이해한 것이 있으면 댓글로 알려주시면 정말 감사 하겠습니다. bem 스타일에 대해서 소개하기 앞서 오늘날 대부분의 기기는 초당 60회의 빈도로 화면을 새로 고칩니다. 각 프레임에는 16ms 가량의 시간만 할당 되는데(1초/60 = 16.66ms) 실제로 브라우저는 실행준비를 해야하므로 10ms 내에 모든 작업을 완료해야 합니다. 제한 시간을 충족 하지 못하면 버벅거림 현상이 발생하며 사용자에게 거부감을 줍니다. 완전 간단하게 이야기를 하자면 브라우저가 렌더링을 하는데 여러가지의 과정들을 거쳐서 렌더링이 되는데 그 과정중에서 스타일을 재계산 하고 페이지 또는 페이지 일부를 리플로우 하게 만드는 과정중에 브라우저는 selector들의 모든 스타일 규칙을 가져와서 마지막 스타일을 계산을 합니다.
짧은 후기를 쓰자면 이책에서 주로 다루는 내용은 css 속성중에 flex 와, grid에 대해서 설명 해 주고 있는데, 기존 float 과 absolute를 사용한 레이아웃들의 부족한점, 불편한점들을 보여주고, 똑같은 레이아웃을 flex와 grid드를 사용하여 편하고 새로운 추가 기능 등을 보여줌으로써 좀 더 쉽고 유연하고 완벽한 레이아웃 만들 수 있는 것을 보여주고 있습니다. 각 각 해당 설명의 레이아웃의 예제들도 있어서 좀더 플렉스와 그리드를 배우는데 있어서 w3schools의 설명보다 쉽게 다가 왔고, 이 책을 보면서 내가 몰랐던, css 속성들(shape-outside, column-count 등) 을 알게되었고, 미디어쿼리 없이도 flex 와, grid 로 요소의 재배치를 할 수있는 방법도 알려주고 있어 앞으로 반응형 프로젝트를 하게 될 때 써먹어야 겟다는 생각이 들었습니다.
카테고리 바로가기
최근 포스트
-
책 - "빅데이터 부동산 투자 2022-2023 대전망" 읽고빅데이터 부동산 투자 2022-2023 대전망 2022.05.14 15:41
내 나이 39에 처음으로 부동산 책을 구입 했다. 이 책을 구입하게 된 계기는 아래와 같다.(구입 동기가 궁금 하지 않으면 넘어 가셔도 됩니다.) 구입 동기 여태 까지 부동산에 관심이 없다가 2020년부터 부동산 열풍이 불었을 때 난 준비가 되어 있지 않았다. 그래서 부동산 열풍에 동참 하지 못하였는대, 부동산 구입을 하지 못한 지금 다행힌지 불행힌지는 모르겠지만, 아무튼 작년 부터 내 유트브 메인에 리치고 김기원 대표님의 빅데이터 부동산 영상이 올라 왔다. 그래서 한번 보게 되었고 데이터에 근거하여 현재 부동산의 고평가를 주장 하셨고, 작년에 빅데이터를 근거로 주장 하셧던 내용들이 해가 바뀐 지금 돌이켜 보면 거의 다 일치 했다. 모두가 " Yes"라고 말 할때 "No" 라고 말 할 수 있는 소신~!!..
-
맥북 에어 (MacBook Air) 골드 언박싱 및 사용 후기Vlog 2022.05.09 21:27
장비를 지참 하고 프로젝트를 투입을 하게 되어서 주말에 사용 할 노트북이 필요했다. 주로 카페에서 노트북을 사용하기 때문에 가벼운거를 원해서 MS 서피스 랩탑 하고 맥북air 중에 고민하다가 맥북 air는 생각 해보니간 학생 할인을 받을 수 있어서 맥북air 로 선택 했다. 코딩 용도로만 사용 할거면 램 8g 도 무난 하다고 해서 아래의 사양으로 대학생 할인 받아서 116만원에 구입함. Apple M1 칩(8코어 CPU, 7코어 GPU, 16코어 Neural Engine), 8GB 통합 메모리, 256GB SSD 저장 장치https://www.apple.com/kr/shop/buy-mac/macbook-air 13형 MacBook Air 구입하기 새 MacBook Air를 무료로 배송받으세요. 기본 모델..
-
책 - css 시크릿Book 2020.11.13 15:16
리아 베루 지음 / 이시내 올김/ 프리렉 올해 여름에 이 책을 사서 이제서야 보고 있는데, 챕터 2까지 보다가 모르고 있던것들이 너무 많아서, 많은 팁들을 알게되어서 책을 산 보람을 느낌. 다른 사람들도 혹시나 이 책에 내용들을 모르고 있었다면 알면 좋을 것 같다. 이 책을 보면 잘 사용하지 않았던, 모르고 있었던 css3 속성과 이 속성에 대한 사용법 및 팁을 얻을 수 있고, 이 책에 머리 말에 "DRY 하고 유지보수 가능하고 유동적이고 가볍게 표준을 준수하는 생산적인 팁을 얻을 수 있다." 라고 나오는데, 정말 이다, 잠깐 읽었는데, 새로운 팁들을 너무 많이 알았다. 이 책을 보면서 알게된 것들은 조금씩 블로그에 포스팅을 하면서 정리를 할가.... 생각중이다.
-
[css] display: grid - 05. track-list 에 대해서css-display속성들 정리 2020.08.02 16:09
[css] grid 로 리스트 배열하기. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 2. 몇 행 몇 열을 만들건지 정의 합니다. 가. grid-template-columns /rows 를 사용한다. 가-1. grid-template-columns 속성 값은 Track-list 인데 Track-list에 대해서 알아야 사용 할 수 있습니다. (이게 맞는 표현인지는 모르겠습니다. 혹시 표현이 잘 못 되었다면 정정 코멘트 부탁 드립니다.) 지난 포스팅에 이어서 Track-list에 대해서 마무리를 하겠습니다. w3g.org 사이트의 설명을 이해하기에는 어려운것 같아서 css-tricks.com 여기 사이트의 내용을 정리를 해보려고 합니다. css-tricks.com 에서 아래..
-
display: grid - 04. Grid Tracks / Cells /track-list 용어 정리, grid-template-columns /rows 사용법에 대해서css-display속성들 정리 2020.07.18 11:12
지난 포스팅에 이어서 css display:Grid로 리스트 배열 하는 법에 대해서 포스팅을 하겠습니다. 1. 리스트들의 부모 Element 를 Grid Container로 만든다. 2. 몇 행 몇 열을 만들건지 정의 합니다. 몇 행 몇 열을 만들려면 grid-template-columns 와 grid-template-rows 속성을 사용 해야 됩니다. grid-template-columns 와 grid-template-rows 를 사용 해보겠습니다. https://www.w3.org/TR/css-grid-1/#grid-track-concept 에서 사용법을 확인 하면 아래의 이미지처럼 나오는데 빨간 박스 영역들의 용어들이 생소해서 이 부분들 부터 포스팅을 하려고 합니다. 먼저 trak-list 가 나오..