study/web (2) 썸네일형 리스트형 CodePen(코드펜)소개 및 Tistory 연동까지 오늘은 Front-end를 처음 접했다면 아주 유용하게 사용할 수 있는 CodePen(코드펜) 이란 사이트 소개와 이를 우리 티스토리에 어떻게 적용할 수 있는지 알아보려 한다. CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io https://codepen.io/ CodePen(코드펜)은 별다른 개발도구나 실행 명령어 없이 우리가 작성한 html / css / js 가 웹사이트에 어떻게 반영되는지를 바로 확인할 수 있는 사이트로.. align-items vs. align-content 차이 flex-box에 대해 공부하던 도중 display: flex;를 선언하고 align- 을 입력하면 align-content: ; 을 자동으로 입력되는 속성으로 있다는 것을 알고 문뜩 align-items와 align-content의 차이가 궁금해졌다. 오늘은 이 둘의 차이를 그림을 통해 알아보고자 한다. 1. 기본 설정 둘의 차이를 알아보기 위해 우선 6개 박스의 부모 요소에 display: d-flex ; 와 flex-direction: column; 을 설정했다. 2. align-items 그리고 align-items: center;을 설정한 결과 각각의 박스들이 가운데로 정렬하는 것을 확인할 수 있었다. 이와 같은 모양으로 정렬이 되었는데 빨간 중심축을 기점으로 각각의 도형들이 정렬된 것이다. 3.. 이전 1 다음
