본문 바로가기
  • 뚜기네

공부방/Programming18

웹 메뉴바 디자인 1 - 기본 자주 사용하는 메뉴바 디자인 기록 Home Menu1 Menu2 Menu3 .headerWrap { width: 100%; height: 50px; text-align: center; background-position: center; background-size: cover; background-color: #000000; position: fixed; z-index: 1; } nav{ font-size: 1.2rem; position: relative; } nav ul{ text-align: center; margin: 0 auto; width: auto; } nav ul li{ display: inline-block; } nav ul li a{ line-height: 50px; } nav ul li.. 2023. 2. 11.
reset.css reset.css 이 골격으로 입맛에 맞게 커스터마이징. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp, small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article, aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu, nav,ou.. 2023. 2. 10.
git 명령어 모음 분류 명령어 기능 시작 및 설정 $ git --version 설치된 git 버전 확인 $ git init .git 하위 디렉토리 생성 $ git config --global user.name "사용자이름" 사용자 이름 설정 $ git config --global user.email "사용자이메일" 사용자 이메일 설정 $ git status 상태 확인 저장소 $ git remote add origin [github 저장소 주소] 원격 저장소 연결 $ git remote -v 저장소 확인 $ git clone /로컬/저장소/경로 로컬 저장소 복제 $ git clone 이름@호스트:/원격/저장소/경로 원격 저장소 복제 commit 명령어 $ git add 파일명 커밋에 변경사항 올림 $ git add . 수정.. 2023. 2. 1.
[Git] git Error fatal: The current branch master has no upstream branch.To push the current branch and set the remote as upstream, use github Repository 생성후 $ git remote add origin Repository주소 $ git add . $ git commit -m "메시지" $ git push 아래 이미지와 같은 에러 메세지가 나왔다. 원인은 Repository 생성후 원격 저장소에 대한 기본 브랜치 설정을 안 해줬기 때문이다 처음 브랜치 설정만 해주면 해결이 가능 $ git push --set-upstream origin master 위 이미지에도 친절하게 설명이 나와있다 2023. 1. 9.
ERROR E325: ATTENTION 프로그래밍을 하면 뭔 오류가 이리 많은지… 띄어쓰기 하나만 틀려도 초보에게는 산넘어 산이다 포스팅도 할겸 발생되는 오류사항을 기록하도록 하자 깃허브를 이용을 위해 이것저것 조작해보던중 git commit 를 입력하니 E325: ATTENTION 오류가 발생했다 원인분석 E325: ATTENTION 오류는 vi에디터가 비정상적으로 종료되었때 발생된다고 한다. 위 이미지 두번째 COMMIT_EDITMSG .swp 파일이 원인이다. Found a swap file by the name "~/dev/workbook/.git/.COMMIT_EDITMSG.swp" .swp 확장자는 vi 편집기를 사용하는 동안 비정상적으로 종료가 발생되면 임시로파일을 저장하기 위해 사용되는 파일이다. 즉 vi 편집기 사용시 swp .. 2022. 12. 28.
6/8 css3 selecter 선택자 태그 13개정도가 추가되었다. 많이 사용되는 것은 4,5개 정도. 태그뒤에 대괄호([ ]) 를 사용한다. ^ $ * 유사클래스 (특정의 문자열을 포함하면 일치하지 않아도 타겟한다.) 아래 예제를 두고 설명한다. 배분 대표사업의 핵심 브랜드화 창의적 배분구조/사업/플랫폼의 인큐베이팅 공익단체 역량의 집중 강화(교육,컨설팅) 사회이슈에 대한 전자구적 인식과 대응 창의적 참여적 시민기부모델 개발 창립 10주년 기념 사이트 "나눔으로 함께 만든 10년"사이트 오픈 서울시 강남구 역삼동 000-000번지 tel:00-000-0000 [^] 프래그래밍에서 프론트 앞이라는 뜻을 가지고 있다 단어를 포함하고 있으면 적용된다. 클래스 이름을 포함하는 요소 [$] 프로그래밍 에서 end 끝이라는 뜻을 가지고 있다. 앞자리가 아.. 2020. 8. 27.
<CSS3> 4강 선택자 selector. 결합자 combinator 두개 이상의 셀럭터들의 관계를 타겟팅하기 쉽게 하기 위한 기호 이다. [ > ] child selector - 자식요소 결합자 > 직계 자손 [ + ] adjacent sibiling selector - 인접 형제 요소 결합자, 뒤에오는 형제 중 첫번째 [ ~ ] general sibling selector - 형제 요소 결합자, 뒤에오는 형제 모두를 포함한다 _(띄어쓰기) descenant selector - 후손식별자, ex) div p {} selector (선택자) 기호 - css selector은 특정한 HTML 태그를 선택하여 다중으로 CSS효과를 부여하는 역할을 한다. - 전체를 선택하는 * 선태자와 class="클래스명" , -id="아이디명" 선택자가 있다. e.. 2020. 8. 19.
<CSS3> 3강 CSS기본 규칙 CSS 기본 규칙 네이밍 규칙 파일 네이밍시 (html/css 동일) - 포함할 수 있는 문자는 영문(대소문자), 숫자, _, - 까지 허용된다. - 처음 시작글자는 영문 소문자로만 시작할 수 있다. - 조합 형태는 -> 의미 -> 순서 -> 상태를 기본 순서로 사용한다. - 단어의 조합으로 네이밍시 띄어쓰기 대신 _(언더스코어) 를 사용한다. 파일내 태그 네이밍시 - 모든 속성은 숫자, 대문자, 특수문자로 시작할 수 없으며, 영문 소문자로만 작성한다. - 2가지 단어를 조합하여 표현할 때 "카멜표기법 =>noticeTitle", "_(언더스코어)표기법 => notice_title" 을 사용한다. - 1,2 와 같은 한자리 정수는 사용하지 않으며 01, 02와 같이 네이밍 하여 사용할것을 권장한다. - .. 2020. 6. 10.
<CSS3> 2강 CSS단위 절대단위 절대적인 크기가 정해져 있는 단위 px, 픽셀, pixel = 웹에서 가장 많이 사용되는 단위 1/96 inch pt, 포인트. point = 1pt = 1/72 inch in 인치 inch = 1인치는 2.54cm cm 센치미터 = . mm 밀리미터 = . pc 파이카 picas = 활자의 크기를 나타내던 옛말, 지금은 잘 사용하지 않는다. 1파이카는 12포인트 상대단위 부모 요소의 크기를 기준으로 상대값이 정해진다. 고정형 웹에서 반응형 웹으로 넘어오면서 많이 사용되고 있다. em - em 단위는 body{font-size:16px} 값을 기준으로 사용한다 - 부모 요소의 글꼴에 비례. 때문에 기준값에 따라 값이 바뀐다. - 2em은 현재 글꼴 크기의 2배를 의미한다. % - 100% 를 기.. 2020. 6. 9.
<HTML5> 8강 blockquote/q 태그, abbr/acronym 태그, del/ins 태그, sup/sub 태그, address태그 , 태그 - 블럭단위의 긴 인용문은 태그를, 인라인 단위의 짧은 인용문은 태그를 사용한다 - cite 속성에는 인용한 웹사이트의 URL 주소를 기재. - title 속성에는 접근성을 위해 글에대한 제목/상세 설명을 기재 를사용하면 티스토리에서는 이렇게 나타낸다 , 태그 abbr => 축약어 한글자씩 읽는다 acronym => 두문자어 약어를 그대로 발음한다. , 태그 - 인라인 요소 - 문서에 추가된 내용이나 삭제된 내용을 명시할 때 사용한다. ex1) 를 사용하면 텍스트 하단에 밑줄이 그어진다. ex2)을 사용하면 텍스트 중간에 밑줄이 그어진다 , 태그 - 수학 공식에 사용되는 수식이나 원소기호를 나타낼 때 사용하는 윗첨자와(sup) 아랫첨자 (sub ) ex) H2O, 22 태그 - 블럭요소 - 사용.. 2020. 6. 9.
<HTML5> 7강 img 태그 / <map> 태그 태그 - image 의 약자 - 이미지를 처리하는 태그이다. - inline 요소 (하위계층) - 시작태그로만 구성되어있다.(닫는태그가 없다.) - width height 값으로 사이즈를 조정할 수 있다. - alt 값은 그래픽 정보를 접할 수 없는 사람들을 위한 텍스트 정보로 사진에 대한 설명을 기재한다.(의미없는 사진은 x) - padding 속성을 갖을 수 없다 img태그 속성 - src="이미지 경로/파일명.확장자" (source) - alt="텍스트정보" (접근성-리더기가 읽는다) ex) css속성을 사용한 배경이미지 처리 - background:url(이미지의경로) 위치 rpeat값 (repeat/no-repeat/repeat-x/repeat-y) - top/bottom/left/right/c.. 2020. 6. 8.
<CSS3> 1강 CSS란, CSS 적용 방법 CSS란 cascading style sheets의 약자로 소스 구성이나 배치등을 보완하기 위해 개발된 독립적인 언어이다. html을 바탕으로 사용할 수 잇으며 html이 만든 뼈대위 옷을 입히는 역할로 디자인 기능을 수행한다 문서 전체의 일관성을 유지할 수 있고, 세세한 스타일 지정의 필요를 줄어들게 하였다. CSS는 서버가 아닌 웹 브라우저에서 해석되어 화면에 적용되기 때문에 웹 서버의 부담을 줄여주면서도 다양한 기능을 수행할 수 있다. CSS2 => CSS3 로 넘어오면서 adobe flash 기능을 대체하게 되었으며 css의 기능은 더욱더 확대될 전망이다. css 사용 css 를 사용함으로써 웹 문서의 편집을 자유롭게 할 수 있고, 통일감있는 웹페이지를 만들수 있다. css 는html과 마찬가지로.. 2020. 6. 8.
<HTML5> 6강 dl, dt, dd 정의형 목록태그 - definition lists 의 약자 - block level element 이다. 태그의 직계 자손은 , 만 올 수 있다. - 키워드와 설명으로 구성되는 정의형 목록의 범위를 생성한다. - 용어 설명에 적합한 태그이다. - definition term의 약자 - 목록의 제목을 나타낸다. - 요소는 inline요소만 사용 가능하다. - 태그안에서만 사용될뿐 - 는 여러개가 와도 상관이 없다. - definition description의 약자 - 를 설명하는 태그이다. - , 순서는 상관없다. 계층으로 보면 dt = dd - 블럭요소 인라인요소 모두 갖을 수 있다. - default 값으로 40px 들여쓰기가 되어 있다. - 태그안에서만 사용된다. - 태그와 같은 성질을 가지고 있다 . , 태그와 .. 2020. 6. 5.
<HTML5> 5강 ul, ol, li 목록태그 태그 - unorder list 약자 - 순번이 없는 목록태그 - 인라인 요소이다. - 순번대신 불릿을 가지고 있다. - CSS 속성에 따라 다양한 형태의 불릿을 표시할 수 있다. (list-style: circle ,disc, square) - 실무에서는 불릿이 불편하여 잘 사용하지 않고 (ul{list-style : none}) 필요할때는 다른 기법으로 사용한다 (img, background) - 태그의 직계 자식은 태그만 사용할 수 있다. - 리스트, 네비게이션 메뉴, 캐러셀 등 연관된 콘텐츠가 반복적으로 나열되어 있을 때 자주 사용된다. 태그 - order list 약자 - 순번이 있는 목록태그 - 인라인 요소이다. - CSS 속성에 따라 1,2,3 abc등 여러 기호로 표시할 수 있다. (lis.. 2020. 6. 2.
<HTML5> 4강 a 하이퍼링크 태그 태그 - Anchor 의 약자. 정박지, 닻의 뜻을 가지고 있다. - 웹페이지와 웹페이지를 연결하는 하이퍼 링크. 태그중의 가장 중요한 태그라고 볼 수 있다. - 스크린 리더기에서 표현해주는 태그이다. - 요소는 인라인요소지만 블럭요소의 부모가 될수 있다. - 글자색상(#00f,보라색), underline 기본구조를 가지고 있다. - 포커스를 받을 수 있는 태그 - color속성은 상속되지 않는다 태그의 속성 href - Hypertext Reference 의 약자 - 연결할 주소를 지정해놓으면 클릭시 지정된 페이지로 이동한다. ex1) href="url" => 입력된 도메인 주소로 이동한다. ex2) href="파일명.확장자" => zip문서는 다운로드 받아진다. ex4) href="#아이디명.. 2020. 6. 1.
<HTML5> 3강 strong, (b) 강한강조태그, em (i) 약한강조태그 (strong태그를 적용했습니다.) - 힘, 강조의 뜻 - 글씨를 굵게 표시 - 스크린 리더기에서 strong태그를 사용한 부분을 강조하여 읽어준다. (b 태그와의 차이점) - 보통 해당 태그에 직접 사용한다. (b태그를 적용했습니다.) - bold의 약자 - 글씨를 굵게 표시 - 스크린 리더기에서 b태그는 강조하여 읽지 않는다 (strong 태그와의 차이점) - 해당 태그에 직접 적용하기보다 css속성중 font-weight : bold를 사용하여 표현한다. - 접근성문제로 사용하지 않는다 (em태그를 적용했습니다.) - emphasize - 텍스트를 기울여서 표시해준다. - 스크린 리더기에서 em태그를 사용한 부분을 강조하여 읽어준다. (i 태그와의 차이점) - 보통 해당 태그에 직접 사용한다. (i.. 2020. 5. 31.
<HTML5> 2강 p 단락태그, div 박스태그, span강조태그 태그 - 단락 paragraph의 약자 - block-level Element를 가진다. - 기본 16px를 가진다. - 제목 아래 본문 내용을 나타낼 때 사용되는 태그 - 한줄 이상의 문장을 넣을때 사용되는 태그. - 한줄 상하 여백을 가진다. 태그 - 나누다 division 의 약자. - block-level Element를 가지며 모든 블럭 요소를 담을 수 있다. - display:block 속성이 default로 되어있어 줄바꿈이 자동으로 된다. - 빈 박스 형태로 영역을 구분짓는 레이아웃으로 주로 사용된다. - 중첩이 가능하다. 태그 - span 태그는 기간 폭 너비의 뜻을 가짐 - inline-level Element요소를 가진다 . - 기본 스타일이 없고, css를 사용하여 내용안의 특정 부.. 2020. 5. 30.
<HTML5> 1강 h1 헤딩태그 - 헤딩태그는 ~ 6단계가 존재 h1태그입니다. h2태그입니다. h3태그입니다. h4태그입니다. h5태그입니다. h6태그입니다. - 헤딩태그는 블럭 요소를 가진다. - 헤딩 태그는 bold체가 기본 적용되어 있다. - font-size는 상속되지 않는다. - 헤딩태그는 웹 페이지의 제목, 목차를 나타내는 곳에 사용한다. - 웹페이지를 대표하는 로고는 h1태그를 사용한다. - 헤딩태그는 웹접근성에서 가장 중요한 태그이기 때문에 계층에 맞게 순서대로 사용해야 한다. * 헤딩 태그는 브라우저의 최상위 검색 대상이기 때문에 정확한 정보를 기재해야 웹 접근성에서 유리합니다. * 를 사용하고 로 바로 넘어가면 웹 표준성에 어긋나기 때문에 순서대로 사용해야 합니다. * html5에서0 시멘틱 태그가 생김으로써 h1태.. 2020. 5. 30.
반응형

티스토리툴바