본문 바로가기

전체 글

(12)
Git 사용법 프로젝트 시작 1. 깃 설치 git init 2. 생성한 원격저장소 repository 연결 git remote add origin 링크 3. 연결 확인 git remote -v Branch(브렌치) 1. 현재 브렌치 확인 git branch 2. 브렌치 생성 git branch 브렌치명 3. 브렌치 변경 git checkout 변경할브렌치명 4. 원격저장소에 브렌치 추가 git push --set-upstream origin 브렌치명 Commit(커밋) 1. 커밋할 파일 선택(전체) git add . 2. 커밋 git commit -m "코멘트" Push(푸시) 1. 커밋 내용 원격 저장소에 푸시 git push origin 브렌치명 2. non-fast-forward 에러 발생 시 Pull(풀) 에러..
AWS ELB(Elastic Load Balancing)를 이용한 서버 트래픽 분산 ELB에 대한 실습을 진행하다가 나중에 분명히 도움이 될 것 같아 글을 쓰게됐다. 웹 트래픽이 증가할 때 이에 대한 처리 방식으로는 스케일아웃(Scale out) / 스케일업(Scale up) 으로 나눌 수 있다. 스케일아웃은 서버의 개수를 늘리는 처리방식이고, 스케일업은 한대의 서버를 업그레이드 하는 것이다. AWS의 ELB(Elastic Load Balancing)는 스케일아웃에 해당한다. 이론은 정말 간단하다. 동일한 ec2 인스턴스를 2개 이상 생성해 트래픽을 배분하는 것이다. 우리는 새로운 도메인을 부여받고, 해당 도메인으로 request를 보내면 Load Balancer가 각 인스턴스로 알아서 배분해 이를 처리한다. 사실 인스턴스 자체의 cpu성능이나 용량을 키우면 어지간한 트래픽은 감당할 수..
CSS 활용 2편 (CSS 태그 배치) 지난글에 이은 CSS 활용 2탄이다. 목차 1. CSS 박스 유형 제어 display 2. CSS 박스 위치 지정 position 3. 기타 1. CSS 박스 유형 제어 display html의 태그는 블록 태그와 인라인 태그로 나뉜다. 대표적으로는 블록 박스, 은 인라인 박스를 출력한다. display 프로퍼티로 박스 유형을 설정할 수 있다. 블록 박스 display : block 인라인 박스 display : inline 인라인 블록 박스 display : inline-block 항상 새 라인에서 시작 새 라인에서 시작 못하고 라인 내에 위치 새 라인에서 시작 못하고 라인 내에 위치 블록 박스 내에만 배치 모든 박스 내 배치 가능 모든 박스 내 배치 가능 옆에 다른 요소 배치 불가능 옆에 다른 요소 ..
CSS 활용 1편 CSS로 적용할 수 있는 스타일에 대해 정리했다. CSS 적용 방법이 어려우면 이전글을 참고하면 된다. 목차 1. CSS 색 표현 2. CSS 텍스트 스타일 3. CSS 단위 4. CSS 폰트 5. CSS div 박스 모델 6. CSS 배경 다루기 7. CSS 텍스트 그림자 / CSS 박스 그림자 8. CSS 마우스 커서 제어 1. CSS 색 표현 CSS로 색 적용 시킬 수 있는 프로퍼티(속성)는 3가지가 있다. 1. color (텍스트) 2. background-color (배경 ) 3. border-color (테두리) 색 적용 방법 1. 색 이름 2. 16진수 3. rgb 2. CSS 텍스트 스타일 1. 들여쓰기 text-indent : (단위나 퍼센트로) 2. 정렬 text-align : (lef..
CSS와 셀렉터(Selector) html 파일에 CSS를 적용하는 방법에 대해서만 다루고 있다. 구체적인 CSS 태그나 속성들에 대해서는 다음글을 참고하면 된다🤭 CSS 적용하기 1. 태그 CSS / 셀렉터 예제 Hello World 중첩된 style frontend study HTML5 CSS JAVASCRIPT backend는 더 어렵다 external.css body{margin-left: 30px; margin-right: 30px;} p{background-color: pink;} 결과 CSS를 더 공부하고 싶다면 아래 게시글을 참고하자 CSS 활용 기본 CSS로 적용할 수 있는 스타일에 대해 정리했다. CSS 적용 방법이 어려우면 이전글을 참고하면 되고, CSS 활용 고급은 다음글로 작성 예정이다!! 목차 1. CSS 색 표..
HTML 웹 폼 [Web Form] 태그 폼 요소 작성 폼 요소 1. 2.
HTML 문서 구조화를 위한 시맨틱 태그 [Semantic Tag] 시맨틱 태그 1. 머리말 2. 하이퍼링크 집합 / 목차 3. 본문 / 장 4. 본문과 연관 있는 독립적 영역 5. 본문과 벗어난 노트나 팁 6. 꼬리말 위치나 색, 모양 등이 자동으로 결정되는 것이 아니기 때문에 CSS3를 이용해 직접 지정 해줘야한다. 시맨틱 블록 태그 1. 그림(사진,차트,삽화,소스코드 등)으로 블록화 2. 상세정보 3. details의 제목 표현 시맨틱 인라인 태그 1. 중요한 텍스트 2. 시간임을 표시 3. 범위나 퍼센트의 데이터 량 표시 4. 작업 진행정도
HTML 기본 태그 정리 학교 강의 자료를 기반으로 작성한 html 태그 정리 1. 브라우저의 타이틀 지정 2. 제목 달기 , 등등 3. 툴팁 달기 (마우스 대면 나오는) 4. 단락 나누기 5. 수평선 6. 줄바꿈 7. 포맷 그대로 8. 텍스트 꾸미기 진하게 / 중요한 / 강조 / 이텔릭체 / 작게 / 취소선 / 밑줄 / 윗첨자 / 아래첨자 / 하이라이팅 9. 대표적인 블록태그(새 라인, 한 라인 독점) 10. 대표적인 인라인 태그(블록의 일부) 11. 메타 데이터 기본 url / 외부 자원 연결 / / / / 웹페이지 저작자, 설명, 키워드, 문자 등 모두 안에 작성 (는 도 가능) 12. 이미지 삽입 src = 파일의 url / alt = 사진이 없을 때 지정할 문자열 / width = 폭 / height = 높이 13. 리..