HTML <meta> 태그 기초
2021. 9. 30.
태그는 메타 태그라고 하고, HTML 문서의 메타 정보를 기록하는 태그입니다. 메타 정보는 HTML 문서의 주요 키워드, 상세 설명, 문서 작성자 정보, 인코딩 정보, 모바일 기기를 위한 뷰포트 배율 정보, 검색 엔진을 위한 정보 등 아주 다양한 정보를 담게 됩니다. 사진으로 치면 사진 이미지 파일 안에 기록된 사진 크기, 촬영 날짜, 이미지 포맷, 촬영 기종, 컬러 정보 정보 등을 저장한 정보가 메타 정보입니다. 문서에 대한 주요 요약 정보를 담는 용도로 사용하는 태그이고, 태그 자체의 사용 용도에 제한은 없습니다. 그래서 메타 태그에는 다양한 부가적인 정보들을 표시해서 웹 페이지를 구분하는 용도로 사용하기도 합니다. 예를 들어 검색엔진은 웹페이지 검색 인덱스를 등록하려는 이용자에게 사이트의 진윈 여부..
CSS 레이아웃 속성 기초1 - 포지션(Position) 속성을 이해하자.
2021. 9. 5.
CSS "포지션", 또는 "위치 속성"은 요소의 표시 위치를 결정하는 HTML 레이아웃의 중요한 기초 속성입니다. 다양한 속성 값을 가지고 있고, 속성 값에 따라 요소가 표시되는 위치도 전혀 다릅니다. 단어 그대로 사용하면 한글로 "위치 속성"이라고 사용해야 하지만, 위치 속성에 해당하는 CSS 속성이 여러 가지이기 때문에 혼동을 할 가능성이 있고, 그래서 "position" 속성은 "포지션"으로 영어 단어를 그대로 사용합니다. 포지션 속성의 속성 이름은 "position" 이며, inherit, static, initial, relative, absolute, fixed, sticky와 같은 속성 값을 사용할 수 있습니다. 그밖에 revert, unset 과 같은 속성 값도 있지만, 거의 사용되지 않기..
CSS 적용 우선순위를 결정하는 특이도(Specificity)의 이해
2021. 8. 11.
Specificity, 특이도는 CSS가 적용되는 우선순위를 결정하는 기준입니다. 생소한 단어지만, 표준 통계 수학 용어로 사용되는 용어이고, CSS에서도 같은 의미로 사용합니다. CSS에서는 특이도를 가장 일치하는 요소에 적용할 속성을 결정하는 가중치 숫자를 의미합니다. 어렵게 기술적으로 설명했지만, CSS 선택자 타입(ID, 태그, 클래스, CSS 위치 등)에 따라 정해진 가중치 숫자 값이 부여되고, 같은 요소를 선택하는 CSS 선택자가 여러 개일 경우 가중치 숫자 값이 가장 높은 CSS 선택자의 속성이 최종 적용됩니다. 조금 더 쉽게 설명하면 같은 요소에 속성을 적용하는 클래스가 여러 개면, 그중 특이도 가중치 숫자가 가장 높은 클래스의 속성이 적용됩니다. 가중치 속성 값이 완전히 동일하면, 뒤에 ..
닫기
