우리 함께 HTML과 CSS를 합시다!

7494 단어 htmlgithubcssvscode

어서 오세요!


자, 그럼 프로그래밍으로 시야를 넓히고 HTML/CSS 게임으로 기반을 다지는 것을 고려해 보세요.

어디서 시작하고 싶으면 좀 무서워요?
이 블로그는 연습을 시작하거나 CSS를 하고 싶은 사람들을 위해 준비한 것이다. 그들은 CSS의 탭 (명령) 을 사용하는 것에 대해 익숙할 것이다.없으면 HTML과CSS에 대한 상세한 학습 자료입니다.이 블로그의 마지막에 나는 너에게 더 많은 자원을 제공할 것이다.이것은 HTML 파일과 CSS 파일을 만들고 협동하는 데 도움을 줄 것입니다.코드의 유연성 덕분에 우리는 그것을 마음대로 사용하고 웹 페이지의 외관을 제어할 수 있다.
우리는 우리의 포트폴리오를 위해 자신의 저장소를 만드는 것부터 시작할 수 있다.이 예에서 나는 Github를 사용하여 환매를 만들 것이다. 그러나 Gitlab, Bitbucket, SourceForge 등 다른 사이트를 사용할 수 있을 것이다.
GitHub는 원격 Git 저장소를 허용합니다.이것은 귀하가 대중과 코드를 공유하고 다른 사람이 프로젝트에 기여하거나 인용할 수 있는 환경에서 귀하의 환매를 위탁할 수 있도록 합니다.
당신이나 당신의 프로젝트가 "부족하다"고 부끄러워하며 당신이 최종적으로 완성한 일이나 이미 완성한 일을 공유하지 마세요기억해라, 이것은 너에게 유용한 것을 배우기 위해서다!틀림없이 누군가가 너의 발견이 매우 유용하다는 것을 발견할 것이다.
그럼 환매로 돌아와.

Github 구성 파일에서 구석의 + 버튼을 눌러 새 저장소를 만듭니다.너는 그것에 네가 원하는 이름을 지어주고 제시에 따라 조작할 수 있다.

초기화할 때 보통 첫 번째 코드를 사용합니다.그래서 그것을 복사해서 터미널에 붙여넣으세요.

리포를 만들 때, 허가증,wiki 등 더 많은 맞춤형 설정을 사용할 수 있습니다. here 에서 더 깊이 있는gitrepo 강좌를 찾을 수 있습니다.
리포를 초기화하고 시스템에 복제한 후에 텍스트 편집기 프로그램을 사용할 때입니다.VsCode를 사용하고 있습니다.
VsCode에서 파일을 열면 자술한 파일만 표시됩니다.md 파일.괜찮아!우리의 실천을 위해 장애를 없애는 것이 좋다.
이제 HTML과 CSS 파일을 만듭니다.터치 인덱스를 실행할 수 있습니다.html와 터치 스타일.css는 터미널에 있거나 새 파일 단추를 사용하여 폴더 이름에 있습니다.

네가 말한 그 서류들은 무엇을 넣어야 합니까?
이 코드 줄을 색인에 넣으십시오.html 파일;
<html>
   <head>
      <link rel="stylesheet" href=“style.css">
   </head>
   <body>
      <h1> WELCOME TO THE PLAYGROUND! </h1>
      <p>Scroll down for more cool stuff!</p>
   </body>
</html>
<link rel="stylesheet" href=“style.css”> 우리 <head> 라벨에 있는 거 봤어?그것의 목적은 이 html 파일의 스타일시트로 우리의 CSS 파일을 호출하거나 연결하는 것이다.깔끔하죠?
지금 이 코드들을 당신의 스타일에 넣으세요.css 파일;
body {
  background-color: teal;
}
h1 {
 color: gold;
 }
p {
 color: orange;
 }
그래우리는 운동장에서 진보를 이루었다.만약 네가 그것이 어떤 모양인지 보고 싶다면, 여러 가지 방법이 실현될 수 있다.VsCode 터미널에서 실행open index.html하여 브라우저를 열거나 VsCode에 HTML 뷰어라는 확장자를 설치한 다음 오른쪽 위 모서리의 아이콘을 클릭하여 활성화할 수 있습니다.

우리의 시뮬레이션 홈페이지는 반드시 이렇다.

보기 좋다!허전해보여요.이력서나 프로필에 더 많은 단락을 추가할 수 있습니다.
그림 추가에 관심이 있습니까?엄호해 줄게!
그러나 우선, 우리가 이 문제를 진일보 토론하기 전에gitadd&commit에 익숙해지면, 이것은 당신이 지금 이렇게 하는 표지입니다.
이 예에서 우리는 인터넷상의 이미지를 사용할 것이다.그래서 우선 당신의 홈페이지에서 당신이 보고 싶은 사진을 한 장 찾으세요.

당신이 원하는 사진의 사진 URL을 복사합니다. 제 예에서 구글 검색에서 이 사진들을 얻었지만 다른 사이트의 일부 사진, 예를 들어 Flickr 등을 사용할 수 있습니다.
웹 페이지에 추가하려면 이미지 URL을 <img> 이라는 태그에 붙여넣어야 합니다.그것은 자동으로 닫히는 라벨이기 때문에 우리는 하나를 놓을 필요가 없다.색인html는 더욱 이렇게 보일 것이다.

CSS 파일에서 웹 페이지의 요소의 정렬 방식을 조정할 수 있습니다.CSS에 이러한 속성을 패치하여 추가하십시오.

이것은 문자 정렬 속성이 바디에 적용됨을 나타냅니다.보시다시피 #bacon은 "bacon"id가 있는 태그를 선택하여 html 파일에서 찾을 수 있습니다.하나id를 놓는 것은 깔끔한 방식이다. 우리는 단독 스타일의 모든 요소를 웹 페이지에 올릴 수 있다.
너의 노동 성과를 봐라!

읊다, 읊조리다방금 업데이트한repo를 가져오기 위해gitadd 명령을 저장하고 실행하는 것을 잊지 마십시오.
다음 HTML CSS 연습까지!
다음은 추가 소스입니다.
Starting with HTML
CSS basics
Color Picker
CSS Properties
Excel로 Markdown 테이블 생성 및 관리
poi를 이용하여 excel 데이터 가져오기, 코드 번거로운 문제 수정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage