1. 기본 환경 생성(VS Code 설치)
문서 작업을 한다고 가정합니다. 여러 가지 방법이 있을 것입니다.
생각할 수 있는 가장 간단한 방법은 펜으로 종이에 직접 쓰는 것입니다. 그러나 아시다시피 이 방법은 매우 비효율적입니다. 문장만 쓰면 쓸 수 있지만 그래픽을 그려야 한다면? 아니면 간단한 이미지라도 사용해야 한다면?
그래서 문서 작업의 효율성을 높이기 위해 한글, 엑셀, 워드를 사용합니다. 그리고 이 작품은 필수적인 요소라고 할 수 있다.
코딩에도 동일하게 적용됩니다. 효율적으로 프로그래밍하려면 다음과 같이 코드 작성을 도와주는 프로그램이 필요합니다. 예를 들어 Word 및 Excel. 이러한 프로그램 중 VS Code로 코딩을 해보겠습니다.
2.HTML
HTML은 단순히 “스켈레톤”이라고 할 수 있습니다.
전체 웹은 HTML로 작성할 수 있으며 기본 구조는 다음과 같습니다.
HTML은 사용자에게 제시된 웹 페이지 내의 섹션을 나누어 문서를 작성하는 데 도움이 됩니다.
3.CSS
HTML이 골격이라면 CSS는 장식용으로 사용됩니다.
사용자를 위한 CSS 스타일, 레이아웃 등 문서가 표시되는 방식을 지정하는 언어입니다.
CSS 로 공간 만들기
이내에
~ .
HTML에서 클래스를 참조할 때 참조(class=”myclass”인 경우), .myclass는 { … }로 작성되어야 합니다.
4. 부트스트랩 사용
CSS를 사용하는 것은 쉽지만 미학적으로 보기 좋게 만드는 것은 다른 이야기입니다. 그래서 미리 빌드된 부트스트랩을 그대로 사용합니다.
기본 템플릿은 아래와 같습니다.
문서 유형 HTML>
<HTML 긴=“en”>
<머리>
<메타 문자 집합=“utf-8”>
<메타 성=“뷰포트” 내용물=“너비 = 장치 너비, 초기 스케일링 = 1, 축소 = 아니오”>
진실성=“sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOMLASjC” 교차 원산지=“익명의”>
진실성=“sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM”
교차 원산지=“익명의”>스크립트>
<제목>제목>
머리>
<몸>
<h1>h1>
몸>
HTML>
여기에 원하는 부트스트랩 코드를 복사하여 붙여넣으십시오.
하나와 당신은 끝났습니다.
5. 배운 내용을 사용하여 웹 페이지를 만듭니다.
HTML과 CSS를 사용하여 아래와 같은 간단한 영화 등급 페이지를 만들 것입니다.
완성된 코드는 아래와 같습니다.
DOCTYPE HTML>
<HTML 긴=“en”>
<머리>
<메타 문자 집합=“utf-8” />
<메타
성=“뷰포트”
내용물=“너비 = 장치 너비, 초기 스케일링 = 1, 축소 = 아니오”
/>
<지름길
친척=“스타일 템플릿”
진실성=“sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOMLASjC”
교차 원산지=“익명의”
/>
<스크립트
진실성=“sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM”
교차 원산지=“익명의”
>스크립트>
<제목>스파르타식 피디아제목>
<지름길
친척=“스타일 템플릿”
/>
<스타일>
* {
글꼴 패밀리: “고원도둠”, 산세 리프;
}
.내 제목 {
넓은: 100%;
키: 250픽셀;
배경 이미지: 선형 그래디언트(
0도,
RGB(0, 0, 0, 0.5),
RGB(0, 0, 0, 0.5)
),
배경 위치: 센터;
배경 크기: 씌우다;
색상: 하얀색;
광고: 구부러;
플렉스 방향: 나뉘다;
정렬 요소: 센터;
정당화-내용: 센터;
}
.내 제목 > 단추 {
넓은: 200픽셀;
키: 50픽셀;
배경색: 투명한;
색상: 하얀색;
경계 반경: 50픽셀;
국경: 1px 단단한 하얀색;
보더 업: 10px;
}
.내 제목 > 버튼: 호버 {
국경: 2px 단단한 하얀색;
}
.내 댓글 {
색상: 회색;
}
.내 카드 {
가장자리: 20픽셀 자동차 0px 자동차;
넓은: 95%;
최대 폭: 1200픽셀;
}
.내 게시물 {
넓은: 95%;
최대 폭: 500픽셀;
가장자리: 20픽셀 자동차 0px 자동차;
가구류: 20픽셀;
상자 그림자: 0px 0px 3px 0px 회색;
}
.mybtns {
광고: 구부러;
플렉스 방향: 열;
정렬 요소: 센터;
정당화-내용: 센터;
보더 업: 20픽셀;
}
.mybtns > 단추 {
오른쪽 가장자리: 10px;
}
스타일>
머리>
<몸>
<다양한 수업=“내 제목”>
<h1>내 인생 최고의 영화h1>
<단추>영화를 녹화하다단추>
다양한>
<다양한 수업=“내 게시물”>
<다양한 수업=“플로팅 MB-3”>
<기입
유형=“이메일”
수업=“양식 제어”
ID=“떠다니는 입구”
자리 표시자=“이름@example.com”
/>
<상표 ~을 위한=“떠다니는 입구”>영화 URL상표>
다양한>
<다양한 수업=“떠 있는”>
<텍스트 영역
수업=“양식 제어”
자리 표시자=“여기에 댓글을 남겨주세요”
ID=“부동 텍스트 영역2”
스타일=“높이: 100px”
>텍스트 영역>
<상표 ~을 위한=“부동 텍스트 영역2”>논평상표>
다양한>
<다양한 수업=“mybtns”>
<단추 유형=“단추” 수업=“btn btn-다크”>기록단추>
<단추 유형=“단추” 수업=“btn btn-개요-다크”>닫다단추>
다양한>
다양한>
<다양한 수업=“내 카드”>
<다양한 수업=“행 행-열-1 행-열-md-4 g-4”>
<다양한 수업=“안부”>
<다양한 수업=“맵 H-100”>
<그림
수업=“카드 이미지 상단”
오래된=“…”
/>
<다양한 수업=“지도 본문”>
<h5 수업=“카드 제목”>영화제목을 입력하세요h5>
<피 수업=“카드 텍스트”>다음은 영화에 대한 설명입니다.피>
<피>피>
<피 수업=“내 의견”>내 한 줄 리뷰 쓰기피>
다양한>
다양한>
다양한>
<다양한 수업=“안부”>
<다양한 수업=“맵 H-100”>
<그림
수업=“카드 이미지 상단”
오래된=“…”
/>
<다양한 수업=“지도 본문”>
<h5 수업=“카드 제목”>영화제목을 입력하세요h5>
<피 수업=“카드 텍스트”>다음은 영화에 대한 설명입니다.피>
<피>피>
<피 수업=“내 의견”>내 한 줄 리뷰 쓰기피>
다양한>
다양한>
다양한>
<다양한 수업=“안부”>
<다양한 수업=“맵 H-100”>
<그림
수업=“카드 이미지 상단”
오래된=“…”
/>
<다양한 수업=“지도 본문”>
<h5 수업=“카드 제목”>영화제목을 입력하세요h5>
<피 수업=“카드 텍스트”>다음은 영화에 대한 설명입니다.피>
<피>피>
<피 수업=“내 의견”>내 한 줄 리뷰 쓰기피>
다양한>
다양한>
다양한>
<다양한 수업=“안부”>
<다양한 수업=“맵 H-100”>
<그림
수업=“카드 이미지 상단”
오래된=“…”
/>
<다양한 수업=“지도 본문”>
<h5 수업=“카드 제목”>영화제목을 입력하세요h5>
<피 수업=“카드 텍스트”>다음은 영화에 대한 설명입니다.피>
<피>피>
<피 수업=“내 의견”>내 한 줄 리뷰 쓰기피>
다양한>
다양한>
다양한>
다양한>
다양한>
몸>
HTML>
코드는 무한히 길어 보이지만 많은 기능을 사용하지 않습니다.
Bootstrap을 사용하여 이미 생성된 카드와 버튼의 형식을 텍스트만 변경하여 복사하여 사용했습니다. 배경 이미지를 넣는 것과 같은 간단한 기능은 검색 30초 만에 할 수 있는 간단한 일입니다.
신기한 것은 강의를 들으면서 차근차근 추가한 결과가 생각보다 그럴싸했다.