본문 바로가기

WEB/HTML CSS JS

 (75)
[Do it 반응형 웹 만들기] 모든 예제 따라 만든 후기 + 계획 내 생각에는 10일 정도 걸릴줄 알았는데, 거의 4~5일 정도만에 책에 있는 예제를 다 작성해보았다. 똑같이 작성하는게 고행의 길처럼 느껴지긴 했지만 많은 공부가 됐다. 책을 읽기 전 페이지를 만들 때 어떻게 할지 막막했는데, 이 책에선 3단계로 나눠 준비하는 걸 추천했다. 첫번째. 웹사이트 구조 살펴보기 반응형 웹으로 만드는 것을 고려해 구조를 생각해봐야 한다. 두번째. 폴더와 기본 파일 구성하기 추후 작업 편의성을 위해 미리 구성한다. 세번째. 기본 구조와 기본 스타일 작업하기 기본 HTML 문서와 초기화 css, 공통 페이지 요소 css, 미디어 쿼리를 만들어 둔다. 3단계에 걸쳐 준비를 해놓고 메인 페이지(HTML, CSS), 서브 페이지(HTML, CSS)를 작업해주면 된다. 솔직히 직접할 생각..
[bootstrap5 따라 만들기] 7. Toast Modal과 비슷하게 부모에 레이어로 만드는 요소이다. Toast는 nonModal로 만들며, 레이어가 생겼을때 부모요소를 컨트롤 할 수 있다. Toast는 모바일에서 쉽게 볼 수 있는데, 이런 식으로 메세지를 전달하고 일정시간 뒤 사라진다. 이제 구조를 한번 살펴보자. 지금까지 만들었던 것들 중 가장 단순하다. 아마 nonModal이라 Modal보다 단순한 것 같다. header에는 아이콘과 타이틀, close 버튼이 있다. 모바일 Toast 처럼 단순하게 만들려면 close 버튼을 body로 넘겨 header를 없애도 된다. 혹 close버튼까지 없애도 자동으로 사라지기 때문에 상관없다. html, css 작업을 끝낸다음 이제 jquery로 단순 이벤트를 처리해준다. 이제 js로 켜진 후 자동으로 사..
[bootstrap5 따라 만들기] 6. Modal 이번에 만들건 Modal이다. 팝업처럼 보이긴 하지만, 팝업과 달리 부모 윈도우 레이어로 이루어져있다. bootstrap5 Modal 생긴걸 봤으니 bootstrap5 구조를 살펴보자. modal, dialog, content로 분리해놨는데, bootstrap5.css를 찾아보니 modal은 여러가지 변수, position fixed를 사용해 배경을 어둡게 만든다. dialog는 사라지는 효과 스크롤 같은 설정, content는 display flex로 header, body, footer를 배치한다. See the Pen Untitled by mahongro1101 (@amamam111) on CodePen. 이렇게 만들어보았다. 아직 너비, 위치 지정 이런쪽이 부족한 것 같다. 복습, 실습을 더 해봐..
[bootstrap5 따라 만들기] 5. NavBar (ft. css 속성 우선순위) 이번에는 header에서 사용하는 네비게이션 바를 만들어볼 생각이다. 타이틀과 메뉴, 서치박스가 따로 있다. 그리고 사이즈가 줄어들면 반응형으로 메뉴 토글 버튼이 따로 나온다. 만들기전 제대로 구조를 한번 살펴보자. 반응형 같은 경우 미디어 쿼리를 사용해 적용할 생각이다. 이걸 토대로 html 태그, css 선택자 구조를 만든 후 적절한 스타일을 줘보자. See the Pen Untitled by mahongro1101 (@amamam111) on CodePen. 이번에 만들면서 !important를 빼먹어서 display : none이 적용되지 않아 고생했다. 구글링으로 문제를 해결하고 나니 반응형 웹 만들기 예제를 풀 때 !important를 적었던 기억이 어렴풋이 났다. 그때는 왜 쓰는지도 모르고 ..
[bootstrap5 따라 만들기] 4. Offcanvas 이번에 만들어볼 건 오프캔버스이다. 모바일에서 좁아진 네비게이션 바를 따로 사이드로 빼주는 기능을 한다. 헤더에 있는 햄버거 버튼을 누르면 작동한다. 구조를 한번 살펴보자. 헤더에는 타이틀과 닫기 버튼이 있고, 바디에는 원하는 것들을 넣을 수 있다. 우리가 자주 보는 오프캔버스에는 메뉴바가 들어가 있다. html -> css -> js 순으로 만들어주면 된다. 나도 그렇게 만들다보니 조금 익숙해졌다. See the Pen Untitled by mahongro1101 (@amamam111) on CodePen. 사실 이것저것 이벤트도 더 추가하고 해줘야되는데 모양은 그럴듯하게 나와서 여기까지만 하려고 한다. 나중에 실력이 더 좋아지면 해야겠다.
[bootstrap5 따라 만들기] 3. Dropdown 이번에 만들어볼 건 드랍다운이다. 버튼을 누르면 아래쪽으로 리스트 아이템들이 보여지는 형태이다. 구조를 한번 살펴보면 토글 버튼과 메뉴 리스트로 구성되어 있다. 위 트리를 보고 html, css 틀을 먼저 만든 후 조금씩 고쳐가며 만들면 된다. 만들면서 아직까지 미숙하다는 느낌이 많이 든다. 내가 원하는 방향으로 만들기 쉽지 않다. See the Pen Untitled by mahongro1101 (@amamam111) on CodePen. 그래도 오늘은 빨리 만들었다. 어제 힘들었으니 오늘은 여기까지만 해야겠다.
[bootstrap5 따라 만들기] 2. Carousel 이번에 만들어볼 것은 carousel이다. 이미지를 슬라이드 형태로 만들어 준다. 어떻게 만들지 이미지를 보면 좌우 버튼은 position : absolute 사용해서 배치해줘야할 것 같다. 그리고 이미지는 옆으로 길게 붙여서 보이는 위치만 바꿔줘야겠다. 구조를 살펴보자. 이제 이걸 토대로 html, css 틀을 작성하고 고민을 해보자. See the Pen Untitled by mahongro1101 (@amamam111) on CodePen. 이번에 만들면서 엄청 고생했다. 앞에 accordion은 그래도 쉽게 만들었는데, 이번껀 왜 이렇게 헤맸는지 나의 부족함을 온몸으로 느낀 하루였다.
[bootstrap5 따라 만들기] 1. Accordion 반응형 웹 예제를 똑같이 만들어봤지만 아직까지, 웹 사이트를 만들 생각을 하면 막막하다. 그래서 이번에는 웹 사이트를 구성하는 component들을 먼저 만들어 볼 생각이다. 추후에는 bootstrap5에서 제공하는 example까지 따라 만들어 볼 생각이다. 준비물 visual code, bootstrap icon, scss, jquery https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com Accordion 아코디언은 수직으로 내용이 나타났다 사라졌다하는 component이다. 아코디언의 구조를 살펴보면 item 내부 header, bo..

티스토리툴바