css flex
-
[멋쟁이사자처럼] 실습 - Flexbox FroggyFront-end 개발 2023. 7. 13. 00:01
멋쟁이사자처럼 프론트엔드 스쿨에서 Flex 를 배우고 많이 해매고 있는 참이다. 주어진 시간에 실습을 완료하지 못하고 수업을 듣고 있는 형편... 선생님께서는 우리에게 flex 관련 속성들을 학습할 수 있는 게임을 추천해 주셨다. 오늘은 Flexbox Froggy 를 다 풀어서 게시글을 올린다. Level 1 ~ Level 24 한번 더 빨리 풀어서 flex 에 더 친숙해져야겠다. 다른 HTML/CSS 는 나오지 않고 flex 관련된 내용에 집중할 수 있다. flex 를 알고 사용하면 풀이가 너무 쉬우니 따로 남기지는 않겠다. 따로 헷갈렸던 정렬 속성 들에 대해서 잘 정리된 사이트와 이미지를 공유한다. flex 정렬 속성 중, justify-content 의 space-beween / space-arou..
-
[멋쟁이사자처럼] 프론트엔드 스쿨 7기 - 7일차 기록 및 복습Front-end 개발 2023. 7. 11. 12:32
목차 1. Web Layout Histroy 2. Sections 3. float 4. flex 6. Web Accessibility 1. 웹 레이아웃 히스토리 - 레이아웃 도구가 아예 없던 시절에는 텍스트의 정렬만 가능했다. - 은 데이터의 본 목적과 다르게 배치를 위해 사용됨 다양한 브라우저에서 깨지지 않기 위해 뉴스 레터에서 Table 을 쓰는 이유 - 을 사용하여 레이아웃 구성 - 로 레이아웃 구성 (div, Box Model, Float, Position 등을 이용하여 레이아웃) (HTML5 나왔지만, 구번전의 Explorer 대응을 위해 div 로 작성됨(Not Symentic)) - 시맨틱한 마크업 (Flex, Grid) 을 이용한 레이아웃 구성 - 시맨틱 마크업의 이점 (1) SEO (검색..