HTML
Web ⭕ 면접. 암기
- 리소스들의 집합
- 리소스(콘텐츠) 간의 연결
- 웹 브라우저로 볼수 있는 것
특징
- 물리적인 망(인터넷)을 통해 운반되는 데이터
- 웹 브라우저를 통해 보여주는 것이 웹
리소스 - 콘텐츠
- 컴퓨터 안에 리소스 존재
- 리소스 = 파일 (html, css), 이미지, 텍스트,
- 동적 리소스 오디오, 비디오
종류 ⭕ 면접. 동적, 정적 리소스 차이점
- 동적인 파일 : 내용이 바뀌는 것
- 브로드 캐스팅
- 한쪽에서 write → 파일 → Read 계속 읽음 한쪽에선
- 프로그래밍
- (실행해주는 것이 필요.)
- 정적 파일 : 내용이 바뀌지 않는것
- 파일 전송만 하면됨.
웹 브라우저
- 웹(리소스)을 보여주는 것
- 브라우저 돌아다니며 보여주는 것
인터넷
- 인프라.
- 인터넷 위에 웹이라는 콘텐츠가 돌아다님
웹서버
- 웹 콘텐츠는 웹서버가 소유하고, 그 리소스를 공유한다.
- 웹브라우저를 통해 콘텐츠를 소비한다.
웹 표준 역사
- 넷스케이프 vs 마소(+ W3C) → 암흑기
- html 4와 5.1 버전의 갭. 마이크로소프트 때문
- html 4 부터 브라우저의 부족한 기능을 보완하기 위해 플러그인 많이 나옴
- 보안 문제 발생
웹 브라우저 죽이려고 하는 이유
- ms는 os 회사로 웹브라우저 부상은 os에 방해가 된다고 생각
WHATWG 새로운 표준 정의 HTML5
cf MS XHTML (망함)
웹 표준
웹에서 정한 표준 준수
- 중요한 이유: 브라우저가 콘텐츠 보여줄 때, 실수 보정해주는 기능있어 잘못 만들면 느릴 수 있음
웹 접근성
장애가 있는 사람도 정보를 얻기 위해 접근 용이해야 함
HTML
Hyper Text 링크가 들어간 텍스트.⭕
- 향후 멀티미디어 요소가 추가됨. 이미지, 오디오 등
- ex. 논문 참조
특징
- 모든 문서는 태그 형태로 저장
HTML 5 - 자체 기능이 많아짐.
- CANVAS 그래픽
시맨틱 태그
- 장애 있는 사람을 위해 태그를 구체적으로 적겠다. <div> → <header>
- 웹페이지를 읽는 프로그램이 웹(콘텐츠)을 제대로 읽을 수 있어짐
<header>
문서의 메타정보
<body>
브라우저는 body 내용 해석해 픽셀 단위 그래픽으로 보여줌
html element 요소
특징
- 브라우저가 html 문서를 읽어
Red Black트리로 생성(변형) ⭕ 후 트리 안의 내용을 그래픽으로 보여줌 - 트리 상의 부모 자식 관계 . 중첩 구조
- 속성 값은 상속됨. 단 부모의 멤버 물려받지 않음.
종류 -2
1. outer html html element 전체
- <태그> 내용 <p> 전체
<p> 태그
2. inner html 태그 사이의 내용
empty tag
끝 태그가 없는 태그
내용이 필요없는 태그
ex. <img>
속성 ⭕ 중요
property , attribute 차이 ⭕ 중요
- propterty src iv
- attribute 값 Read Only
원리
- 태그를 읽으면 클래스를 생성,
- <> 태그는 생성자 new img(”asset”, “sm”);
- 속성은 생성자의 매개변수. 생성자를 이용해 초기화를 쉽게함.
정의
- 이미지 객체가 가져야할 값.
img 객체 [ | | ]
주의 사항
- html 트리는 메모리에 올라가 있고, 수정해도 원본이 바뀌지 않음
- 새로고침 = 원본 다시 읽기
[ Java ] 태그 = 생성자. img 객체가 iv를 갖고 있음.
트리
- 문자열.
- JS 문자열을 다루고, 트리를 조작 (읽고 쓰기)
글로벌 속성
- 부모로부터 물려받은 속성
- Object → Element → HTML Element
ex. id, class, style 속성
주석
브라우저가 해석하지 않음
DTD
- 태그를 정의한 것
- Document Type 태그의 타입
ex. XML에서 태그를 정의 ⇔ 클래스
태그는 객체이므로 어딘가에 정의되어야 함.
공백
 
