코딩팩토리

최신 글

더보기

[HTML/CSS] 텍스트 들여쓰기 / 내어쓰기 (text-indent)

텍스트가 많은 문서일 때는 문단의 첫 글자를 들여쓰게 되면 문단의 시작이 눈에 확 들어오기 때문에 가독성이 향상됩니다. 이번 포스팅에서는 웹 문서에서 문단을 들여 쓸거나 내어쓸 수 있는 text-indent 속성에 대해 알아보도록 하겠습니다. 텍스트 들여쓰기 See the Pen 텍스트 들여쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 양수의 크기나 백분율을 넣으면 해당 값만큼 들여쓰기를 할 수 있습니다. 백분율로 크기를 설정하였을 경우에는 부모 요소의 너비가 달라지면 들여쓰기 값도 달라집니다. 텍스트 내어쓰기 See the Pen 텍스트 내어쓰기 by wjdxo513 (@wjdxo513) on CodePen. text-indent 속성에 음수의 크기나..

더 읽기

[HTML/CSS] 텍스트 정렬하기 (text-align) 왼쪽, 가운데, 오른쪽 정렬

html 태그에서 텍스트 관련 속성 중에서 가장 많이 사용하는 속성 중에 하나가 바로 이번 포스팅에서 서술할 (text-align) 속성일 것입니다. 이번 포스팅에서는 text-align 속성을 사용하여 텍스트를 좌측, 중앙, 우측 정렬을 하는 방법에 대해 알아보도록 하겠습니다. 텍스트 정렬하기 left : 왼쪽 정렬 right: 오른쪽 정렬 center : 가운데 정렬 justify : 양쪽 정렬 start : 현재 텍스트 줄의 시작 위치에 맞추어 문단 정렬 end : 현재 텍스트 줄의 끝 위치에 맞추어 문단 정렬 match-partent : 부모 요소에 따라 문단 정렬 왼쪽 정렬 See the Pen 왼쪽 정렬 by wjdxo513 (@wjdxo513) on CodePen. text-align 속성에..

더 읽기

[HTML/CSS] font 속성 - 글꼴 속성을 한꺼번에 지정하기

