웹사이트 만들기/CSS9 여러가지 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. IR 기법(Image Replacement)의 의미와 종류 그리고 사용 방법 IR 기법(Image Replacement)은 무엇인가? - IR 기법은 이미지의 대체텍스트를 제공하기 위한 CSS 기법으로 아래와 같이 다양한 CSS 기법을 사용하여 이미지의 대체 텍스트를 제공할 수 있습니다. IR 기법(Image Replacement)의 종류 Phark Method - 의미있는 이미지의 대체 텍스트를 제공하는 경우에 사용합니다. - 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로 (-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법입니다. .ir_pm {display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;} WA IR - .. 2019. 12. 16. HTML 과 CSS로 이미지를 표현하는 방법(Img/Background/이미지 스프라이트 기법) 다음의 세 가지 방법으로 이미지를 표현 할 수 있습니다. Img 태그 - 이미지의 의미가 있을 때 Img 태그를 사용합니다. - Alt 태그를 이용해서 대체 문자를 적어야 합니다. Background 속성 - 이미지가 의미가 없을 때 background 속성을 사용합니다. - 의미가 없기 때문에 대체 문자를 적을 필요가 없습니다. - background: url(이미지 주소) center top repeat-x; - background: url(이미지 주소) no-repeat 9px(가로) 8px(세로); 이미지 스프라이트 기법(Image Sprite) - 여러 개의 이미지를 하나의 이미지로 합쳐서 관리합니다. - 위 기법을 사용하면 이미지 관리가 용이하며 웹페이지의 로딩 시간 및 용량을 줄일 수 있습니.. 2019. 12. 15. 마진(Margin)과 패딩(Padding)의 차이와 입력 방법 마진(Margin)과 패딩(Padding)의 차이 - 마진(Margin)은 보더값을 기준으로 컨텐츠의 바깥쪽에 위치한 여백을 의미합니다. - 패딩(Padding)은 컨텐츠 안쪽의 여백을 의미합니다. 자세한 내용은 아래 사진을 보면 쉽게 이해가 가능합니다. 마진(Margin)과 패딩(Padding)의 입력 방법 마진 혹은 패딩을 입력 방법에 대해 알아 보겠습니다. 기본적으로 입력 방법은 '위 -> 오른쪽 -> 아래 -> 왼쪽' 이렇게 시계 방향 순서라고 생각하시면 됩니다. 4개 값 입력 시 - 위 -> 오른쪽 -> 아래 -> 왼쪽 3개 값 입력 시 - 위 -> 오른쪽/왼쪽 -> 아래 2개 값 입력 시 - 위/아래 -> 오른쪽/왼쪽 1개 값 입력 시 - 위/아래/오른쪽/왼쪽 모두 동일한 마진 혹은 패딩값 자.. 2019. 12. 13. 웹폰트 사용하는 방법 1. 구글 폰트에 들어갑니다. https://fonts.google.com/ Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 2. 나눔고딕 폰트가 보이네요. 이 폰트를 사용하겠습니다. 플러스 버튼을 누릅니다. 3. 플러스 버튼을 누르면 Family Selected라는 버튼이 보이는데요. 그 버튼을 클릭하면 아래와 같은 화면이 나옵니다. 4. 위 화면에서 standard에 있는 부분은 html의 head 안쪽에 붙여넣기 해줍니다. 그리고 아래의 Specify in CSS의 부분은 복사해서 스타일시트에 붙여넣기 해주시면 됩니다. 자세한 내용은 아래 코드팬을 참고하세요. See .. 2019. 12. 12. Inline과 Block 그리고 Inline-block의 차이점 Display: block - 블럭은 자신이 속한 영역 전체를 차지합니다. 즉, 블럭은 기본적으로 width 값이 100%입니다. - 블럭은 라인이 새롭게 추가 됩니다. - 블럭은 height값과 width 값, margin값 그리고 padding 값을 지정할 수 있습니다. Display: Inline - 인라인은 주로 텍스트를 기입할 때 사용합니다. 즉, 자신의 컨텐츠 영역이 자신의 width 값입니다. - 인라인은 라인이 새롭게 추가되지 않습니다. - 인라인은 width값과 height 값을 지정할 수 없습니다. - 인라인은 margin과 padding이 위와 아래에는 지정되지 않습니다. Display: Inline-block - 인라인 블럭은 줄바꿈이 되지 않습니다. - 인라인 블럭은 width값과.. 2019. 12. 11. 이전 1 다음
