01. Codepen.io
기존 작업물을 훼손하지 않고 간단한 테스트해보고 싶을 때 codepen을 이용해보자!
Start Coding 클릭
-> HTML, Css, JS 세개의 태그를 확인 할 수 있다.
-> HTML 패널에 작성하는 부분은 body부분에 코딩하는 것이다
-> 톱니바퀴 모양의 옵션을 선택하면 추가적인 기능을 적용 할 수 있다.
ex)HTML preprocessor: Pug, Markdown, Slim..
ex)CSS preprocessor: SCSS, Sass..
ex)JS preprocessor: Babel,TypeScript, LiveScript..
ex)JS add external scripts/pens : lodash, react 등 라이브러리 프레임워크를 절대경로로 불러와서 사용할 수 있다
!코드저장을 하려면 회원가입을 하기
02. 브라우저 스타일 초기화
Q 왜 브라우저 스타일 초기화가 필요할까?
A 브라우저 벤더들마다 구현을 다르게 설정
- 크롬은 설정을 하지 않았는데도 마진을 8px를 해둠
- 사파리에서도
따라서 브라우저에서 기본적으로 제공하는 스타일을 초기화 하고 시작하는 것이 좋다!
reset.css cdn을 검색해보자
-> cdnsjs나 jsdelivr에서 cdn이라는 css 파일의 원격주소를 복사해서 사용한다.
-> jsdelivr 로 가보자
-> reset.css: 원본, 맨위의 reset.min.css 복사 아이콘 클릭
! 파일명.min.확장자 : 파일이 난독화나 경량화 되었다는 것을 의미한다. 우리가 외부에서 가져와 사용하는 플러그인, 라이브러리등을 수정할 일은 거의 없기 때문에 굳이 원본을 사용하지 않음
-> copyHTML 선택
-> html에 붙여넣기 link 탭 위에! 맨 위에 둬야 우리가 만든 css 파일 보다 먼저 동작 할 수 있음
- 적용 전
- 적용 후
codepen.io에서 적용해 볼 때
Pen 클릭
-> CSS 설정 선택
-> CSS Base 버튼 중 reset 선택
03. Emmet
div.heropy + tab -> <div class="heropy"></div> 자동완성
이러한 자동완성(필수요소포함) 기능을 emmet 이라고 부른다. vscode에 내장 되어 있음
한번 눌러서 자동완성이 안될 떄 탭을 한번 더 눌러보자.
ex:) 에밋문법 : div>ul>li*4{$} + tab
!! *는 곱하기, {} 내용삽입, $ 순서대로 숫자입력
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> css 에서도 사용가능:
- w:200 + tab -> width: 200px;
- h:200 + tab -> height: 100px;
- bc:orange + tab -> background-color:orange;
Ch 5. HTML 개요
01.기본문법
<h1>Hello HTML</h1>
- <시작태그>내용</종료태그> : 요소 element, 태그로 이루어져 있다
- 요소의 내용: contents
02. 부모와 자식 관계의 이해
<div>
<div>
<div>Content</div>
</div>
</div>- 맨 밖의 태그 : 부모요소, 상위요소
- 부모요소 안의 태그 : 자식요소 (바로아래)
- 맨 안 태그 : 하위(후손)요소
03. 빈 태그
<meta http-equiv="X-UA-Compatible" content="ie=edge"/>
<link rel="stylesheet" href="./css/main.css"> <태그> vs <태그/>
- <태그>
- 편리함
- HTML 1/2/3/4/5
- <태그/>
- 뒷쪽에 슬래시 붙이기!
- 안전함, 엄격함
- XHTML/ HTML5
- HTML5 는 두가지 방식 모두 혼용 하기 때문에 다 괜찮지만 슬래쉬 붙이는 걸 추천!
Vue.js 등에서는 붙이지 않으면 문제가 발생 할 수도 있다.
속성 Attributes
<태그 속성 = "값 value">내용</태그>
<br>태그를 제외 하고는 거의 모든 태그들은 필수속성을 가지고 있다<img src=".cat.jpg" alt="고양이"/>- src : 이미지의 경로
- alt : 대체 텍스트. 이미지의 이름 alternate text
<input type="text/>- type : 데이터의 타입
- "text" : 사용자에게 일반 텍스트를 입력 받음
- "checkbox" : 체크여부를 입력받음
04. 글자와 상자
요소가 화면에 출력 되는 특성은 크게 2가지로 구분 된다.
- 인라인(inline)요소 : 글자를 만들기 위한 요소들
-<span></span>- 대표적인 인라인 요소.
- 아무것도 나타내지 않고 콘텐츠 영역을 설정한다.
- 한줄 씩 스팬요소를 만들어 주면, 요소는 화면에 수평으로 띄어쓰기를 사이에 두고 쌓이게 된다. 띄어쓰기는 span에 해당 되지 않기 때문에 상위 태그에서 조절되어야 한다.
- style = "width:100px;" 요소의 가로너비 지정 불가❌
- style = "height:100px;" 요소의 세로너비 지정 불가❌
- style = "margin: 20px 20px;" 좌우여백 조절가능⭕️
- style = "padding: 20px 20px;" 위아래여백 조절불가❌
- 글자안에는 상자를 집어 넣을 수 없다
- 블록(block)요소 : 상자(레이아웃)를 만들기 위한 요소들
-<div></div>- 대표적인 블록요소. 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정
- 블록안에 인라인 요소를 사용할 수 있다.
- 부모 요소의 크기만큼 자동으로 늘어나고
- 포함한 콘텐츠 크기만큼 자동으로 줄어든다
- style = "width:100px;" 요소의 가로너비 지정 가능
- style = "height:100px;" 요소의 세로너비 지정 가능
- style = "margin:10px;" 요소의 외부여백 지정 가능
- style = "padding:100px;" 요소의 내부여백 지정 가능
Ch 6. HTML 핵심정리
01. 핵심 요소 정리
- div : division. block📦
특별한 의미가 없는 구분을 위한 요소 - h1 : heading. block📦
제목을 의미하는 요소. 숫자가 작을 수록 더 중요한 제목을 의미 - p : prargraph. block📦
문장을 의미하는 요소 - img : image. inline
이미지를 삽입하는 요소. src, alt 필수속성 - ul : unordered list. block📦
순서가 필요없는 목록의 집합- li : list item. block📦
목록 내 각 항목
- li : list item. block📦
- ol : ordered list. block📦
- a : anchor. inline
다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소- href : hypertext reference 주소 url
- target = "_blank" 링크 url이 어디에 표시가 될 것인지
- "_blank" : 새 탭에 표시를 해줄 때
- span : inline
어느 단어만 글자색을 바꾼다던지 할 때 글자의 범위를 잡아 낸다 - br : break. inline
줄바꿈 - input : inline-block📦
사용자가 데이터를 입력하는 요소, 글자 요소처럼 수평으로 쌓이지만 가로세로,위아래 여백을 지정할 수 있는 블록 요소도 가지고 있다.- type
- radio
사용자에게 체크여부를 그룹에서 1개만 입력받음
- name 으로 그룹 묶기<label> <input type="radio" name="fruits" /> Apple </label> - checkbox
Apple<label > <input type="checkbox"/> Apple </label>
- label : inline 라벨 가능 요소. input의 제목
- chekced : 체크박스 입력요소 미리 체크가 된 상태로 만들어 놓음 - radio
- value : 미리 입력된 값(데이터)
- placeholder : 사용자가 입력할 값의 힌트
- disabled : 입력요소 비활성화. 인풋창을 비활성화 시킨다
- type
- table : table
표요소. 행과 열의 집합. 지금은 별로 안씀..! 구식- tr 행
- td 열
<table>
<tr>
<td style="border:solid red;">A</td><td>B</td><td>B</td>
</tr>
<tr>
<td>C</td><td style = "border:solid blue;" colspan="2">D</td>
</tr>
</table>| A | B | B |
| C | D |
03. 주석
<!-- -->
cmd + / or ctrl + /
자동으로 주석으로 만들어 줌
04. 전역속성
전역 특성(Global attributes)은 모든 HTML에서 공통으로 사용할 수 있는 특성입니다. 그러나 일부 요소에는 아무런 효과도 없을 수 있습니다.
<태그 title="설명"></태그>
요소의 정보나 설명을 지정.
<태그 style="설명"></태그>
<태그 class="이름"></태그>
요소를 지칭하는 중복 가능한 이름
css에서 지칭할 때 .이름
<!--HTML:-->
<span class="red">우리나라</span>
<!--CSS:-->
.red {
color:red;
}<태그 id="이름"></태그>
요소를 지칭하는 고유한 이름. 중복이 안돼는 핵심되는 요소에 사용하기
css에서 지칭할 때 #이름
<!--HTML:-->
<span id="red">우리나라</span>
<!--CSS:-->
#red {
color:red;
}<태그 data-이름="데이터"></태그>
요소에 데이터를 지정. 자바스크립트에서 사용
<!--HTML:-->
<div data-fruit-name="apple"> 사과 </div>
<div data-fruit-name="banana">바나나</div>
<!--JS:-->
const els = document.querySelectorAll('div')
els.forEach(el => {
console.log(el.dataset.fruitName)
})JS
1. els라는 그릇을 만들어준다
2. els 에는 div태그를 모두 선택해서 담아준다
3. els에서는 하나씩 반복해서 데이터를 처리해 줄것이다. els.forEach()
4. 그 반복되는 내용은 el에 담아서 처리를 해줄것이다. el => {}
5. el.dataset.fruitName을 콘솔에 출력을 해주기
6. apple, banana가 출력 되어 있는 것을 볼 수 있다.
vscode에서는 되지 않는다
왜냐면.. 스크립트 태그를 읽은 상태에서 자바스크립트 파일을 실행시키면 아직 body는 읽힌 상태가 아니기 때문에
-> defer속성을 추가시켜준다. html구조가 준비 된 후(문서 분석 이후) javascript를 해석하겠다는 뜻
<script src="./main.js" defer>