728x90 반응형 IT 개발/ HTML , CSS12 svg란 / svg 사용 방법 [svg란] - svg란 확장 가능한 벡터 이미지를 표현하기 위한 포맷으로 확장이 가능하다는 것은 이미지를 확대했 을 경우 품질이 떨어지지 않는다는 큰 장점을 가지고 있다. 텍스트 편집기에서 편집이 가능하고, CSS/JS로 수정할 수 있기 때문에 다른 이미지 현식보다 강력한 기능을 가지고 있다. 추가로 반응형 대응과 사이즈 변화에 지장이 없다는 점, 부라우저 호환성, SVG속성 사용이 가능하나든 장점으로 일반적으로 많이 사용하는 파일 형식인 jpg, png보다는 프론트 입장에서는 활용도가 놓으며 다만, IE8에서는 지원이 되지 않는다. * IE8 이후 버전에서 지원됨 [사용법] - 해상도 독립성 및 파일 용량의 최소화를 위해 SVG 일반 이미지 형식과 같이 태그에 참조 - css 에서 background.. 2023. 10. 13. css \n 개행문자 <br> 줄바꿈 적용 시키는 방법 white-space CSS \n 개행문자 또는 태그 줄바꿈 적용시키는 방법을 알아보자. 이미 다른 라이브러리를 쓰고 있고 클래스 적용은 가능할때에 줄바꿈이 필요한 경우가 있을 수 있는데 줄바꿈을 적용하기가 어려울 수 있다. 그럴때에는 id값이나 클래스에 CSS : white-space 속성을 적용하면 된다. 2023. 8. 7. handlebars template 사용법 ● handlebars 사용법 - 핸들바는 간단한 템플릿 언어 입니다. 템플릿과 입력 개체를 사용하여 HTML 또는 기타 텍스트 형식을 생성합니다. 핸들바 템플릿은 핸들바 표현식이 포함된 일반 텍스트처럼 보입니다. 핸들바를 테스트하는 가장 빠른 방법은 CDN 에서 핸들바를 로드 하여 HTML 파일에 포함하는 것입니다. https://handlebarsjs.com/guide/ Introduction | Handlebars Introduction What is Handlebars? Handlebars is a simple templating language. It uses a template and an input object to generate HTML or other text formats. Handl.. 2021. 9. 14. 글자 서식 관련 태그 - <Strong> <u> <mark> 1. 태그 - 텍스트에서 중요한 부분을 굵게 표시하고 싶을 때 사용 - 태그를 사용해도 같은 효과를 얻을 수 있지만, 웹 접근성 측면에서 태그를 사용하는 것이 좋다. => 글자 굵게 2. 태그 - underline - 태그는 밑줄을 그을 때 사용하는 태그 => 밑줄 3. 태그 - 태그는 최신 HTML에서 새로 생긴 태그 - 하이라이트 효과를 주고 싶은 글자를 태그로 감싸주면 된다. => 하이라이트 2020. 10. 7. <iframe> 태그 태그 - iframe태그는 inline frame의 약자로 '내부의 틀'을 의미한다. - 동영상을 삽입할 때 사용하는 기본태그이며, 이 태그를 사용하면 HTML 페이지에 틀을 만들고 그 안에 다른 HTML 페이지를 보여줄 수 있다. - 내가 만든 웹페이지 한쪽에 동영상이나 네이버 메인페이지가 보여지게 할 수 있다는 것! - * Youtube에서는 소스 코드와 함께 태그를 제공하고 있으므로 직접 태그를 입력할 필요가 없다. 2020. 10. 7. li태그 메뉴 가로로 배열하기 * 홈페이지를 들어가 보면 menu들이 가로로 나열되어 있는데 UL, LI로 배열해 놓은 경우가 있다. * list 태그에는 UL, LI가 있는데 함께 묶어쓰는 태그이다. [태그 설명] * UL : Underline List => ● ● ● ● ●..... * OL : Orderline List => 1. 2. 3. 4. .... * LI : List [사용법] [UL, LI], [OL, LI] 는 함께쓰는 태그이다. EX) -- 1. 2. 3.으로 표현하고 싶을땐 UL자리에 OL로 고쳐주면된다. * 세로로 나열되어 있는 LIST를 가로로 변경해주기 위해선 CSS STYLE 적용이 필요하다. list-style : none 은 1.2.3. 또는 ● 표시를 아예 없애기 위한 css이다. UL과 LI의 ma.. 2020. 9. 24. 12.02 overFlow * overflow 내용이 박스보다 큰 경우 밖으로 넘친 부분을 어떻게 표시할지를 지정한다. Value visible : 박스보다 넘쳐난 내용을 그대로 보여준다. hidden : 박스보다 넘쳐난 내용을 표시하지 않도록 지정하며 스크롤을 제공하지 않는다. scroll : 박스보다 넘쳐난 내용을 위해 스크롤을 제공한다. 잘려서 보이지 않는 부분을 스크롤해서 볼수있도록 한다. 내용이 박스보다 넘쳐나지 않아도 무조건 스크롤을 제공한다. auto : 브라우저에 의존하며 해당영역이 박스보다 큰 경우 스크롤을 자동으로 제공한다. * 참고 overflow-x와 overflow-y는 windows I5+E의 독자적인 속성 2019. 12. 2. 11.07 문서모드 --> content= "ie=edge"는 IE브라우저에서, 각 버전 중 가장 최신 표준 모드를 선택하는 문서모드(IE6부터 IE11까지) : 가장 최신의 웹 표준을 지원하는 HTML5 DOCUTYPE을 추천함. 문서모드란 ? 문서 호환성 모드(document compatibility modes) - IE 구버전은 IE가 웹페이지를 번역하고 표시하는 방법을 선택할 수 있게 함 Quirks mode 비표준 모드가 기본값이며, 구버전의 브라우저로 보는 것처럼 페이지를 표시하고, Standard mode 표준 모드(또는 strict mode 엄격모드)는 업계 의 표준을 지원하도록 표시한다. 이때 역시 문서유형 선언(예:)이 있어야 하는데, 문서유형선언을 하지 않으면 quirks mode로 표시함 비표준 모드 .. 2019. 11. 7. 11.06 css 미디어 쿼리 코드 템플릿 아래 코드는 모든 해상도를 커버하기 위한 미디어 쿼리 코드 템플릿이다. All, Mobile, Tablet, Desktop 으로 기기별 대응 코드를 분류 했지만 Liquid 레이아웃 기법을 사용하면 사실상 모든 해상도를 커버할 수 있다. @charset "utf-8"; /* All Device */ 모든 해상도를 위한 공통 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. /* Mobile Device */ 768px 미만 해상도의 모바일 기기를 위한 코드를 작성한다. 모든 해상도에서 이 코드가 실행됨. 미디어 쿼리를 지원하지 않는 모바일 기기를 위해 미디어 쿼리 구문을 사용하지 않는다. /* Tablet & Desktop Device */ @media all and .. 2019. 11. 6. 10.31 CSS 정리 F12를 눌러서 Elements 탭으로 갑니다. 아무 태그나 눌러서 Styles 탭을 보면 옆에 그림이 나올겁니다. position, margin, border, padding, content 순입니다. 바로 이게 박스 모델입니다. position은 없을 수도 있습니다. content 보통 태그가 차지하는 공간이 content / width와 height가 차지하는 공간이 content이다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 .. 2019. 10. 31. 이전 1 2 다음 728x90 반응형
