1. visualstudio 다운로드
code.visualstudio.com/Download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
2. 환경설정 맞추기
VS Code에서 왼쪽 상단 마지막 아이콘 클릭 -> Auto close tag, Auto Rename tag, Live server, open in browser, Beautify 확장 목록 설치
3. VS code 좌측 톱니바퀴 클릭 -> settings 클릭 -> 우측 상단 첫번째 아이콘 클릭
4. 아래 내용을 {}안에 붙여넣기 한 후 ctrl+s(저장) -> 닫기
-----------------------------------------------------------------------------------------------------------
설치 후 환경설정을 맞춘 후 이제 본격적인 공부 시작!
1. id : 절대적인것에 쓴다. header, contents, footer 이런곳에
class : 이곳, 저곳에 쓴다
div : 영역
2. Ctrl+N : 새창 열기
Ctrl+S : 저장하기(보통 index.html)
Ctrl+/ : 주석되게 하는것
!+tap : 자동완성
Alt+B : 작성한 코드 실행
3.
<!DOCTYPE html>
시작할때는 우선 html을 선언해줘야 한다
<html lang="ko">
<head>
<title> 빈츠와이프의 블로그 </title>
</head>
<style>
블라블라(스타일 적기)
</style>
<div id="wrap"
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
3. 효과, 구조 없애는건 reset.css로 파일 만들어 놓기
4.
<p> : 글자쓸 때 사용
<h1>~<h2> : 여섯 단계의 레벨 제목. 정해진 스타일이 있다
<b> : 강조, 굵게
<i> : 기울임꼴
<ol><li> : 순서 있는 목록
<ul><li> : 순서 없는 목록
<a href="링크">사용자가 클릭할 텍스트</a> : 링크 클릭
<target="_blank"> : 새창으로 띄우기
|
<h1>빈츠와이프블로그</h1> <h2>티스토리</h2> <ul> <li><a href="https://binchwife.tistory.com" target="_blank">빈츠와이프 블로그 바로가기</a></li> <li><a href="https://binchwife.tistory.com" target="_blank">빈츠와이프 티스토리 바로가기</a></li> </ul>  |
<sup> : 위첨자
|
<p>a<sup>2</sup> (에이제곱)</p>  |
<sub> : 아래첨자
|
<p>co<sub>2</sub>(씨오투)</p>  |
<br> : 한줄띄우기
<hr/> : 가로줄 긋기
 이렇게 가로줄이 그어진다 |
<strong> : 코딩안에서 강조, 굵게 처리됨
<address> : 주소
: 한칸 띄우기
| <a href="https://binchwife.tistory.com" target="_blank">빈츠와이프 블로그 바로가기</a> |
# : 위로 올라감
| <a href="#">민주</a> : 민주 누르면 위로 올라감 |
※ <p>와 <span>의 차이 : <p>는 영역이 한줄로 잡히고(block : 100% 차지), <span>은 내가 쓴만큼만 차지(in-line)
※ in-block은 block과 in-line 혼용한 것
5.
. = class
# = id
를 뜻하기 때문에
.name(color:red...)
이렇게 표현할 수 있음
6. 글씨 크기는 나눔고딕같이 L,M,B 세개 있는경우에는 굵게 할 경우 B를 쓰면 되는데 Notosans 같이 S,L,R,M,B,Black일 경우에는 B를 쓰고 싶은데 Black 써질수도 있기 때문에 700이라는 숫자로 굵게 지정한다
'공부' 카테고리의 다른 글
| [영상공부] BTS 방탄소년단 교차편집 (0) | 2020.09.09 |
|---|---|
| [프리미어 공부] 씽크 맞추기, nest(중첩), 자르기, 흑백 만들기 (0) | 2020.09.07 |
| [파이썬(python)공부] (0) | 2020.08.03 |
| [포토샵 공부] 화장품 홍보 레이어 2 (0) | 2020.07.31 |
| [파이썬(python)공부] 리스트, 인덱스, 삭제 및 변경 (0) | 2020.07.31 |