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

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

하이퍼링크의 밑줄을 없애거나 변경해보자. See the Pen [232] 하이퍼링크 by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen.text-decoration-line : 밑줄의 위치를 지정하거나 없앨수 있다.none : 선 없음underline : 밑줄overline : 윗줄line-through : 취소선text-decoration-style : 선의 모양을 변경할수 있다.solid : 한줄선double : 두줄선dotted : 점선dashed : 굵은 점선wavy : 웨이브선text-decoration-color : 선의 색상을 정의한다.text-decoration-thickness : 선의 굵기로 정의 한다. ※ 위 예제는 편집 가능하니 주석을 풀..

하이퍼링크의 이벤트별 색상 변경방법을 알아보자. See the Pen Untitled by 날개를달다 (@pmdgstri-the-flexboxer) on CodePen. a:link아직 방문하지 않은 링크의 글자색을 정의한다.기본색상은 파란색이다. 많은 사람들이 익숙한색a:visited사용자가 방문한 적이 있는 링크의 글자색을 정의한다.기본색상은 보라색이다. 필자는 보통 link색상과 일치시켜둔다.a:hover마우스 오버시 링크의 글자색을 정의한다.위 예제 테스트용에 마우스를 올리면 변경되는것을 확인할수 있다.a:active마우스 클릭시 링크의 글자색을 정의한다.(여기서 클릭시란 마우스를 눌렀다가 떼기전까지의 시간입니다.)마찬가지로 위 예제 테스트용을 클릭하고 마우스를 떼지..

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도 마찬가지로 적용된다...

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)..