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

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

이미지를 둘러싸는 Div가 이미지에 맞게 크기가 조정되도록 하고자 하는 경우에 사용할 수 있습니다.  이처럼 외부의 div가 안쪽의 이미지에 맞게 둘러싸도록 하려면 display: inline-block을 text-align: center를 함께 사용해야 합니다. 다음과 같은 코드를 사용할 수 있습니다. HTML 코드: <div class="imageContainer"> <div> <img src=".." />...
[안드로이드 앱] SQL 배우기 – Learn SQL

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

구글 플레이 스토어에서 우연히 괜찮은 앱을 하나 발견했습니다. Learn SQL이라는 앱인데요, SQL에 대한 기본적인 내용을 배우기에 좋은 것 같습니다. SQL에 대한 책을 여러 권 구입했지만 시간이 없다는 핑계로 잘 안 보게 되더군요. 스마트폰에 이 어플을 깔아놓으니까 시간이 될 때 하나씩 보게되어 잘만 활용하면 유용하리라 생각됩니다. Learn SQL뿐만 아니라 Learn Python, Learn Java, Learn CSS 등 다양한 앱이 있네요. CSS를 배우고 싶을...
[워드프레스] CSS를 사용하여 로그인 사용자에게만 특정 요소 표시하기

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

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

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

가끔 CSS를 사용하여 가로 혹은 세로로 가운데 정렬을 해야 하는 경우가 있습니다. 가운데 정렬이 잘 안 되는 경우에 참조할 수 있는 사이트입니다. Centering in CSS: A Complete Guide (CSS로 가운데 정렬시키기: 완벽 가이드) 링크된 사이트에서는 다양한 상황에서 가로(수평), 세로(수직), 가로와 세로(수평 및 수직)로 가운데 정렬시키는 방법을 설명합니다. 잘 안 되는 경우 각 시나리오별로 제시하는 방법을 적용해보면 잘 될 수 있습니다. 가령...
워드프레스에 CSS를 적용하는 방법[기초]

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

들어가며 이 글에서는 워드프레스에서 포스트 제목의 글자 크기와 색상을 변경하는 것을 예를 들어서 워드프레스에 CSS를 적용하는 방법을 살펴보겠습니다. 먼저 고려할 사항은 사용자 CSS를 어떤 방법으로 추가할 것인가 입니다. 프로그램에 대한 지식이 많은 분도 크롬에서 요소 검사를 한 다음 해당 CSS  파일을 찾아서 직접 수정하는 경우를 간혹 목격하게 됩니다. 이렇게 테마 혹은 플러그인의 CSS 파일에서 직접 코드를 수정하는 것은 좋은 방법이 아닙니다. 왜냐하면 테마나...
[CSS] 요소의 너비를 컨텐츠 너비에 맞추는 방법

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

예를 들어 div 태그로 둘러싸인 코드가 있다면 보통 width를 사용하여 너비(폭)를 지정해줄 수 있습니다(예: width: 30%;). 하지만 경우에 따라 div(꼭 div가 아니더라도 상관 없음)로 둘러싸인 컨텐츠의 길이에 맞게 너비를 지정하고 싶은 경우가 발생할 수 있습니다. 예를 들어, 다음과 같은 HTML의 경우: <div class="category-list">기본</div> “기본”이라는 글자를 블록 처리해주고 싶으면...
12345...