본문 바로가기

프로그래밍 공부/CSS3

 (25)
CSS3 - 그레이디언트 & 벤더 프리픽스 그레이디언트는 2가지 이상의 색상을 혼합해서 채색하는 기능이다. 간단한 선형 그레이디언트는 linear-gradient(각도, 색상 위치, 색상 위치)순으로 만들 수 있다. 또한 원형 그레이디언트는 radial-gradient를 이용해서 만들 수 있으나, 대부분의 그레이디언트는 툴을 이용해서 생성할 수 있다. https://www.colorzilla.com/gradient-editor/ Ultimate CSS Gradient Generator from ColorZilla A powerful Photoshop-like CSS gradient editor www.colorzilla.com 위의 사이트 처럼 CSS Gradient Generator를 이용해 스타일을 만들어 붙여넣는 식으로 적용이 가능하다. 벤..
CSS3 - 그림자 속성 태그에 그림자를 부여해 주는 스타일 속성이다. 속성 설명 text-shadow 글자에 그림자를 부여한다. box-shadow 박스에 그림자를 부여한다.
CSS3 - clear:both를 사용한 레이아웃 레이아웃을 만들때 대부분 overflow: hidden속성을 사용하지만 clear: both도 사용한다. clear: both를 사용하면 레이아웃에서 일그러진 부분을 쉽게 초기화할 수 있다.
CSS3 - float 속성 키워드 설명 left 태그를 왼쪽에 붙인다. right 태그를 오른쪽에 붙인다. float 속성은 부유하는 대상을 만들 때 사용한다. 그림을 글자위에 띄워 끼워넣을때 사용한다. 또한 float을 이용하여 태그를 수평으로 정렬할 수 있다. 이때 정렬을 실행하면 첫 번째에 위치한 태그부터 순서대로 정렬이 된다. float 속성은 부유하는 대상을 만들때 쓰지만 그 기능을 이용해 레이아웃을 구성할 수도 있다.
CSS3 - 위치 속성 position 속성 키워드 설명 static 기본값, 다른 태그와의 관계를 따져 순서대로 배치 relative 초기 위치를 기준으로 상, 하, 좌, 우로 이동 absolute 절대 좌표를 기준으로 지정 fixed '화면'을 기준으로 절대 좌표를 지정 HTML 태그의 위치를 설정하는 방법을 변경하고 싶을때 position 속성을 사용한다. 상대 좌표를 사용할 때는 position 속성에 static 키워드 또는 relative 키워드를 적용한다. static 키워드는 기본값이며, 태그가 위에서 아래로 왼쪽에서 오른쪽으로 순서에 맞게 배치된다. relative 키워드는 초기 위치(원래 있던 위치)를 기준으로 상, 하, 좌, 우로 위치를 이동한다. absolute와 fixed는 각각 '절대위치'로 좌표를 설..
CSS3 - 폰트 속성 속성 설명 font-size 글자의 크기를 지정 font-family 글자의 폰트를 설정 font-style 글자의 기울기를 설정 font-weight 글자의 굵기를 지정 line-height 글자의 높이를 지정 text-align 글자를 정렬함 text-decoration a href의 밑줄을 제거 font-size 속성은 글자의 크기를 바꿀 수 있다. 값은 px단위, em단위나 large나 small등의 키워드를 입력해 사용할 수 있다. font-family는 컴퓨터 안에 내장된 글씨 폰트를 적용할 수 있다. 하지만 자신을 제외하고 다른 사용자가 폰트가 없을 수 있기 때문에 보통은 font-family 속성을 여러개 사용한다. 웹 브라우저는 이렇게 지정된 폰트를 사용자의 컴퓨터에서 차례대로 찾아 출력..
CSS3 - 배경 속성 속성 설명 background-image 배경에 넣을 그림을 지정 background-size 넣은 그림의 크기를 지정 background-repeat 넣은 그림의 반복 패턴을 변경 background-attachment 넣은 그림이 배경에 붙이는 방식을 변경 background-position 넣은 그림의 위치를 임의로 지정 background-color 배경에 색을 지정합니다. background-image 속성 URL 단위를 이용하여 배경에 이미지를 삽입한다. style안에 body태그에 background-image를 이용해 이미지를 삽입하고, 이미지는 CSS3부터 여러개의 배경 이미지를 적용할 수 있다. background-size 속성 background-size 속성은 삽입된 그림의 크기를 ..
CSS3 - 테두리 속성 속성 설명 border-width 테두리의 두께 border-style 테두리의 모양 border-color 테두리의 색상 border-radius 테두리 모서리 처리 테두리 속성은 컨텐츠를 감싸는 border에 관련된 속성이다. border-width는 테두리의 두께를 설정하는데 일반적으로 굵기를 10px, 30px 등의 숫자나 thin, medium등의 키워드를 입력 할 수 있다. border-style은 테두리 선의 모양을 바꿀 수 있다. dotted, dashed 등의 키워드를 입력 할 수 있다. border-color는 테두리의 색상을 지정 할 수 있다. border-radius는 테두리의 모서리 부분의 마감을 둥글게 만들 수 있다.

티스토리툴바