CATEGORIES
VueJS에서 웹어플리케이션에 스타일(style)을 적용하는 방법에 대하여 알아보고 어떻게 사용하고 활용할 수 있는 방안은 무엇인지 알아보려고합니다.# VueJS에 스타일(Style) 적용하기시작에 앞서 스타일(Style)음 무엇이고 왜 중요한지 알아야겠죠? 간략하게 알아봅니다.! 웹페이지에서 스타일 Style이란?스타일(Style)은 웹페이지를 더 이쁘게, 보기 좋게 그리고 더 편리하게 사용할 수 있도록 UI 디자인을 웹 어플리케이션에 맞게 입히는 과정이라 할 수 있습니다. 이때 css의 다양한 속성을 사용하여 적용이 가능합니다.VueJS에서는 이런 스타일은 아래와 같이 2가지 방식으로 적용할 수 있습니다.1. style 태그 내부에 선언하기vue 파일 안에 style코드를 선언하여 사용하는 방법으로 외
Last Modified : 2019-08-07 20:38:13
이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다. window.getComputedStyle(해당 엘리먼트)적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니다. 아래의 함수를 사용해야 원하는 스타일을 가져올 수 있죠.getPropertyValue(가져올 스타일 속성) 이제 해당요소에 적용된 특정 스타
Last Modified : 2017-11-19 07:17:10
HTML태그 중에서 리스트 태그인 ul, li에는 여러가지 타입, 종류가 존재합니다. 아래에서 자세히 알아봅니다.# ul, li 태그 타입 및 스타일 알아보기먼저 ul과 li 태그는 함께 사용되는 태그로 ul 태그 내부에 여러개의 li 태그를 사용할 수 있습니다. 아래를 봐주세요.<ul> <li>1</li> <li>2</li> <li>3</li></ul>위와같이 내부에 여러개의 리스트 아이템이 위치하게 됩니다. 이때 각각의 리스트들을 어떻게 보여줄 지 결정할 수 있습니다. 일반적으로 square, circle 등이 자주 사용되지만 다양한 스타일이 존재합니다. 이때 사용 가능한 방법이 type 어트로뷰티를 사용하거나 아니면 css를 사용하는 방법이죠. 먼저 type을 알아보겠습니다.! 태그에 type 어
Last Modified : 2019-08-21 11:29:35
제이쿼리의 메소드 css()에 대하여 알아봅니다. css() 메소드는 어떻게 적용하고 어느 경우에 사용할 수 있을까요?# jQuery css 메소드는?css 메소드는 선택한 DOM 엘리먼트에 인라인 방식으로 스타일을 추가하거나 가지고 있는 값을 가져올 수 있습니다. 이때 값을 추가하는 경우 태그에 style 어트리뷰트가 추가되어 원하는 스타일이 설정됩니다.@ 변경 전<span>Webisfree.com</span>@ 변경 후<span style="color: red">Webisfree.com</span>간단한 css를 사용하는 문법은 아래와 같습니다.$(element).css();이처럼 태그에 인라인 방식(inline)으로 스타일을 추가하는 방법은 css()와 attr('style')을 사용하는 방법 두 가지
Last Modified : 2019-08-14 08:08:48AngularJS에서 태그 요소에 바로 CSS 스타일을 추가하기 위한 방법으로 ngStyle 디렉티브를 사용할 수 있습니다.만약 아래와 같은 스타일을 다음과 같은 방법으로 추가하는 것이 가능합니다.$scope.myStyle = { color: #f00; font-size: 1.2em;}해당 스코프가 myStyle에 대하여 위와 같은 값을 가진 경우 아래와 같이 적용합니다.<span ng-style="myStyle">Webisfree.com</span>myStyle에 정의된 스타일이 해당 태그에 적용되어 아래와 같이 컴파일될 것입니다.<span ng-style="color: #f00;font-size: 1.2em;">Webisfree.com</span>이 방법은 태그가 복잡해지므로 가급적 ngClass를
Last Modified : 2017-08-11 01:40:58크로스 브라우징 과정에서 IE 8(익스플로어 8) 이하의 브라우저는 li 태그의 레이아웃에 문제가 발생합니다. 왼쪽으로 쏠리고 list-style역시 보이지 않는데요... 자동으로 왼쪽 여백값이 지정이 되지 않기 때문입니다. 이를 수정하기 위해서는 간단하게 IE 8에 사용가능한 핵을 쓰면 간단하게 해결될 수 있습니다.(참고로, 리스트 스타일은 좌측에 작은 무늬를 말하며 여러가지가 선택가능합니다.) Example <ul type="square"> <li>text</li></ul>// IE 8 이슈를 수정하기 위해 아래의 코드를 추가합니다.<style>ul li {*margin-left: 48px;}</style>/* 리스트 스타일에서 선택가능한 옵션은 아래와 같습니다. */ul li { list-style-
Last Modified : 2015-11-15 12:44:19