본문 바로가기

전체 글

 (109)
CSS 개요 CSS란? - Cascading Style Sheets - W3C 에 의해 권고안이 작성되며, 현재는 Level 3가 있다. - 다양한 CSS 모듈들이 있으며 모듈별로 버전이 따로 있다. > 웹 버전 별로 모듈별 지원범위가 다를 수 있다. - 폭포수처럼 위에서 아래로 적용된다. CSS의 구조 CSS는 룰 기반(Rule-based)의 언어입니다. 즉, 특정요소, 또는 특정요소들의 집합의 스타일 규칙을 정의하여 사용합니다. h1 { color:red; font-size:12px; } > css 스타일 규칙의 예시 1. 선택자 : 스타일을 지정할 HTML 요소를 선택 2. 선언 블록 : 중괄호 {} 내부의 여러 선언들을 작성 3. 선언 : 속성과 값으로 이루어진쌍, 끝날때마다 세미콜론( ; )을 붙인다. 4...
Git Branch Branch란? - 중심이 되는 버전(Main)에서 복사해 새로운 가지를 만들어 다른 방향으로 작업을 이어나가는 것 > 기준이 되는 버전을 Main 브랜치라고 합니다. 왜 Branch를 사용할까? - 버그나 새로운 기능을 구현할 때, 구현이 완성될 때 까지는 문제가 발생할 수 있으며, 문제 해결이나 새로운 기능구현에 실패할 수도 있습니다.. - Branch를 사용하면 중심 버전에 악영향을 미치거나 문제가 발생하는것을 방지할 수 있습니다. 1. Branch 만들기 $ git branch test - git branch [브랜치 이름] 으로 브랜치를 만들 수 있다. > 이렇게 만든 브랜치는 아직 원격저장소에는 반영되지 않았으며, 해당 브랜치를 push해야 반영됩니다. $ git branch *master t..
Git 사용하기 1. Git 초기화 > git init 입력시 해당 폴더에 .git 파일이 생성됩니다. - .git 폴더에는 커밋과 브런치 내역, 로컬 설정등이 존재한다. > Git 삭제 - 단순하게 .git 폴더를 삭제한다. - mac의 경우 rm -rf.git 을 입력한다. 2. Git repository 연결 > github에 만든 repository에 들어갑니다. > code를 누르고 repository 주소를 복사합니다. git remote add origin [repository 주소] > 이후 연결하고자 하는 폴더에 git remote add origin [복사한 주소] 를 입력합니다. > 주소 붙여넣기는 shift + insert 를 사용하여 붙여넣기할 수 있습니다. $ git remote origin >..
GitHub 시작하기 1. Git 설치하기 https://git-scm.com/downloads Git - Downloads Downloads macOS Windows Linux/Unix Older releases are available and the Git source repository is on GitHub. GUI Clients Git comes with built-in GUI tools (git-gui, gitk), but there are several third-party tools for users looking for a platform-specific exp git-scm.com OS 에 맞게 설치하면 됩니다. 2. Git 사용자 설정하기 & git config --global user.email "kyo..
HTML 폼 관련 요소 form : 값을 입력하고 제출하는데 사용되는 요소 > 다른 요소들과는 다르게, 값을 입력받고 정보를 전달하는데 사용되는 요소 > 회원가입, 설문조사, 주문서 등을 만들때 사용된다. - action 속성 : 목적지 주소, 양식 데이터를 해당 URL 로 전송하여 이동한다. - method 속성 : 전송 타입 > GET : 양식 데이터를 url에 첨부하여 전송한다. 데이터가 url 상으로 보이기 때문에 비밀번호 등의 중요정보가 포함되는경우 사용하면 안된다. > POST : 양식 데이터를 요청 본문으로 전송한다. 공개하면 안되는 중요 정보를 처리할때 사용한다. input : form 내에서 입력을 처리하는 태그 - type 속성을 사용하여 형태를 지정한다 - text : 텍스트 값을 입력하는 속성 > minl..
임베디드 요소-video, audio, canvas, iframe video : 비디오 삽입 요소 > video 태그는 태그 내에 값을 넣을수 있으며, 비디오가 정상적으로 나오지 않을경우 태그 내의 값이 나온다. - 보통 브라우저가 영상파일을 지원하지 않을때를 대비해서 사용한다. > src 속성을 통해 비디오 파일 경로를 지정한다. > src 속성이 옵셔널이며, source 태그를 자식 태그로 넣어 사용할 수도 있다. - controls 속성 : video 태그 내 컨트롤 패널을 추가해 줄 수 있다. - autoplay 속성 : 첫 실행 시 자동실행을 시킨다. 사운드플레이 옵션때문에 새로고침시 재생이 멈출수도 있다. - muted 속성 : 음소거, 설정시 새로고침을 하더라도 autoplay 속성이 실행된다. - loop 속성 : 속성 추가시 영상이 끝난 뒤 처음부터 반..
임베디드 요소 - img img : 이미지를 담는 태그 > 안쪽에 내용이 없는 닫힌 태그 - src 속성 : source, 띄울 이미지의 경로를 표시하는 속성, 필수적으로 들어가야 한다. - alt 속성 : alternative, 대체 텍스트로, 이미지가 출력되지 않을 경우 이미지의 설명을 텍스트로 나타내게 만든다. - width & height : 이미지의 가로, 세로 크기를 지정해줄 수 있다. > width속성 또는 height 속성 중 하나만 사용한다면, 이미지의 비율에 맞춰 사용하지 않은 속성도 자동으로 정해진다. > 두 속성 모두 사용한다면, 비율을 무시하고 이미지 크기를 조정한다. 반응형 이미지 - srcset 속성 : 이미지 소스를 다수 올릴수 있는 속성 > 반응형 이미지를 설정하기 위해 사용한다. > 이미지의 UR..
목록과 표 - ul&ol, dl, table, caption 1. ul , ol , li - ul : Unordered List, 순서가 없는 리스트 - ol : Ordered List, 순서가 있는 리스트 > type 속성을 통해 목록의 순서표시를 다르게 할 수 있다. ex) type = "1" => 1,2,3... type="a" = a,b,c... > start 속성을 사용하여 처음 시작하는 숫자를 정할 수 있다 ex) start = "5" => 5,6,7... > reversed 속성을 사용해 목록의 순서를 반대로 만들수 있다. ex) => 1,2,3,4 => 4,3,2,1... - li : List의 구성요소, ul태그와 ol 태그 내에서 사용한다. > li 태그 내에서 또 다른 ul이나 ol 태그를 사용할 수 있다. 리스트 출력 첫번째 리스트 두번째 리..

티스토리툴바