호호 강의를 다 듣긴 어제 간신히 다 들었는데 과제 하느라 시간이 모자라서 블로깅은 오늘 하게 됐다 ... 그래도 멘토링 전이라 다행 ^_^
강의는 입문자를 위한 HTML 기초 강의와 입문자를 위한 CSS 기초 강의를 들었다. 사실 HTML&CSS는 넘나 많이 쓰기도 했고 강의도 많이 들어서 대충 틀어놓고 내가 모르는 게 있는지 없는지 정도만 확인하는 느낌으로 수강했다.
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
div
-> 블록 레벨 컨테이너span
-> 인라인 컨테이너전역 속성
-> 태그에 상관 없이 사용할 수 있는 속성
title 속성
-> 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공
target 속성 -> 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정 가능
_self
: 현재 탭에서 열기 ( 기본값 ) _blank
: 새 탭에서 열기HTML 문서에 대한 메타데이터( 데이터에 대한 데이터 )
를 정의
항상 head 태그의 안에 들어가며, 일반적으로 문자 세트, 페이지 설명, 키워드, 문서의 자성자 및 뷰포트 설정을 지정하는 데 사용됨 -> 검색 엔진, 결과에 반영
1. charset
: 문자 인코딩에 대한 요약 정보 기입, 영문과 한글 모두 사용하기 위해 utf-8 방식 사용
2. http-equiv
: 콘텐츠 속성의 정보, 값에 대한 HTPP 헤더 제공
<!-- IE 브러우저의 최신 버전의 엔진을 사용하라는 뜻 -->
<meta http-equiv="x-ua-compatible" content="IE=edge">
<!-- 10초마다 페이지 새로고침 하라는 뜻 -->
<meta http-equiv="refresh" content="10">
name : name을 key로, content를 value로 하여 문서 정보를 key-value 형태로 제공할 때 사용 가능
<!-- 문서 제작자 -->
<meta name="author" content="이지원">
<!-- 문서 제작자 -->
<meta name="description" content="페이지에 대한 짧고 명확한 요약">
<!-- 문서 제작자 -->
<meta name="keywords" content="UDR, 언더독, LikeLon">
뷰포트 -> 현재 화면에 보여지고 있는 영역을 의미함 ( 기기마다 다름 )
다양한 디바이스의 등장으로, 웹의 모든 콘텐츠를 모든 곳에서 잘 표시하기 위해서는 배율 조정이 필요함 ( PC용, 모바일 용으로 나누어 만들기도 함 )
-> 아래와 같이 meta 태그를 통해 뷰포트 관련 설정 진행함
의사 요소 -> 선택자에 추가하는 키워드, 선택한 요소의 특정 부분에 대한 스타일 정의
meta 태그는 어떻게 동작하는 걸까?? 특히 viewport 설정은 코드 한 줄로 저렇게 배율 문제가 해결되는 걸 보니까 신기하기도 하고 ... 후 반응형도 얼른 공부해야 되는데... 할 일이 많구만 ㄱ-