5.1 주말기록

수업자료 내용 복습과 심화

몸통1. HTML? 하이퍼 텍스트 마크업 랭귀지. 근데 왜 이런 이름이 붙었을까?

텍스트의 일반적인 접근을 뛰어넘는다= "하이퍼 텍스트." 
하이퍼링크 같이, 사용자가 다른 문서로 즉시 접근할 수 있게 해주는 텍스트를 말한다. 즉, 기존까지의 순차적 텍스트 접근법과는 완전히 다른 방식으로 작동하는 것. 기존까지 텍스트 사용자들은 수동적인 존재였지만, 하이퍼텍스트 기술과 함께 사용자가 '능동적 주체'로 발돋움하였다.

마크업= 표시하다. '태그'를 통해 강조할 부분에 대한 '구조'적인 접근. 문서를 구조화하여 프로그램에게 알려준다.

HTML이란 웹 페이지의 구조를 명시하는 기술 언어(descriptive language)로, 마크업이라는 문법을 사용하여 우리가 보는 웹 페이지가 어떤 구조로 이루어져 있는지 웹 브라우저로 하여금 알 수 있도록 하는 언어

---

가지1. 텍스트의 겉모양을 바꿔주는 태그(ex. i, bold) 는 물리적 스타일 태그, 자체에 의미가 있는 것(ex. address)은 논리적 스타일 태그라고 부른다. 
가지2. HTML 문서를 웹 브라우저가 시각적으로 바꿔 제공하는 과정은 'HTML 렌더링'이라고 부른다. 이때 웹 브라우저의 구문 분석이 '해석, 또는 파싱parsing'이며 사용자에게 시각적으로 제공하는 것은 '렌더링'이다. 
가지3. 브라우저 작동 원리 4단계: 브라우저가 서버에게 HTML 리소스를 요청 ->서버가 브라우저에게 기본적으로 index.html로 응답 -> 응답된 HTML을 파싱하여 브라우저의 렌더링 엔진이 DOM TREE를 생성, 그 뒤 CSS나 JS(얘는 브라우저 렌더링 엔진이 아니라 브라우저 자바스크립트 엔진이 읽음)가 있다면 각기 다른 tree를 더 생성해서 최종적으로 전부 렌더 트리로 결합시킨다. -> 렌더 트리를 바탕으로, 브라우저의 렌더링 엔진이 화면에 그림을 그린다
가지4. HTML은 프로그래밍 언어가 아니다. 
가지5. XML도 마크업 언어의 한 종류, 그러나 HTML의 목적은 구조를 표현하는 것이고 XML은 데이터를 교환하는 것이다. XML에서는 직접 태그를 정의내릴 수도 있다. 
가지6. HTML5는 이전 버전들과 달리, 브라우저 호환성 문제가 적으며, 표준화된 인터페이스를 제공하여 사용자의 웹 접근성이 높아졌다. 

 

몸통2. 절대경로, 그리고 상대경로?

절대경로란 최상위 시작점부터 파일까지 경유해 온 고유한 경로를 전부 입력하는 법이다. 최상위 디렉토리 /를 반드시 포함한다. 특정한 파일 위치를 정확하게 알려주지만 정적인 특징을 가져 여러 불편함이 있다. 항상 기준이 루트가 되며, 보통 다른 사람이 만든 파일을 연결할 때, 그 외 다른 사이트를 연결할 때 쓴다. 로딩 속도가 상대경로에 비해 느리다. 
상대경로란 현재 위치를 기준으로 그 파일까지 생기는 상대적인 경로를 인식하는 법이다. ./는 현재위치, ../는 상위 폴더로 올라간다. 
내부 파일을 부를 때는 상대경로, 외부 파일을 부를 때는 절대경로를 쓰는 편이 낫다. 

 

몸통3. 시맨틱 요소를 사용하는 이유?

시맨틱 웹이 중시되면서 HTML5에서는 시맨틱 요소들이 새로 만들어졌다. 여기서 semantic이란 '의미론적인'이라고 할 수 있다. 
1) 검색엔진은 시맨틱 요소를 중요하게 고려한다.
2) 의미 있는 코드블록이 여러 개발자가 협업할 때 도움이 된다. 

자주 쓰이는 요소로 <article> <aside> <footer> <header> <nav> <main> 등이 있다.

 

몸통4. <form>태그

웹 페이지에서의 입력 양식. 로그인 창, 회원가입 폼 같은 것이 예시이다. 

