z-index : 화면에 나타나는 요소들의 우선순위를 정할 수 있습니다. 숫자의 크기가 커질수록 화면에 앞 쪽에 나타납니다. 헤더영역에 있는 퀵바가 이미지 뒤에 가려지는 것을 볼 수 있습니다. position: relative; z-index: 값; 기본 바탕이 0이여서 0보다 큰 숫자를 입력하시면 요소가 바탕 위로 올라옵니다. 이 때, position: relative가 있어야 합니다. z-index는 position이랑 함께 씁니다.
요소 숨기기 position: fixed 요소를 브라우저 창에 고정 위치로 설정 top, left 값을 마이너스로 주어 브라우저의 가로 세로 아주 멀리 있는 곳으로 요소를 보내버립니다. display: block inline요소는 크기를 조절할 수 없어서 block요소로 변경해줍니다. width, height 요소의 너비와 높이를 0으로 설정하여 보이지 않게 만듭니다. overflow: hidden 요소가 경계에 벗어나면 내용을 숩기는 설정입니다.
display: block; a태그는 inline 요소라서 width, height와 같은 크기 조절이 안되기 때문에 블록요소로 바꿔주고 크기를 조절해줍니다. background-image: url(); 로고 이미지를 넣어줍니다. text-indent html의 글씨의 위치를 이동시킵니다. text-indent를 사용하지 않으면 배경이미지와 글씨가 겹쳐서 나오기 때문에 text-indent 값을 마이너스로 주어 왼쪽으로 멀리 보내버리면 브라우저의 위쪽 왼쪽은 사용자가 볼 수 없게 되어 글씨가 사라져보입니다.
가상 태그란? html에 태그를 만들지 않고 스타일 표현을 위해 css에 추가하는 태그 영역을 말합니다. 모든 블럭요소 태그는 2개의 가상 태그를 가질 수 있습니다. 가상태그는 content 속성이 필요함 대부분 공간이 필요해서 가상 태그를 만들기 때문에 content: ""; 값을 공백으로 비워둠 가상태그는 인라인 요소의 성질을 가짐 (크기를 조절할 경우 block이나 inline-block으로 바꿔줘야함) 가상 태그 만드는 법 선택자::before{ content: ""; } ex) 핑크색배너 자식들 마지막에 파란색 줄의 자식이 만들어짐 선택자::before : 선택자의 첫번째 자식태그 영역에 만듦 선택자::after : 선택자의 마지막 자식태그 영역에 만듦 ex) float 속성을 사용할 때 부모태..
