2022-05-02
WEB
- 웹vs인터넷 :
인터넷은1960년대에 미국에서 군사 목적으로 개발되었으나, 1980년대 민간용 네트워크로 분리된다.
1989년에 팀 버너스 리가 만든 World Wide Web(오늘날의 www)웹의 등장으로 급속도로 발전한다.
웹을 구성하는 핵심 언어
- HTML : 태그로 구조화된 문서
- CSS : 문서의 내용에 서식(style) 지정
- JS(JavaScript) : Interacton, 동적인 움직임
-
DOM Tree (Document Object Model) :
브라우저가 HTML 웹 페이지를 계층화(Tree)시켜 인식하게 만드는 모델
(html을 node라는 오브젝트로 변환하며, 나무와 같은 구조로 뻗어간다)
흔히 우리가 알고 있는 트리 형식으로, 뿌리(root)가 최상단이지만 뒤집으면 나무 모양이 된다...ㅎㅎ -
node : 모든 tree구조 안의 각 개체를 칭함
각 노드를 기준으로 위에 존재하는 노드는 부모, 포함된 쪽은 자식이라 함. 뿌리는 최초의 노드가 되겠다. -
웹접근성 : 장애/비장애인 모두 웹사이트를 원활히 이용 가능하게 만드는 방식. 텍스트 리더기(글을 소리로 읽어주는 기능)에서 어떤 이미지인지 읽히는 부분이다. 웹접근성이 잘 설계된 사이트일 수록 장애/비장애인이 받아들일 수 있는 정보량이 동등해진다. 또한 검색에도 용이하다!
HTML 기본 구조
<html>
<head>
</head>
<body>
</body>
</html>
<DOCTYPE> : 웹브라우저가 문서를 정확하게 해석할 수 있도록 사용할 html 버전을 선언한다
<meta> : 문서 내용, 키워드, 작성자, 문자셋
<a> : 클릭 한번으로 다른 페이지과 link시킴
<h> : heading, 제목을 나타낼 때 쓰임
<p> : 문단
공백
< : 부등호 기호 <
> : 부등호 기호 >
& : 앰퍼샌드 기호 &
#sharp : 샵 기호 기호 #
" : 쌍따옴표 기호 "
#039; : 따옴표 기호 '
<pre></pre> : 여기는 작성한 그대로 내용이 나온다(공백포함)
도움되는 사이트
프론트앤드 로드맵 : https://roadmap.sh/frontend
마크업 검사 사이트 : http://validator.w3.org
CSS지원 브라우저 검사 : https://caniuse.com
(서비스 할 웹브라우저 버전에 해당 CSS 언어가 지원되는지 확인하는 사이트. 브라우저 버전에 따라 지원이 되지 않는 기능도 있으므로 확인차 써주는게 좋다 ex. transform...)
CSS3 Maker : https://www.css3maker.com
CSS 효과, 애니메이션을 미리 동작시켜보고 소스 코드를 들고 올 수도 있음
colorzilla : https://www.colorzilla.com
확장기능을 쓰면 색을 뽑아 주기도 하고, 직접 지정한 컬러를 코드로 가져올 수도 있음
JQuery Easing 이징 확인 사이트 :
https://jqueryui.com/easing
https://easings.net
https://cubic-bezier.com
마찬가지로 소스 가져올 수 있음
easing function : 이펙트 효과의 시간당 속도를 전달한다.
어려웠던 점 또는 해결못한 것들
기능에 대해서는 이해하기 괜찮았으나 처음보는 용어들이 많았다. 사람들이 아무렇지도 않게 쓰는 단어들조차 나에겐 처음 접하는 것들이었기에 설명을 들어도 들은 것 같지가 않았다. node라든지 Dom Tree 같은 것들 등등...
해결방법
인터넷을 서치하며 개념을 이해시켜갔다. 다행히 나와 비슷하게 생각한 사람들이 정리한 글이 많았다.
소감
아직까지는 이해에 크게 어려움이 없다. 다만 혼자서 홈페이지를 만들고 싶어서 검색하면서 깨작거려봤는데, 생각보다 까마득하고 답이 보이질 않았다. 앞으로 또 얼마나 많은 태그들이 있고 내가 그걸 해석할 수 있을까. 언제 그걸 잘 쓸 수 있을까.
이런 마음일수록 자꾸 먼곳을 내다보면 오지도 않은 미래에 눌려 제풀에 지치기 쉽상이다. 조급해하지 말고 천천히 배워가고 싶다.
