React 공부를 쭉 했는데 다 이해는 했지만 복습하지 않으면 남는 게 없는 기분... React도 다시 영상 돌려봐야겠다.
어쨌든 어제는 티스토리 다시 시작하고 가볍게 HTML 공부를 했다. 생활코딩이 없었으면 책 읽으면서 공부했으려나 정말 감사한 곳 :D
티스토리에서도 오른쪽 상단에 보면 '기본모드', '마크다운', 'Html' 이 있어서 HTML을 같이 사용하며 끄적여본다. * 내가 쓴 글을 HTML로 봤을 때 어떻게 쓰여있는지 보면 도움이 많이 된다.
HTML(HyperText Markup Language)의 장점
- 쉬움
- 중요(기본)
- Public domain(저작권 없음)
HTML 코딩 준비물
- 웹 브라우저
- 에디터(코드 작성 프로그램)
코딩 작성 프로그램 선택 방법
- 'BEST HTML EDITOR 2020' 검색해보기
- www.hostinger.com/tutorials/best-html-editors
5 Best HTML Editors You Should Know About in 2020
In this article, you will find out some of the best HTML editors for 2020, that can help any beginner or professional web developer.
www.hostinger.com
- 제가 선택한 프로그램 atom.io/
A hackable text editor for the 21st Century
At GitHub, we’re building the text editor we’ve always wanted: hackable to the core, but approachable on the first day without ever touching a config file. We can’t wait to see what you build with it.
atom.io
생활코딩 명언
혼자가면 빨리 가고
같이 가면 오래간다.
자기 자신을 주인공으로 만드세요.
꼭 그대로 따라 하지 않아도 됩니다.
중요한 것은 사소한 것들이다.
HTML 공부 방법 TIP(팁)
- 태그는 우리가 사용하는 영어단어와 유사 => 검색해보기!
- 사람들이 많이 사용하는 태그 보기 => www.advancedwebranking.com/html/#faq
The average web page from top twenty Google results
Apparently, an average web page uses thirty-two different element types: The thirty-two elements used on most pages, ordered by appearance frequency:
www.advancedwebranking.com
태그
열리는 태그, 닫히는 태그 ex) 문단을 의미하는 <p>'내용'</p>
- <b></b>: bold 를 의미 단순히 텍스트를 굵게 표현
- <strong></strong>: <b> 태그와 같이 텍스트를 굵게 표현하지만 강조의 의미, 브라우저가 태그를 해석할 때 중요한 부분으로 인식하여 브라우저의 웹 접근성을 높인다.
- <u></u>: 줄긋기
- <h1></h1> ~ <h6></h6>: 제목을 의미, 크기가 정해져 있음 => 바꾸기 위해서는 CSS 필요
- <br>: 줄 바꿈(닫는 태그 없음)
- <p></p>: 한 단락을 표시, 정해진 여백만큼 떨어짐 => CSS margin(여백)으로 조절 가능
- <img src="" width="">: 이미지 추가, src는 경로, width는 너비(퍼센트로도 가능 혹은 px)
- <ol></ol>: ordered list, 순서가 있는 목록, 숫자가 앞에 표시됨
- <ul></ul>: unordered list, 순서가 없는 목록, 앞에 동그라미 아이콘 표시
- 부모-자식 관계의 태그(순서가 바뀌는 경우도 있음): <html><head><body></body></head></html>
- <a href=""></a>: 링크 설정, hyper text를 의미, anchor에서 이름을 따옴 ex) <a href="링크 주소", target="_blank", title="링크 설명"> target의 blank는 링크를 클릭했을 때 새로운 창으로 뜨게 함, title은 마우스 올려두면 설명
'IT > 코딩복습(일기)' 카테고리의 다른 글
| 21.01.02 React_ component event (0) | 2021.01.03 |
|---|---|
| 21.01.01 React 복습 (0) | 2021.01.02 |
| 20.12.31 git hub, GIT의 목적은? (0) | 2021.01.01 |
| 20.12.30 web hosting, html 댓글, 채팅, 방문자 분석기 기능 (0) | 2020.12.31 |
| 20.12.29 인터넷, 웹, client, server (feat.생활코딩)_코딩복습 (0) | 2020.12.30 |