빡공단 빡공단 20일차 ➰ display: flex로 배열을 자유롭게 만들었다. ➰ 배경을 다시 흰색으로 만들었다. ➰ align-items: center로 nav 전체를 세로로 가운데 정렬! ➰ padding을 위아래는 0, 왼쪽 오른쪽은 20px를 줬다. ➰ flex: 1로 nav 안에 있는 친자식 div들끼리는 같은 간격으로 여백을 주었다. ➰ img는 인스타그램 페이지에서 가져옴! ➰ href="/"는 로고... CSS인스타그램클론코딩빡공단htmlCSS 빡공단 19일차 인스타그램 페이지 레이아웃만 잡기 ➰ 여백을 없애기 위해 body의 margin을 0으로 둔다. ➰ 헤더부분 ➰ 높이 54px, 배경을 빨간색으로 구분! : container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로 바꿔준다. 🌕 story 부분 잡기 ➰ 스토리부분 ➰ 높이 84px, padding을 위아래로만 16px을 줬다. 테두... 클론코딩인스타그램CSS빡공단htmlCSS 빡공단 22일차 ➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분 ➰ class="img"는 프로필 사진 부분 ➰ 그 옆에 계정 이름과 설명 부분 ➰ 제일 오른쪽에 팔로우 버튼 ➰ 그 아래부터 친구추천 부분. ➰ 마지막에 소개말 부분도 추가! ➰ class faccount부분의 display: flex로 두고, 세로로 가운데 정렬을 했다. ➰ img 아래의 div 묶음(계정, 설명)은... 클론코딩인스타그램CSS빡공단htmlCSS 빡공단 23일차 ➰ post-title 부분 만들기! ➰ 첫 번째 div는 프로플 사진 부분. ➰ 두 번째 div는 사용자 이름 부분. ➰ post-title의 첫 번째 자식인 프로필 사진 부분의 배경을 구분하기 위해 red로 줬고, 크기를 가로 세로 각각 40px씩 줬다. ➰ post-title의 두 번째 자식인 user name의 왼쪽 margin을 10px을 줘 프로필 사진과의 간격을 두었다. ➰ po... 클론코딩인스타그램CSS빡공단htmlCSS
빡공단 20일차 ➰ display: flex로 배열을 자유롭게 만들었다. ➰ 배경을 다시 흰색으로 만들었다. ➰ align-items: center로 nav 전체를 세로로 가운데 정렬! ➰ padding을 위아래는 0, 왼쪽 오른쪽은 20px를 줬다. ➰ flex: 1로 nav 안에 있는 친자식 div들끼리는 같은 간격으로 여백을 주었다. ➰ img는 인스타그램 페이지에서 가져옴! ➰ href="/"는 로고... CSS인스타그램클론코딩빡공단htmlCSS 빡공단 19일차 인스타그램 페이지 레이아웃만 잡기 ➰ 여백을 없애기 위해 body의 margin을 0으로 둔다. ➰ 헤더부분 ➰ 높이 54px, 배경을 빨간색으로 구분! : container 안에 content 부분과 aside 부분을 가로로 배치해야 하기 때문에 display: flex로 바꿔준다. 🌕 story 부분 잡기 ➰ 스토리부분 ➰ 높이 84px, padding을 위아래로만 16px을 줬다. 테두... 클론코딩인스타그램CSS빡공단htmlCSS 빡공단 22일차 ➰ class="faccount"는 친구 추천 겸 본인 프로필 소개 부분 ➰ class="img"는 프로필 사진 부분 ➰ 그 옆에 계정 이름과 설명 부분 ➰ 제일 오른쪽에 팔로우 버튼 ➰ 그 아래부터 친구추천 부분. ➰ 마지막에 소개말 부분도 추가! ➰ class faccount부분의 display: flex로 두고, 세로로 가운데 정렬을 했다. ➰ img 아래의 div 묶음(계정, 설명)은... 클론코딩인스타그램CSS빡공단htmlCSS 빡공단 23일차 ➰ post-title 부분 만들기! ➰ 첫 번째 div는 프로플 사진 부분. ➰ 두 번째 div는 사용자 이름 부분. ➰ post-title의 첫 번째 자식인 프로필 사진 부분의 배경을 구분하기 위해 red로 줬고, 크기를 가로 세로 각각 40px씩 줬다. ➰ post-title의 두 번째 자식인 user name의 왼쪽 margin을 10px을 줘 프로필 사진과의 간격을 두었다. ➰ po... 클론코딩인스타그램CSS빡공단htmlCSS