Yeonee's Story

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 웹 사이트 내에서 소스 코드를 보여주고 싶을 때 어떻게 해야 할까요? 사용되는 방법은 태그를 이용하는 방법입니다. 태그를 이용하면 입력한 그대로 웹 사이트 내에서 소스코드가 출력됩니다. 웹 페이지 내 소스코드 작성하기 1. 소스코드를 넣어줄 위치를 정하고 태그 안에 아래와 같이 소스코드를 작성합니다. 2. 이와 같이 제가 입력한 이부분은 출력되지 못한 것을 볼 수 있는데요, html코드에서는 꺽쇠를 인지하지 못합니다. 그러므로 다음과 같이 코드를 변경해줍니다. 그러면 위와 같이 꺽쇠까지 화면에 출력되는 것을 확인할 수 있습니다. 3. 태그 스크롤 이용하기 태그 내의 내용이 길어지면 자동으로 스크롤이 적용됩니다. (영..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 오늘은 외부의 영상링크를 불러와 화면에 띄울 수 있는 동영상 불러오기 실습을 해보도록 하겠습니다. "youtube.com에서 연결을 거부"시 해결방법도 함께 아래에 있으니 위의 동영상 불러오기 내용이 필요치 않으신 분들은 아래의 내용으로 "youtube.com에서 연결을 거부" 오류를 해결하시기 바랍니다. 동영상 불러오기 경제/심리학 강신주의 감정수업 생각의 각도 인간적인 너무나 인간적인 백 마디 말보다 강력한 행동의 심리학 위의 리스트 그룹 마지막 div 바로 위에 새로운 div로 embed div를 만들어줍니다. embed-responsive-16by9로 '16by9'는 최상의 해상도를 의미합니다. 자신이 원하는..

안녕하세요. https://blog.naver.com/sysysy0302 여니입니다 :) 이전 포스팅에서 리스트 그룹을 이용하여 게시판 리스트 목록을 만드는 것을 실습해보았는데요, 해당 게시물을 누르면 책의 정보의 Modal창을 띄우는 응용 부분을 추가적으로 실습해보았습니다. + 일단 하드코딩으로 세부내용을 진행 후 추후 내용을 수정하면서 완성된 웹페이지를 구성해보고자 합니다. 게시판 리스트 모달창 띄우기 리스트 그룹인 게시판 리스트 목록인 부분의 modal id값을 각각 다르게 부여해줍니다. 해당 모달을 footer태그 아래에 덧붙여줍니다. Modal창 부분인 div태그 중, 위 리스트그룹에서 지정해준 id값과 일치하도록 수정해줍니다. + modal관련 내용을 서치하다보니 그냥 modal보다 modal..

안녕하세요. 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 등으로 자유롭게 마음대로 스타일을 조금 변경할 수 있습니다..