본문 바로가기

[Front-End] 프론트엔드55

[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.

[yarn] yarn 얀 다운로드 설치하기 안녕하세요. 이번 포스팅은 yarn 다운로드 설치하기입니다. https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com ▲ 먼저 yarn 페이지 링크에 접속합니다. ▲ 다운받을 컴퓨터의 운영체제와 설치할 버전을 통해 이동합니다. ▲ "Download Installer" 버튼을 클릭합니다. ▲ 다운받은 해당 파일을 설치합니다. 2020. 7. 28.

[yarn] yarn 얀 프로젝트 리액트 실행 명령어 안녕하세요. 이번 포스팅은 yarn에서 프로젝트 실행 명령어입니다. ▲ 먼저 실행에 들어가서 CMD.EXE를 입력하여 실행하거나 검색에 CMD를 검색합니다. ▲ 실행할 프로젝트로 cd 명령어를 통해 이동합니다. ▲ 명령어 "yarn start"프로젝트 이름"을 입력합니다. ▲ 프로젝트가 실행됩니다. 오류가 발생할 경우 메시지를 출력합니다. 2020. 7. 27.

[yarn] yarn 얀 리액트 새 프로젝트 만들기 명령어 안녕하세요. 이번 포스팅은 yarn에서 새 프로젝트 만들기입니다. ▲ 먼저 실행에 들어가서 CMD.EXE를 입력하여 실행하거나 검색에 CMD를 검색합니다. ▲ 명령어 yarn react-app "프로젝트 이름"을 입력합니다. ▲ 지정한 이름으로 프로젝트가 생성됩니다. 2020. 7. 27.

[yarn] yarn 얀 현재 사용하고 있는 버전 확인하기 명령어 안녕하세요. 이번 포스팅은 yarn에서 현재 사용하고 있는 버전 확인하기입니다. ▲ 먼저 실행에 들어가서 CMD.EXE를 입력하여 실행하거나 검색에 CMD를 검색합니다. ▲ 명령어 yarn --version를 입력합니다. ▲ 현재 사용하고 있는 yarn의 버전이 출력됩니다. 2020. 7. 26.

[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.

[html5] br 줄 바꾸기 enter 엔터 소스 코드 예제 안녕하세요. html5에서는 사용자의 편의를 위한 다양한 태그를 지원합니다. 태그는 웹 페이지에서 줄을 바꿔주는 기능을 합니다. 태그를 통한 웹 페이지의 텍스트를 입력할 경우 텍스트 편집기의 enter를 인식하지 못합니다. 태그는 닫는 태그가 없이 단독으로 사용합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 br 줄 바꾸기 enter 엔터 소스 코드 예제 body { background-color: #4571a0; } codeomni html5 br 줄 바꾸기enter 엔터 소스 코드 예제 Colored by Color Scripter cs 실행 화면입니다. 태그에서 줄 바꿈을 확인할 수 있습니다. 2018. 8. 30.

[html5] radio button 라디오 버튼 삽입 소스 코드 예제 안녕하세요. html5에서는 다양한 타입의 입력을 지원합니다. 그 중에 라디오 버튼은 회원 가입과 선택 항목에서 많이 볼 수 있습니다. ~ 태그를 통해 사용가능합니다. 새로운 선택을 할 경우 기존에 선택된 버튼은 취소합니다. -name: 이름을 지정합니다. -value: 서버에 사용되는 값을 지정합니다. -checked: 선택된 상태로 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 codeomni.tistory.com html5 radio button 라디오 버튼 삽입 소스 코드 예제 body { background-color: #4571a0; } codeomni YES NO Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 30.

[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.

[html5] input image button 이미지 버튼 소스 코드 예제 안녕하세요. html5의 태그는 다양한 속성을 지원합니다. 태그를 사용하여 사용자의 입력을 처리할 수 있습니다. 태그의 type="image" 속성을 사용하여 이미지를 넣을 수 있습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 input image button 이미지 버튼 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 25.

[html5] caption 태그 표 제목 삽입 소스 코드 예제 안녕하세요. html5에서는 표를 만드는 여러가지 태그를 지원합니다. 그 중에 태그를 사용하여 표에 제목을 삽입할 수 있습니다. 태그는 ~ 태그 사이에 사용가능합니다. 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 codeomni.tistory.com html5 caption 태그 표 제목 삽입 소스 코드 예제 body { background-color: #9adaca; } table { width: 300px; } codeomni 표 제목 caption 표 제목 부분 1-1 1-2 1-3 2-1 2-2 2-3 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 24.

[html5] internet explorer 인터넷 익스플로러 호환 소스 코드 예제 안녕하세요. 윈도우에서 제공되는 인터넷 익스플로러는 업데이트 되면 렌더링 방식이 변화되어 태그를 통해 content 속성으로 렌더링 방식을 지정해야합니다. -IE=7: IE7 표준 모드 렌더링 방식 -IE=8: IE8 표준 모드 렌더링 방식 -IE=7: IE8 표준 모드 렌더링 방식 이상 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 codeomni.tistory.com html5 internet explorer 인터넷 익스플로러 호환 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory 인터넷 익스플로러 호환 Colored by Color Scripter cs 2018. 8. 24.

[html5] button 버튼 소스 코드 예제 안녕하세요. html5에는 ~ 태그를 사용하여 버튼을 만들 수 있습니다. 버튼의 type 속성을 사용하면 다양한 기능을 사용할 수 있습니다. -submit: 제출합니다. -reset: 입력된 내용을 모두 초기화합니다. -button: 버튼 모양으로만 설정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 codeomni.tistory.com html5 button 버튼 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory submit 버튼 reset 버튼 button 버튼 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 23.

[html5] iframe 태그 외부 문서 삽입 소스 코드 예제 안녕하세요. html5에서는 외부 문서를 현재 접속한 페이지에 삽입할 수 있습니다. ~태그를 사용하면 다른 웹 문서를 가져올 수 있습니다. 태그는 다양한 속성을 사용하여 가져올 수 있습니다. -seamless: 구분하는 테두리를 제거합니다. 속성의 값을 지정하지 않습니다. -src: 가져올 문서의 주소를 지정합니다. -width: 인라인 프레임의 너비를 지정합니다. -height: 인라인 프레임의 높이를 지정합니다. -name: 이름을 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 codeomni.tistory.com html5 iframe 태그 외부 문서 삽입 소스 코드 예제 body { background-color: #9adaca; } codeomni.tis.. 2018. 8. 23.

[html5] a 하이퍼링크 태그 새 창 새 탭에서 열기 소스 코드 예제 안녕하세요. ~ 태그로 하이퍼링크를 사용할 수 있습니다. 하이퍼링크를 클릭 했을 경우 기본창에서 링크됩니다. 다른 웹 페이지나 파일을 열 경우에는 ~ 태그의 속성을 사용합니다. target 속성에서는 다양한 링크 열기를 할 수 있습니다. -_blank: 새 탭, 창 -_self: 현재 탭, 창 -_parent: 부모 탭, 창 -_top: 최상위 탭, 창 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 codeomni.tistory.com html5 a 하이퍼링크 태그 새 창 새 탭에서 열기 소스 코드 예제 body { background-color: #9adaca; } codeomni.tistory 새 창, 탭 열기 현재 창, 탭 열기 부모 탭, 창 최상위 탭,.. 2018. 8. 23.

[html5] 주석 태그 소스 코드 예제 안녕하세요. html5에서는 코드를 설명, 요약하는 주석이 있습니다. 주석 태그는 입니다. 주석은 프로그램을 설명하거나 코드를 보는 사람을 위한 것으로 웹 페이지에서는 볼 수 없습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html5 주석 태그 소스 코드 예제 body { background-color: #9adaca; } codeomni 주석 태그 Colored by Color Scripter cs 실행 화면입니다. 2018. 8. 23.

[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.

[html5] progress 태그 상태 바 진행 소스 코드 예제 안녕하세요. html5에서 사용자에게 진행 상태를 보여주는 태그를 사용할 수 있습니다. 작업이나 요청의 시간, 상태를 나타납니다. 태그는 속성을 사용합니다. -value: 부동 소수점을 사용합니다. 0~설정값 사이로 지정합니다. -max: 범위를 지정합니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 codeomni.tistory.com html5 progress 태그 상태 바 진행 소스 코드 예제 body { background-color: #9adaca; } codeomni progress 태그 Colored by Color Scripter cs ▲ 실행 화면입니다. 2018. 8. 22.

이전 1 2 3 다음

티스토리툴바