제수기 - 제발 수업내용을 기억해라EMMET
! + Tab
하면 자동으로 나오는 내용
- 미리 어떻게 나올지 보여준다.
CSS - inline/block
css 속성의 차이로 inline/block 요소를 구분한다.
- inline 요소는 한줄에 여러개를 나열할 수 있는 태그
(em, strong, mark, ...)
- block요소는 한줄에 하나만 작성할 수 있는 태그
(p, h1, h2, ...)Text
글자크기 조절
- 글자크기
$넣고Tab하면 자동으로 이렇게 된다.
공백
-
모든 공백/개행/탭문자 공백 1개로 취급된다. 아무리 띄어쓰기가 많아도 하나의 띄어쓰기로 본다는 뜻.
-
브라우저는 제대로 보내지만,
open with live server로 render하면서 그렇게 적용된다. -
br개행
-
 띄어쓰기
수평선
-hr
Phrase Tags
-
em이테릭체 -
strong볼드체 -
mark하이라이팅 -
ins밑줄 -
del취소선
-
시각적인 정보를 얻기 힘든 장애인 등을 위해 semantic tag를 이용해 웹페이지를 구성하는 것이 중요하다.
-
스크린리더기가 강조하고 있다는 등의 의미적 부분을 semanric tag를 알아내서 전달해준다.
줄임말
- <
abbrtitle=>줄임말</abbr>
List
불릿
- 스타일도 변경할 수 있다.
- f12키 눌러서 불릿 효과 바뀌는 걸 확인할 수 있다.
- 기존 효과를 지우면 많은 기능이 나온다. 이걸 바꿔서 불릿을 여러 모양으로 바꿔볼 수 있다. 여기서 바꾼다고 적용되지는 않는다. 직접 코드에서 적용해야 바뀐다.
Global Attributes
모든 태그가 가진 공통 속성
https://www.w3schools.com/tags/ref_standardattributes.asp
id 속성 : 페이지 내에 태그를 구분하기 위한 속성. 페이지 내 id는 고유해야 한다.
- 웹 html, css에서는 -(하이픈)을 사용해 이름을 지정하는 관례가 있다.
class 속성 : 태그를 그룹핑하기 위한 속성. 공백기준으로 낭려하면 각각의 클래스명이 지정된다.
title 속성 : 툴탑형식의 설명을 작성할 수 있다.
표
테이블 구조
-
th는 자동으로 볼드체, 가운데정렬이 된다.
-
이게 테이블 형식 만든 거다. 선은 CSS로 추가해야 한다.
-
thead
-
tbody,tfoot
간단히 구분하면
- thead로 맨 위에 내용
- tbody로 중간내용
- tfoot으로 아래 마무리하는 내용을 작성했다.
CSS 효과 넣기
border가 구분선padding이 간격table과th,td에 각각 구분선을 만들었다.
colspan으로 표 칸을 합칠 수 있다.
border-collapes로 선 간격을 없애서 깔끔하게 만들 수 있다.
text-align: 가운데정렬 등을 할 수 있다.
rowspan | colspan
표 넓이, 크기, 간격 등 조절 가능 F12 열어서 작업해보고 적용하는 게 편하다.
Index.html
index.html은 웰컴페이지다.
그냥 루트 01_html/까지만 써도 페이지가 나오는데, 이름 뒤에 _이걸 붙이고 다시 돌려보면 이런 페이지가 나온다. 선택해서 이동 가능
