Part01 HTML & CSS 첫걸음 / 개요
VSCODE 굿 팁
Beautify
코드 가독성을 위해 코드 작성 스타일을 (아름답게) 수정합니다.
입문자들에게 적극 추천합니다.
Preferences > Keyboard Shortcut
선택HookyQR.beautify
를 검색(HookyQR.beautifyFile
아니에요!)키 바인딩
선택- 원하는 단축키 등록
“Alt + Ctrl + L”(Windows) / “Alt + Cmd + L”(macOS)을 추천합니다.
Live Server
하단 상태 바(Status bar)에서 Go Live
선택
또는,
HTML 화면에서 우클릭 > Open with Live Server
선택
VS Code 버전에 따라서 이미 설치되어 있을 수 있습니다.
Auto Rename Tag
태그 이름을 수정할 때 열린 태그와 닫힌 태그가 쌍으로 수정됩니다.
각각 수정해야 하는 번거로움을 줄일 수 있습니다.
그 외 추천
다음 확장 기능들이 당장 필요하지는 않을 겁니다.
나중에 살펴보세요.
Terminal
Live Sass Compiler
Turbo Console log
Better Comments
Highlight Matching Tag
알아두면 좋은 단축키
Preferences > Keyboard Shortcut(바로 가기 키)
에서 단축키를 확인하거나 변경할 수 있습니다.
"
를 사용하면 키 바인딩을 검색할 수 있습니다."
를 닫으면 정확한 검색을 요구하므로"cmd + p
와 같이"
를 닫지 않고 검색하는 것을 추천합니다.
Windows 단축키 | macOS 단축키 | 설명 |
---|---|---|
“Ctrl + B” | “Cmd + B” | 사이드바 열기/닫기 |
“Ctrl + P” | “Cmd + P” | 빠른 열기(파일이나 기호 탐색) |
“Ctrl + Shift + P” | “Cmd + Shift + P” | 모든 명령 표시(에디터의 모든 명령에 접근) |
“Ctrl + F” | “Cmd + F” | 찾기(검색) |
“Ctrl + H” | “Cmd + Opt(Alt) + F” | 찾기(검색)/바꾸기(대체) |
“Alt + Up” | “Alt + Up” | 줄 위로 이동 |
“Alt + Down” | “Alt + Down” | 줄 아래로 이동 |
“Shift + Alt + UpArrow” | “Shift + Alt + UpArrow” | 위에 줄 복사 |
“Shift + Alt + DownArrow” | “Shift + Alt + DownArrow” | 아래 줄 복사 |
“Tab” | “Tab” | 들여쓰기 |
“Shift + Tab” | “Shift + Tab” | 내어쓰기 |
“Ctrl + PageUp” | “Cmd + Shift + [” | 이전 편집기 열기(좌측 창으로 전환) |
“Ctrl + PageDown” | “Cmd + Shift + ]” | 다음 편집기 열기(우측 창으로 전환) |
“Ctrl + \” | “Cmd + \” | 편집기 분할(백슬래쉬) |
“Ctrl + 숫자” | “Cmd + 숫자” | 숫자 번째 분할된 편집기 그룹에 포커스 |
“Ctrl + W” | “Cmd + W” | 편집기 닫기 |
약어로 랩핑(Wrap)
- 랩핑할 코드 선택
- 모든 명령 표시 실행 / “Ctrl + Shift + P”(Windows), “Cmd + Shift + P”(macOs)
Emmet: Wrap with Abbreviation(Emmet: 약어로 랩핑)
를 입력하거나 목록에서 선택(“Enter”)div
,span
등의 Emmet 문법(ex:.wrapper
,span.bold
)을 입력- 완료(“Enter”)
특수 문자 용어 정리
기호 | 영어(발음) | 한글 |
---|---|---|
` | Grave(그레이브) | - |
~ | Tilde(틸드) | 물결표시 |
! | Exclamation(엑스클러메이션) mark | 느낌표 |
@ | At(엣) sign | 골뱅이 |
# | Number(넘버) sign, Sharp(샵) | 샵, 우물 정 |
$ | Dollar(달러) sign | 달러 |
% | Percent(퍼센트) sign | 퍼센트 |
^ | Caret(캐럿) | - |
& | Ampersand(엠퍼센드) | - |
* | Asterisk(에스터리스크) | 별표 |
- | Hyphen(하이픈), Dash(대쉬) | 마이너스 |
_ | Underscore(언더스코어), Low dash(로대쉬) | 밑줄 |
= | Equals(이퀄) sign | 이꼬르 |
“ | Quotation(쿼테이션) mark | 큰 따옴표 |
‘ | Apostrophe(아포스트로피) | 작은 따옴표 |
: | Colon(콜론) | 땡땡이 |
; | Semicolon(세미콜론) | 털 달린 땡땡이 |
, | Comma(콤마) | 쉼표 |
. | Period(피리어드), Dot(닷) | 점, 마침표 |
? | Question(퀘스천) mark | 물음표 |
/ | Slash(슬래쉬) | - |
| | Vertical bar(버티컬 바) | - |
\ | Backslash(백슬래쉬) | - |
() | Parenthesis(퍼렌서시스) | (소)괄호 |
{} | Brace(브레이스) | 중괄호 |
[] | Bracket(브래킷) | 대괄호 |
<> | Angle Bracket(앵글 브래킷) | 꺽쇠괄호 |
오픈소스 라이선스
Apache License
아파치 소프트웨어 재단에서 자체 소프트웨어에 적용하기 위해 만든 라이선스입니다.
개인적/상업적 이용, 배포, 수정, 특허 신청이 가능합니다.
MIT License
매사추세츠공과대학(MIT)에서 소프트웨어 학생들을 위해 개발한 라이선스입니다.
개인 소스에 이 라이선스를 사용하고 있다는 표시만 지켜주면 되며, 나머지 사용에 대한 제약은 없기 때문에 인기가 많습니다.
BSD License
BSD(Berkeley Software Distribution)는 버클리 캘리포니아대학에서 개발한 라이선스입니다.
MIT와 동일하게 라이선스 표시만 지켜주시면 됩니다.
Beerware
오픈소스 개발자에게 맥주를 사줘야 하는 라이선스입니다.
물론 만날 수 있다면 말이죠!
그 외 더 많은 오픈소스 라이선스에 대한 정보는 OpenSource.org에서 확인하실 수 있습니다.
LINK(CSS 불러오기)
외부 문서를 연결할 때 사용합니다.
특히 HTML 외부에서 작성된 CSS 문서(xxx.css
파일)를 불러와 연결할 때 사용합니다.
빈(Empty) 태그입니다.
<head>
<link rel="stylesheet" href="./css/main.css">
<link rel="icon" href="./favicon.png">
</head>
<!-- 다음과 같이 이해할 수 있습니다. -->
<문서의정보범위>
<외부문서연결 관계="CSS" 문서경로="./css/main.css">
<외부문서연결 관계="사이트대표아이콘" 문서경로="./favicon.png">
</문서의정보범위>
속성 | 의미 | 값 |
---|---|---|
rel | (필수)현재 문서와 외부 문서와의 관계를 지정 | stylesheet , icon 등.. |
href | 외부 문서의 위치를 지정 | 경로 |
SCRIPT(JS 불러오거나 작성하기)
HTML 문서에서 CSS는, 작성된 CSS를 <link>
로 불러오거나 <style></style>
안에 작성할 수 있습니다.
JS는 <script></script>
로 이 2가지 방식을 모두 사용할 수 있습니다.
<!-- 불러오기 -->
<script src="./js/main.js"></script>
<!-- 작성하기 -->
<script>
function windowOnClickHandler(event) {
console.log(event);
}
window.addEventListener('click', windowOnClickHandler);
</script>
<!-- 다음과 같이 이해할 수 있습니다. -->
<!-- 불러오기 -->
<자바스크립트 문서경로="./js/main.js"></자바스크립트>
<!-- 작성하기 -->
<자바스크립트>
<!-- JS 코드 -->
</자바스크립트>
CSS 선언 방식
이제 내가 작성한 CSS 코드를 어떻게 HTML에 적용할 수 있는지 알아봅시다.
태그에 직접 작성하기(인라인)
이 방법은 HTML 태그에 직접 작성하기 때문에 선택자가 필요하지 않습니다.
<div style="color: red;">태그에 직접 작성1</div> <!-- red -->
<div style="color: red;">태그에 직접 작성2</div> <!-- red -->
<div style="color: red;">태그에 직접 작성3</div> <!-- red -->
<div style="color: red;">태그에 직접 작성4</div> <!-- red -->
HTML에 포함하기(내장)
CSS만 따로 작성하기 때문에 선택자가 필요합니다.
CSS 코드가 HTML의 <style></style>
안에 포함되어 있습니다.
<head>
<style>
div {
color: red;
}
</style>
</head>
<body>
<div>HTML에 포함1</div> <!-- red -->
<div>HTML에 포함2</div> <!-- red -->
<div>HTML에 포함3</div> <!-- red -->
</body>
HTML 외부에서 불러오기
CSS 코드를 완전히 분리할 수 있습니다.
분리된 하나의 CSS 파일을 여러 HTML 파일이 불러와서 사용할 수 있겠네요.
<!-- HTML 1 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기1</div> <!-- red -->
</body>
<!-- HTML 2 -->
<head>
<link rel="stylesheet" href="/css/main.css">
</head>
<body>
<div>HTML에 외부에서 불러오기2</div> <!-- red -->
</body>
/* main.css */
div {
color: red;
크기
width(가로 너비)
요소의 가로 너비를 지정합니다.
단위는 px
(pixels)을 사용합니다.
div {
width: 300px;
요소가로너비: 너비값;
}
height(세로 너비)
요소의 세로 너비를 지정합니다.
div {
height: 150px;
요소세로너비: 너비값;
}
font-size(글자 크기)
요소 내용(Text)의 글자 크기를 지정합니다.
div {
font-size: 16px;
글자크기: 크기값;
}
여백
margin(요소의 바깥 여백)
요소의 바깥 여백을 지정합니다.(단축 속성)
바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용합니다.
div {
margin: 20px;
요소바깥여백: 여백값;
}
위 코드는 margin
은 요소의 위, 아래, 좌, 우 모두 20px
의 여백을 지정하겠다는 의미입니다.(개별 속성)
세분화하기 위해 아래와 같이 한 방향씩 지정할 수도 있습니다.
위 코드와 아래 코드는 같은 의미입니다.
div {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
요소바깥여백-위쪽: 여백값;
요소바깥여백-오른쪽: 여백값;
요소바깥여백-아래쪽: 여백값;
요소바깥여백-왼쪽: 여백값;
}
padding(요소의 내부 여백)
요소의 내부 여백을 지정합니다.
내부 여백은 자식 요소를 감싸는 여백을 의미합니다.
div {
padding: 20px;
요소내부여백: 여백값;
}
margin
과 같이 한 방향씩 지정할 수 있습니다.
div {
padding-top: 20px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 20px;
요소내부여백-위쪽: 여백값;
요소내부여백-오른쪽: 여백값;
요소내부여백-아래쪽: 여백값;
요소내부여백-왼쪽: 여백값;
}
댓글
댓글 쓰기