[CSS] grid 레이아웃 정리 (2) 자식 요소
자식 요소 속성 ** Notice float , display: inline-block , display: table-cell , vertical-align , column-* 속성은 그리드 자식 요소에서 적용되지 않으므로 주의한다. 1. grid-column-start/end | grid-row-start/end grid 자식 요소의 열 위치를 지정한다. grid-column-start 와 grid-row-start 는 행과 열의 시작을, grid-column-end 와 grid-row-end…
Read Article →
[CSS] grid 레이아웃 정리 (1) 부모 요소
정의 Grid 레이아웃은 Flexbox 다음으로 등장한 새로운 레이아웃 모듈이다. 겪어온 바로는 현업에서는 하위 브라우저 호환 때문에 Flexbox 사용도 조심스러워 하는 실정이지만, 해외에서는 이미 다양한 실무에서 사용하는 것 같아 미리 정리해보고자 한다. Cross Browsing 출처 : w3schools css3 grid Flexbox랑 다른 점 그리드의 매력은 기존에 1차원적으로만 이루어졌던 화면 구성을 2차원까지도 가능하게끔 확장 시켰다는 점이다. 막연하게 2차원이라고 생각하면 어려운데 flexbox…
Read Article →[CSS] Flexbox 정리 (2) 자식 요소 속성
지난 포스트 : [CSS] Flexbox 정리 (1) 부모 요소 속성 서론 앞서도 언급했다시피 Flexbox 속성은 크게 박스들을 감싸고 있는 부모 요소에 적용하는 속성과, 그 안에 개별적인 자식 요소들에게 적용하는 속성으로 분류할 수 있는데, 이를 정리하면 다음의 표와 같다. 부모 요소 속성 설명 자식 요소 속성 설명 display 정의 order 순서 flex-direction 방향 flex-grow 증가값 flex-wrap 줄 바꿈 flex-shrink 수축값 flex-flow direction + wrap flex…
Read Article →[CSS] Flexbox 정리 (1) 부모 요소 속성
정의 Flexbox는 브라우저의 크기 혹은 요소의 크기가 동적이거나 명시되지 않은 경우에 문서 내의 공간에 대한 배치, 정렬 및 분산을 효율적으로 작업할 수 있게 돕는 모델이다. 단순하게 말하자면 반응형 웹과 같이 레아아웃의 유연성이 요구되는 상황에서 필요한 모델이라고 볼 수 있다. 애석하게도 ie 11 이상 호환이 가능하기 때문에 대한민국에서 ie를 놓아주기까지는 보편화에 시간이 걸릴 것 같다. activeX만큼 싫은 ie8호환... 출처 : w3schools css3 flexbox 표 Flexbox…
Read Article →
[기타] 웹 렌더링 순서와 최적화 방법
웹 렌더링 순서 사용자가 페이지를 요청하고, 서버로부터 전달받은 데이터를 렌더링 하기까지 몇 초 안되는 시간이지만 살펴보면 다음과 같은 과정이 존재한다. HTML 파싱 및 DOM 트리 구성 웹을 표시해주는 브라우저들은 각기 고유의 컴포넌트들을 갖고 있다. 그 중에서 웹 페이지의 표시를 담당하는 렌더링 엔진 이 있는데 이 엔진의 작동 순서에 맞춰 웹 화면이 표시된다. 사용자가 페이지를 요청하면 렌더링 엔진이 서버로부터 필요한 데이터를 전달받는데, 이 때 HTML 마크업을 파싱하고 파싱된 요소들은 DOM…
Read Article →
[잡담] 2018년 개발 회고록
취업준비 지금 생각해도 막막해지는 단어라고 생각한다. 2월에 함께 졸업을 했으나 나와 달리 대학원을 가거나 인턴을 하는 친구들을 옆에서 보면서 쓸쓸하게 학교 중앙도서관에서 노트북을 켰다. 물론 개발자의 길을 걷겠다는 다짐을 후회한 것은 아니다. 공부는 힘들었지만 재밌었고 스킬을 익혀갈수록 좀 더 성장한 내가 되는 것 같다는 성취감이 좋았다. 다만 내 진로에 있어 처음으로 방향을 정하는 순간 이었기에 그 갈피를 잡는 데 있어 많이 고민하고 헤맸던 것 같다. 취업 포트폴리오를 만들고 취업준비를 하다보니…
Read Article →
[버전관리] Git을 Sourcetree로 연동하여 올리기
소스트리 너란 녀석 파견 회사에서 드디어 협업 도구로 Git을 사용하기 시작해서 소스트리를 처음 깔아보았다! 여태 터미널에서 코드만 입력하며 살다가 깔끔한 인터페이스를 마주하려니 새삼 내가 이렇게 편하게 살아도 되나 하는 생각이 잠시 들었다. 그러나 본디 인간은 보다 편한 것을 추구하기 위해 끊임없이 진화해오지 않았는가. 그런 의미에서 소스트리 또한 나의 커피타임을 위해서 앞으로 친해져야 할 도구인 것 같다. 소스트리로 github 블로그 포스트 커밋하기 소스트리 는 버전 관리 프로그램인 Git…
Read Article →