분류 전체보기 (65) 썸네일형 리스트형 [오류일지]14. CSS- 반응형을 고려하여 높이 지정 말고 overflow:auto;! 화면 크기를 줄였더니 다음과 같이 변했다. 내가 무슨 잘못을 해서 이렇게 된 걸까? 정답은 내가 div의 높이를 지정해버렸기 때문에 발생한 일이다! 이럴 때에는 반응형을 고려하여 높이를 고정하지 않고 overflow:auto;로 지정해야한다! [오류일지]13. footer 와이어프레임 오류 나는 위와 같이 footer 와이어프레임을 그렸으나, 위는 틀린 와이어프레임이다. 그러면 어떻게 그려야 맞은 걸까? 이것이 올바른 예시이다. [오류일지]12. z-index는 형제끼리의 싸움이다! 위는 내가 저지른 오류다. #lnb에 z-index:1000을 줘봤자 소용이 없다. 왜냐하면 z-index는 형제끼리 즉 같은 급에서의 싸움이기 때문이다. 이 상황에서는 header에 z-index를 줘야한다. 그래야 동급인 #subBack과 싸울 수 있다. [오류일지]11. 와이어프레임 오류 및 그룹 메뉴바 특징 1. 와이어 프레임을 위와같이 그렸는데, 이것은 틀린 와이어프레임이다. 이유: 경계선이 T자가 되었기 때문. 나란히 배치하는 경우엔 부모가 감싸줘야 한다. 2. 그룹메뉴바 특징: sub밑에 깔아줄 판때기가 필요하다. [오류일지]10. 반응형 홈페이지의 .cen의 너비 및 반응형 사이트에서의 슬릭 이용법 화면의 크기를 줄였더니 헤더와 메인비주얼 크기가 갑자기 난리났다. 원인이 뭘까? 정답은 내가 .cen의 너비를 max-width가 아닌 그냥 width로 줬기 때문이다! 반응형 홈페이지를 만들 때에는 .cen의 너비는 max-width여야한다!!!! 그런데도 비슷한 문제가 생긴다? body에게 overflow-x:hidden;을 주자. 이렇게 하면 PC버전에서는 문제가 생기지 않는다. 그러나.. 모바일 버전에서 또 비슷한 문제가 발생했다. 원인은 슬릭에서 사용한 arrow 때문에 발생한 문제다. 이걸 어떻게 해결해야 할까? 정답. JS에서 responsive를 다음과 같이 추가해주자! breakpoint: ~px이 될때, settings:{ 다음과 같이 세팅해라 } 그런데..!!! 화면을 줄였다가 다시 .. [오류일지]9. CSS - 자식한테 float를 주면 부모에겐 overflow:auto;를 주자! 상황: .noticeDate에게 float:right;를 줬는데 왼쪽과 같이 나왔다. 어떻게 된 일일까? 1. .noticeTite과 .noticeDate의 부모 a의 display가 inline이다.!그러므로 a의 display를 block으로 바꿔야한다! 2. a에게 display:block을 줬는데 행간이 붙어서 나왔다. 어떻게 된 일일까? 정답: a에게 overflow:auto;를 안 줘서 그렇다! 부모인 a에게 overflow:auto;를 주면, 자식들이 float이고 부모의 높이가 정해져 있지 않아도, 부모가 알아서 잘 늘어난다. [오류일지]8. #mainVisual에 overflow:hidden;을 넣자! 맨 오른쪽을 보면 분명히 width:100%여야 할 곳이 짤린 것을 볼 수 있다. 이렇게 된 이유는 내가 #mainVisual에 overflow:hidden;을 안 넣어서 이렇게 되었다! 이렇게 overflow: hidden;을 넣게 되면 이미지가 넘친 부분은 짤리므로, 아래와 같이 원하는 대로 돌아온다. [오류일지]7. JQuery - Tab 기능 다음과 같이 SNS 버튼을 눌렀을 때 관련 내용을 나오게 하고 싶다. 그러면 어떻게 하는 게 좋을까? 1. html SNS [지호소프트의 역사:지호한글부터 지호 오피스 NEO까지] 1989년 지호한글의 첫 탄생부터 26년간의 변화를 살펴볼까요?(아니 싫은데) Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore porro exercitationem aspernatur tempora laborum sapiente error eius maxime eveniet molestias? Doloremque commodi doloribus ut ipsam reprehenderit ab eum! Commodi, illo. Lorem ipsum dolor s.. [오류일지]6.CSS - ::befor, ::after는 기본적으로 inline이다. 내가 저질렀던 오류. 가상요소(::before, ::after)가 기본적으로 display:inline;이라는 사실을 모르고 크기를 지정했다. 이렇게 display: block;을 써주고 크기를 지정해주자! + 가상요소 (Pseudo-elements) ::before ::after 태그 안 쪽에 들어간다! [HTML] label 태그 개념 및 사용법 label 태그란? 말 그대로 라벨이다. input 태그에 라벨지를 붙여준다고 생각하면 된다. 레이블 텍스트를 클릭하면 연결된 input 태그로 구현한 것이 선택된다. 참고로 label을 사용하면 시각장애인이 폼을 음성으로 들을 수 있다. label 태그 사용법 label 태그 사용법엔 두 가지 방법이 있다. 1. label 태그 안에 input 태그를 넣어주는 방법. 2. label 태그와 input 태그를 따로 쓰는 방법 ⚠️이때 label 태그와 input 태그를 for속성과 id속성으로 연결해줘야한다. label 태그의 for : 레이블을 생성하여 두 요소를 연결한다. 값으로는 label이 설명하는 input 등의 id를 지정해야한다. input 태그의 id : input의 id를 지정해주는 역할.. 이전 1 ··· 3 4 5 6 7 다음
