💁♀️만들게 될 인스타 앱 소개하기
📁기본 구조 생성하기
index.html 기본 구조 만들고 link로 css 4개의 파일 연결하기🔗
🎨general.css reset(초기화) 해주기
첫번째로 general.css 전역 스타일링 해주기➡css reset 해볼거임👩🎨
👉 각각의 브라우저에서 기본적인 스타일을 갖고있기에 동일선상에서 출발하기 위함
💡 box-sizing: border-box는 padding과 border를 width 안에 포함시키는 속성
👉 사이즈 계산 쉬워져서 레이아웃 짜기 편해짐✨
🤓header 만들기
⬇
🖱로고 이미지 클릭 시 index.html로 이동함〰🐱🏍
⬇
⬇
이제 header 부분 header.css 스타일링 해주기
요소들 가운데 수직 수평 정렬해주고,
z-index로 앞으로 튀어나오게 해주고 fixed 줘서 고정되게 해주기
반응형으로 만들어주려고 검색바에 display: none으로 해준것✔
화면 클 땐 다 보여주다가 화면 줄어들면 이렇게만 보여줄거임👀
스타일링 할 땐 보면서 할거기 때문에 주석 처리해둠 🆗
부모 headersearch가 relative이니까 자식인 headersearch img는 absolute를 주면 됨
👉 input 안에 검색 이미지 넣으려고 하려는거임❗
⬇
⬇
✅ 프로필 이부분은 어디로 이동할 게 아니라서 div로 바꿔주고 class 넣어주기
display: none 이부분 주석 해제하기
⬇
그럼 당연히 화면 줄인 상태라 input 부분이 없어지는 걸 볼 수 있음👀
미디어로 viewport가 768px 이상일때
서치바에 display: felx로 줘서 화면이 이 이상일 때만 서치바 보여지게 하기🙆♀️
🥨main 만들어주기
⬇
main.css 스타일링하기👩🎨
메인 전체 컨테이너부터 margin-top 주는 이유
👉 헤더 fixed로 해둬서 메인부분이 위로 올라갔기 때문( 헤더 높이 만큼 주면 됨 )
✅ 패딩 0(위) 0(오른쪽) 8(아래)➡아래쪽만 패딩 8px 준다는 것
✅ margin: 0 auto➡위/아래는 0, 왼쪽/오른쪽은 자동으로 계산되어 중앙 정렬
👉 이때 너비를 정해줘야 효과 있음
패딩 위아래 16px
✅ overflow: hidden 주는 이유➡스토리가 엄청 많으면 넘치니까
넘치는 스토리들은 숨겨주기 위해서 사용함
::after는 스토리 아래에 있는 줄을 위함
side-menu 부분은 화면이 클땐 이부분이 보여지게 할거고
화면이 줄어들면 이부분이 안 보이게 할 것➡display: none
left: 50%랑 transform: translateX(calc(-50%)) 조합은 가로 정중앙 정렬하려고 쓰는 공식
👉 정중앙에서 +322px 더한 거면 요소를 오른쪽으로 322px 밀었다는 뜻
display: none은 지금은 스타일 중이라 화면에 보여야하기에 주석 처리할 것
display: none 부분을 위해 viewport가 1024px 이상일 때 보여지게 하기 위한거임
주석 해제하기
⬇
화면이 1024이상 일 때만 저부분이 보여지고 화면 1024 미만일 땐 안 보여지는 걸 볼 수 있음👀
viewport가 620px 이상일 때 적용시킨다는 것
stories에 아까 after에다가 아래에 선 넣어준 부분을
화면이 620 이상이면 안 보여지게 하고 미만일 땐 보여지게 하기 위한거임
1024px 이상일 때만 적용됨
✅ margin: unset➡말 그대로 마진을 초기화 || 상속하게 만드는 CSS 속성
main-container, content-container, content 이부분 글씨 지워주고 할거임
이부분을 위한 부분
⬇
⬇
이젠 스타일링 해주기
◽ styles>main.css로 이동〰🐱🏍
transparent 투명하게 한다는것 ( 빨간색으로 칠한 부분 )
fill: none 안쪽을 비워둬! → 투명하게 만들어!
스크롤바 보이면 안 이쁘니까 none으로 해준것
stories__content div 안 감쌌음
이부분 왜 이렇게 된걸까❓
top: 40%로 줘야 왜 중앙정렬이 될까,,,
avatar 한테 relative 줬었음(부모)
storyborder랑 storypicture만 있으면 중앙 정렬이 되는데
span이 있으니까( 크기가 있기 때문에 적용이 제대로 안 됐던 것 )
그래서 span을 외부로 빼준거임🤩
저부분을 여러개 복붙하면 이렇게 되는거임
❤ 포스트 생성하기
이부분이 헤더 부분 코드임
이부분이 컨텐츠 부분 코드임
여기 이미지 전체가 Footer인데 Footer 안에 Buttons가 있고 Infos가 있는 것
⬇
이런식으로 나오게 됨
main.css 에서 포스트를 위한 스타일링을 해보자👩🎨
⬇
post__header 스타일링 이렇게 됨
⬇
post__profile은 유저 프로필 이미지랑 user1 부분
👏둥근 모서리(border-radius) 안에 이미지 넘칠 때 깔끔하게 잘라주려고 overflow: hidden 쓴 것
✔ text-decoration: none은 밑줄 없애주는거,
✔ text-transform: lowercase는 유저의 이름이 대문자이면 소문자로 바꿔주는 거
호버 시 user1에 밑줄 생기게 한거임
이랬다가
요래 됐슴당〰〰
👻background-color: transparent➡배경색 투명하게 만들어서 배경이 없는 것처럼 보여줌
⬇
⬇
⬇
⬇
column으로 했으니 gap은 위아래 간격 10px이 되는 것
⬇
⬇
✔ text-transform: uppercase➡이부분 다 대문자로 나오는 걸 볼 수 있음
🙌 사이드바 만들기
이렇게 만들어야함
이부분이 User Profile 해당 코드
안녕하세요! 퍼블리싱 & 프론트엔드 개발 공부 블로그 입니다!