호호 강의를 다 듣긴 어제 간신히 다 들었는데 과제 하느라 시간이 모자라서 블로깅은 오늘 하게 됐다 ... 그래도 멘토링 전이라 다행 ^_^
강의는 입문자를 위한 HTML 기초 강의와 입문자를 위한 CSS 기초 강의를 들었다. 사실 HTML&CSS는 넘나 많이 쓰기도 했고 강의도 많이 들어서 대충 틀어놓고 내가 모르는 게 있는지 없는지 정도만 확인하는 느낌으로 수강했다.
👀 NEW !
컨테이너
콘텐츠나 레이아웃에 아무런 영향도 주지 않고, 단지 다른 요소 여럿을 묶어 관리하기 편하게 만드는 역할을 하는 태그
div-> 블록 레벨 컨테이너span-> 인라인 컨테이너
전역 속성 : title
전역 속성 -> 태그에 상관 없이 사용할 수 있는 속성
title 속성 -> 요소의 추가 정보를 제공하는 텍스트 속성, 사용자에게 툴팁 제공
a 태그의 target 속성
target 속성 -> 새로운 문서를 열 때 현재 탭에서 열지, 새로운 탭에서 열지 결정 가능
_self: 현재 탭에서 열기 ( 기본값 )_blank: 새 탭에서 열기
meta 태그
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">
뷰포트( ViewPort )
뷰포트 -> 현재 화면에 보여지고 있는 영역을 의미함 ( 기기마다 다름 )
다양한 디바이스의 등장으로, 웹의 모든 콘텐츠를 모든 곳에서 잘 표시하기 위해서는 배율 조정이 필요함 ( PC용, 모바일 용으로 나누어 만들기도 함 )
-> 아래와 같이 meta 태그를 통해 뷰포트 관련 설정 진행함
의사요소
의사 요소 -> 선택자에 추가하는 키워드, 선택한 요소의 특정 부분에 대한 스타일 정의
- after : 요소의 앞에 의사 요소를 생성 및 추가
- before : 요소의 뒤에 의사 요소를 생성 및 추가한다
- first-line : 블록 레벨 요소의 첫 번째 선에 스타일 적용
- marker : 목록 기호의 스타일 적용
- placeholder : 입력 요소의 플레이스홀더 스타일 적용
✋ IDK ?
meta 태그는 어떻게 동작하는 걸까?? 특히 viewport 설정은 코드 한 줄로 저렇게 배율 문제가 해결되는 걸 보니까 신기하기도 하고 ... 후 반응형도 얼른 공부해야 되는데... 할 일이 많구만 ㄱ-
😎 FIND ...
Meta 태그의 동작 방식
- 페이지 렌더링에 대한 정보는 브라우저에게 전달되어 웹페이지 로드 시 적용됨
- 페이지에 대한 정보는 웹 크롤러가 페이지들을 탐색하는 과정에서 사용됨
더 많은 viewport 설정
- -> 사용자가 페이지를 방문할 때 확대 / 축소 할 필요가 없도록 함
- -> 사용자가 전혀 스크롤하지 못하도록 함
참고 자료
