Position
-
검색창 구현 (position - relative & absolute)Html & Css 2021. 12. 1. 16:18
검색창의 기능은 제외하고 외형적인 부분만 구현했음에도 불구하고 정말 힘들고 시간이 오래 걸렸다. 특히나 손이 많이 가고 신경을 많이 썼던 부분 4가지를 짚고 넘어가고자 한다. 뭐든 정렬이 가장 어렵다... 미래에는 생각만 해도 컴퓨터가 자동으로 사이트를 구축해주는 날이 올지도...? 그런 날이 오기 전까지는 열심히 공부하는 수밖에 없다..!! 가장 상단의 Weegle 이미지 중앙 정렬 검색창의 아이콘 정렬 검색창을 클릭해서 커서가 반짝이는 부분을 돋보기 아이콘 뒤에 위치시키고 글자도 거기에 써지게 하는 부분 검색창 아래의 연한 회색 음영이 들어간 두개 버튼의 정렬 1. 가장 상단의 Weegle 이미지 중앙 정렬 .container { text-align: center; } img { width: 200p..
-
DISPLAY / POSITION / VISIBILITY ATTRIBUTEHtml & Css 2021. 12. 1. 04:03
목차 *** DISPLAY ATTRIBUTE *** ***POSITION*** *** VISIBILITY ATTRIBUTE *** *** DISPLAY ATTRIBUTE *** 1. block - 요소 안 내용 길이에 상관없이 요소 자체가 한 줄 전체를 차지하는 요소 - 부모 태그의 최대 넓이 가짐 (max width) - 2개 이상의 "블록 레벨" 요소가 있으면 위에서 아래로 하나씩 쌓인다. - , , , , , 등 - width, height 설정 가능 2. inline - just text line height "in" line - 텍스트 크기 만큼만 공간을 차지한다. - 2개 이상의 "인라인" 요소가 있으면 오른쪽으로 나열된다. - , , 등 - width, height 설정 불가능 - displ..