CSS HTML JAVASCRIPT 웹디자인기능사 Reference204 background 속성은 배경 이미지의 속성을 일괄적으로 설정합니다. Reference/CSS background 속성은 배경 이미지의 속성을 일괄적으로 설정합니다. by @webs 2023. 01. 03. background background 속성은 배경 이미지의 속성을 일괄적으로 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용할 수 있습니다. 특징 설명.. 2023. 1. 5. background-blend-mode 속성은 배경 이미지를 혼합했을 때의 상태를 설정합니다. Reference/CSS background-blend-mode 속성은 배경 이미지를 혼합했을 때의 상태를 설정합니다. by @webs 2023. 01. 03. background-blend-mode background-blend-mode 속성은 배경 이미지를 혼합했을 때의 상태를 설정합니다. 백그라운드 색상과 백그라운드 이미지를 혼합 했을 때 효과를 만들어 주기 때문에, 두가지 요소가 없다면, 적용이 안 될 수 있습니다. 포토샵의 브랜드 효과와 동일하다고 보시면 됩니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. .. 2023. 1. 4. background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. Reference/CSS background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. by @webs 2023. 01. 03. background-attachment background-attachment 속성은 배경 이미지의 고정 여부를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 .. 2023. 1. 4. background-image 속성은 배경 이미지 경로 및 그라디언트를 설정합니다. Reference/CSS background-image 속성은 배경 이미지 경로 및 그라디언트를 설정합니다. by @webs 2023. 01. 03. background-image background-image 속성은 배경 이미지 경로 및 그라디언트를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속.. 2023. 1. 4. background-color 속성은 배경 색을 설정합니다. Reference/CSS background-color 속성은 배경 색을 설정합니다. by @webs 2023. 01. 03. background-color background-color 속성은 배경 색을 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용할 수 있습니다. 특징 설명 기본값 b.. 2023. 1. 4. background-clip 속성은 배경 이미지의 위치 기준점을 설정합니다. Reference/CSS background-clip 속성은 배경 이미지의 위치 기준점을 설정합니다. by @webs 2023. 01. 03. background-clip background-clip 속성은 배경 이미지의 위치 기준점을 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용할 수 .. 2023. 1. 4. background-origin 속성은 배경 이미지의 위치 기준점을 설정합니다. Reference/CSS background-origin 속성은 배경 이미지의 위치 기준점을 설정합니다. by @webs 2023. 01. 03. background-origin background-origin 속성은 배경 이미지의 위치 기준점을 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 .. 2023. 1. 4. background-position-y 속성은 배경 이미지의 y축 위치를 설정합니다. Reference/CSS background-position-y 속성은 배경 이미지의 y축 위치를 설정합니다. by @webs 2023. 01. 03. background-position-y background-position-y 속성은 배경 이미지의 y축 위치를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 .. 2023. 1. 4. background-position-x 속성은 배경 이미지의 x축 위치를 설정합니다. Reference/CSS background-position-x 속성은 배경 이미지의 x축 위치를 설정합니다. by @webs 2023. 01. 03. background-position-x background-position-x 속성은 배경 이미지의 x축 위치를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 .. 2023. 1. 4. background-position 속성은 배경 이미지의 위치를 설정합니다. Reference/CSS background-position 속성은 배경 이미지의 위치를 설정합니다. by @webs 2023. 01. 03. background-position background-position 속성은 배경 이미지의 위치를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용.. 2023. 1. 4. background-repeat 속성은 배경 이미지 반복 여부를 설정합니다. Reference/CSS background-repeat 속성은 배경 이미지 반복 여부를 설정합니다. by @webs 2023. 01. 03. background-repeat background-repeat 속성은 배경 이미지 반복 여부를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용할 .. 2023. 1. 4. background-size 속성은 배경 이미지 사이즈를 설정합니다. Reference/CSS background-size 속성은 배경 이미지 사이즈를 설정합니다. by @webs 2023. 01. 03. background-size background-size 속성은 배경 이미지 사이즈를 설정합니다. 웹 문서에 이미지를 표현하는 방법은 두가지가 있습니다. img 태그와 background 속성을 이용하는 방법입니다. 원칙적으로 의미가 있는 이미지는 img 태그를 사용하고, 그렇지 않은 경우는 background 속성을 사용합니다. background 속성은 의미가 없는 이미지를 사용하기 위한 방법입니다. 배경이 장식용이거나 디자인 용도라면 background를 이용해서 많이 사용합니다. 여기에는 사이즈, 반복여부, 위치, 효과 등 다양한 속성을 사용할 수 있습니다. 특징.. 2023. 1. 4. border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다. Reference/CSS border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-radius border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다. 특징 설명 기본값 border-top-left-radius: 0 border-top-right-radius: 0 border-bottom-right-radius: 0 border-bottom-left-radius: 0 적용 border 버전 CSS3 사용성 ★★★★★ 정의(Definition) border-radius 속성은 테두리 굴곡을 일괄적으로 설정합니다. border-radius 속성에 "/"가 붙으면 x축 y축을 분리합니다. 비교(Compare) border-radiu.. 2023. 1. 3. border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다. Reference/CSS border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다. by @webs 2023. 01. 03. border-bottom-right-radius border-bottom-right-radius 속성은 아래부분 오른쪽 모서리 굴곡을 설정합니다. border-radius 속성은 테두리 굴곡을 설정합니다. 일관적으로 설정할 수도 있지만, 개별적으로도 설정이 가능합니다. 속성에 "/"가 있으면 x축, y축으로 나누어서 속성 설정이 가능합니다. 특징 설명 기본값 border-bottom-right-radius : 0 적용 border 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) border-bottom-right-radius 속성은.. 2023. 1. 3. border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다. Reference/CSS border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다. by @webs 2023. 01. 03. border-bottom-left-radius border-bottom-left-radius 속성은 아래부분 왼쪽 모서리 굴곡을 설정합니다. border-radius 속성은 테두리 굴곡을 설정합니다. 일관적으로 설정할 수도 있지만, 개별적으로도 설정이 가능합니다. 속성에 "/"가 있으면 x축, y축으로 나누어서 속성 설정이 가능합니다. 특징 설명 기본값 border-bottom-left-radius : 0 적용 border 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) border-bottom-left-radius 속성은 아래부분 왼.. 2023. 1. 3. border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. Reference/CSS border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. by @webs 2023. 01. 03. border-top-right-radius border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 설정합니다. border-radius 속성은 테두리 굴곡을 설정합니다. 일관적으로 설정할 수도 있지만, 개별적으로도 설정이 가능합니다. 속성에 "/"가 있으면 x축, y축으로 나누어서 속성 설정이 가능합니다. 특징 설명 기본값 border-top-right-radius : 0 적용 border 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) border-top-right-radius 속성은 윗부분 오른쪽 모서리 굴곡을 .. 2023. 1. 3. border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. Reference/CSS border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. by @webs 2023. 01. 03. border-top-left-radius border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. border-radius 속성은 테두리 굴곡을 설정합니다. 일관적으로 설정할 수도 있지만, 개별적으로도 설정이 가능합니다. 속성에 "/"가 있으면 x축, y축으로 나누어서 속성 설정이 가능합니다. 특징 설명 기본값 border-top-left-radius : 0 적용 border 버전 CSS3 사용성 ★★☆☆☆ 정의(Definition) border-top-left-radius 속성은 윗부분 왼쪽 모서리 굴곡을 설정합니다. 비.. 2023. 1. 3. border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다. Reference/CSS border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-image border-image 속성은 테두리 이미지 속성을 일괄적으로 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-source : none border-image-slice : 100% border-image-width : 1 border-image-.. 2023. 1. 1. border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다. Reference/CSS border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다. by @webs 2023. 01. 01. border-image-width border-image-width 속성은 테두리 이미지 두께 속성을 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-width : 1 적용 border 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) border-imag.. 2023. 1. 1. border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다. Reference/CSS border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다. by @webs 2022. 12. 29. border-image-source border-image-source 속성은 테두리 이미지 경로 속성을 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-source : none 적용 border 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) bord.. 2023. 1. 1. border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다. Reference/CSS border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다. by @webs 2023. 01. 01. border-image-slice border-image-slice 속성은 테두리 이미지 영역 속성을 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-slice : 100% 적용 border 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) border-i.. 2023. 1. 1. border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다. Reference/CSS border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다. by @webs 2023. 01. 01. border-image-repeat border-image-repeat 속성은 테두리 이미지 반복 속성을 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-repeat : stretch 적용 border 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) b.. 2023. 1. 1. border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다. Reference/CSS border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다. by @webs 2023. 01. 01. border-image-outset border-image-outset 속성은 테두리 이미지 간격 속성을 설정합니다. border-image는 테두리에 이미지를 넣는 기능으로, 이미지를 9등분하여 해당 부분이 네 면에 설정하는 기능입니다. 단순한 이미지도 넣을 수 있지만, 특별한 테두리를 만들고 싶다면 이 속성을 이용하면 편하게 만들 수 있습니다. border-image 속성은 border와 같이 사용됩니다. 특징 설명 기본값 border-image-outset : 0 적용 border 버전 CSS3 사용성 ★☆☆☆☆ 정의(Definition) border-.. 2023. 1. 1. border 속성은 테두리 속성을 일괄적으로 설정합니다. Reference/CSS border 속성은 테두리 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border border 속성은 테두리 속성을 일괄적으로 설정합니다. 테두리에는 두께(width), 스타일(style), 컬러(color) 속성을 일괄적으로 설정할 수 있습니다. 테두리는 네 면에 일괄적으로 설정도 가능하지만, 개별적으로 위쪽(border-top), 오른쪽(border-right), 아래쪽(border-bottom), 왼쪽(border-left)으로도 가능합니다. 개별적으로 줄 때도 두께(width), 스타일(style), 컬러(color)를 설정할 수 있습니다. 특징 설명 기본값 border-color : currentcolor border-style : none .. 2022. 12. 30. border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다. Reference/CSS border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-bottom border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다. 테두리 아래 속성에 color, style, width 값을 일괄적으로 설정이 가능합니다. 특징 설명 기본값 border-bottom-color : currentcolor border-bottom-style : none border-bottom-width : medium 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-bottom 속성은 테두리 아래쪽 속성을 일괄적으로 설정합니다. 비교(Compare) border-bott.. 2022. 12. 30. border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. Reference/CSS border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-top border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. 테두리 위쪽 속성에 color, style, width 값을 일괄적으로 설정이 가능합니다. 특징 설명 기본값 border-top-color : currentcolor border-top-style : none border-top-width : medium 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합니다. 비교(Compare) border-top 속성은 테두리 위쪽 속성을 일괄적으로 설정합.. 2022. 12. 30. border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다. Reference/CSS border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-left border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다. 테두리 왼쪽 속성에 color, style, width 값을 일괄적으로 설정이 가능합니다. 특징 설명 기본값 border-left-color : currentcolor border-left-style : none border-left-width : medium 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-left 속성은 테두리 왼쪽 속성을 일괄적으로 설정합니다. 비교(Compare) border-left 속성은 테두리 왼쪽 속성을 일.. 2022. 12. 30. border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다. Reference/CSS border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-right border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다. 테두리 오른쪽 속성에 color, style, width 값을 일괄적으로 설정이 가능합니다. 특징 설명 기본값 border-right-color : currentcolor border-right-style : none border-right-width : medium 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-right 속성은 테두리 오른쪽 속성을 일괄적으로 설정합니다. 비교(Compare) border-right 속성은 .. 2022. 12. 30. border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다. Reference/CSS border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-width border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다. 특징 설명 기본값 border-width : medium 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다. 비교(Compare) border-width 속성은 테두리 두께 속성을 일괄적으로 설정합니다. border-top-width 속성은 테두리 위쪽 두께 속성을 설정합니다. border-right-width 속성은 테두리 오른쪽 두께 속성을 설정합니다. border-bot.. 2022. 12. 30. border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다. Reference/CSS border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다. by @webs 2022. 12. 29. border-style border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다. 테두리 종류를 여러가지 스타일로 설정 가능합니다. 네 면의 위치를 일괄적으로 설정할 수 있으며, 각각의 위치를 개별적으로도 설정이 가능합니다. 스타일을 설정하기 위해서는 border-width와 border-color가 설정되어 있어야 합니다. 특징 설명 기본값 border-style : none 적용 border 버전 CSS1 사용성 ★★☆☆☆ 정의(Definition) border-style 속성은 테두리 스타일 속성을 일괄적으로 설정합니다. 비교(Compare) .. 2022. 12. 30. 이전 1 2 3 4 5 ··· 7 다음
