본문 바로가기

[Front-End] 프론트엔드/[css] 스타일시트20

[css3] 투명 네비게이션 바 만들기 네비바 투명도 설정하기 예제 소스 코드 이미지 배경 비디오 웹 페이지 홈페이지 안녕하세요. 이번 포스팅은 CSS으로 투명한 네비게이션 바 만들기입니다. 웹페이지나 홈페이지에 투명한 네비게이션 바를 적용할 수 있습니다. 스타일시트로 간단하게 변경합니다. 인터넷 상에서 활용도가 높은 기능으로 자주 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 codeomni.tistory.com Home About Services Contact ▲ 먼저, html으로 네비게이션 메뉴를 만들어줍니다. ▲ ~ 태그를 사용하여 메뉴를 ~태그에 넣습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 html {.. 2020. 10. 8.

[css3] visibility 속성 요소 불투명 태그 보이지 않게 하기 소스 코드 예제 안녕하세요. html5에서 작성된 요소를 css3를 통해 디자인을 할 수 있습니다. css3 속성 중 visibility 속성을 사용하면 요소를 투명하게 할 수 있습니다. 속성 값으로는 visible, hidden, collapse, inherit 가 있습니다. -visible: 요소를 불투명하게 지정합니다. -hidden: 요소를 투명하게 지정합니다. -collapse: 요소를 표에서 지정할 경우 겹치돌록 지정합니다. -inherit: 부모의 속성을 상속하도록 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 codeomni.tistory.com css3 visibility 속성 요소 불투명 태그 보이지 않게 하기 소.. 2018. 9. 2.

[css3] ul list-style-type 목록 태그 스타일 타입 변경 소스 코드 예제 안녕하세요. ~ 태그를 사용하여 순서가 없는 목록 태그를 사용합니다. css3를 사용하여 목록 태그의 불릿을 변경할 수 잇습니다. list-style-type 속성을 사용하면 쉽게 적용할 수 있습니다. 속성 값으로는 disc, circle, square가 있습니다. -disc: ● -circle: ○ -square: ■ 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 codeomni.tistory.com css3 ul list-style-type 목록 태그 스타일 타입 변경 소스 코드 예제 body { background-color: #3e86d7; } codeomni a b c a.. 2018. 9. 1.

[css3] text-align 텍스트 정렬 소스 코드 예제 안녕하세요. text-align 속성을 사용하면 쉽게 텍스트를 정렬할 수 있습니다. 속성에 사용할 수 있는 속성 값은 justify, left, center, right 가 있습니다. -justify: 양쪽 정렬합니다. -left: 왼쪽 정렬합니다. -center: 가운데 정렬합니다. -right: 오른쪽 정렬합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 codeomni.tistory.com css3 text-align 텍스트 정렬 소스 코드 예제 body { background-color: #9adaca; } #box { bor.. 2018. 8. 29.

[css3] letter-spacing 텍스트 간격 글자 사이 조절 소스 코드 예제 안녕하세요. css3에서는 다양한 스타일을 지원합니다. 웹 페이지에 방문하는 사용자에 맞게 디자인 할 수 있습니다. html5로 작성한 페이지의 텍스트 간격, 글자 사이를 조정하는 속성은 letter-spacing입니다. 크기 단위와 normal를 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 codeomni.tistory.com css3 letter-spacing 텍스트 간격 글자 사이 조절 소스 코드 예제 body { background-color: #9adaca; } h1, p { letter-spacing: 20px; } codeomni letter-spacing 텍스트 간격 조절 Colored by Color Scripter cs 실행.. 2018. 8. 28.

[css3] box border-color 속성 박스 테두리 색상 변경 소스 코드 예제 안녕하세요. css3로 테두리의 색상을 지정할 수 있습니다. border-color의 속성을 사용하면 쉽게 지정할 수 있습니다. 부분으로 지정할 때는 border-top-color, border-right-color, border-bottom-color, border-left-color를 사용합니다. 투명하게 할 때에는 transparent를 속성 값으로 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 codeomni.tistory.com css3 box border-color 속성 박스 테두리 색상 변경 소스 코드 예제 body { background-color: #9adaca; } div { width: 100px; bord.. 2018. 8. 27.

[css3] box border-width 속성 박스 테두리 두께 변경 소스 코드 예제 안녕하세요. html5로 제작한 웹 페이지를 css3로 쉽게 디자인 할 수 있습니다. 박스, 표, 그림 등의 서식에서 border-width 속성을 사용하면 테두리의 두께를 지정할 수 있습니다. border-width 속성은 위, 오른쪽, 아래, 왼쪽 순으로 지정합니다. 부분으로 지정할 때에는 border-top-width, border-right-width, border-bottom-width, border-left-width를 사용합니다. -얇은 선을 그립니다. -medium: 중간인 선을 그립니다. -thick: 굵은 선을 그립니다. -크기 단위: 선택한 크기만큼 그립니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.t.. 2018. 8. 27.

[css3] a link 하이퍼링크 밑줄 없애기 소스 코드 예제 안녕하세요. html5에서 하이퍼링크를 통해 다른 웹 페이지를 쉽게 이동할 수 있습니다. 하이퍼링크는 기본적으로 밑줄이 되어 있습니다. 밑줄을 제거하거나 색상의 변경을 :link 속성을 사용하여 다양하게 적용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 codeomni.tistory.com css3 a :link 하이퍼링크 밑줄 없애기 소스 코드 예제 body { background-color: #9adaca; } a:link { color: black; text-decoration: none; } codeomni.tistory 하이퍼링크 밑줄 지우기 Colored by Color Scripter cs 실행한 화면입니다. 2018. 8. 26.

[css3] 스타일시트 box-shadow 박스 모서리 둥글게 만들기 모서리 곡선 효과 속성 소스 코드 예제 안녕하세요. html4, css2에서는 모서리를 둥글게 만들기 위해서 자바스크립트나 외부 프로그램을 이용하였습니다. CSS3에서는 모서리 부분을 둥글게 할 수 있는 속성을 지원합니다. border-radius 속성을 사용하면 편하게 변경할 수 있습니다. 속성 값으로는 크기 단위와 %(백분율) 단위를 사용할 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.tistory.com css3 스타일시트 box-shadow 박스 모서리 둥글게 만들기 모서리 곡선 효과 속성 소스 코드 예제 body { padding: 100px 50px; background-color: #9adaca; } #box { border: 3px so.. 2018. 8. 22.

[css3] 스타일시트 text-indent 텍스트 들여쓰기 소스 코드 예제 안녕하세요. css3를 사용하여 웹 페이지의 디자인을 쉽게 할 수 있습니다. 워드프로세서에 있는 들여쓰기 기능을 text-indent 속성을 사용하여 만들 수 있습니다. 속성의 값으로는 크기 단위나 % 단위를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 codeomni.tistory.com css3 스타일시트 text-indent 텍스트 들여쓰기 소스 코드 예제 body { background-color: #cce0d6; } h2 { text-indent: 20px; } p { text-indent: 40px; } codeomni 들여 쓰기 codeomni 20px 들여 쓰기 codeomni 40px 들여 쓰기 Colo.. 2018. 8. 22.

[css3] mark 태그 형광펜 마크 색상 변경 소스 코드 예제 안녕하세요. css3에서는 html5에서 새로 지원하는 형광펜 태그의 색상을 변경할 수 있습니다. 스타일시트 부분에서 태그 선택자를 이용하여 변경하시면 됩니다. background-color 속성을 사용하세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css3 mark 태그 형광펜 마크 색상 변경 소스 코드 예제 body { background-color: #9adaca; } codeomni mark 태그 소스 codeomni mark 태그 소스 Colored by Color Scripter cs ▲ 실행 화면입니다. ▲ 기본 색상은 노란색입니다. 2018. 8. 21.

[css3] 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 안녕하세요. css3에는 html5를 디자인 할 수 있는 다양한 스타일을 지원합니다. 글자에 그림자 속성을 사용한 것처럼 박스에도 box-shadow 속성을 적용할 수 있습니다. 사용 방법은 box-shadow: 오른쪽 아래 흐림도 색상 순서입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 codeomni.tistory.com css3 스타일시트 box-shadow 박스 그림자 속성 소스 코드 예제 body { background-color: #cce0d6; } #box { border: 3px solid; width: 400px; padding: 10px; box-shadow: 10px 5px 10px #a89c86; } codeomni 박스.. 2018. 8. 20.

css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 안녕하세요. css3에는 사용자가 쉽게 디자인을 할 수 있도록 그림자 속성을 지원합니다. text-shadow는 글자에 그림자를 적용하는 속성입니다. 사용 방법은 text-shadow: 오른쪽 아래 흐림도 색상 입니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com css3 스타일시트 text-shadow 텍스트 그림자 속성 소스 코드 예제 body { background-color: #316097; } h1 { color: #d9cbb3; text-shadow: 10px 5px 10px #a89c86; } codeomni 텍스트 그림자 속성 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 20.

css3 스타일시트 font 글꼴 속성 소스 코드 예제 안녕하세요. css3를 통해 html로 제작된 페이지를 다양한 디자인을 할 수 있습니다. 스타일시트에서 지원하는 폰트 속성으로 폰트를 적용할 수 있습니다. -color: 글자의 색상을 지정합니다. -font-size: 글자의 크기를 지정합니다. -font-family: 글꼴을 지정합니다. -font-style: 글자의 스타일을 지정합니다. -font-weight: 글자의 두께를 지정합니다. -text-align: 글자의 정령 방식을 지정합니다. -line-height: 글자의 높이를 지정합니다. -text-decoration: 하이퍼링크의 글자를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 codeomni.tistory.com c.. 2018. 8. 19.

css 스타일시트 background 배경 속성 소스 코드 예제 안녕하세요. html5은 다양한 css3(스타일시트)를 지원합니다. 많은 웹 페이지에서 배경을 효과적으로 사용합니다. css에서 배경 속성을 지원하기 때문입니다. background: 배경의 속성을 한 번에 사용합니다. background-image: 배경에 사용할 이미지를 지정합니다. url()를 사용합니다. background-size: 이미지의 크기를 지정합니다. (너비, 높이) background-repeat: 이미지의 반복을 지정합니다. (가로, 세로 반복) background-attachment: 이미지의 부착하는 형태를 지정합니다. background-position: 이미지의 위치를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 co.. 2018. 8. 18.

css rgb, rgba, hex 색상 단위 소스 코드 안녕하세요. 스타일시트는 html를 손쉽게 스타일을 적용할 수 있습니다. css3에서는 다양한 색상을 적용할 수 있도록 색상 단위를 제공합니다. - rgb(red, green, blue): RGB 색상 단위입니다. 0~255 사이의 숫자를 입력할 수 있습니다. - rgba(red, green, blue, alpha): RGBA 색상 단위입니다. 투명도를 사용할 수 있습니다. (0,0 투명) - #000000: HEX 코드 단위입니다. 16진수 단위를 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 codeomni.tistory.com css rgb, rgba, hex 색상 단위 소스 코드 codeomni.tistory.com rgb(red, green, blue) RGB 색상 단위.. 2018. 8. 17.

css 외부 스타일 시트 사용 소스 코드 안녕하세요. css 시트는 html로 작성한 웹 페이지의 스타일을 적용합니다. 스타일시트는 내부 스타일시트와 외부 스타일시트가 있습니다. 내부 시내일 시트는 태그를 사용해 html 문서 안에 작성하는 방법입니다. 외부 스타일시트는 태그에 href속성을 사용하여 html로 불러 사용합니다. 외부 스타일시트는 협업을 할 경우, 프로젝트 단위가 클 경우 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 codeomni.tistory.com css 외부 스타일 시트 사용 소스 코드 Colored by Color Scripter cs ▲ html 소스 코드입니다. 1 2 3 4 5 6 7 body { background.. 2018. 8. 16.

css px pt ex em 글자 크기 값 소스 코드 안녕하세요. css에는 웹 페이지에 알맞은 여러 글자 크기의 단위를 제공합니다. 글자 크기의 단위를 사용하면 웹 페이지가 모바일에서도 작동합니다. - px: 일반적인 픽셀입니다. 모니터의 픽셀에 따른 상대적 크기입니다. - pt: 문서에서 사용하는 포인트 단위입니다. - em: 사용하고 있는 글꼴에서 대문자 M의 너비를 기준으로 적용합니다. - ex: 사용하고 있는 글꼴에서 소문자 x의 높이를 기준으로 적용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com css px pt ex em 글자 크기 값 소스 코드 codeomni 글자 크기 값 소스 코드 글자 크기 px 단위 글자 크기 pt 단위 글자 크기 ex 단위 글자 크기 em 단위 Colore.. 2018. 8. 15.

css ghost button 고스트 투명 버튼 소스 코드 안녕하세요. 웹 페이지에서 투명 버튼인 고스트 버튼은 쉽게 css로 구현할 수 있습니다. 구현하고 싶은 페이지에 알맞게 색상, 크기, 위치를 변경하기 쉽습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 codeomni.tistory.com css ghost button 고스트 투명 버튼 소스 코드 body { background:url('background.png') no-repeat center fixed; background-size:cover; } .ghost-button { align-items: center; display: inline-block; padding: 25px 40px; marg.. 2018. 8. 11.

css 선택자 종류 소스 코드 안녕하세요. css3 선택자를 작성하여 html를 선택하면 코드의 효율성 증가,시간을 절약할 수 있다는 장점이 있습니다. css 선택자는 여려 종류가 있습니다. 기본적으로 많이 사용하는 기본 선택자가 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 codeomni.tistory.com css 선택자 소스 코드 /*전체 선택자*/ * { color: orange; } /*태그 선택자*/ h1 { color: red; } /*아이디 선택자*/ #header { background-color: yellow; } /*클래스 선택자*/ .selection { color: black; }.. 2018. 8. 10.

이전 1 다음

티스토리툴바