font 속성 - 간략하게 요약하여 표현하기 [HTML/CSS] 글자색 변경하기 (font-color) [HTML/CSS] 글자 굵기 변경하기 (font-weight) [HTML/CSS] 글자 이탤릭체, 밑줄, 취소선 변경하기 [HTML/CSS] 대/소문자 변경하기 (text-transform) [HTML/CSS] 작은 대문자로 표시하기 (font-variant) [HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) [HTML/CSS] 구글 웹 폰트 사용하기 (@font-face) 앞에서 포스팅 했던 위의 소스들을 여러개 적용하기 위해서 글꼴 스타일을 하나하나 코딩하려고 하면 소스가 너무 지저분해질 것입니다. See the Pen Untitled by wjdxo513 (@wjdxo513..

더 읽기

[HTML/CSS] 구글 웹 폰트 사용하기 (@font-face)

[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family) 이전 포스팅에서는 웹 문서에서 시스템 폰트를 사용하는 방법에 대해 알아보았습니다. 시스템 폰트는 속도가 빠르다는 장점이 있지만 사용자 디바이스에 설치가 되어있어야 하기에 다양한 폰트는 사용하기가 힘듭니다. 또한 설정한 시스템 폰트가 존재하지 않는다면 적용되지 않는 문제도 있죠. 하지만 웹 폰트를 사용하면 모든 디바이스에 예쁜 디자인의 폰트를 적용시킬 수 있습니다. 이번 포스팅에서는 구글 웹 폰트를 사용하는 방법에 대해 알아보도록 하겠습니다. 웹 폰트(Web Font)란? 온라인 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 웹 전용 폰트를 말합니다. 이렇게 한다면 방문자의 디바이스에 특정 폰트의 설치 여부와 상관없이 동..

더 읽기

[HTML/CSS] 글자 글꼴(폰트) 변경하기 (font-family)

문장의 가독성에 영향을 끼치는 요소가 무엇이냐고 물어본다면 저는 가장 먼저 글꼴이라고 말할 수 있을 정도로 텍스트 가독성에 있어 글꼴은 매우 중요한 요소입니다. 웹 문서에서 글꼴(폰트)은 font-family 속성을 통해 바꿀 수 있습니다. font-family는 말 그대로 폰트들의 집합, 즉 여러 개의 글꼴을 한 군데 모아둔 것으로 생각하시면 됩니다. 이번 포스팅에서는 웹 문서에서 웹 문서의 글꼴을 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 글꼴(폰트) 변경하기 font family와 generic family font family : 특정 글꼴 (arial, courier, 나눔고딕, 궁서, 굴림 등) generic family : 비슷한 모양을 가지는 글꼴의 집합 (serif, sans-se..

더 읽기

[HTML/CSS] 작은 대문자로 표시하기 (font-variant)

웹문서의 영문자 글꼴에서는 '작은 대문자'라는 설정도 할 수 있습니다. 여기서 작은 대문자란 대문자를 소문자 크기에 맞추어 작게 표시한 것인데요. font-variant 속성으로 지정할 수 있습니다. 작은 대문자로 표시하기 See the Pen 작은 대문자로 표시하기1 by wjdxo513 (@wjdxo513) on CodePen. font-variant 속성 값 normal : 기본 값 small-caps : 작은 대문자로 표시하기 font-variant 속성에 small-caps 값을 사용하면 위와 같이 작은 대문자로 표시됩니다. 한글(영어) 형태로 문장을 기술할 때 사용해주면 좋습니다. CSS 처리 See the Pen 작은 대문자로 표시하기2 by wjdxo513 (@wjdxo513) on Cod..

더 읽기

[HTML/CSS] 대/소문자 변경하기 (text-transform)

영문자의 대/소문자를 일괄적으로 변경해야 할 경우에는 CSS의 text-transform 속성을 이용하시면 됩니다. 이번 포스팅에서는 텍스트의 대/소문자를 변형하는 text-transform 속성에 대해 알아보도록 하겠습니다. 문장 대/소문자 변경하기 See the Pen 대/소문자 변경하기1 by wjdxo513 (@wjdxo513) on CodePen. text-trasnform 속성 값 none : 기본값 capitalize : 문장의 첫글자만 대문자로 변형 uppercase : 문장 대문자로 변형 lowercase : 문장 소문자로 변형 ※ HTML 태그는 , , , , , 등 텍스트를 쓸 수 있는 태그면 아무거나 됩니다. CSS 처리 See the Pen 대/소문자 변경하기2 by wjdxo51..

더 읽기

[HTML/CSS] 글자 이탤릭체, 밑줄, 취소선(font-style, text-decoration) 텍스트 스타일 변경하기

웹 문서를 만들다 보면 이탤릭체, 밑줄, 취소선등을 통해 텍스트 스타일을 바꿔주고 싶을 때가 있습니다. 이렇게 문장 일부분의 스타일을 바꿔주면 다른 문장과 대비되어 강조되는 효과를 줄 수 있는데요. 글자 기울기는 font-style로 설정할 수 있고 밑줄과 취소선은 text-decoration 속성을 통해 설정할 수 있습니다. 이번 포스팅에서는 텍스트 스타일을 바꿔주는 방법에 대해 알아보도록 하겠습니다. 이탤릭체 사용하기 See the Pen 이탤릭체1 by wjdxo513 (@wjdxo513) on CodePen. style 속성 값 normal : 기본값 italic : 이탤릭체 글꼴로 디자인된 폰트 사용 oblique : normal 상태 글씨를 그냥 기울여 씀 initial : 이 속성의 기본값 ..

더 읽기

[HTML/CSS] 글자 굵기 변경하기 (font-weight)

웹 문서를 만들다보면 CSS로 글자를 굵게 만들어야 할 경우가 생길 수 있겠죠? 이번 포스팅에서는 CSS로 텍스트를 굵기를 변경하는 방법에 대해 알아보도록 하겠습니다. 글자 굵게 만들기 font-weight 종류 See the Pen 글자 굵게 by wjdxo513 (@wjdxo513) on CodePen. font-weight 속성 값 font-weight : normal; = 보통 굵기로 설정합니다. (숫자 400과 같은 값입니다) font-weight : bold; = 굵은 굵기로 설정합니다. (숫자 700과 같은 값입니다) font-weight : bolder; = 상속된 값보다 굵은 굵기입니다. font-weight : lighter; = 상속된 값보다 얇은 굵기입니다. font-weight :..

더 읽기

[HTML/CSS] 글자색 변경하기 (font-color)

개발을 하다 보면 웹 문서에서 글자 색상을 바꾸고 싶은 경우가 종종 있을 수 있습니다. 예를 들자면 문장의 중요한 내용의 글자색을 적절히 조절하여 강조를 할 수도 있겠죠. 아마 조금 더 가독성이 있는 웹 문서를 만들 수 있을 것입니다. 이번 포스팅에서는 웹 문서에서 글자 색상을 변경하는 방법에 대해 알아보도록 하겠습니다. ※ 컴퓨터에서 색을 표현하는 방식 RGB 색상에 대하여 컴퓨터에서 색상은 빛의 삼원색인 빨강(red), 초록(green), 파랑(blue)의 3가지 색의 조합으로 표현합니다. 위의 3가지 색상을 섞으면 모든 색상을 다 사용할 수 있지요. 이러한 방식을 빨강(red), 초록(green), 파랑(blue) 3가지 색상의 앞글자를 따서 RGB라고도 합니다. 형태는 RGB(빨강값, 초록값, 파..

더 읽기

제품 리뷰

더보기

[내돈내산] 애플 에어팟 맥스(스페이스 그레이) 구매 및 사용 후기

애플의 제품이 품질이 좋기는 하지만 비싼 가격 대비 가성비가 좋다고는 생각이 들지 않습니다. 저에게는 애플의 제품들은 사고는 싶으나 가격이 만만치 않아 막상 구매하기에는 부담스러운 포지션의 브랜드입니다. 애플의 제품을 좋아하시는 분들도 아이폰, 에어팟까지는 필수적으로 구매를 하시지만 애플 워치나, 에어팟 맥스와 같이 있으면 좋고 없으면 마는(?) 그런 제품들은 잘 구매하시지 않으시죠. 하지만 비싼 제품이라도 누군가에게는 굉장히 유용하게 사용될 제품이 될 수 있을 겁니다. 저에게는 음악을 좋아하는 친구가 있습니다. 애플 광팬이었던 그 친구는 애플스토어에서 한번 들어보고 완전히 아이팟 맥스에 매료되어 버렸습니다. 하지만 역시 비싼 가격에 무척 망설이던 것처럼 보였습니다. 하긴.. 애플 제품들이 워낙 고가라 ..

더 읽기

[내돈내산] 갤럭시 워치 스트랩 추천 (신지모루 실리콘 밴드 스트랩)

이번 포스팅에서는 얼마 전 구입 한 갤럭시 워치 스트랩에 대해서 리뷰를 해볼까 합니다. 기존에 저는 기본 워치 스트랩을 약 1년가량 사용하고 있었는데 저렴한 가격에 새로운 스트랩을 갈아 끼워서 사용하니 마치 새것을 산 듯하네요. 제가 구입한 갤럭시 워치 스트랩은 신지모루 실리콘 밴드 스트랩으로 갤럭시 워치 5와 4 모두 호환이 가능한 제품입니다. 실리콘 특유의 쫀득한 느낌과 워치 기본 스트랩과는 다르게 끝 부분이 라운딩 처리가 되어 있어 조금 더 부드러워 보이는 것이 특징입니다. ※ 갤럭시 워치 신지모루 실리콘 밴드 스트랩은 아래 링크에서 쿠팡 최저가로 구매하실 수 있습니다. 신지모루 실리콘 밴드 스트랩 색상 신지모루 실리콘 밴드의 색상은 위와 같습니다. 차례로 다크 그린, 네이비, 라벤더, 라이트 그레..

더 읽기

[내돈내산] 필립스 소닉케어 다이아몬드클린 9000 사용 후기(전동칫솔 추천)

저는 치아가 안 좋은 유전력을 가지고 있어 평소 치아건강에 관심이 많은데 유튜브 등 다양한 채널에서 일반 칫솔로 양치질을 하는 것보다는 전동칫솔로 양치를 하는 것이 더 양치가 깔끔하게 된다는 사실을 듣고 전동칫솔을 구매해봤습니다. 분당 수만 번의 진동을 한다고 하는데 확실히 손으로 구석진 곳을 닦아내는 것보다는 그 위치에 가져다 대고 진동으로 플라그를 제거하는 것이 훨씬 양치가 깔끔하게 되는 것은 맞는 것 같습니다. 제가 구매한 전동칫솔은 필립스 소닉케어 다이아몬드클린 9000으로 필립스 전동칫솔 중 가장 성능이 좋은 상위 라인이고 앱을 통해 내 양치 상태를 체크할 수 있다는 장점이 있습니다. ※ 필립스 소닉케어 다이아몬드 클린 9000은 아래 링크에서 쿠팡 최저가로 구매하실 수 있습니다. 필립스 소닉케..

더 읽기

[내돈내산] 필립스 SkinIQ 9000 사용 후기 (전기면도기 추천)

기존에 잘 사용하고 있던 전기면도기가 고장 난 뒤 쭉 날 면도기를 주로 사용하다가 턱을 크게 베여 다시 전기면도기를 구매했습니다. 최고급 기준으로 가격이 제법 나가는 친구라 정말 많이 알아보고 구매를 했는데요. 이번 포스팅에서는 제가 전기면도기를 선택하면서 고민했던 내용들과 어떤 제품을 선택했는지 정리하여 포스팅하려고 합니다. 전기면도기 3대장 1. 브라운 2. 필립스 3. 파나소닉 전자제품을 실패할 가능성을 줄이기 위해서는 사람들이 많이 사용하고 있는 제품을 사야 한다고 생각합니다. 알아보니 국내 전기면도기는 브라운, 필립스, 파나소닉 이렇게 3가지 브랜드가 과점하고 있었습니다. 어떤 브랜드를 선택할 것인가? 브랜드 / 비교 작동 방식 절삭력 안전성 디자인 브라운 전동식 2위 2위 2위 필립스 회전식 ..

더 읽기

[내돈내산] 자취방 가성비 무선 청소기 추천 (차이슨 아이닉 i20 Elite)

최근 이사와 함께 자취방을 깨끗하게 유지하기 위한 청소기를 구매하였습니다. 기존에는 다이소에서 판매하는 롤 클리너와 물티슈 그리고 이마트에서 구매한 8만 원짜리 간편 무선 청소기로 청소를 하고 있었는데요. 기존에 사용하던 청소기의 연식도 오래되어 잔고장이 많고 청소 속도도 느려서 새로 구매할 제품을 물색하고 있던 차 후기가 좋은 차이슨 아이닉 i20 Elite라는 제품을 구매하게 되었습니다. ※ 차이슨 아이닉 i20 Elite는 아래 링크에서 쿠팡 최저가로 구매하실 수 있습니다. 차이슨 아이닉 i20 Elite를 선택한 이유 허리가 아프지 않도록 충분한 길이를 갖추고 있는가? 흡입력이 좋은가? 가성비가 좋은가? 제품의 후기가 좋은가? 차이슨 아이닉 i20 Elite 사용 후기 저는 위의 4가지 옵션을 보..

더 읽기

[내돈내산] 애플 에어팟 3세대 구매 및 사용 후기

최근에 아이폰으로 전환하여 여러 가지 애플 액세서리들을 사고 있습니다. 요즘 필수품이라고 하는 무선 이어폰도 하나 구매를 하였는데요. 2022년 현시점 애플 무선 이어폰을 구매할 수 있는 선택지는 3가지가 있습니다. 에어팟 2세대, 3세대, 그리고 에어팟 프로입니다. 아래 링크되어 있는 애플 스토어에 들어가 보시면 자세한 사항을 확인하실 수 있습니다. https://www.apple.com/kr/ 위의 이미지는 애플 공식 스토어에서 캡처 한 이미지입니다. 보시는 바와 같이 에어팟 2세대와 3세대 그리고 에어팟 프로로 올라갈수록 약 8만 원 정도의 가격 차이가 발생합니다. 이 3가지 제품 중에서 저는 에어팟 3세대를 구매하였습니다. 2세대 보다는 좋은 제품을 구매하고 싶었고 에어팟 프로는 커널형 구조여서 ..

더 읽기

[내돈내산] 애플워치 SE 40mm 구매 및 사용 후기

아이폰으로 최근 전환하여 애플의 부속 제품들을 사고 있습니다. 그중 첫 번째로 포스팅할 제품은 애플 워치입니다. 2022년 현시점 애플 워치에는 3가지 선택 옵션이 있습니다. 애플 워치 7, 애플 워치 SE, 애플 워치 3가 그 대상입니다. 아래 링크되어 있는 애플 스토어에 들어가 보시면 자세한 사항을 확인하실 수 있습니다. https://www.apple.com/kr/ 보시는 바와 같이 애플 워치 7, 애플 워치 SE, 애플 워치 3의 가격차이가 10만 원씩 차이가 나고 있습니다. 가장 높은 등급의 애플 워치 7은 거의 50만 원에 육박하는 금액이네요. 결론적으로 말씀드리자면 제가 선택한 시계는 애플 워치 SE입니다. 이전에도 스마트 워치를 계속 사용하고 있었지만 제가 사용하는 기능들은 시간과, 날씨를..

더 읽기

[내돈내산] 삼성 정품 보조배터리 EB-U3300 사용 후기 (보조배터리 추천)

이번 갤럭시 워치 4 사전 구매 혜택으로 갤럭시 워치 액세서리 3만 원 할인 구매 혜택을 받았습니다. 구매가 가능한 물건은 아래 링크된 삼성전자 공식 홈페이지의 갤럭시 4 워치 액세서리의 품목들과 같았습니다. https://www.samsung.com/sec/mobile-accessories/all-mobile-accessories/?watch 위 사이트에 들어가서 보시면 아시겠지만 정말 구매할 물품이 딱히 없었는데요. 그렇다고 구매를 안하기에는 무료로 주는 3만 원 할인 쿠폰이 아까워서 그나마 가끔씩은 필요할듯한 삼성 정품 보조배터리를 구매해봤습니다. 뭔가 삼성의 상술에 계속 당하는 느낌입니다..;; 삼성 정품 보조배터리 라인업 비교 삼성은 생각보다 다양한 보조배터리 라인업을 가지고 있습니다. 저는 갤..

더 읽기

Copyright © 코딩팩토리 All Rights Reserved

Designed by JB FACTORY

티스토리툴바