Simple Is Best

안녕하세요~ 데이터미널입니다. 이번 포스팅에서는 아이콘 삽입 에 대해서 공부해 보겠습니다. 웹사이트에서 이런 아이콘을 추가하려면 어떻게 해야 할까요? 아이콘에 대한 학습을 하지 않았던 저는 처음 떠올린 방법은 태그 삽입이었습니다. 물론 포토샵으로 이미지를 직접 제작하거나 잘 만들어진 이미지를 다운받아서 img 태그를 사용해도 무방합니다. 이 과정은 매우 귀찮은데 꽤 쓸법한 라이브러리를 소개할까 합니다. font-awesome https://fontawesome.com/ Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawe..

안녕하세요 데이터미널입니다. 본 포스팅에서는 [반응형 레이아웃]에 대해서 알아보겠습니다. 이전까지는 width 및 height 를 px 단위가 아닌 %(상위 요소에서 몇 %?) 로 설정하는 것으로 대충 얼버무렸었는데요. 오늘! 드디어 반응형 레이아웃에 필요한 지식들을 정리해보도록 하겠습니다. 우선, 반응형 레이아웃을 만들려면 HTML 파일 [CSS] .div { box-sizing: border-box; } body { margin: 0px; } .mybox-container { max-width: 1200px; } .mybox { width: 22%; max-width: 200px; height: 100px; background-color: red; margin: 10px; float: left; } ..

▶ width=device-width : 모바일 기기의 실제 폭으로 렌더링 ▶ initial-scale=1.0 : 접속시의 화면 줌레벨 설정

이전 포스팅에서는 레이아웃 배치 2가지 방법에 대해 학습했었습니다. 1. float : left; 2. display : inline - block; 본 포스팅에서는 레이아웃 배치를 굉장히 쉽게 쓸 수 있게 해주는 flexbox에 대해서 학습하겠습니다. 우선 flex를 사용하기 위한 기본 구조부터 알아보겠습니다. flex를 사용하기 위한 구조 1. flex-box들을 모두 감싸는 flex-container의 클래스명을 가진 div 태그 2. flex-box : flex-box는 어떤 태그로 선언하던 간에 display : block 속성을 가지고 있기 때문에 기본적으로 한 행을 전부 차지(회색 박스) 따라서, 겉으로 보기에는 박스들이 세로로 배치되는 것처럼 보입니다. 이를 코드로 표현하면 다음과 같습니다..

이번 포스팅에서는 제작하는 문서 내에서 다양한 글씨체(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..

보호되어 있는 글입니다.

안녕하세요 이번 포스팅에서는 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. 가운데 정렬이 ..