본문 바로가기

전체 글349

border-collapse 이용하여 div 테두리 겹침 제거 border-collapse 속성은 표(table)의 테두리를 어떻게 보이게 할지를 결정하는 css 이다. div 3개를 연속으로 나란히 배치하려고 하였는데, 테두리 겹침 현상이 있어 border-collapse 속성을 이용하여 제거했다. 아래에 그 방법을 소개하려고 한다. 먼저 아래와 같이 box1 이라는 클래스명을 갖는 정사각형 div 세 개를 배치시키고, wrap_box1 이라는 클래스명의 div로 감싸주었다. 경계를 뚜렷하게 확인할 수 있도록 모든 div에 1px의 흰색 테두리를 설정했다. div 태그는 기본적으로 block 속성을 가지고 있기 때문에 아래와 같이 세로로 나란히 정렬된다. 정사각형 div 들을 가로로 정렬시키기 위해 display:inline-block; 속성을 사용하였다. (di.. 2020. 9. 18.
텍스트 관련 CSS 이번 포스팅에서는 글자 색상을 변경하거나 그림자 효과, 여백, 자간 등을 조정하는 css 속성에 대해 정리해 보려고 한다. 색상 지정하기 h1 {color: blue;} /* 색상 이름 사용 가능 */ h2 {color: rgb(0,180,0);} /* rgb값 사용 가능*/ p {color: #4e4e4e;} /* 16진수 사용 가능 */ 텍스트에 선 긋기 p {text-decoration: none;} /* 밑줄 없음 */ p {text-decoration: underline;} /* 밑줄 표시 */ p {text-decoration: overline;} /* 영역 위에 선 있음 */ p {text-decoration: line-through;} /* 취소선 있음 */ text-decoration:n.. 2020. 9. 12.
맥북(macOS)에서 기본 앱으로 사진 사이즈 일괄 변경하기 블로그를 운영하다 보면 사진 사이즈를 변경해야 할 때가 있다. 나는 미러리스, DSLR를 이용하여 포스팅 사진을 촬영하는데 컴퓨터로 옮긴 후에 용량 관리를 위해 사이즈를 줄여서 사용하고 있다. 윈도우 pc 에서 맥북으로 갈아타고 난 뒤 한동안 사진 편집이 익숙하지 않아 헤매곤 했는데 이젠 제법 능숙해졌다. 나는 간단한 작업들은 되도록이면 새로운 앱을 설치하지 않고 기본 프로그램을 사용해서 해결하려고 하는 편이라 이번 포스팅에서는 macOS의 기본 프로그램인 preview.app을 이용하여 사진 사이즈를 한꺼번에 일괄 변경하는 방법에 대해서 소개하려고 한다. 캐논 200D로 촬영한 사진들을 포스팅을 위해 맥북으로 이동시켰다. (캐논 200D 카메라는 별도 케이블 연결 없이 pc로 간편하게 사진 전송이 가능.. 2020. 9. 12.
ios / android 앱 아이콘 사이즈 한번에 조절하기 회사의 앱 아이콘 디자인을 변경하려고 하는데, ios와 안드로이드에서 요구하는 사이즈에 맞추어 일일이 변경해주어야 하는 작업이 너무 번거롭게 느껴졌다. 그러던 중에 자동으로 앱 아이콘 사이즈를 변경해주는 사이트를 알게 되어 순식간에 해결 되었다. (감동하는 중) appiconmaker.co/ App Icon Maker - Resize App Icon to all sizes for iOS/Android projects. App Icon Maker / App Icon Resizer AppIconMaker.co is a cloud service free icon maker which optimizes your app icon with proficient speed and generates icons of al.. 2020. 9. 11.
폰트 관련 CSS CSS 공부를 시작하며 이미 알고 있는 것도 있고, 예전에는 알았지만 잊어버린 것도 있고, 새롭게 알게 된 것도 있고 해서 글꼴 관련 스타일 시트를 정리해두고자 한다. 폰트 종류 지정하기 body {font-family: "맑은 고딕", 돋움, 굴림} /* 첫번째 글꼴이 없다면 다음 글꼴로 차례대로 넘어가며 적용 */ /* 글꼴이 두 단어 이상이라면 큰 따옴표로 묶어서 표시 */ 웹 폰트 사용하기 구글 폰트 (아래 링크) 페이지에 들어가서 link 항목을 복사하여 웹 폰트를 적용할 수 있다. fonts.google.com/earlyaccess Google Fonts Making the web more beautiful, fast, and open through great typography fonts.g.. 2020. 9. 11.
티스토리 북클럽(bookclub) 스킨 포스트 타이틀 수정하기 - mobile 얼마 전 티스토리 북클럽(book club) 스킨의 포스트 타이틀 영역을 수정했었는데 모바일 체크하는 것을 깜박했다 OTL 방금 아무 생각없이 핸드폰을 하다가 티스토리에 들어왔는데 큼지막한 텍스트를 보고 당황해서 =_= 곧바로 타이틀을 아래와 같이 변경했다. pc 스킨 편집 정보를 공유했으니, 당연히 mobile 스킨 편집도 세트로~ 근데 너무 간단해서 특별히 설명할 게 없다. 일단 경로는 "관리자 > 꾸미기 > 스킨편집 > html 편집 > css 탭"으로 이동한다. 그 다음 2933번째 줄 font-weight: 300;에서 숫자를 조정하여 두께를 변경해주고 (숫자가 높을 수록 두꺼워짐) 그 아래 font-size: 1.625em;을 추가하여 글씨 크기를 변경해주면 된다. 글씨 크기도 숫자가 높을수록.. 2020. 9. 4.
티스토리 북클럽(bookclub) 스킨 포스트 타이틀 수정하기 - pc 티스토리 북클럽 스킨 첫페이지의 섬네일을 수정하고 만족스럽게 포스트를 클릭했는데, 포스트 부분의 타이틀 세로 사이즈가 너무 크고 가독성도 떨어져 보여서 마음에 들지 않았다. 그래서 뚝딱뚝딱 스킨 편집을 해서 아래와 같이 수정했다. (원래 모습은 캡처를 해두지 않아서 없...) 이 블로그 글의 여백과 폰트 사이즈가 마음에 든다면 이 포스팅을 보고 똑같이 따라하면 된다. 따라서 수정하다 보면 본인의 취향에 맞게 조금씩 변경도 가능할 것이다. 먼저 경로는 "관리자 > 꾸미기 > 스킨편집" 이다. 우측의 html 편집 버튼을 클릭하여 html, css를 수정할 수 있는 창을 띄운다. html 탭에서는 건드릴 부분이 없다. 바로 css 탭으로 이동! 아, 본격 타이틀 수정 전에... 미리보기 창을 이용해서 변경된.. 2020. 9. 4.
티스토리 북클럽(bookclub) 스킨 섬네일 수정하기 티스토리를 다시 운영하기로 하고 가장 먼저 한 것은 스킨 변경이었다. 원래 새로운 기분 내는 데에는 옷 바꿔 입는게 최고다. 카테고리가 숨어있지 않고 계속 보여지길 원했고, 되도록이면 군더더기 없이 심플하고 새하얀 느낌이었으면 했다. 다행히도 내가 원하는 조건들을 충족시키는 스킨이 제공되고 있어 선택하기 쉬웠다. 티스토리에서는 여러가지 레이아웃의 스킨을 제공하고 있어 직접 소스를 수정하지 못하는 사람들도 반응형 블로그를 손쉽게 운영할 수 있다. html, css를 이용한 편집 기능도 제공하기 때문에 공부를 통해 내 입맛에 맞게 디자인을 변경하여 사용할 수 있다는 점도 티스토리의 매력 중의 하나이다. 나는 티스토리 스킨 중에 북 클럽(book club) 스킨이 마음에 들었다. 북리뷰 스킨을 선택한 후에 ".. 2020. 9. 4.
CSS 여백 margin(마진) 속성 이해하기 margin 이란 정의된 테두리 요소 주위에 여백을 만들어 준다. 추가 TIP ) margin 과 padding 의 차이점 : padding은 공간 내부에서 형성, margin은 공간은 그대로 유지한 채 외부 공간을 확보하는 개념이다. padding은 안쪽 여백, margin은 바깥쪽 여백이라고 이해하면 된다. 테두리(border)를 경계로 나뉜다. margin 속성 margin-top : 상단 여백 margin-right : 오른쪽 여백 margin-bottom : 하단 여백 margin-left : 왼쪽 여백 - auto : 브라우저가 여백을 직접 계산한다 - pt, px, cm 등으로 길이 여백을 지정하거나 %를 사용하여 비율 여백을 지정할 수 있다. - inherit 속성값은 여백이 상위 요소에서.. 2020. 8. 29.
티스토리 RE-START 2017년에 호기심으로 처음 개설한 티스토리. 가끔 들어와서 글을 쓰긴 했지만 네이버에서 뷰티 블로그를 나름 재미있게 운영하고 있었던지라 우선순위에서 한참 밀려 있었다. 그러다가 얼마 전부터 개발 공부한 내용을 기록해 둘 곳이 필요해져서 자바 스크립트 강의 내용을 조금씩 올리고 있었는데, 티스토리에 글을 올리며 여기저기 살펴 보니 네이버 블로그와는 또 다른 매력이 있었다. html, css 소스를 이용해서 스킨도 자유롭게 편집할 수 있고. (물론 많은 공부가 필요하겠지만) 그래서 본격적으로 티스토리를 다시 시작해 보기로 했다. 티스토리 이름도 새로 짓고, 컨셉이나 주제도 정하고... 티스토리를 운영하며 알게 되는 팁이나 노하우 들도 공유해 보려고 한다. 지금 남기는 이 포스팅은 지치지 말고 열심히 해보자.. 2020. 8. 29.

티스토리툴바