📖 Ch1 개요, Ch2 VS Code
박영웅 강사님 블로그 사이트
웹앱의 동작원리
웹페이지가 출력되는 영역 : 뷰포트(Viewport)
단축키 & 공백2로 만들기
사이드 바(Side Bar)열고/닫기 : Ctrl + B
빠른 열기(파일이나 기호 탐색) : Ctrl + P
모든 명령 표시(에디터의 모든 명령에 접근) : Ctrl + Shift + P
편집기 닫기 : Ctrl + W
찾기(검색) : Ctrl + F
찾기(검색)/바꾸기(대체) : Ctrl + H
줄 위로 이동 : Alt + Up
줄 아래로 이동 : Alt + Down
아래에 줄 복사 : Alt + Shift + Down
되돌리기 : Ctrl + Z
위에 줄 복사 : Alt + Shift + Up
내어쓰기 : Shift + Tab
공백 : 2 권장함
편집기 분할(백슬래쉬) : Ctrl + \📚 Ch3. 무작정 시작하기
Doctype(DTD)
<!DOCTYPE html>문서의 HTML버전을 지정하고, ‘코드가 작성되어져 있는 HTML파일은 웹표준에 의거하여 동작합니다’ 라는 의미 입니다.
CSS, JS연결하기
<link rel="stylesheet" href="./main.css"> // css연결
<script src="./main.js"></script> // js 연결html파일의 head태그 안에 작성하면 css, js 파일을 연결할 수 있습니다.
정보를 의미하는 태그 살펴보기
<title>Naver</title>HTML 문서의 제목(title)을 정의하며, 웹 브라우저 탭에 표시됩니다.
<link rel="icon" href="./favicon.png">아이콘을 지정하는 코드인데요. Favorite Icon을 줄여서 Favicon(파비콘)이라고 부릅니다. HTML Favicon을 적용할 때는 이름을 favicon이라고 지정하시길 권장하며, favicon.ico혹은 favicon,png파일이 주로 사용됩니다.
화면에 이미지 출력하기
<img src="./images/logo.png" alt="HEROPY">
<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">alt(Alternate 단어의 약어)는 이미지가 출력되지 못하는 경우 대신 출력할 텍스트라고 해서 대체 텍스트라고 부릅니다. 이미지 경로가 잘못되거나 네트워크가 불안정하거나 등 이미지를 출력할 수 없는 다양한 상황에 이미지 대신 화면에 나올 글자로 이해하시면 충분합니다.
상대 경로와 절대 경로
“./ (생략가능)“는 주변에서 찾는 개념이며, 주변의 기준은 상대적으로 바뀔 수 있습니다.
“../ “는 상위폴더로 올라간다는 의미로 자기가 속해있는 폴더에 위쪽으로 올라가서 주변에서 찾게 되며, 밖으로 한번 나가세요 라는 의미입니다.
“http(https)”는 원격의 다른 사이트를 의미합니다.
“/ (//)” 는 최상위 경로(루트경로)를 의미합니다. 프로젝트 폴더 경로로 들어오자마자 있는 그 위치를 루트경로라고 합니다.
localhost 는 우리의 컴퓨터 환경이며, 루트경로에는 index.html파일, images,css폴더가 있는 것입니다.
페이지를 나누고 연결(링크)하기
<a href="https://naver.com">NAVER</a>
<a href="/about">About</a>
<a href="/login">Login</a>/about만 쓰기 : 이것이 가능한 이유는 브라우저는 자동으로 index.html이라는 파일을 찾기 때문에 그 파일이 들어있는 폴더만 명시해두면 자동으로 index.html파일을 찾습니다.
<a href="/">Home</a>/ : index.html을 찾습니다.
📚 Ch 4. 웹에서 시작하기
Codepen.io 소개
브라우저 스타일 초기화
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link rel="stylesheet" href="./main.css">각 브라우저마다 기본적으로 적용되는 스타일이 있는데 그걸 초기화하려면 https://www.jsdelivr.com/package/npm/reset-css 페이지에 들어가서 코드 복사하고(copy html), main.css link태그 위에 적으면 스타일 초기화를 할 수 있습니다.
Codepen에서는 css설정 들어가서 CSS Base를 Reset으로 체크하면 브라우저 스타일을 초기화 할 수 있습니다.
Emmet
div>ul>li*4{$}
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>Emmet은 CSS 선택자를 활용해 사용하는 기능입니다. *기호는 곱하기, { }는 내용을 삽입, $는 순서대로 숫자 입력을 의미합니다. tab키를 누르면 적용됩니다.
📚 Ch5. HTML 개요
부모와 자식 관계의 이해
부모요소는 바로 윗 단계에 있는 요소이며, 상위(조상)요소는 부모요소도 포함하는 개념으로 윗 단계에 있는 요소들을 모두 포함합니다.
자식요소는 바로 아랫단계에 있는 요소이며, 하위(후손)요소는 자식요소도 포함하는 개념으로 아랫단계에 있는 요소들을 모두 포함합니다.
글자와 상자
인라인(Inline) 요소 : 글자를 만들기 위한 요소들
인라인 요소는 요소가 수평으로 쌓이고, 가로 세로 사이즈를 지정할 수 없으며 포함한 콘텐츠 크기만큼 자동으로 줄어듭니다. 가로 세로 너비 스타일을 지정해도 반응을 하지 않습니다.
여백이라는 개념을 사용할 때 좌우는 되는데 위 아래는 안됩니다.
인라인요소는 자식요소로 블럭요소를 사용할 수 없습니다.
블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들
블록 요소는 요소가 수직으로 쌓이고, 가로 세로 사이즈, 여백을 모두 지정할 수 있습니다.
📚 Ch 6. HTML 핵심 정리
핵심 요소 정리
블록(상자)요소 : div, h1, p, ul, li
인라인(글자)요소 : img, a, span, br, label
<a href="https://www.google.com" target="_blank">Google</a>target은 링크URL의 브라우저 탭 위치를 지정해주는데 _blank를 입력하면 기존탭이 아니라 새탭에 Google 사이트가 열립니다.
-
input요소는 수평으로 쌓이는 특징을 갖고 있지만 가로세로 여백을 지정할 수 있어서 inline-block이라고 합니다. 베이스는 인라인요소지만 블록요소의 특징을 가지고 있습니다.
-
input type=”radio”는 그룹을 만들어줘야 합니다.
-
HTML은 구조를 만드는 역할을 하므로, 각 태그(요소)가 어떤 역할을 하는지, 어떤 속성을 사용하는지 정도만 기억해 두시면 충분합니다. 눈에 보이는 예쁘게 만드는 작업은 CSS가 그 역할을 담당합니다.
주석
단축키 : Ctrl + /
전역속성
전체 영역에서 모두 사용할 수 있는 속성을 의미합니다.
- title : 마우스를 올리면 보이는 요소의 정보나 설명을 지정합니다.
- style, class(중복 가능), id(고유)
- data-이름=”데이터” : 요소에 데이터를 지정합니다.
<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})콘솔창에 apple, banana가 출력됩니다.
<script defer src="./main.js"></script>Script 요소에 defer 속성은, HTML구조가 준비된 후(문서 분석 이후)에 JavaScript를 해석하겠다는 의미입니다.
📚 Ch7. CSS 개요
선언 방식
내장방식은 html head태그 안에 작성하며 권장하는 방식은 아닙니다.
링크 방식 : 로 외부 CSS 문서를 가져와서 연결하는 방식입니다.
@import 방식은 직렬로 연결하는 것이고, main.css가 html에 연결되어 있지 않으면 box.css도 연결되지 않습니다.
선택자_기본
* {
color: red;
}전체 선택자로 모든 요소를 선택합니다.
li {
color: red;
}태그 선택자로 태그 이름이 li인 요소를 선택합니다.
.orange {
color: red;
}클래스 선택자로 앞에 . 을 붙입니다.
#orange {
color: red;
}아이디 선택자로 앞에 #을 붙입니다.
선택자_복합
span.orange {
color: red;
}일치 선택자 : 선택자를 동시에 만족하는 요소를 선택합니다. 일치선택자를 작성할 때, 태그선택자를 사용해야 한다면 태그선택자는 항상 앞에 적어줍니다.
선택자는 뒤에서부터 해석하는게 편합니다.
ul > .orange {
color: red;
}자식 선택자 : ul의 자식 요소이고, .orange 인 요소를 선택합니다.
div .orange {
color: red;
}하위(후손) 선택자 : div의 하위 요소이고, .orange인 요소를 선택합니다. ‘띄어쓰기’가 선택자의 기호입니다.
.orange + li {
color: red;
}인접 형제 선택자 : .orange선택자 다음 형제 요소 하나를 선택합니다.
.orange ~ li {
color: red;
}일반 형제 선택자 : .orange선택자 다음 형제 요소 모두를 선택합니다.
선택자_가상 클래스(1)
우리가 어떤 행동을 했을 때 동작하는 개념입니다.
:hover : 마우스를 올렸을 때, 어떻게 처리할 것인지에 대한 선택자
:active : 마우스를 클릭하고 있는 동안
<div class="box" tabindex="-1"></div>.box:focus {
width: 300px;
background-color: royalblue;
}:focus : 선택자 요소가 포커스되면
포커스가 될 수 있는 요소는 몇가지 정해져 있습니다. 대표적으로 input 요소, 사용자에게 데이터를 입력받는 요소들 입니다.
그리고 HTML 대화형 콘텐츠 요소가 아니더라도, tabindex 속성을 통해 Focus가 될 수 있는 요소를 만들 수 있습니다. 값으로 -1을 넣습니다.
퀄리티에 감탄하고 갑니다... 정보찾으려면 제 벨로그말고 여기로 오겠습니다...
잘 부탁드립니다 ㅎㅎ 😆😆