*Udemy의 "The Complete Web Developer in 2019 : Zero To Mastery" 강의에서 학습한 내용을 정리한 포스팅입니다.
*https://soldonii.github.io에서 2019년 7월 3일(수)에 작성한 글을 티스토리로 옮겨온 포스팅입니다.
*자바스크립트를 배우는 단계라 오류가 있을 수 있습니다. 틀린 내용은 댓글로 말씀해주시면 수정하겠습니다. 감사합니다. :)
Developer는 문제를 해결하는 사람(PROBLEM SOLVER)이다!
PROBLEM SOLVER는 google 등을 이용해 정보를 찾고, 이를 토대로 문제를 해결하는 사람들이다. 모든 지식을 다 외우고 가지고 있는 사람이 아니다. 물론 단순히 코드를 복사해서 사용할 수도 있을 것이다. 하지만 좋은 직장에서 높은 연봉으로, 소위 senior developer라고 불리는 사람들은 개념을 완벽하게 이해하고 활용할 줄 아는 사람들이다.
1. 가장 기본적인 HTML 태그들
HTML Tag는 수도 없이 많다. 하지만 주로 사용하는 tag는 10-15개 정도이다. 앞으로 어떤 공부를 하더라도 중요한 것은, 모든 것을 알겠다는 태도가 아니라 중요한 것, 자주 사용되는 것을 정확하게 아는 것이다.
- <h1> ~ <h6> : header tag. 숫자가 커질수록 제목의 단계 및 사이즈가 작아진다.
- <p> : paragraph tag. 단락을 만들어준다.
- <strong>, <em> : 볼드체, 이탤릭체(<b>, <i> 태그는 사용하지 말자.)
- <ol>, <ul, <li> : ordered list, unordered list. <li>는 <ol>, <ul>의 children tags이다.
용어를 확실히 짚고 넘어가자. 위 코드에서 <body>, <h1> 등은 ‘tag’라고 부른다. 하지만 <h1>BOOOO</h1> block 전체를 지칭하면 이는 h1 element라고 부른다.
3. 스스로 닫는 태그(Self-Closing Tag)와 앵커 태그(Anchor Tag)
보통의 HTML tag는 닫는 tag가 존재한다. 하지만 닫는 태그 없이 단독으로 존재하는 tag들도 있는데, 이를 self-closing tag라고 부른다.
- <br> : break. 줄바꿈.
- <hr> : horizontal line. 한 줄 긋기.
- <img> : 사진을 첨부할 때 사용하는 태그. 아래와 같은 attribute를 추가할 수 있다.
- src : source. 이미지 정보를 가져올 주소에 대한 정보이다. website 주소도 가능하고, local에 파일이 저장된 주소도 가능하다.
- width, height : 너비, 높이 등을 설정한다.
- alt : alternate text for images.
- <a href=""> : 링크를 거는 태그이다. href에 reference 주소를 넣는다.
4. 왜 항상 index.html일까?
server 입장에서 봤을 때, 어떤 파일을 최초로 loading해야 할지 알 방법이 없기 때문에 default로 index.html을 가장 먼저 rendering하도록 약속했기 때문이다.
- Relative Path vs. Absolute Path
file:///Users/soldonii/Desktop/index.html이라는 주소의 경우, 내 컴퓨터 외부에서는 접근이 불가능한 주소이다. 또한 index.html의 local 위치를 기반으로 함께 linking될 다른 파일의 위치를 지정하게 된다. 즉, index.html의 상대적 위치를 기반으로 web page가 동작되기 때문에 이를 Relative Path라고 한다.
반면 현재 내 파일이 어디에 위치해있는지와 관계 없이 특정 website를 referencing해도 어디에서나 접근이 가능한 경우도 있다. 이러한 경우를 Absolute Path라고 한다. 100% 명확하지 않아 stackoverflow에서 조금 더 찾아보았다.
핵심만 정리하자면, Relative Path는 현재 directory를 referecing하는 것을 의미하며, Absolute Path는 root directory를 referencing하는 것을 의미한다. 자세한 내용은 아래 link를 참고하자! :)
'Javascript 공부 > Zero To Mastery(-)' 카테고리의 다른 글
| (6) CSS3 심화 문법 (0) | 2019.08.27 |
|---|---|
| (5) CSS3 기본 문법 (0) | 2019.08.27 |
| (4) HTML5 심화 문법 (0) | 2019.08.27 |
| (2) 웹의 역사 (0) | 2019.08.26 |
| (1) 인터넷은 어떻게 동작할까? (0) | 2019.08.26 |
댓글