미니 도시 구축: HTML 섹션
11946 단어 htmlprogrammingwebdevbeginners
의도
HTML과 CSS는 웹 사이트가 어떻게 작동하는지 배우는 데 매우 중요한 부분이다.각 웹 사이트는 HTML을 사용하여 웹 사이트에 텍스트나 이미지 등의 내용을 표시합니다.HTML과 CSS의 개념을 파악하는 것은 컴퓨터 과학에서 더욱 복잡한 과목을 배우는 데 큰 도움이 된다.따라서 사용 경험을 얻는 것이 중요합니다!
이 강좌는 HTML의 일부 기능이 어떻게 작동하는지, 그리고 왜 중요한지, 그리고 멋진 미니 도시를 구축하는 방법을 배울 것입니다!
설치 프로그램
HTML/CSS 편집기를 엽니다.Here is a good browser-based editor .
본 강좌를 따라가면, 당신은 첫 번째 미니 도시를 건설하는 데 한 걸음 더 가까워질 것입니다!
연습하다
이 강좌는 미니 도시의 HTML과 CSS 부분을 소개합니다.HTML을 전체 프로젝트의 기초로 삼을 수 있습니다!만약 우리가 튼튼한 기초를 세우려고 노력한다면, 우리의 작은 도시는 매우 좋아 보일 것이다.
HTML을 사용하는 첫 번째 단계는'! DOCTYPE HTML'함수를 만드는 것입니다.이것은 단지 우리 아래의 모든 코드가 HTML 문서로 나타날 것을 의미할 뿐이다.
따라서 첫 번째 줄은 다음과 같습니다.
<!DOCTYPE html>
이제 HTML 태그를 실제로 만들어야 합니다.태그는 본질적으로 편집기에서 어떤 종류의 HTML을 작성하고 있는지 알려주는 명령입니다.이것은 단지 우리가 HTML 코드를 작성하기 시작한다는 것을 의미하지만, 우선 우리는 컴퓨터에 우리가 HTML로 작성할 것이라고 알려야 한다.이를 위해 두 번째 줄에 를 입력하면 됩니다.지금까지 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
우리가 서명을 쓴 후에, 우리는 우리의 프로젝트에 제목을 주어야 한다는 것을 안다.우리들은 우리의 프로젝트를'나의 미니 도시'라고 명명합시다.다음은 코드의 모양입니다.
<!DOCTYPE html>
<html>
<head>
<title>My Mini City</title>
바디 부분을 만들려면 다음 줄에 바디를 입력하십시오.
이제 우리 수업합시다!우리가 우리 도시가 어떤 모습이기를 바라는지 생각해 봅시다.
우리는 우리가 우리 도시에서 다음과 같은 물품을 가지고 싶어 한다는 것을 안다.
바닥
마천루
작은 건물
하나의 길
다리 하나
바다.
폭포수
승용차 한 대
최종적으로 이 대상들을 만들기 위해서, 우리는 그것들을 위해 클래스를 만들어야 한다.클래스는 우리가 대상을 만들어야 한다는 사실을 확인하는 데 사용되는 성명일 뿐이다.그리고 우리는 실제로 CSS에서 그것을 만듭니다!
우리는
태그를 사용하여 클래스를 만듭니다.이렇게
우리는 모든 다른 물체에 대해 같은 일을 한다.완료되면 다음과 같이 해야 합니다.
우리는 도시의 모든 대상을 위한div클래스를 만듭니다.이렇게 하면 CSS를 사용하여 편집할 수 있습니다.HTML은 우리의 모든 대상의 캔버스일 뿐, CSS는 우리의 그림과 같다!
객체에 하위 객체가 있는 경우도 있습니다.예를 들어 우리의 건축은 지면에 놓여 있기 때문에 건축은 지면의 아이이다.
"building1"은 코드의 "ground"표시에 있습니다.
우리'building1'에도 자신의 아이가 있다.벽과 지붕은 우리 건축의 구성 부분이기 때문에, 우리는 그것들을 우리의 라벨에 넣을 것이다.구성 요소가 서로 속하기만 하면 우리는 이 점을 반복할 것이다.(풀밭과 나무에서도 볼 수 있다)
우리가 모든 대상과 하위 대상을 만든 후에/body와/html로 우리의 주체와 html 표시를 닫을 때가 되었다.
CSS에서 객체를 설계해야 할 경우 HTML에서 작성된 정확한 이름을 사용해야 합니다.예를 들어, 만약 내가 도시의 교량 색깔을 바꾸고 싶다면, CSS에서 그것을 HTML에서와 같이 "bridge"라고 명명해야 한다.
다음은 코드의 CSS 부분에 대한 편집기를 준비하겠습니다.우리는 양식 표기를 세워서 이 점을 실현한다.CSS를 사용하기 때문에 스타일 레이블은 다음과 같습니다.
우리의 웹 페이지를 설계하기 위해서 우리는 CSS 문법을 배워야 한다.CSS 규칙 집합은 선택기 및 선언 블록으로 구성됩니다.
색상과 글꼴 크기 외에 다음 속성이 필요합니다. 위치: 요소에 대한 위치 지정 방법 유형: 정적, 상대적, 고정, 절대 또는 점성. 정적: 정적 위치는 항상 페이지의 정상적인 절차에 따라 위치를 정한다. 상대적: 상대적 위치는 CSS의 다른 객체를 기준으로 지정됩니다. 고정: 페이지가 어떤 방식으로 굴러가든 고정된 위치를 가진 요소는 항상 같은 위치에 유지됩니다. 절대: 고정과 유사하지만 페이지가 아닌 다른 대상에 비해 항상 같은 위치에 있습니다. 점성: 사용자의 스크롤 위치 위치를 바탕으로 하는 요소. 표시: 요소 표시 여부를 처리합니다.디스플레이: 없음을 선택하면 요소가 표시되지 않습니다. 배경색: 요소의 배경색을 결정합니다.색상은 유효한 색상 이름(예: "black", 16진수 값 (예: ffff") 또는 rgb 값 (예:"rgb(255, 0, 0)") 으로 지정할 수 있습니다. 높이 및 너비: 이러한 속성은 요소의 높이 및 너비를 설정하는 데 사용됩니다. 변환: 이 속성은 2차원 변환에 사용됩니다.가장 자주 사용하는 변환은rotate()와 skew입니다. rotate(): 주어진 각도에 따라 시계 방향 또는 시계 반대 방향으로 원소를 회전합니다.예:
변환: 회전(20도); skew(): X축과 Y축을 따라 요소가 지정된 각도로 기울어집니다.예를 들어, 이 예제에서는 요소가 X축을 따라 30도 기울어지고 Y축을 따라 50도 기울어집니다.
변환: 경사(30도, 50도); 상단: 원소의 수직 위치에 영향을 줍니다.위의 예는 원소를 최근 조상의 위쪽 가장자리 아래 18px에 설정합니다. 왼쪽: 원소의 수평 위치에 영향을 줍니다.상술한 예는 원소를 가장 최근에 조상의 왼쪽 가장자리에서 90px로 설정한다. Z 인덱스: 요소의 스택 순서를 지정합니다.너는 Z지수를 샌드위치의 층으로 상상할 수 있다.한 항목의 Z 색인 값이 다른 항목보다 높으면 먼저 높은 값을 그립니다. 우선, 당신은 당신의 도시를 위해 기초를 다져야 합니다.다음 코드를 시작점으로 사용할 수 있습니다.
<body>
<div class = "ground">
우리는 모든 다른 물체에 대해 같은 일을 한다.완료되면 다음과 같이 해야 합니다.
<body>
<div class = "ground">
<div class = "bottomSide"></div>
<div class = "bottomFront"></div>
<div class = "building1">
<div class = "wall1"></div>
<div class = "wall2"></div>
<div class = "roof"></div>
<div class = "railing1"></div>
<div class = "railing2"></div>
</div>
<div class = "building2">
<div class = "wall3"></div>
<div class = "wall4"></div>
<div class = "roof2"></div>
</div>
<div class = "road1"></div>
<div class = "road2"></div>
</div>
<div class = "ocean"></div>
<div class = "ramp1"></div>
<div class = "ramp2"></div>
<div class = "bridge"></div>
<div class = "waterfall"></div>
<div class = "ground2">
<div class = "grassArea"> <!--GRASS AREA-->
<div class = "treeTrunks"></div>
<div class = "triangleTops"></div>
<div class = "circleTops"></div>
</div>
<div class = "bottomFront"></div>
</div>
<div class = "car">
<div></div>
<div></div>
</div>
<div class = "boat">
<div></div>
<div></div>
<div></div>
</div>
<div class = "sun"></div>
</body>
</html>
우리는 도시의 모든 대상을 위한div클래스를 만듭니다.이렇게 하면 CSS를 사용하여 편집할 수 있습니다.HTML은 우리의 모든 대상의 캔버스일 뿐, CSS는 우리의 그림과 같다!
객체에 하위 객체가 있는 경우도 있습니다.예를 들어 우리의 건축은 지면에 놓여 있기 때문에 건축은 지면의 아이이다.
"building1"은 코드의 "ground"표시에 있습니다.
우리'building1'에도 자신의 아이가 있다.벽과 지붕은 우리 건축의 구성 부분이기 때문에, 우리는 그것들을 우리의
우리가 모든 대상과 하위 대상을 만든 후에/body와/html로 우리의 주체와 html 표시를 닫을 때가 되었다.
CSS에서 객체를 설계해야 할 경우 HTML에서 작성된 정확한 이름을 사용해야 합니다.예를 들어, 만약 내가 도시의 교량 색깔을 바꾸고 싶다면, CSS에서 그것을 HTML에서와 같이 "bridge"라고 명명해야 한다.
다음은 코드의 CSS 부분에 대한 편집기를 준비하겠습니다.우리는 양식 표기를 세워서 이 점을 실현한다.CSS를 사용하기 때문에 스타일 레이블은 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Mini City Webinar</title>
<style TYPE="text/css">
우리의 웹 페이지를 설계하기 위해서 우리는 CSS 문법을 배워야 한다.CSS 규칙 집합은 선택기 및 선언 블록으로 구성됩니다.
색상과 글꼴 크기 외에 다음 속성이 필요합니다.
변환: 회전(20도);
변환: 경사(30도, 50도);
.ground{ /*foundation*/
position: absolute;
display: block;
/*purple*/
background-color: #D3D3D3;
width: 200px;
height: 148px;
transform: skew(60deg, -15deg);
top: 100px;
left: -150px;
z-index:-999;
}
.ground .bottomSide{
position: absolute;
display: block;
width: 16px;
height: 148px;
background-color: #C0C0C0;
transform: skew(0deg, -30deg);
top: 4px;
left: -16px;
z-index:-1001;
}
.ground .bottomFront{
position: absolute;
display: block;
width: 210px;
height: 9.5px;
background-color: #C0C0C0;
transform: skew(-60deg, 0deg);
top: 147px;
left: -8px;
z-index:-1001;
}
.ground .road1 {
position: absolute;
display: block;
background-color: #C0C0C0;
width: 20px;
height: 200px;
transform: rotateZ(90deg);
top: 18px;
left: 90px;
z-index:-998;
Reference
이 문제에 관하여(미니 도시 구축: HTML 섹션), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/bitproject/building-a-mini-city-html-portion-1me텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