<a> ⭕중요
<form> 태그 ⭕중요
사용자 입력을 전송 , 제출 목적
type 종류
- text
- password
- file
- submit 정해진 곳(action)으로 내용 이동
radio 태그
- name 의 attribute가 같아야함.
- 에러는 없지만 예상치 못한 오류 발생
select⭕자주 사용
- multiple 속성 n개 선택 가능
CSS
HTML
date 구조 + design
CSS Cascading Sytle Sheet
- design을 따로 떼어낸것
- 디자인을 표로 관리
- 모듈별로 버전이 다름.
CSS vs JS로 디자인
- CSS 함수로 제공하면 이거 이용 관리 안해도 되니까
- JS 는 내가 관리해야하는 코드
브라우저 접두사
- 표준에 없지만 도움이 되는 속성
- 브라우저마다 적용가능 여부 다름
CSS HTML 적용방법-3
style 기본값
[ Java ] iv 기본값
태그의 기본 값 목록 확인 dir($0)
단위
- 값이 0일 떄는 단위를 쓰지 않지만, 그외는 단위와 값을 같이 써야햠
- 값과 단위 사이에 공백올 수 없음
단위 종류- 2
- 동적 단위
- 정적 단위
selector
디자인을 적용할 대상을 선택하는 것
개발자도구 > 우클릭 > copy selector, ⭕ 중요
class 그룹, 여러개 줄 수 있음
id html 전체에서 유일
div, p 모든 div, 모든 p
div p div 직계 자식 중 p
마진의 붕괴
브라우저에서 만듦. 위아래의 경우만
폭과 높이
max - , min ⭕
- 얼마이상 커지면/ 작아지면 안돼 지정
- 게시판 # | 제목 | 글쓴이 → # | 제목 | 글쓴이
Box model⭕ 중요
브라우저 렌더링 방식
- Layout 레이아웃 계산에 영향을 미치는가 여부 중요
🟨Reflow 레이아웃 다시 바꾸는 것.- 좌표 (x,y), 너비 계산 비용 발생
- css가 레이아웃 영향 미치는 것 : padding
- 브라우저가 레이아웃 잡고
- Paint
- 레이아웃 변경시 페인트는 자동으로 변경됨
- 브라우저가 페인트
outline Layout X, Paint O
- 본인의 자리가 없음
- 값의 크기 변해도 요소들의 Layout이 바뀌지 않음. 페인트만
- cf. margin LayoutO, Paint O
Border Layout O, Paint O
Text
text-decorater
- none 속성 밑줄제거
- line-through
3,000
line-height 줄간격
text-overflow, epllipsis 텍스트 길어지면 … 보여줌
vertical-align 수직정렬
Font
- font-family 여러개 적음
web font 폰트가 없으면 다운받아 보여주는 것. 브라우저에 폰트 설치 ex. 구글 웹폰트
- 폰트 최적화 - 폰트 파일에서 안쓰는 글자 삭제하여 크기 줄임 🟢 최적화
a quick brown fox jump over the lazy dog
글씨체
- san-serif고딕체 (san: 없다)
- serif 명조체
Icon
- 폰트를 가지고 아이콘을 만듦
Links -4
4가지를 스타일 다르게 지정가능
- a:link
- a:visited
- a:hover
- a:active
List⭕ 자주 사용
사용 상황
- 메뉴 만들때
<ul> <li>
Tables
- table { width: 100%} 부모의 공간을 꽉 채움
- Zebra 번갈아
Layout
- 요소 종류
차이점 ⭕
- block 옆에 누가 못와
- inline 요소 자기자리만 차지하여 옆에 누가 올수있음
- 여백 줄 수 없음. 자기 자리만 차지해야해서
display ⭕
- display:none 레이아웃 영향 줌 .레이아웃 X, Paint X
- visibility: hideen Layout o , Paint X
- vihidden : reset 레이아웃 유지. 페인트만 안함
position ⭕ 중요 -4
- static 아무 css를 적용하지 않은 태그(객체)에 적용
- top, right, bottom, left 에 10px 이동이 작성되어있어도 적용되지 않음
- 문서 흐름만 존재 + 이동 없음
- relative
- 요소를 그려야하는 위치(좌표)가 위의 요소에 따라 달라짐
- 절대 좌표 (0,0) 브라우저
- 상대 좌표 기본.
- 레이아웃 유지, Paint만 다시 (다른 곳에 위치하여 상대좌표 기준으로 그림)
- 문서흐름 유지 + 시각적 이동 존재(repaint)\
- fixed 스크롤 해도 고정
- 문서 흐름 제거 + 뷰포트 기준 좌표 설정
- absolute 브라우저 끝부터위치 잡음, 겹치기
-
- 버튼 겹치기 할때 바깥에 있는애(부모)는 relative + 버튼(자식)은 absolute
- 특별한 레이아웃 (relative, grid, flex 등)을 적용 받기 전 문서 흐름 (block과 inline요소들의 배치 방식 )을 제거한 후
- 가장 가까운 position이 지정된 부모 요소 기준으로 좌표(0,0) 하여 top, right, bottom, left 이동 가능
- static이 아닌 position attribute: relative, absolute 등
- 문서 흐름 제거 + 부모 기준 좌표
-
- sticky 스크롤 할 때 같이 올라감
박스 Box
- 보이지 않은 content, padding, border, margin 을 모두 가리킴
- css로 설정하면 보임
요소(element)를 화면에 그리기 위해 할당된 공간. 요소가 아님
display vs. postition
- display 어떻게 그룹(컨테이너)을 만들고, 자식들을 자동으로 정렬할 것인가를 다루고,
- position그 컨테이너 박스(또는 개별 요소)를 화면에서 정확히 어느 지점에 둘 것
overflow ⭕ 자주 씀
- hidden 깨지는거 막음. 레이아웃보다 콘텐츠가 중요할 때 ⭕
- 레이아웃 유지. 넘치는거 자름. 잘씀
- float 이미지와 글자가 어울리는 기능
사용 상황
- 메뉴 만들기 (과거)
특징
- 본인 레이아웃 벗어남. 원래 자기 레이아웃에 그려져야하는데 자기 영영이 0가되고 다른 곳으로 이동
inline-block
- inline과 block의 중간
- inline은 자기 자리만 차지하고 옆에 못옴. block 한칸에 하나만 오고 옆에 못옴
- block처럼 margin, padding 유지하면서 옆에 누가 올 수 있음
사용 상황
- 카드 게임
display: flex 좌우폭이 바뀜. 영역 나누기 ⭕자주 사용
margin 좌우 여백 맞춰줌 50%
box-sizing
content-box 기본.
- 안씀
border-box
- border 포함해 width 잡아 계산하기 너비, 높이 구하기 용이
- css 초기화
- 브라우저 마다 디폴트 값이 다른 지점을 없애기 위해 다 똑같이 세팅 css 초기화
의사 요소
- 가짜 요소
종류
- ::selection
- ::after
- ::before
p::before {
content: "["; /* html 데이터가 아니라 스타일임. css로 추가한거라 드래그가 안됨. */
}
p::after {
content: "]";
}
p::selection {
background-color: darksalmon;
}