미니 스타그램을 만들어보세요!
Ministagram은 제가 이 강연 이후 리뷰를 위해 만든 첫 번째 웹사이트입니다.
형식은 인스타그램에서 차용했고, 지금까지 배운 기술은 대부분 반영됐다.
위 이미지는 완성된 모습입니다 어딘가 허전한 느낌이 들지만 인스타 분위기로 꾸며서 기분이 좋습니다!
Upper_section 부분 분석
이번 실습에서는 header, body, footer 대신 section 태그를 사용하여 섹션을 나누었습니다.
주제 제목 아래에 블로그 프로필 사진을 추가하고 CSS에서 타원으로 만들었습니다.
중간 섹션의 부분 분석
가운데 부분은 큰 상자 안에 작은 상자 3개를 만들어 내용물을 넣었습니다.
그 안에 있는 각각의 박스에는 인코딩과 관련된 이미지가 포함되어 있으며 인스타그램 좋아요, 아이디, 게시물 내용, 해시태그 수는 아래와 같습니다. 내용과 해시태그 사이에 여백이 더 있어서 별도의 문단 태그에 해시태그를 씁니다.
중간 섹션 CSS에서 배경색, 너비, 테두리, 오른쪽 간격, 표시 속성, 모서리 클리핑 및 상자 그림자와 같은 속성이 기본 큰 콘텐츠 상자에 적용됩니다.
큰 상자 안의 세 개의 상자에도 display 속성에 flex 값을 할당하여 유연성을 부여했고, column 값은 flex direction 속성으로 적용하여 이미지와 텍스트의 순서가 아닌 열로 표시해야 했기 때문에 행.
또한 각 상자가 내부 중앙에 있는지 확인했습니다.
각 박스의 이미지는 모두 이미지 사이즈가 다르기 때문에 가로와 세로를 조절하고 투명 테두리를 넣어 잘 보이도록 했습니다.
이미지 아래의 텍스트가 어떻게 되는지 확인하기 위해 줄 간격을 2em으로 설정했습니다.
Bottom_section 부분 분석
하단에는 블로그 11일차 기사를 링크하고 그 밑에 저작권 표시를 해두었습니다.
링크 위로 마우스를 가져가면 가상 선택기를 사용하여 배경색이 변경됩니다.
