본문 바로가기

전체 글23

여러가지 html 공부(Margin-right:-1px/em/strong/b/i태그) Margin-right: -1px 를 사용하는 경우 탭 메뉴를 만들 때 Border 값이 겹치는 경우에만 사용 합니다. 그 외에는 거의 사용하는 경우가 없습니다. i 태그와 em태그 b태그 strong 태그의 차이 - i 태그는 이탤릭체로 표시할 때 사용합니다. - em 태그는 이탤릭체로 표시되며 글씨를 강조할 때 사용합니다. - b 태그는 bold의 약자로 글씨를 강조할 때 사용합니다. - strong 태그는 글씨를 강조 할 뿐만 아니라 글씨의 '중요성'을 강조할 때 사용합니다. 2019. 12. 23.
말줄임 효과(한줄 효과) 사용하는 방법 말줄임 효과(한줄 효과) 사용하는 방법 - 말줄임 효과는 한 줄의 영역 안에 모든 글자를 넣고 싶을 때 사용합니다. - 영역을 넘어가게 되면 ... 으로 표시됩니다. - 말줄임 효과를 적용하고 싶은 영역에 아래 태그를 넣습니다. overflow: hidden; text-overflow: ellipsis; white-space: nowrap; 자세한 예제는 아래 코드펜을 참고해 주세요. See the Pen 말줄임효과 by Sky Lee (@Tropicalsky) on CodePen. 2019. 12. 19.
콘텐츠 요소를 보이지 않게 하는 방법 과 차이점 콘텐츠 요소를 보이지 않게 하는 방법은 아래와 같습니다. Display:none - display:none; display:block; - 디스플레이를 사용해서 보이지 않게 하면 콘텐츠 영역 또한 사라집니다. Visibility: hidden - visibility: hidden; visibility: visible - 비저빌리티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. Opacity:0; - opacity:0; opacity:1; - 오파시티를 사용해서 보이지 않게 하면 보이는 건 사라지지만 영역은 유지 됩니다. IR (Image Replacement) 기법 - overflow: hidden; position: absolute; width: 0; height: 0; lin.. 2019. 12. 18.
Float으로 인한 영역 깨짐(height: 0)을 방지하는 방법 (클리어픽스) Float을 사용하게 되면 영역이 깨지는 즉, Height 값이 사라져 0이 되는 현상이 나타납니다. 이를 방지하기 위한 방법을 아래에 적어 보겠습니다. Float으로 인한 영역 깨짐(Height: 0)을 방지하는 방법 깨지는 영역에 똑같이 Float: left를 사용 - 위 방법을 사용하게 되면 모든 박스에 float: left를 사용해야 하며 구조가 복잡해 지면 어디에 float: left를 넣어야 할지 알기가 어려워 지므로 추천하지 않습니다. 깨지는 영역에 Clear: both를 사용 - 위치를 잡을 수 있으나 구조가 복잡할 때는 어떤 영역이 깨졌는지 찾기가 어렵기에 추천하지 않습니다. Float을 사용한 상위 박스에게 Overflow: hidden을 사용 - 2단 메뉴 사용 시에는 사용 할 수 없.. 2019. 12. 17.