Simple Is Best

[Anti-aliasing 현상] 해결방안 : 웹폰트를 다운 받아서 적용 시킨 태그의 transform : rotate() 를 적용한다. transform : rotate() : 태그들을 기울여 주는 속성이다. 약 0.02deg정도 기울여 주면 이런 현상이 사라진다.

이번 포스팅에서는 제작하는 문서 내에서 다양한 글씨체(font-family)를 사용하는 방법에 대해서 알아 보겠습니다. 나에게 맞춤 폰트(이하 커스텀 폰트)를 적용하는 방법은 크게 두가지가 있습니다. 1. 오픈소스로 열려있는 .ttf .woff .eot 등 확장자를 가진 파일 다운 받기 https://github.com/moonspam/NanumSquare moonspam/NanumSquare 나눔스퀘어 웹폰트 (NanumSquare Webfont). Contribute to moonspam/NanumSquare development by creating an account on GitHub. github.com ▷우선 이 링크에 들어가서 Download ZIP을 합니다. 다운을 받아보면 ● .ttf :..

이번 포스팅에서는 [Pseudo-class]에 대해서 알아보겠습니다. Pseudo-class .클래스명:예상동작{ } 개념을 나열하는 식이 아닌 실제로 만들어보면서 알아보겠습니다. 예제1. 버튼 색상 변경 버튼은 유저가 누르고 싶게 끔 만들어야 한다. 1. 원래의 버튼 상태입니다. 2. 버튼에 마우스 커서를 가져다 올렸을 때 색깔을 변하게 합니다. (hover) 3. 버튼에 마우스 커서를 클릭하고 손가락을 떼기 이전까지 색을 설정합니다. (active) 4. 손가락을 뗀 이후, 버튼의 색상 변경입니다. (focus) CSS .btn-style { padding: 20px; background-color: coral; color : white; border-radius: 5px; border:none; f..

table { border-collapse : collapse; border-radius : 10px; border-style : hidden; box-shadow : 0 0 0 1px black; } box-shadow라는 속성을 이용해 테두리를 가짜로 만들어내는 편법 box-shadow는 그림자 넣는 속성

보호되어 있는 글입니다.

안녕하세요 이번 포스팅에서는 HTML에서 Table을 만드는 방법에 대해서 알아보겠습니다. 1. 스타일링을 위해서는 table 태그를 div 태그로 감싸자 이러면 나중에 기능 개발 혹은 스타일링을 위해서 div 태그에 id 혹은 class를 부여하고 쉽게 접근이 가능합니다. 2. table 태그의 기본 골격 구조에 대해서 알아보자 table 태그의 기본 골격 구조 바나나 사과 메론 1 2 3 1 2 3 table = + 로 이뤄져 있습니다. ▶ thead : table에서 제목 혹은 column의 feature를 나타내는 글을 쓰기 위해서 사용합니다. ☞ 가로 행 : , 세로 열 : 로 표현합니다. (세로 열을 표현할 때 td도 가능하지만, thead에서는 th 사용 추천) ☞ 특징 1. 가운데 정렬이 ..

오늘의 포스팅은 User의 Input을 받아들이는 태그에 대해 진행하겠습니다. ● : form 태그는 제출용을 위해서 사용하며 action 속성을 갖는다. 제출하면 해당 주소에 정보를 전달해 처리한다. (JS때 자세히!) ● : 속성이 굉장히 다양합니다. 또한 input 태그는 닫는 태그가 존재하지 않습니다. input의 속성 1. type : 역할은 생각하시는 그대로 입니다. 2. placeholder : 아래의 사진과 같이 사용자가 입력할 요소에 대한 힌트를 주는 음영처리된 글자입니다. 3. value : 실제로 들어가 있는 값을 지정 할 수 있습니다. 4. name : 기능개발을 위해서 input의 이름을 지정할 수 있습니다. 참고 [CSS Selector] input의 type들을 선택하여 동일한..

보호되어 있는 글입니다.