HTML & CSS7 HTML & CSS - Basic Tooltip & Custom Tooltip 만들기 HTML & CSS - Basic Tooltip & Custom Tooltip 만들기 이미지로만 구성되어 있는 버튼그룹에 설명을 더하기 위해 툴팁기능을 넣으려고 한다. 툴팁 기능이란 마우스 오버시에 나타나는 설명창이라고 생각하면 된다. 위와 같이 이미지로만 되어있어 글로 추가 설명이 필요한 경우나 아니면 제한된 영역내에서 짤린 내용을 보여주는 용도로도 사용이 가능하다. HTML 먼저 가장 기본적인 html 태그에 속성값을 이용한 방법을 알아보자. 이와 같이 태그안에 title속성값을 부여해주고 오버시 보여줄 내용을 적어주면 된다. CSS title을 이용한 방법은 손쉽고 편하게 구현이 가능하다는 장점이 있지만 전체 디자인등을 고려했을때 부적합할 수 있다. 이때 CSS를 이용하면 디자인부분을 원하는대로 변.. 2021. 7. 27. HTML - 특수문자 코드표 사이트 HTML - 특수문자 코드표 사이트 html을 작성시 < 와 같은 기호들을 그대로 쓰고 싶을때는 따로 표시를 해주지 않으면 태그로 인식을 하기 때문에 특수문자를 쓰기 위해서는 미리 약속한 이름이나 표기법을 사용해줘야 한다. 규칙 시작은 &로 시작을 하고 끝에는 꼭 ;로 끝내면 된다. 모든 특수문자를 외울수는 없으므로 필요시에 아래 사이트에 접속하여 이용하면 된다. https://dev.w3.org/html5/html-author/charref Character Entity Reference Chart dev.w3.org 2021. 7. 23. CSS - position : absolute 를 이용한 div 위치 지정 CSS - position : absolute 를 이용한 div 위치 지정 position은 태그들의 위치를 결정하는 css이다. 기본적으로 div 정렬 시키는 방법은 다양하지만 position을 이용하게 되면 내가 원하는 위치에 어디든 정확히 위치 시킬 수 있다. 글로만 설명하면 이해가 쉽지 않아 아래 그림을 통해 알아본다. 기본적으로 모든 태그들의 디폴트값은 static 상태이며 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓인다. position : absolute position: absolute; 포지션 값을 absolute로 주게 되면 position 값이 static 속성이 아닌 relative, absolute, fixed인 부모 태그를 기준으로 기준점을 삼는다. 만약 relative, abs.. 2021. 7. 12. HTML&CSS - overflow 속성 알아보기 HTML&CSS - overflow 속성 알아보기 css의 중요한 개념중 하나인 overflow에 대해서 알아보자. overflow는 단어 그대로 과다하다, 넘치다와 같이 기존 제한된 크기에 비하여 overflow가 발생하였을때 어떻게 대처할 것인지를 설정하는 속성값입니다. 예를 들어 다음과 같은 박스가 있다고 가정했을때 .box { border: 1px solid #333333; width: 200px; height: 100px; } 이 공간 안에 글을 쓴다고 가정해보자. 이때 box에 지정된 크기보다 내용이 많아지게 되면 다음과 같이 내용이 넘치게 됩니다. overflow의 기본값으로는 visible이기 때문에 다음과 같이 내용이 넘치게 되더라도 보여지게 된다. 이를 방지하기 위해 overflow에 .. 2021. 6. 15. HTML - frame & iframe HTML - frame & iframe iframe(inline frame) 이름에서도 알 수 있듯이 페이지안에 페이지를 삽입하는 방식이다. 문법 // iframe를 지원하지 않는 브라우저인 경우 대체정보를 제공 - src : 불러올 페이지의 URL - scrolling : 아이프레임 안에서 스크롤링을 허용할 것인지를 지정 auto : 스크롤이 필요한 경우만 스크롤 바를 노출 (기본 값) yes : 스크롤링 허용, 스크롤이 필요 없는 경우도 스크롤 바를 노출 no : 스크롤 하지 않음 예 frame frameset 구조하에 기술되어 페이지를 구성한다. 태그는 요소에 포함되는 하나의 프레임(frame)을 정의할 때 사용한다. 요소에 포함된 각각의 요소는 테두리(border)나 스크롤, 크기 재조정 가능 여.. 2021. 6. 8. CSS - div 요소 화면 정중앙 정렬 CSS - div 요소 화면 정중앙 정렬 div 요소를 어떤 크기의 화면에서든 정중앙에 위치하고 싶을때 사용한다. css 파일이 따로 존재하지 않다면 헤드안에 태그안에 설정해주고 따로 있다면 css 파일 안에 따로 넣어준다. css파일에 넣어 저장해도 바뀌지 않는 경우는 이전에 사용한 css를 브라우저가 캐쉬에 보관하여 사용하기에 변화점을 기억 못하는 것. 이때는 브라우저 설정에서 캐시를 삭제하거나 또는 css 링크 코드에 경로 끝에 ?after를 붙여준다. 2021. 5. 11. 이전 1 2 다음
