웹에서 시작 하기

8306 단어 22.04.15html22.04.15

Codepen.io 소개

새 폴더 생성(ex. hello) - VSCODE에서 폴더 열기 - 파일 생성(ex. index.html) - https://codepen.io 사이트 접속 - 왼쪽 버튼(Start Coding) 클릭 - HTML/CSS/JS 각각 내용 입력(회원가입 시 테스트 코드 저장 가능)

브라우저 스타일 초기화

새 폴더 생성(ex. hello) - VSCODE에서 폴더 열기 - 파일 생성(ex. index.html)- 코드 작성 후 - 크롬으로 이동 - reset.css cdn 검색 - https://www.jsdelivr.com 접속 - /npm/[email protected]/reset.min.css 부분 오른쪽 아이콘 클릭 - Copy HTML 선택 - VSCODE에 head 부분에 붙혀넣기

index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
 <div></div>
</body>
main.css
div {
  width: 200px;
  height: 100px;
  backround-color: orange;
}

Emmet

emmet(에밋) - 태그 자동 완성 

index.html
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./main.css">
</head>
<body>
 <div></div>
 <img src="" alt=""> - img
 <h1></h1> - h1
 <div class="heropy"></div> - div.heropy
 <div>
   <ul>
      <li>1</li> 
      <li>2</li>
      <li>3</li>
      <li>4</li>
   </ul>
 </div> - div>ul>li*4{$}
</body>
☕Java: 콜렉션 프레임워크와 제네릭
[React] redux 사이클과 구조

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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