Html & Css
-
검색창 구현 (position - relative & absolute)Html & Css 2021. 12. 1. 16:18
검색창의 기능은 제외하고 외형적인 부분만 구현했음에도 불구하고 정말 힘들고 시간이 오래 걸렸다. 특히나 손이 많이 가고 신경을 많이 썼던 부분 4가지를 짚고 넘어가고자 한다. 뭐든 정렬이 가장 어렵다... 미래에는 생각만 해도 컴퓨터가 자동으로 사이트를 구축해주는 날이 올지도...? 그런 날이 오기 전까지는 열심히 공부하는 수밖에 없다..!! 가장 상단의 Weegle 이미지 중앙 정렬 검색창의 아이콘 정렬 검색창을 클릭해서 커서가 반짝이는 부분을 돋보기 아이콘 뒤에 위치시키고 글자도 거기에 써지게 하는 부분 검색창 아래의 연한 회색 음영이 들어간 두개 버튼의 정렬 1. 가장 상단의 Weegle 이미지 중앙 정렬 .container { text-align: center; } img { width: 200p..
-
Semantic Tag와 Semantic WebHtml & Css 2021. 12. 1. 13:52
계속해서 코드들을 치다보니 드는 생각들이 있었다. 물론 상황마다 다르겠지만 간단한 한 두 문장 입력할 때 을 쓸지 를 쓸지 등에 대해 생각하고 고민하는 시간들이 많아졌다. 거기에서 나아가다보니 Semantic Tag와 Semantic Web에 대해 찾아보게 되었다. 우선 Semantic Tag부터 알아보고자 한다. Semantic Tag란 컴퓨터 그리고 사람이 해당 태그를 접했을 때 그 역할을 바로 짐작할 수 있는 태그들을 의미한다. 그 예로 , , , 등이 있다. Semantic Tag의 반대인 Non-Semantic Tag에는 , 등이 있다. 는 division이어서 공간을 나눠준다는 의미가 있어서 Semantic Tag일까 했는데 아니었다. Semantic Tag의 뜻과 역할을 다시 생각해보면 이해..
-
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..
-
a 태그의 선택 범위(영역) 지정하는 방법Html & Css 2021. 11. 24. 00:49
삭제 그래서 div 태그의 padding 값을 0으로 하고 a 태그의 padding 값을 1rem 정도로 준다면 현재와 비슷한 크기를 유지하면서 a 태그의 선택할 수 있는 영역이 더 넓어질거라고 생각했습니다. 삭제 display가 inline으로 설정되어 있어서 padding 영역을 다 나타내지 못 하고 있다고 생각합니다. block - 가로 크기가 부모 요소의 100%를 차지 - 가로와 세로 크기 지정 가능 inline - 텍스트가 차지하는 공간만큼만 공간 차지 - 가로와 세로 크기 지정 불가능 그래서 이 경우에는 a 태그의 display를 block으로 설정해주시면 문제가 해결됩니다. 삭제 스스로 생각해도 완벽하게 이해한 상태가 아닌것 같아서 제 설명이 부족하거나 틀린 부분이 있을 수 있다고 생각합니..