본문 바로가기

html3

패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프 - 첫 번째 과제 리팩토링 지난 과제로 당근마켓 메인페이지를 만들어보았다. 멘토님께서 다음과 같이 리뷰를 해주셨는데, 내가 만든 웹사이트는 크게 어려운 기능이 없었어서, 코멘트가 따로 필요 없었던 것 같다. 그래서, 이번 리팩토링 시간에 지난 번에 구현하고 싶었는데 못했던 부분인 '반응형 웹사이트'를 만들어보고자 한다. 이게 당근마켓 메인페이지인데, 화면을 일정 크기 이상 줄이면 먼저 서치바가 없어지고 서치 아이콘이 생기고 거기서 더 크기가 줄어들면 리스트들이 없어지고 채팅하기 버튼이 없어지고 메뉴 아이콘이 생긴다. 먼저, 서치바 아이콘과 메뉴 아이콘을 일단 html 코드에 순서대로 넣어주고 화면이 클 때는 "display: 'none'" 으로 안보이게 속성값을 지정해주었다. 채팅하기 그리고 css에서 미디어 쿼리를 사용해 화면 .. 2023. 8. 7.
첫 번째 과제 - HTML/CSS를 이용한 웹사이트 메인페이지 클론코딩 첫 번째 과제로 'HTML/CSS를 이용한 웹사이트 메인페이지 클론코딩'을 진행했다. JS 사용은 권장이었고 필수사항은 HTML과 CSS를 이용해서 메인페이지를 만드는 것이었다. 나는 당근마켓 웹사이트를 만들었고 그 과정에서 알게 된 사실과 어려웠던 점을 적어보려 한다. 내가 만든 웹사이트는 https://aquamarine-mousse-e4a8fd.netlify.app/ 이 주소에서 확인할 수 있다. 나는 수업에서 배운대로 우선 header, main, footer로 영역을 나눠서 개발을 진행했다. header 부분부터 살펴보자. 당근마켓 메인페이지의 헤더는 다음과 같이 구현되어있다. 왼쪽 섹션에는 로고가, 가운데 섹션에는 리스트들이, 오른쪽 섹션에는 서치바와 채팅버튼이 있다. 따라서 나는 header.. 2023. 7. 31.
7월 3째주 - CSS Flex & CSS Grid 강의 23/07/17 실시간 강의 오늘은 웹 기초(HTML, CSS, JS)에 대해 간단히 배웠다. 배운 내용을 까먹지않게 정리해보자. HTML이란? - 웹을 이루는 가장 기초적인 구성 요소 - 웹 페이지를 만들기 위해 필요한 표준 마크업 언어 HTML 구성요소 요소(Element): 내용 - 태그 웹 문서를 구성하는 명령어 꺽새 안에 들어있는 정보 정의 종료 태그가 없는 , 과 같은 태그도 존재 -요소 시작태그, 종료태그, 그 사이의 내용으로 구성 블록 요소: h1~h6, div, list, p...시맨틱 태그 다른 블록 요소 포함 가능 인라인 요소 포함 가능 블록 요소 이후 블록 요소 사용하면 아래줄에 나타남 margin, padding값 가질 수 있음 인라인 요소: a, span, strong... 블록.. 2023. 7. 18.

티스토리툴바