텍스트박스에 적힌 글자 혹은 체크박스, 라디오 등의 체크된 결과값이 제출 버튼을 누를 때 '백엔드 서버'로 전달되어 정보를 처리한다. 이 <form>는 전체를 감싸는 양식이며, 화면에 보이지 않는다. 
세부적인 <input>의 type 속성으로 종류를 나타내며 name로 이름, value로 기본값을 지정한다. 
type의 종류에는 다음과 같은 것들이 있다. password text button submit reset radio checkbox file hidden textarea color date email search ... 
type="range"는 html5에서 추가된 것으로 범위 슬라이더가 만들어진다. autofocus="autofocus" 지정하면 로딩과 동시에 포커스를 받는다. autocomplete는 자동완성을, require는 필수 입력 필드, placeholder은 짧은 도움말, label for은 폼 양식에 알아보기 쉽게 이름을 붙여주는 태그이다. for 값과 id 값이 같을 때 연결된다. label 태그 내부에 넣는 것도 가능, 근데 잘 쓰지는 않는듯? label을 쓰면 체크박스 근처 영역까지 한번에 클릭이 가능해진다. 유용. 

 

몸통5. 다양한 VS Code 단축키 모음

퀵 오픈 단축키

ctrl+p 좌측 사이드바 스크롤 해서 파일 안 찾아도 원하는 파일 열기 가능.
ctrl+b 가 왼쪽 파일 사이드바 열었다 켰다 가능. 
ctrl+` 는 하단 터미널창 토글바

문서 내 단축키
ctrl <- -> 는 단어별 이동,
ctrl+shift+<- -> 줄전체 선택 
ctrl+x 잘라내기 
alt+ 위 아래 줄을 통째로 옮기기 가능, 블럭 전체 선택 뒤 활용하면 다같이
shift+alt+위아래 줄 통째로 copy paste
ctrl+enter 다음줄에서 바로 코드 작성하기
ctrl+u 이전의 커서로 이동
alt+click 은 같은 부분에 커서 두고 여러개 다중 수정 가능

Shift+alt+F 줄 정렬

ctrl+shift+L 같은 단어 전체 선택

 

몸통6. 이외 거론 되었던 다양한 CSS 효과들

@media
다양한 미디어 유형이나 장치에 따라 선택적으로 서로 다른 스타일 규칙을 적용시킨다. 

@media screen and (max-width: 1000px) {
 color: blue; 
}

@keyframes 
2개 이상의 애니메이션 프레임을 지정한다. 

@keyframes move-box {
  0% { left: 100px; }
  50% {left: 30px ;}
  100% { top: 200px; }
}

애니메이션 
animation: 애니메이션이름 지속시간 + (함수 대기시간 반복횟수 반복방향 상태 재생/정지);
애니메이션 함수에는 ease linear ease-in 등이 있다.

트랜지션
transition: 속성 이름 지속시간 + (함수 대기시간)

트랜스폼 transform
요소의 변형을 지정한다. ex) transform: rotate(30deg) translate(10px, 0)
2d 변환 함수로: translate(X, Y) 이동, scale(x, y) 크기, rotate(degree) 회전, skew(x-deg y-deg) 기울임 등이 있다. 
3d 변환 함수로 translate3d(x, y, z), scale3d(x, y, z), rotate3d(x, y, z, a), perspective(n)원근법 등이 있다. 여기서 translate3d의 요소로 지정하면 브라우저가 GPU를 사용해서 더 자연스러운 애니메이션을 선사한다. 

 

clip-path 그림 잘라내는 속성

직접 코드를 자르지 않아도 잘라주는 사이트 존재.

https://bennettfeely.com/clippy/

Clippy — CSS clip-path maker

 

filter: drop-shadow

좀더 부드럽고 효과적인 filter을 통한 가우시안 블러 같은 그림자. filter 속성은 CPU가 아니라 GPU에서 관리한다. 

 

radial-gradient

그냥 선형 그라디엔트가 아니라 가운데 중심으로 커지는 원형의 그라데이션이 적용된다. conic-gradient라는 것도 있음. 신기함... repeading-linear-gradient 를 쓰면 라인 패턴도 그릴 수 있다. 

 

 

 

 

 

Question

• 아직 flex-basis가 0인 것과 auto인 것의 차이를 잘 모르겠다. auto일 때는 내부 컨텐츠에 따라 더 늘어나는 건가? 

 

• 일요일에 우분투 설치할 것.
• JS 예습할 것.
• 퀴즈 틀렸던 거 다시 불러와서 오답 확인하기
• Figma 건드려보기
• 다크모드/라이트모드 손 대보기