목록부트스트랩 (20)
Yeonee's Story
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 리스트 그룹이란 같은 성질을 가진 목록을 담는 그릇 같은 것입니다. 각각의 목록은 링크를 통해 이동이 가능합니다. 한 번 만들어 볼까요? 리스트 그룹의 링크 확인하기 앞전에 제가 boolList와 book으로 html을 나뉘어지게 작성해놨었는데, ul > li의 a태그 링크를 bookList.html로 바꿔주고 작업하였습니다. 다른 분들도 해당 html작업을 하기전 내가 작성한 드롭바의 링크속 html과 내가 작성하는 html명이 일치하는지 확인후 작업해주세요. 리스트 그룹 만들기 경제/심리학 강신주의 감정수업 백 마디 말보다 강력한 행동의 심리학 생각의 각도 마음의 지혜 아무 내용이 없는 bookList.html의..
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 인용구란 하나의 문장을 멋지게 표현하고자 할 때 사용합니다. 혹은 강조할 때 사용하기도 하죠. 이 인용구는 스타일시트를 이용해서 스타일을 변경하여 꾸밀 수도 있답니다. 오늘은 그 인용구를 사용하는 방법에 대해 알아보겠습니다. 인용구 삽입하기 지난 테이블 태그 바로 아래에 div panel-footer을 작성하여 인용구를 넣어줍니다. 아래 쪽에 제가 작성한 마거릿 미드의 명언이 화면에 출력되었어요. 인용구 꾸미기 이렇게 내부 스타일 시트를 넣어줍니다. 주석 부분을 참고하여 인용구가 들어가는 부분과 닫히는 부분을 확인할 수 있습니다. margin과 padding 등으로 자유롭게 마음대로 스타일을 조금 변경할 수 있습니다..
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 23.10.01 (일) - 실습(부트스트랩으로 웹사이트 만들기9) +티스토리 https://yeoneeluv.tistory.com/303 [개인프로젝트] Garden of Books 책들의정원 9(웹 디자인 - 테이블) 안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 지난 시간에는 이전에 만들었던 홈페이지에서 각각 링크를 적용시켜 각 페이지의 html을 만들어주었는데요, 오늘은 부트스트랩을 이용한 테 yeoneeluv.tistory.com - 코테(1) +티스토리 https://yeoneeluv.tistory.com/304 [프로그래머스/Java] 코딩테스트 Lv.0 짝수는 ..
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 이전에 만들었던 홈페이지에서 각각 링크를 적용하지 않고 임시로 지정했던 #부분을 이번에 링크연결을 해주려고 합니다. 웹 사이트 링크 연결하기 먼저 기존 네비바에 홈페이지 제목으로 부여해준 # 부분에 'index.html'을 입력해줍니다. 기본이 되는 소개페이지도 'index.html'로 입력해줍니다. 그리고 나머지 메뉴부분에 링크가 될 각각의 html명을 입력해줍니다. 'book.html'을 입력후 '?bookKind=종류' 이런식으로 입력하여 각각의 목록을 매개변수로 서버쪽으로 보내주는 코드를 입력해줍니다. 로그인 부분의 링크부분도 'loginForm.html'을 입력해줍니다. 이제 해당 목록 혹은 메뉴등을..
안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 패널 안에 미디어 태그를 이용하여 사진이나 그림을 각각의 구역에 넣어서 깔끔하고 예쁘게 작업할 수 있는 방법을 알아보겠습니다. 미디어태그는 이미 많은 웹사이트에서 활용되고 있답니다. 미디어 객체는 말그대로 다양한 멀티미디어 컨텐츠를 담을 수 있는 하나의 컴포넌트입니다. 미디어 태그를 적절하게 사용하여 다채로운 홈페이지를 꾸밀 수 있답니다. 패널 만들기 최신 도서 목록 glyphicon 중 pencil을 사용하여 다음과 같이 패널을 만들어줍니다. 미디어 삽입하기 최신 도서 목록 위와 같이 panel-body div에 img태그를 이용하여 미디어를 삽입해줍니다. img에 alt를 사용하는 이유는 웹사이트를 눈으로..