0627 회고
인터넷 전반을 가볍게 훑고 HTML와 CSS 기초를 학습했다.
HTML
<!DOCTYPEhtml>HTML5 구조라는 것을 알려준다.- charset: 인코딩 방법을 지정한다. 웹 화면에서 한글 등이 깨지는 것을 방지 할 수 있다. 보통 UTF-8을 사용한다.
- meta: 문자 집합, 페이지 설명, 키워드, 문서 작성자, 뷰포트(추후 공부예정) 등을 설정한다.
CSS
- block: 항상 새로운 줄에서 시작하고, 가능한 전체 너비를 차지한다. (ex) div
- inline: 새로운 줄에서 시작하지 않고 필요한 만큼의 너비만 차지한다. (ex) span
Semantic tag
(ex) <strong>과 <b>, <em>과 <i>: 시각적인 차이는 없지만 의미적인 차이가 있다. 특히 시각장애인분들을 위한 텍스트 리딩 서비스에서 그 차이가 두드러지게 보인다.
- 브라우저와 개발자 모두에게 정확한 의미를 설명해준다.
- 웹에서 semantic으로 만들고 나면 추후 앱이나 다른 방면으로 확장 시 그 부분을 강조해서 제작하기 편하다.
- 겉으로 보이는 태그의 기능뿐만 아니라 태그의 의미도 신경을 써야한다.
CSS 스타일 적용 3가지 방법
- 인라인 스타일: 코드 재활용이 힘들기에 가급적 쓰지 않는 것이 좋다. 테스트 용도로 주로 쓰인다.
- 내부 스타일: 특정 페이지에서만 적용하기 위해서 사용한다. 주로
<head>안의<style>태그 안에서 작성한다. - 외부 스타일: 가장 많이 사용하는 방식으로 협업에 우수한다. 여러 HTML에 동일한 스타일을 적용할 수 있다.
곁다리 기술
- 북마크 기능: 목차와 같은 하이퍼링크 클릭 시 해당 위치로 스크롤을 이동시키기
-><a href="#study">클릭 시, id가 study인 곳(예를 들어<h1 id="study">)으로 이동한다.
회고
- 기초적인 부분이라 어느정도 안다고 자만할 뻔했다. 세세한 부분들도 놓치지 말고 학습할 수 있도록 해야겠다.
- 그리고 운동은 시간을 어떻게든 조정해봐야겠다. 배고프고 졸리다.
Always coding or dog walking