""의 검색 결과

워드프레스에 CSS를 적용하는 방법[기초]

워드프레스에 CSS를 적용하는 방법[기초] 1

기본적인 CSS를 알면 워드프레스 테마 옵션이나 페이지 빌더에서 특정 요소의 컬러나 너비 등을 조정하는 옵션을 제공하지 않아도 수월하게 원하는 대로 스타일을 변경할 수 있습니다. 이 글에서는 워드프레스에서 포스트 제목의 글자 크기와 색상을 변경하는 것을 예를 ...

더 읽기

[CSS] div를 이미지 크기에 맞게 둘러싸기

[CSS] div를 이미지 크기에 맞게 둘러싸기 2

이미지를 둘러싸는 Div가 이미지에 맞게 크기가 조정되도록 하고자 하는 경우에 사용할 수 있습니다.  이처럼 외부의 div가 안쪽의 이미지에 맞게 둘러싸도록 하려면 display: inline-block을 text-align: center를 함께 사용해야 합니다. 다음과 같은 코드를 사용할 수 있습니다. HTML 코드: ...

더 읽기

[안드로이드 앱] SQL 배우기 - Learn SQL

Learn SQL 앱

구글 플레이 스토어에서 우연히 괜찮은 앱을 하나 발견했습니다. Learn SQL이라는 앱인데요, SQL에 대한 기본적인 내용을 배우기에 좋은 것 같습니다. SQL에 대한 책을 여러 권 구입했지만 시간이 없다는 핑계로 잘 안 보게 되더군요. 스마트폰에 이 어플을 ...

더 읽기

[워드프레스] CSS를 사용하여 로그인 사용자에게만 특정 요소 표시하기

[워드프레스] CSS를 사용하여 로그인 사용자에게만 특정 요소 표시하기 3

로그인하지 않은 비로그인 사용자(게스트)에게는 특정 요소를 보이지 않고 로그인한 사용자에게만 표시하려는 경우 보통 is_user_logged_in() 함수를 사용하여 구현할 수 있습니다. 가령 다음과 같은 코드를 사용하면 로그인 사용자에게는 "안녕하세요? 회원님!"이, 게스트 사용자(비로그인 사용자)에게는 "안녕하세요? 손님!"이 출력됩니다. <?php if ...

더 읽기

CSS를 이용한 가운데 정렬 방법

CSS를 이용한 가운데 정렬 방법 4

가끔 CSS를 사용하여 가로 혹은 세로로 가운데 정렬을 해야 하는 경우가 있습니다. 가운데 정렬이 잘 안 되는 경우에 참조할 수 있는 사이트입니다. Centering in CSS: A Complete Guide (CSS로 가운데 정렬시키기: 완벽 가이드) CSS를 이용한 ...

더 읽기

[CSS] 요소의 너비를 컨텐츠 너비에 맞추는 방법

[CSS] 요소의 너비를 컨텐츠 너비에 맞추는 방법 5

예를 들어 div 태그로 둘러싸인 코드가 있다면 보통 width를 사용하여 너비(폭)를 지정해줄 수 있습니다(예: width: 30%;). 하지만 경우에 따라 div(꼭 div가 아니더라도 상관 없음)로 둘러싸인 컨텐츠의 길이에 맞게 너비를 지정하고 싶은 경우가 발생할 수 있습니다. CSS를 ...

더 읽기

CSS로 쉽게 말풍선을 추가하는 방법

말풍선 자동 생성 사이트

CSS를 사용하여 말풍선을 추가하는 방법이 인터넷에 많이 나와 있습니다. bbPress에서 Reply(답변)를 말풍선으로 대체하려고 여러 가지 코드를 적용했지만 레이아웃이 틀어지는 현상이 나타나네요. 그러다가 말풍선 코드를 쉽게 생성해주는 사이트를 발견했습니다. CSS로 쉽게 말풍선을 추가하는 방법 - 말풍선 ...

더 읽기

[CSS] HTML 테이블(표)을 사용하지 않고 테이블 만들기

플러그인 코드

개요 테이블을 만들려면 보통 드림위버 등에서 쉽게 표를 삽입하여 만들 수 있습니다. 하지만 HTML 테이블을 많이 사용하면 속도면에서 좋지 않은 영향을 미친다고 하네요. 그래서 CSS 테이블을 사용하는 것이 좋습니다(참고). 쉽게 응용할 수 있도록 CSS로 표를 ...

더 읽기

[CSS] DIV 경계 밖으로 배경색을 확장하는 방법

[CSS] DIV 경계 밖으로 배경색을 확장하는 방법 6

현재 DIV 요소의 좌우로 확장하여 배경색을 추가해야 하는 경우가 간혹 있습니다. 이런 경우 CSS로 해결이 가능합니다. 우선 다음과 같은 CSS 코드를 시도해보시기 바랍니다. ::before { background: #facf04; // 또는 background-color: #facf04; } 이 코드가 잘 ...

더 읽기

DIV 너비를 창에 맞게 확장시키는 방법(CSS/jQuery)

DIV 너비를 창에 맞게 확장시키는 방법(CSS/jQuery) 7

하위 DIV(Child DIV)를 페이지 너비에 맞게 확장시키는 방법에 대해 간략히 살펴봅니다. 예를 들어 다음과 같은 HTML 코드가 있을 때, <div class="container" style="width: 960px"> <div class="child_div" style="width: 100%; margin: 0 auto;"> 내용 </div> </div> 창 너비가 ...

더 읽기