날개를달다 IT 잡학다식 사전

배경색을 투명하게 만드는 방법에 대해 알아보자. See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.opacity단어 뜻마저 불투명인 대표적인 투명 관련 속성이다. 색이 들어가는 곳이라면 대부분 사용가능한걸로 알고 있다.특징은 opacity속성을 지정하면 하위 속성들도 다 불투명해진다.rgba색상을 정의할때 투명도를 포함하여 색상을 정의해준다.말 그대로 색상을 투명하게 하기때문에 해당 색상만 불투명해진다.rgba는 rgb와 3가지 인자와 함께 a(alpha)값을 인자로 받는데 0부터 1까지 입력받는다.0은 완전투명 1은 완전불투명을 뜻한다.특정한 색만 불투명하게 변경하고 싶다면 색상을 rgba로 지정해주면 된다. ※ 필자는..

HTML작성시 특수문자 처리 하는 방법에 대해 알아보자.필자는 VS Code라는 프로그램을 사용하여 HTML로 블로그 글을 다 적은후 티스토리 HTML에 붙혀넣기 하여 블로그를 작성한다.평소에는 별 문제가 없지만 특수문자를 적을때 HTML소스코드의 한부분으로 인식할때가 종종 있다.그래서 특수문자는 따로 치환해서 표시를 해줘야 하는데 우선 자주쓰는 몇몇 특수문자부터 알아보자. 코드 특수 문자 코드 특수 문자 코드 특수 문자 코드 특수 문자 < ..

margin과 padding에 값을 넣는 방법들을 살펴보자.1.한번에 입력margin: 10px; /*상하좌우 전체다 같은값*/2.하나하나 지정해주기margin-top: 10px;margin-right: 5px;margin-bottom: 0px;margin-left: 10px;3.한줄로 하나하나 지정해주기 (상,우,하,좌)한줄로 적을때 순서는 '상'부터 시작해서 시계방향으로 설정해준다.margin-top: 10px, 5px, 0px, 10px; /*상,우,하,좌*/4.한줄로 지정해주기 단축 (상하,좌우)margin-top: 10px, 5px; /*상하,좌우*/5.한줄로 지정해주기 단축2 (상,좌우,하)margin-top: 10px, 0px, 5px; /*상,좌우,하*/padding도 마찬가지로 적용된다...

코드펜(Code Pen) 기본 사용방법을 알아보자.가끔 다른 블로그에 보이던 HTML과 CSS를 소스를 바로 볼수 있게 해주는 기능이 보였는데필자는 .Net과 Java를 기본으로 포스팅하고 있어서 별 생각이 없었다.하지만 점점 HTML과 CSS의 공부의 필요성을 느껴져 해당 내용을 포스팅 할려고 하다보니코드펜의 위력을 알게되었고 이걸 왜 이제 알았을까 하는 생각이 들정도로 기능이 뛰어나다.코드펜이란?코드펜(Code Pen)은 사용자가 HTML, CSS, Javascript를 작성하면 실시간으로 결과를 확인할수 있는 온라인 코드 편집기능이다.매번 css업데이트를 하면 업로드하고 최근사용기록 지우고.. 새로고침했는데 이게 적용된건지 안된건지 확인도 해봐야되고....아무튼 고생하면서 확인할수 있던 부분이 그냥..

CSS font-weight 글씨 굵기CSS font속성중 weight는 글씨의 굵기(웨이트)를 설정합니다.예제 See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen. 기본적으로 normal과 Bold 두가지를 많이 사용합니다.그리고 숫자 100부터 900까지의 100단위로 속성이 있는데400은 normal과 700은 bold와 같은 굵기 입니다.현재 예제에서는 아무리 숫자를 바꿔도 normal과 bold 두종류 밖에 설정되지 않습니다.그 이유는 글꼴마다 지원하는 굵기가 정해져 있기때문입니다.더 얇은 굵기나 더 굵은 굵기를 지원하는 글꼴을 따로 찾아서 적용해야 100~900사이의 숫자가 의미가 있습니다.특수한 경우 ..

CSS로 그라이데이션 배경을 만들어보자.CSS로 그라데이션 배경을 만들기 쉽게 도와주는 사이트가 있어 소개시켜드릴려고 합니다.사이트이름은 uigradients.com 입니다.   uiGradients - Beautiful colored gradients uiGradients is a handpicked collection of beautiful color gradients for designers and developers. uigradients.com 사용방법도 간단 한데 같이 알아보도록 합시다.1.사이트 접속2.좌측 상단 Show all gradients 메뉴 클릭 3.원하는 그라데이션 색상 클릭필자는 Moonlit Asteroid를 선택했습니다.4.우측 상단..

CSS에 주석으로 설명을 달아보자. HTML이나 자바스크립트처럼 CSS에도 주석을 달수 있다.보통 연결된곳 혹은 스타일의 목적을 설명하기 위해 추가한다.'/*' 로 시작해서 '*/'로 끝난다.예제/*블로그 상단 운영환경 테이블*/ div.toptable{ width: 100%; border-collapse: collapse; border-spacing: 0; BORDER: rgb(193,193,193) 3px double; PADDING: 10px; MARGIN : 10px; DISPLAY: inline-block; BACKGROUND-COLOR: rgb(238,238,238)..