CATEGORIES
css를 사용하여 백그라운드 위치를 조정하는 방법에 대하여 알아봅니다.# CSS의 background-position으로 백그라운드 위치 조정하기백그라운드 위치는 background-position이라는 css 속성을 사용해 위치 조정이 가능합니다. 간단한 문법은 아래와 같습니다.background-position: 좌우값 상하값;설정하는 값의 단위는 px 또는 % 등을 사용할 수 있습니다. 그리고 left top bottom right center처럼 리터럴로 입력할 수도 있습니다.background-position: 0 0;background-position: 10px 50px;background-position: 50% 50%;background-position: center center;backgro
Last Modified : 2019-08-21 11:55:07
이미지 태그를 사용하지 않고 백그라운드를 사용한 이미지의 경우 이미지 경로를 확인하려면 아래의 함수를 사용해 불러올 수가 있습니다. 그 외에도 다른 속성들 예를 들어 display나 margin등의 속성이 가진 값을 확인할 때도 아래 함수를 사용해 어떤 값이 지정되었는지 알 수 있습니다.# 자바스크립트를 사용하여 백그라운드 정보, url 등을 불러오는 방법아래 함수는 적용된 백그라운드의 다양한 정보를 불러옵니다. window.getComputedStyle(해당 엘리먼트)적용된 엘리먼트는 아래의 함수를 사용하여 브라우저에 적용된 모든 CSS 스타일을 불러올 수 있습니다. 아래의 함수를 사용해야 원하는 스타일을 가져올 수 있죠.getPropertyValue(가져올 스타일 속성) 이제 해당요소에 적용된 특정 스타
Last Modified : 2017-11-19 07:17:10CSS를 사용하여 배경 이미지와 다른 이미지 또는 배경색을 하나로 섞어 표현할 수 있는 방법을 알아봅니다.# CSS background-blend-mode 알아보기CSS의 background-blend-mode를 사용하면 구현이 가능합니다.background-blend-mode: multiply;간단하게 설명하면 이미지와 배경색을 함께 사용할 경우 투명 효과를 가진 이미지 파일처럼 앞 뒤의 이미지가 함께 나타날 수 있습니다. 간단한 예제는 아래를 참고해주세요.! CSS background-blend-mode 예제소스 보기아래는 간단한 예제입니다.<div class="test"></div>아래와 같이 css를 적용해봅니다..test { background-color: #f00; background-imag
Last Modified : 2019-08-18 15:39:09
웹사이트를 퍼블리싱 하면서 이미지 태그를 사용하는 것과 백그라운드로 사용하는 것중 어떤 방법이 더 나을지 고민하게 됩니다... 어떤 경우에 어떤 방법을 사용하는게 더 효과적인지 알아보도록 하겠습니다.# img 태그의 사용하는게 좋은 경우1. 프린트가 필요한 경우; 백그라운드 이미지는 출력시 포함되지 않습니다.2. 이미지에 문구가 사용되어 의미를 가지는 경우; 이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있습니다. 백그라운드 이미지는 alt 태그가 없습니다.3. 이미지가 콘텐츠의 중심으로 가장 중요한 경우# 백그라운드 이미지를 사용하는게 좋은 경우1. 일정부분만 선택해 보여줄 경우(예 - 호버 버튼); 간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경
Last Modified : 2016-05-02 13:42:30크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다.자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이 있기 때문이다. 이를 제거하기 위해 아래의 방법을 사용해야 한다.# input 입력폼의 자동완성 백그라운드 제거 방법input:-webkit-autofill { -webkit-box-shad
Last Modified : 2015-12-11 13:22:57크로스 브라우징 작업을 하던중에 Firefox에서 background-position값 중 일부가 적용이 안되는 부분을 발견했습니다. Chrome(크롬)에서는 잘 되던 속성인데 말입니다... 알아보니 이 속성은 표준 CSS 속성이 아니더군요. 그래서 Opera와 Firefox에서는 바꾸어 사용해야합니다.* background 관련 파이어폭스 사용가능 속성1. background: .... ( O )2. background-position: .... ( O )3. background-position-x: .... ( X )4. background-position-y: .... ( X )결론부터 얘기하자면 FireFox에서 적용되기 위해 background-position-x와 background-positio
Last Modified : 2015-11-03 18:47:20제이쿼리에서 이미지값을 가지고 있는 요소의 속성값을 읽어온 뒤 이를 배경이미지로 넣어서 보여주기 위한 코드를 작성하였습니다. 하지만 실행해보니 정상 동작을 하지 않는 경우 확인할 부분이 어디에 있는지 알아보겠습니다.# css('background-image') 예제소스 코드아래코드는 li 태그에 있는 속성값 data-imgname의 값을 불러온 뒤 이를 해당 태그 안에 있는 thumbImg 클래스명안에 백그라운드 형태로 넣어 출력하는 방법입니다.* HTML 코드<body> <li data-imgname="test.jpg"> <div class="thumbImg"></div> </li></body>* 스크립트 코드// 이미지 배경으로 삽입하기thumbEles = $('li[data-imgnam
Last Modified : 2015-11-26 15:37:50웹워커(Web Worker)는 백그라운드에서 작업을 실행하여 사용자에게 무거운 프로세스 동작시 멈추는 듯한 현상을 나타나지 않도록 도와줍니다. 이런 웹워커 환경은 비교적 제한적입니다. 특히 메인화면의 Scope 및 DOM이 별개입니다. 즉 여기서의 this는 window객체가 아닌 Worker 객체를 가르키게 됩니다.# 웹워커를 사용하는 곳은?모든 작업이 백그라운드에서 작업될 필요는 없습니다. 아래의 작업들이 워커를 통해 가능합니다.화면 인터페이스에 영향이 없는 경우시간이 많이 걸리는 작업의 처리이미지와 관련된 처리복잡한 암호화 처리간단한 Worker를 사용하는 코드입니다. 아래의 코드를 봐주세요.1) 웹워커 실행하기 예제소스var myWorker = new Worker('파일이름'); // 실행할 파일이름
Last Modified : 2017-04-05 00:02:33
VueJS에서 태그 및 컴포넌트 요소에 backgroundImage 인라인 스타일을 사용하여 백그라운드 이미지를 추가하는 방법입니다.# VueJS 요소 및 컴포넌트에 백그라운드 이미지 적용하기만약 변수 bgImg이 다음과 같은 값을 가지는 경우라면...this.bgImg = "https://webisfree.com/imgs/main_bg.jpg";이 값을 아래의 태그 요소에 백그라운드 이미지로 적용해보겠습니다. 이때 인라인 스타일 방식을 사용하였습니다. <div class="sidebar__bg" v-bind:style="{ backgroundImage: 'url(' + this.bgImg + ')' }"></div>이제 div태그에는 백그라운드 이미지가 적용되었습니다. 이 외에 필용한 스타일(
Last Modified : 2020-03-12 12:44:52