낙서장 4월 14일 작성
html css 도 열심히 공부하기
나처럼 빨리빨리 넘기지 말고 이 시기에 열심히 학습해서 발목잡을 일 없게하기
웹 브라우저 - 개발자 입장 > 분석을 위한 도구
HTML - 하이퍼 텍스트 마크업 언어(Language)
프로그래밍 언어 - 데이터 가공 > 명령에 대한 액션
마크업 언어 - 데이터를 자체의 요소를 어떠한 방식으로 어떻게 표현할지 정의
HTML - 골격
CSS - 레이아웃, 스타일링
JS - 동적인 요소
웹표준(HTML5) > WHATWG(HTML Living Standard)
태그의 경우 대소문자 구분하지는 않지만,
HTML5에서는 모두 소문자로 작성하는 것을 권장
빈 요소(empty elements) - 닫는 태그 필요없음
- 줄바꿈, 수평선, 이미지, meta, input 등
요소의 중첩(Nesting) - 태그안에 태그안에 태그사용 > 가독성 위해 들여쓰기
인라인 요소는 블록 요소를 포함 할 수 없다.
블록 - 새로운 줄 시작, 좌우 양쪽 최대한 늘어남
인라인 - 원하는 줄 시작, 크기 지정 가능
단축기
현재 창 닫기 - cmd + w
닫은 창 다시 열기 - cmd + shift + t
사이드바 토글 - cmd + b
확대 / 축소 - cmd + + / cmd + -
들여쓰기 / 내어쓰기 - cmd + ] / cmd + [
현재 행 복사 - opt + shift + 위아래키
텍스트 요소
block요소 - 새로운 줄에 추가됨
inline요소 - 원하는 줄에 추가 할 수 있음
blockquote 태그 - 인용구 사용할 때 (잘 안쓸듯??)
q 태그 - p 태그 안에 사용 따옴표 표시함
pre 태그 - HTML에 작성한 내용 그대로 표현(단독사용) (block 요소)
figure 태그- 독립적인 콘텐츠를 덩어리로 묶어줄 때
strong 과 b 태그 구분
strong - 엄청 중요한거 강조
b - 중요하지는 않은데 그냥 강조
i 와 em 태그 구분
i - 구분해야 하는 부분(기술 용어, 외국어 구절, 등장인물 생각 등)
em - 그냥 중요한거 강조
mark 태그 - 하이라이트(뒤에 노란색 배경)
small 태그 - 덧붙이는 글, 저작권 법률 표기 등 작은 텍스트
sup 태그 - 윗 첨자 요소 수학 지수함수 사용
sub 태그 - 아랫 첨자 화학식에 표현
del 태그 - 무언가 제거된 텍스트의 범위 (취소선)
ins 태그 - 무언가 추가된 텍스트의 범위 (밑줄)
code 태그 - 사실 잘 모름 근데 글씨체가 달라짐 (inline 요소)
a 태그 - href 특성을 통해 페이지, 파일, 이메일 주소 등 url 추가
target 태그 (a태그 안에)- 목적지를 어디에 띄울지
(_blank -> 새로운 탭)
w3c entity 검색하면 html에서 사용가능한 특수문자 코드 보여줌
구조를 나타내는 요소
non-semantic (의미없는 태그)
div 태그 - 순수 컨테이너로서 아무것도 표현하지 않음 (묶어서 사용할 때)(block)
span 태그 - 순수 컨테이너로서 아무것도 표현하지 않음 (구문 콘텐츠)(inline)
시맨틱 웹 (의미론적인 마크업) (의미있는 태그)
1. 검색 엔진은 의미론적 마크업 분석 / 중요한 키워드
2. 스크린리더로 페이지를 탐색하기 좋음
3. 의미있는 코드 블록 찾는 것이 훨씬 좋음
4. 개발자가 유지보수하기 좋음 / 보기 좋단 소리
5. 적절한 사용자 정의 요소 / 구성 요소의 이름짓기
header - nav - main(article - aside) - footer
한 번만 사용 가능 article, aside 빼고
header 태그 - 소개 및 탐색에 도움 주는 콘텐츠
제목, 로고, 검색 폼, 작성자 이름 등의 요소
footer 태그 - 구획 콘텐츠, 구획의 작성자, 저작권 정보, 관련 문서 등의 내용
nav 태그 - 페이지 내 다른 페이지로의 링크를 보여주는 구획 메뉴, 목차, 색인에 사용
aside 태그 - 문서의 부가적인 내용 사이드바 사용
main 태그 - body의 주요 태그 문서의 핵심내용
article 태그 - 독립적으로 구분해 배포하거나 재사용할 수 있는 구획 게시판, 블로그 글, 뉴스 기사
section 태그 - 독립적으로 구분 article이 아닌것 같으면 section 사용
목록과 표
ol - 숫자로 표현된 리스트
type 속성을 사용하면 숫자(1), 대문자(A), 소문자(a), (대문자I)로 로마 숫자로 표현
start 속성을 사용하면 원하는 숫자,알파벳으로 시작
ul - 점으로 표현된 리스트
ul태그를 중첩 시킬 수 있다
검은점 -> 빈점 -> 검은네모까지 표현 가능
li - 리스트 목록표현
value 속성을 사용하면 원하는 숫자부터 사용가능
중간에 사용하면 1부터 시작했지만 두 번째는 다른 숫자로 시작 가능
dl - 용어를 정의하거나 설명할 때 용어사전 구현 메타데이터를 표시할 때 사용
dt - 용어
dd - 설명
dt, dd를 div로 묶을 수 있음
table - 행과 열로 이루어진 표
tr - 행 표현
th - 행이나 열을 대표할 때
scope 속성은 th에만 사용가능 행열의 대표속성
colspan, rowspan 속성은 칸 차지하는 크기 늘림
td - 단순 데이터 표현
thead, tbody, tfoot 쓸거면 다써야함 스타일링 할때 사용하기 용이
임베디드 요소
img src="경로" alt="이미지 설명"
레스터 이미지 - 확대하면 계단형식으로 깨짐
jpeg, png, gif, webp(구글에서 만든 이미지)
벡터 이미지 - 확대해도 안깨짐
svg
반응형 이미지(viewport)
placeholder.com << 들어가면 다 해줌
내 화면에서 이미지 크기 볼 수 있음
srcset - 화면에 크기에 맞춰 사이즈에 맞는 이미지를 보여줌 (300w) << 이런식으로 크기를 맞춰 사용
sizes - 딱 원하는 크기까지 설정 가능 최대값 설정 가능
폼
정보를 제출하기 위한 대화형 컨트롤을 포함
action 속성은 form태그에서 사용되며 데이터양식을 URL로 전송합니다.
post - 서버로 데이터 전송
get - 서버에서 데이터를 받음
label 태그 - input태그와 따라 다니며 for속성을 이용해서 input 태그를 설명함
input 태그 - form양식을 작성할 수 있음 text, password, email, tel , number, range등 사용
input 하위요소
minlength, maxlength - 입력가능한 최소, 최대글자수
placeholder - text박스 안에 희미하게 글씨작성
autocomplete - on/off로 사용하며 자동완성기능
required - 필수속성
disabled - 값을 사용하지 않을때
readonly - value값을 주고 값을 변경하지 않을때
min, max - 숫자 범위 최소, 최대값
step - range 속성을 사용할 때 사용
fieldset 태그 - 웹 양식을 묶을 때 label과 사용
legend 태그 - fieldset의 자녀로써 사용되며 제목이라고 생각하면됨
select 태그 - option 태그를 사용해서 사용하며 펼쳤을 때 옵션태그 선택
optgroup 태그 - option 태그를 그룹화 시킬때
datalist - text타입에 선택지를 주는 태그임
연결 할때는 input태그에 list속성을 사용하고 datalist 태그에는 id값을 주어서 연결
select 태그와 차이는 text는 입력이 가능
textarea - 입력할 수 있는 칸 크기를 조절 가능
rows, cols 속성을 이용해서
메타데이터
head에 작성
title 태그 - 브라우저의 제목 표시줄, 페이지 탭에 보이는 문서 제목 또는 북마크제목 (단 하나만 작성)
콘텐츠를 설명하는 문장사용 권장
용어와 정의 짝지어 사용 권장
키워드 뭉치 스타일의 제목은 피하자
최대한 다른 title과 겹치지 않게 작성
meta 태그 - name과 content를 같이 사용
(빈 요소)
charset 속성은 문자 인코딩 선언
name = "viewport" - 모바일 장치에서만 사용
웹페이지를 볼 수 있는 영역
link 태그 - 외부 리소스 연결 요소 가장 많이 사용하는 요소는 스타일 시트, 파비콘 사용할 때
mime 타입 - 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘
type / subtype 모양으로 이루워짐
text/css, text/javascript, img/png 이런식
style 태그 - 외부 css파일이 아닌 html 내에서 css적용할 때 사용
script 태그 - 외부 자바스크립트를 가져올 때 사용하거나 html내부에서 직접 사용가능
전역 속성
id 속성 - 유일한 고유 식별자 정의
(개인적으로 자바스크립트 사용할 때 id 사용)
시작할때 소문자영어 _,-, . 중간에 사용가능
class속성 - 식별자 정의 중복사용 가능
(개인적으로 CSS 사용할 때 class 사용)
띄어쓰기를 사용해 여러 class 사용 가능
style은 속성으로 사용 가능함
그냥 원하는 요소에 적용할 CSS 사용가능
(그다지 선호하지는 않음 외부에서 만든 CSS를 무시하기 때문)
title도 속성으로 사용 가능함
특정 요소에 설명하는 문구가 보여짐(마우스 올렸을 때 / 탭이나 스페이스가 먹힘)
부모가 title속성이 있어도 자식이 title이 있으면 자식 title 속성이 우선순위가 됨
lang 속성은 웹 접근성을 높이기 위해서 사용
웹페이지 언어가 어떠한 언어로 사용되었는지 사용
data 속성은 자바스크립트가 특정 요소의 정보를 접근할 때 사용 실제 눈에는 보이지가 않음
draggable 속성은 드래그가 작동하는지 안하는지
true, false를 사용해서 드래그를 켜고 끌 수 있음
hidden 속성은 특정 요소를 숨길 때 사용
브라우저에서도 안보이고 스크린리더에서도 인식 못함
CSS(Cascading Style Sheets)
module 별로 버전이 다 다름
font, table, animation 등등
룰 기반의 언어
특정 요소, 혹은 특정 요소들의 집합의 스타일 규칙을 정의할 수 있다.
내부스타일, 인라인스타일, 외부스타일
외부스타일 권장
스타일 우선순위
1. 동일한 스타일이라도 선언된 곳에 따라 우선순위
브라우저에 의해 정의된 스타일 < 개발자가 선언한 스타일 < 사용자가 구성한 스타일
2. 적용 범위가 적을 수록 우선순위
tag < class < id < 인라인
3.소스코드의 순서가 뒤에 있으면 덮어쓴다.
스타일 상속
1. 부모 요소에 있는 스타일 속성들이 자식 요소로 전달된다. 자식 요소에서 재 정의 할 경우 부모 스타일을 덮어쓴다.
2. 상속이 되지 않는 속성도 있다. (배경 이미지,색)
