본문 바로가기

Webstoryboy

Category

Explanation

CSS

 (238)
background-color background-color background-color 속성은 백그라운드 색을 설정합니다. 기본 값은 투명하게 설정되어 있으며, 색상 표현 방식에 따라 키워드, 헥사코드, RGB, HSL 등으로 표현 할 수 있습니다. background-color background-color 속성은 백그라운드 색을 설정합니다. 특징 설명 기본 값 background-color : transparent 적용 background 버전 CSS1 사용성 ★★★★★ 정의(Definition) background-color 속성은 백그라운드 색을 설정합니다. 백그라운드와 관련된 속성(Background Related Properties) background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background..
background-clip background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. background-clip background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. 특징 설명 기본 값 background-clip : border-box 적용 background 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) background-clip 속성은 백그라운드 이미지의 위치 기준점을 설정하기 위한 속성입니다. clip은 걸다, 끼우다의 뜻으로 background-clip 배경 이미지를 어디에 설정하지를 설정합니다. background-clip 기준점은 보더(border), 패딩(padding), 컨텐츠, 텍스트(te..
background-blend-mode background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. 백그라운드 색상과 백그라운드 이미지를 혼합 했을 때 효과를 만들어 주기 때문에, 두가지 요소가 없다면, 적용이 안 될 수 있습니다. 포토샵의 브랜드 효과와 동일하다고 보시면 됩니다. background-blend-mode background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. 특징 설명 기본 값 background-blend-mode : normal; 적용 background 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) background-blend-mode 속성은 배경을 혼합했을 때의 상태를 설정합니다. blend-mode는 크게 ..
background-attachment background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 백그라운드를 배경에 고정하여 효과를 주는 기법입니다. 패럴랙스 스크롤링 사이트에서 자주 사용하는 방법 중에 하나입니다. background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 특징 설명 기본 값 background-attachment: scroll; 적용 background 버전 CSS1 사용성 ★★★☆☆ 정의(Definition) background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. background-attachment 속성의 multiple backgrounds는 익스플로러9..
background background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. background 속성은 CSS를 통해 이미지를 표현하는 방법으로 HTML에 태그와 비교가 됩니다. 이미지의 의미가 있다면 태그를 사용하고, 의미가 없고 장식용에 가깝다면 background 속성을 이용합니다. background 속성은 고정, 위치, 컬러, 기준점, 반복, 사이트를 통해 컨트롤 할 수 있습니다. background background 속성은 백그라운드 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: non..
backface-visibility backface-visibility backface-visibility 속성은 요소의 뒷면을 설정합니다. 요소가 3D인 경우에서 설정 할 수 있습니다. backface-visibility backface-visibility 속성은 요소의 뒷면을 설정합니다. 특징 설명 기본 값 backface-visibility : visible; 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) backface-visibility 속성은 요소의 뒷면을 설정합니다. 2D 상태에서는 뒷면을 확인할 수 없지만 3D 공간에서는 뒷면을 확인 할 수 있습니다. 문법(Syntax) backface-visibility : visible | hidden; /* 기본 속성 */ backface-visibility : visibl..
animation-timing-function animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-timing-function animation-timing-function 속성은 애니메이션 움직임의 속도를 설정합니다. 특징 설명 기본 값 animation-timing-function : linear; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-timing-function 속성..
animation-play-state animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-play-state animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 특징 설명 기본 값 animation-play-state : running; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-play-state 속성은 애니메이션 진행상태를 설정합니다. 애니메이션과 관련된 속성(..
animation-name animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-name animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 특징 설명 기본 값 animation-name : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-name 속성은 애니메이션 keyframe 이름을 설정합니다. 애니메이션과 관련된 속성(Animation Related ..
animation-iteration-count animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-iteration-count animation-iteration-count 속성은 애니메이션 반복 횟수 설정합니다. 특징 설명 기본 값 animation-iteration-count : none; 적용 animation 버전 CSS3 사용성 ★★★★☆ 정의(Definition) animation-iteration-count 속성은 애니메이션 ..
animation-fill-mode animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-fill-mode animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 특징 설명 기본 값 animation-fill-mode : none 적용 animation 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) animation-fill-mode 속성은 애니메이션이 끝난 후의 상태를 설정합니다. 애니메이션과 관련..
animation-duration animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-duration animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. 특징 설명 기본 값 animation-duration : 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-duration 속성은 애니메이션 움직임 시간을 설정합니다. animation-duration 속성에는 시..
animation-direction animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-direction animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. 특징 설명 기본 값 animation-direction : normal; 적용 animation 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) animation-direction 속성은 애니메이션 움직임 방향을 설정합니다. animation-direc..
animation-delay animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation-delay animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 특징 설명 기본 값 animation-delay: 0s; 적용 animation 버전 CSS3 사용성 ★★★★★ 정의(Definition) animation-delay 속성은 애니메이션 지연 시간을 설정합니다. 애니메이션과 관련된 속성(Animation Related Properties) ani..
animation animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 애니메이션은 움직임 시간, 움직임 지연 시간, 움직임 방향, 움직임 속도, 움직임 진행상태, 움직임 반복 횟수, 움직임 진행상태, 움직임 속도, 키프레임 이름 등을 설정하여 원하는 애니메이션을 구현 할 수 있습니다. animation animation 속성은 애니메이션과 관련된 속성을 일괄적으로 설정합니다. 특징 설명 기본 값 animation-name: none; animation-duration: 0s; animation-timing-function: ease; animation-delay: 0s; animation-iteration-count: 1; animation-direction: normal; ani..
all all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. 특징 설명 기본 값 all : auto 적용 모든 속성 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. all 속성은 모든 요소에 설정 가능합니다. 문법(Syntax) all : initial | inherit | unset | revert /* 기본 속성 */ all : initial; all : inherit; all : unset; all : revert; 속성(Property) 속성값 설명 initial 요소의 모든 속성을 초기화합니다. inherit 요소의 속성을 상속받어 적용합니다. uns..
align-self align-self align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. align-self align-self 속성은 개별적인 콘텐츠 아이템의 정렬 상태를 설정합니다. 특징 설명 기본 값 align-self : auto 적용 flexbox 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) align-self 속성은 개별적인 플렉스 아이템의 정렬 상태를 설정합니다. align-self 속성은 플렉스 아이템에 설정하고, align-item와 align-content는 플렉스 컨테이너에 설정합니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다. flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자식..
align-items align-items align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-items align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. 특징 설명 기본 값 align-items : stretch 적용 flexbox 버전 CSS3 시각적 표현 밑줄과 파란색으로 표시 사용성 ★★★★★ 정의(Definition) align-items 속성은 콘텐츠 아이템의 내부 상하관계 정렬 상태를 설정합니다. align-content 속성은 컨테이너의 높이 값을 기준으로 정렬하고 align-items 속성은 아이템의 높이 값을 기준으로 정렬합니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다...
align-content align-content align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-content align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. 특징 설명 기본 값 align-content : stretch 적용 flexbox 버전 CSS3 사용성 ★★★☆☆ 정의(Definition) align-content 속성은 콘텐츠 아이템의 상하관계 정렬 상태를 설정합니다. align-content 속성은 한 줄(flex-wrap: nowrap)에서는 의미가 없습니다. 참고(Reference) flex는 효율적으로 요소를 배치하거나 정렬 할 수 있는 레이아웃 방식입니다. flex에서 사용하는 속성은 부모 요소인 컨테이너(Container)와 자..
[CSS] CSS 속성 Reference CSS CSS 캐스케이딩 스타일 시트(Cascading Style Sheets) 언어입니다. CSS 속성 CSS 속성 속성 설명 align-content align-content 속성은 콘텐츠의 상하관계 정렬 상태를 정의합니다. align-items align-items 속성은 콘텐츠 내부의 정렬 상태를 정의합니다. align-self align-self 속성은 콘텐츠의 정렬 상태를 정의합니다. all all 속성은 요소의 속성을 초기화 또는 상속을 설정합니다. animation animation 속성은 애니메이션을 정의합니다. animation-delay animation-delay 속성은 요소가 로드된 후 애니메이션이 시작될 때 까지의 시간을 나타냅니다. animation-direction anima..
[CSS] CSS 호환성 CSS 호환성 브라우저별 CSS 적용 여부를 정리하였습니다. CSS 호환성 CSS 속성은 모든 브라우저에서 똑같이 나오지 않습니다. 이런 부분을 구별하기 위한 섹션입니다. CSS3 속성은 구브라우저 익스플로러 6~9버전에서는 제대로 표현되지 않습니다. 호환성(Compatibility) 더보기 6 7 8 9 10 11 align-items 사용가능 사용가능 사용가능 사용가능 사용가능 사용안됨 사용안됨 사용안됨 사용안됨 사용안됨 사용가능 사용가능 사용가능 사용가능 align-items 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 align-items 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능 사용가능..
[CSS] CSS size CSS 단위 CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다. CSS 단위 CSS는 길이를 표현하기 위한 다양한 단위들이 있습니다. 정의(Definition) 상대단위 (px, em, ex, %, rem, vw, vh, vmin, vmax) : 어떤 기준을 통해 상대적으로 변할 수 있는 단위이며, 다양한 매체에 쓰기 적절합니다. 절대단위 (in, cm, mm, pt, pc) : 정확한 기준에 의해 고정된 단위이며, 출력 매체에 쓰기 적절합니다. CSS Size 속성값 설명 px 모니터의 1dot이 1pixel을 의미하며, pixel은 해상도에 따라서 상대적인 크기를 갖습니다. em 부모 요소의 대문자 너비를 기준으로 상대적인 값을 갖습니다. ex 부모 요소의 소문자 너비를 기준으로 상대적인 값을 ..
[CSS] 선택자 CSS 선택자 CSS는 선택자를 통해 요소를 선택할 수 있습니다. CSS CSS는 선택자를 통해 요소를 선택할 수 있습니다. 기본 선택자 종류 예시 이름 태그 선택자 p {color:#fff;} p 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 클래스 선택자 .class {color:#fff;} class 클래스를 선택하여 글씨 색을 하얀색으로 변경합니다. 아이디 선택자 #id {color:#fff;} id 아이드를 선택하여 글씨 색을 하얀색으로 변경합니다. 그룹 선택자 p, div {color:#fff;} p 태그와 div 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 전체 선택자 * {color:#fff;} 전체 태그를 선택하여 글씨 색을 하얀색으로 변경합니다. 계층 선택자 종류 예시 이름 하..
[CSS] CSS 색상 CSS 색상 CSS를 통해 색을 표현하는 방법입니다. CSS CSS는 색상을 표현하는 방법이 다양합니다. 16진수 표기법 웹 문서에서 색상을 표현하는 방법은 16진수로 표현하는 방법입니다. 두자리씩 묶어서 #RRGGBB 형식으로 표현하며, RR은 빨간색, GG는 초록색, BB는 파란색의 양을 표현합니다. 각 색상의 하나도 섞이지 않았음은 00부터 가득 썩였음은 FF까지 사용할 수 있습니다. 십진수 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16진수 0 1 2 3 4 5 6 7 8 9 a b c d e f RGB와 RGBA 웹 문서에서 색상을 표현하는 rgb(255,255,255)는 십진수를 이용하여 표현합니다. 색이 하나도 석이지 않았을 때에는 0으로 표시하고 가득섞였을 때에는 ..
[CSS] 튜토리얼 CSS 튜토리얼 CSS 튜토리얼입니다. CSS 구분 강의 섹션 페이지 유튜브 기초 CSS 기초 CSS 속성 CSS 색상 CSS 단위 선택자 기본 선택자 width height 계층 선택자 border 속성 선택자 border 가상 요소 border 박스모델 너비, 높이 width, height 테두리 border, border-radius 마진 margin 패딩 padding 사이즈 box-sizing 레이아웃 유형 레이아웃 기법 다단 레이아웃 float 반응형 레이아웃 responsive 포지션 레이아웃 position 플렉스 레이아웃 flex 컬럼 레이아웃 column 그리드 레이아웃 grid 이미지 이미지 표현방법 이미지 표현방법 이미지 스프라이트 이미지 스프라이트 이미지 IR효과 IR 이미지 최적..
[CSS] 기초 CSS CSS 캐스케이딩 스타일 시트(Cascading Style Sheets) 언어입니다. CSS란? CSS(Cascading Style Sheets)은 HTML을 꾸며주는 디자인 언어입니다. 상속 상속(inherit)이란 상위 요소에 적용된 속성들이 하위 요소까지 상속 받는 것을 말합니다. CSS 속성에는 상속이 되는 속성도 있고 그렇지 않은 속성도 있습니다. 주석 주석 표시는 프로그램에 영향을 미치지 않으며, 설명이나 메모를 목적으로 사용합니다. /* 주석 */ 스타일 선언 HTML 문서에 스타일을 선언하는 방법은 여러가지가 있습니다. 내부 스타일 : head 태그 안에 설정하는 방법입니다. 외부 스타일 : 외부 파일을 연결하는 방법입니다. 인라인 스타일 : 요소에 직접 설정하는 방법입니다. HTM..
[CSS] CSS CSS Cascading Style Sheets(CSS)는 HTML로 작성된 문서에 쓰기 위한 스타일시트 언어입니다. HTML은 문서의 골격을 이룬다면 CSS는 그 골격에 맞는 디자인 작업을 하는 언어라고 생각하면 됩니다. CSS는 웹 언어 중의 하나이며, W3C 표준 명세서에 따라 코딩을 하며, CSS1은 현재 사용하지 않고, 다음 레벨인 CSS2.1이 있으며, 현재는 CSS3 표준화 과정에 있습니다. CSS CSS(Cascading Style Sheets)은 웹 페이지의 디자인과 레이아웃을 설정하는데 사용합니다. 예를 들면 폰트의 크기, 색상, 간격 등을 조절하며, 애니메이션 및 레이아웃을 설정합니다. CSS를 배우기 위해서는 CSS의 작동방법, 선택자, CSS 규칙, 적용방법, CSS 단위, 상속 ..
[PHP] Basic [PHP] Basic
1 ··· 5 6 7 8
Alphabet
Topic
Alphabet
Topic
Alphabet
Topics



Topics
Topics
Topics
Topics
Topics
Topics
Topics
Topics

티스토리툴바