목록HTML CSS (13)
melius
1. meta 태그 HTML 문서의 meta 태그는 문서의 정보(metadata)를 제공한다. 해당 metadata는 검색엔진이나 브라우저에서 사용한다. HTML 문서의 head 태그안에 작성된다. 2. 뷰포트(Viewport) 뷰포트란 웹 문서의 내용이 화면에 보이는 영역을 말하면, 단위는 웹문서 기준 픽셀이다. 1) 데스크탑 브라우저 뷰포트 크기는 브라우저에서 웹문서가 보여지는 영역의 크기와 같다. (보이는 영역 == 뷰포트) 문서를 확대하면, 디바이스(데스크탑) 기준 뷰포트의 크기가 고정이므로 웹문서 기준 뷰포트의 크기는 작아진다. meta 태그로 뷰포트를 설정할 수 없다.(해당 태그 무시) 2) 모바일 브라우저 확대/축소 메커니즘이 데스크탑 브라우저와 달라서 뷰포트와 화면에 보이는 영역의 크기가 ..
1. 디스플레이 해상도(Display resolution) 디스플레이의 가로/세로 화소(Pixel) 수 화소의 크기가 없으므로 단순히 화소의 갯수만을 알수 있을 뿐, 얼마나 정밀하게 표현하는지는 알 수 없다. 디스플레이의 크기가 같다는 조건하에서 해상도가 높으면 정밀하게 표현이 가능하다. 컴퓨터 이미지의 픽셀 치수(Pixel Dimension)와 단위가 같다. * 디스플레이의 (물리적) 화소와 컴퓨터 (이미지) 픽셀는 다른것이다. 2. 화소 밀도(Pixel density, 단위: Pixel per inch, PPI) 1 inch 내의 화소 수 얼마나 정말하게 표현할 수 있는지 알 수 있다. 3. Viewport 웹 문서의 내용이 화면에 보이는 영역 width: (모바일 화면에서) 출력할 웹 문서의 가로 ..
1. 변형(transform) 변형기준 좌표계를 기준으로 박스의 모양을 변형한다. 변형기준 좌표계의 원점은 박스 중심이며, x축은 오른쪽, y축은 아래쪽, z축은 앞쪽이 각각 양(+)의 방향이다. 아래와 같이 transform의 속성값에 변형함수를 사용한다. .object { transform: translate(10px, 20px); } 변형함수 리스트는 아래와 같다. translate 이동 rotate 회전 scale 확대/축소 skew 왜곡 matrix3d 3차원 이동/회전 perspective 깊이값 변형과 관련된 추가적인 속성 리스트 transform-origin 좌표계 원점 수정 perspective 원근감 transform-style 하위요소 적용여부 backface-visibility 뒷면..
1. 가상 클래스(Pseudo Class) https://www.w3schools.com/css/css_pseudo_classes.asp https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes 클래스 속성에 따로 클래스명를 지정하지 않아도 기본적으로 제공되는 클래스 선택자뒤에 콜론(:)이 하나임 selector:pseudo-class { property:value; } Anchor 관련 가상 클래스 리스트 :link 방문하지 않은 링크 :visited 방문한 링크 :hover 마우스 커서가 요소 위에 있을 때 :active 요소가 활성화됬을 때(누르고 있을 때) :focus 포커스가 맞추어 졌을때 * :hover는 :link와 :visited이후 정의..
Stacking with floated blocks https://stackoverflow.com/questions/579753/css-floating-with-overlap https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float
How To Clear Floats (Clearfix) https://www.w3schools.com/howto/howto_css_clearfix.asp
Space under tag