본문 바로가기

Webstoryboy

Category

Explanation

분류 전체보기

(864)
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 단위, 상속 ..
[HTML] <wbr> 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 태그의 사용은 제한적입니다. 일반적인 한글이나 영어에서는 해당이 되지 않습니다. 의미가 없는 단어나 해석 할 수 없는 단어의 줄바꿈을 할 때 사용합니다. 예를 들면 의미적 전달이 안되는 브라우저의 주소가 가장 적절한 예가 될 것입니다. 단어의 줄바꿈이나 글자의 줄바꿈을 컨트롤 하고 싶다면 word-break 속성을 사용합니다. 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용 안함 버전 HTML5 시각적 표현 줄바꿈 정의(Definition) 태그는 일반적인 한글이나 영어에 해당되지 않는 글자에서 사용합니다. 태그는 줄바꿈 할 위치를 정의할 때 사용합니다. 태그는 단어가 너무..
[HTML] <video> 웹 문서에 동영상을 재생하는 미디어 플레이어입니다. 비디오의 너비와 정보를 지정하고 여러가지 속성을 지정할 수 있습니다. 비디오를 지원하는 파일은 mp4, webM, avi, ogg가 있으며, 브라우저마다 지원하는 파일이 다릅니다. 모든 브라우저의 호환성을 맞추기 위해서는 여러가지 파일을 동시에 사용하여야 합니다. 태그를 사용하여 비디오 파일을 불러올 수 있습니다. 태그는 미디어 영상을 정의합니다. 특징 설명 요소 블록 요소(block Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 동영상 표현 정의(Definition) 태그는 미디어 영상을 재생합니다. 태그는 태그와 같이 사용합니다. 비교(Compare) 동영상을 재생할 때에는 태그를 사용합니다. 외부 프로그램이나 플러..
[HTML] <var> 태그는 수학적인 변수나 프로그램의 변수를 쓸 때 사용합니다. 일반적으로 기울기체로 표시되지만 브라우저마다 다릅니다. 태그는 수학적인 변수나 프로그램의 변수를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML5 시각적 표현 이탤릭체 정의(Definition) 태그는 수학적인 변수나 프로그램의 변수를 정의합니다. 비교(Compare) 컴퓨터 소스 코드를 나타내는 텍스트는 태그를 사용합니다. 수학적인 변수나 프로그램의 변수를 나타내는 텍스트는 태그를 사용합니다. 컴퓨터 프로그램으로 출력된 결과물을 나타내는 텍스트는 태그를 사용합니다. 키보드 입력요소를 나타내는 텍스트는 태그를 사용합니다. 샘플(Sample) Sample1 .prevUntil..
[HTML] <ul> 일반적인 글이나 문장을 쓴다면 태그를 사용합니다. 태그는 일반적인 글 보다는 목록 형식의 글을 사용할 때 씁니다. 목록을 쓸 때 순서가 상관이 없다면 태그를 사용하며, 순서가 상관이 있다면 태그를 사용합니다. 무엇인가를 설명하고 정의할 때는 태그를 사용합니다. 목록형 태그에는 각각의 항목이 있기 때문에 이 때에는 태그를 같이 사용해야 합니다. 태그의 경우에는 또는 를 같이 사용합니다. 태그 안에는 또 다른 태그 또는 태그가 올 수 있으며, 2단 3단 목록형 태그로도 사용가능합니다. 목록형 태그를 사용하면 블릿기호가 생깁니다. ul 태그는 점과, 사각형 점이 생기고, ol 태그는 번호가 생기며, dl은 아무것도 생기지 않습니다. 이런 블릿기호는 CSS list-style-type에서 설정이 가능합니다. 태..
[HTML] <u> 태그는 HTML4에서는 밑줄을 표시하기 위해서 사용하였습니다. 하지만 밑줄 기능은 CSS로 충분히 표현 가능하기 때문에 더 이상 사용하지 않게 되었습니다. HTML5에서는 철자 오류 및 주석 표시를 위한 태그로 의미가 변경되었습니다. 이 태그는 밑줄을 표시하기 위한 디자인적인 요소로 사용하면 안됩니다. 철자 오류 및 주석 표시를 위한 태그입니다. 밑줄을 표시하기 위함이라면 text-decoration 속성을 이용하면 됩니다 태그는 철자 오류가 포함된 단락을 표시하며, 빨간색 물결 밑줄 스타일로 오류를 표시합니다. 태그는 맞춤법이 틀린 단어를 표시할 때 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4(HTML5에서 의미 변경) 시각적..
[HTML] <tt> 태그는 타자모양의 텍스트를 보여주기 위한 태그입니다. HTML5에서 지원하지 않으며, 지금은 사용하지 않는 태그입니다. 구버전의 브라우저에서는 작동 될 수 있지만 최신 브라우저에서는 지원되지 않을 수 있습니다. 사용을 권하지 않습니다. 소스코드를 텍스트를 표현하고 싶다면 , 프로그램 변수 텍스트를 표현하고 싶다면 , 프로그램 출력결과 텍스트를 표현하고 싶다면 , 키보드 텍스트를 표현하고 싶다면 태그를 사용합니다. 디자인적인 요소를 위함이라면 CSS를 사용합니다. 태그는 타자모양의 텍스트를 정의합니다. 특징 설명 요소 인라인 요소(Inline Element) 닫는 태그 닫는 태그 사용( ~ ) 버전 HTML4(HTML5에서 지원하지 않습니다.) 시각적 표현 monotype 폰트 정의(Definition) ..