동빈나 부트스트랩 웹 디자인 실전 강좌 13강 - 소스코드 작성하기 (Bootstrap Web Design Tutorial #13) > 부트스트랩

 

 지난 시간은 이렇게 자신이 웹사이트 안으로
유튜브나 네이버 tv 등의 동영상을 불러오는 방법을 한번 알아보았는데요.
이제 부트스트랩 에서 제공해주는 기본적인 배들 s4한 클래스를
이용해서 이렇게 불러오는 방법을 공부해 보았습니다.
자 이번 시간에 공부할 건 바로 소스 코드 인데요 이제 이런 식으로
저같은 경우는 이제 특정한 강의에서 어떤 언어를 알려주고 이렇게
동영상까지 보여주는 것을 구해야 해 보았는데요.
이제 여기서 그치는게 아니라 이렇게 아래쪽에 어떠한 서스 쿠르드 함께
보여줄 수 있도록 그런 식으로 소스 코드를 보여주는 방법을 한번 공부해
보려고 하는데요.
그러니까 웹사이트 안에서 어떤 소스 코드를 보여주는 방법을 지금부터
설명하려고 하는 것입니다.
자 보시면 이렇게 지난 시간까지 동영상을 불러온 것 까지 한번 구현했던
것을 알 수가 있는데요.
이렇게 아래쪽에 한번 소스 코드가 들어간 의 공간을 만들어 주도록 할게요.
자 소스코드 작성 아기입니다 웹사이트 내 1석 소스 코드를 보여주고
싶으면 어떻게 해야 될까요?
가장 많이 사용되는 방법은 바로 이 프리 태그를 이용하는 건데요.
2 프리 태그를 이용하게 되면 은 입력한 그대로 웹사이트 대에서 출력이
되는 것을 알 수가 있어요.
즉 일반적으로 이제 소스 코드 안에는 모 씨와 같은 경우는 이제 인클로저
스탠더드 i5 해가지고 또한 가루 가치를 꺽쇠 같으니 들어가는데요 다만
이제 그게 에 html 문서에서 도 이렇게 꺽쇠 로 타결을 9분 하기
때문에 그렇게 태그를 작성해 놓은게 시험의 소스 코드 인지 아니면
html 문서에 태그 중 한 종묘에 뭔지 이제 우리 웹브라우저 메 그걸
인지하지 못하기 때문에 이렇게 프리 태그 란걸 이용해 가지고 프리 태그
안에 사용된 또한 내용들이 그대로 출력되도록 해서 이렇게 소스코드
같은것을 출력할 수 있도록 웹사이트 배에서 구현을 할 수 있는 것입니다.
한번 이제 이게 구체적으로 어떻게 이루어질 수 있는건지 알려드리면서 한번
간단하게 소스 코드를 작성하는 방법에 대해서 알려드리려고 합니다.
자 이 아래쪽에 넣어 주는 건데요 이렇게 서브라임 텍스트 를 실행하신
다음에 바로 다음에 같이 여기에다가 hr 태어나 더 가지고 9분 성애
지어 주시구요.
이제 이 안에 지아비 클래스 한 다음에 로우를 넣어 줄게요
이제 여기에다가 바로 다음과 같이 어떠한 설명을 넣어 줄 수 있도록
합니다.
이렇게
첫 번째 뭐 이런식으로 넣어가지고 저희의 이런 식으로 한번 간단하게 p
태그 안에 넣어 주었구요.
이제 한번 아래쪽에 소스 코드를 넣어 볼 건데요 바로 이렇게 아래쪽에
프리 라고 한 다음에 클래스 열어서 이렇게 불이 스크롤 업 으리라고
넣어줍니다.
만약 이 진다면 스크롤이 가능한 형태로 이렇게 pre 태그를 만들어
주겠다고 하는 거고요.
이렇게 이 안에 투수 코드 넣으시면 됩니다.
이런식으로 넣어 줄 수가 있어요 이렇게 이제 제 강의에 사용되는 헬로
월드 란 코드를 한번 시선으로 작성해서 이렇게 출력해 볼게요 자 이게
바로 실전으로 켈러 월드 를 출력하는 소스 코드 인데요 이제 이렇게
작성한 다음에 그 저장 해 주신 다음에 한번 이렇게 새로고침 해 주시면
이렇게 정상적으로 소스 코드가 출력이 되는 것을 볼 수가 있어요.
근데 지금 보시면 이제 이렇게 이루는 출력이 안 된 걸 알 수가 있죠.
집은 제가 입력한 건 바로 이렇게 텐 돌 dior 이렇게 x 안에 넣어
가지고 이렇게 볼 주라고 요거를 한 건데 이제 예지 템에 문서가 팀
경우는 태그를 각각 꺽쇠 로 9분 하기 때문에 이렇게 작성된 럭스가
어떠한 프리 태그 안에 사용되는 소스 코드 인건지
아니면 하나의 태그 일종인 건지 알지 못해요 앞선 그랬던거 똑같은 건데요
이제 이런 문제 해결하기 위해서 이제 html 에서는 어떠한 정해진
약속을 제공해 주는데요. 바로 이렇게 m 퍼센트 한 다음에 l7
입력해주시면 은 왼쪽 억새가 되는거구요. 이제 이런 식으로 짙지 라고
넣어주시면 이제 온 족쇄가 되는 겁니다 이렇게 해주게 되면 은 html
문서 안에서 이제 아 지금 개발자가 입력 1개 태그가 아니라 다스리지
이렇게 꺽쇠 를 말 그대로 출력하는 형태를 로 구한 거였구나 이런식으로
이해할 수 있게 되는거예요. 따라서 이제 이런 식으로 4쌍 해 주셔야지
안정적으로 꺽쇠 를 포함해서 어떠한 소스 코드를 작성할 수 있는 것입니다
이제 한번 새로고침 해 보시면 이런 식으로 함께 출력이 되는
것을 알 수가 있어요.
또한 이제 이렇게 만약에 내용이 길어진다면 자동으로 스크롤 바가 생기는
이런 형태로 프리 태그 안에 이렇게 소스 코드가 작성되어 있는 것을 알
수 있습니다.
이제 이런 식으로 프리 태그 같은 경우는 안에 입력된 내용이 그대로 출력
되기 때문에 이제 그러한 특성을 정확하게 이해 하시면서 적절하게 사용하실
수 있습니다.
이런식으로 아주 간단하게 소스코드를 출력하고 소스 코드를 보여주는 방법에
대해서 이해할 수 있었는데요. 이렇게 프리 태그를 이용함으로써 안에 있는
내용이 그대로 어떠한 여가도 없이 축 출력될 수 있구나^^
이제 이러한 것들 또한 이 해 보는 시간을 가졌습니다 아무튼 이번 시간에
이렇게 웹사이트 대에서 소스코드를 출력하는 방법에 대해서 공부해 보는
시간을 가졌습니다.
그 소스 코드가 들어가 있으니까 다름 이제 좀 그럴싸 한강의
홈페이지가 되었죠.