개발새발

1. CSS 초기화 1)초기화 이유 의미를 가지고 있는 태그들이 브라우저에 특정한 스타일을 가진 형태로 나타난다 하지만 다양한 브라우저에서는 각기 다른 모습으로 나타날 수 있다 그러므로 만들려고 하는 모양을 각 브라우저에서 같아보이도록 하기 위해 초기화를 해야한다! 2)초기화하는 방법 (1) body 태그가 원래 가지고 있는 기본값을 초기화 body{ margin: 0; body: 0; } 이렇게 매번 초기화를 하기 어렵기 때문에 (2) reset.css라는 라이브러리를 연결해서 사용한다 reset.css cdn으로 검색해서 들어가면 reset.min.css파일을 copy html 선택해서 html 파일에 main.css에 적용해야 하므로 그 이전에 넣어야 한다. https://cdn.jsdelivr.n..

1. 전역속성 1) class와 id 모든 HTML 요소에서 공통적으로 사용 가능한 속성. class 공백으로 구분된 요소의 별칭을 지정. [별명 : 여럿이 class같아도 됨] CSS 혹은 JavaScript의 요소 선택기 (CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은) 를 통해서 요소를 선택하거나 접근. id 문서에서 고유한 식별자(idenifier, ID)를 정의. [이름(고유) : 하나만] CSS 혹은 JavaScript의 요소 선택기(CSS 선택자나 GetElementsByClassName, QuerySelectorAll 같은)를 통해서 요소를 선택하거나 접근. ex. =>여러개 가능 => 한 개 가능 .section { CSS 내용 } : cl..

출처 https://heropy.blog/2019/05/26/html-elements/ 한눈에 보는 HTML 요소(Elements & Attributes) 총정리 인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online heropy.blog 1. 표 콘텐츠 표를 만들 수 있는 전체 예제 1)Table 표의 영역 table{display: table} => 블록, 인라인 요소 아님 but 블록 요소와 가장 유사 2) tr(table row) 줄, 행을 만든다 (1)tr을 먼저 만든다 (2)그 안에 th,td로 칸을 만든다 3)TH 제목(table..

1. 멀티미디어 1)img 이미지를 삽입 빈태그 속성 = 값 - src (필수) 이미지 url : 경로 - alt (필수) 이미지의 대체텍스트 - width 이미지의 가로 너비 - height 이미지의 세로 너비 => width or height 하나만 설정하면 비율을 그대로 유지한 채 크기가 조정된다/ px를 쓰지 않아도 된다 => 크기는 css로도 조절할 수 있다 - srcset : 브라우저에게 제시할(사용할) 이미지 url과 원본 크기의 목록 정의 값: w,x 이미지를 지원하기 위해 미디어쿼리라고 부르는 css media rule (@media)에서 background-image 속성을 많이 사용 반응형 이미지를 처리하기 위해 뷰포트의 크기부터 사용자 화면의 해상도 등 많은 환경을 고려해야 한다 h..

1. 인라인 텍스트 1)A :다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 다른 url로 연결할 수 있는 하이퍼링크 설정 [anchor, 외부로 내보내기] 속성 href : 링크 url설정 (사용자가 a 태그를 통해 넘어갈 페이지에 대한 경로) but 생략 가능 rel : 관계를 설정해준다 값: license, prev, next(이전, 다음 페이지) target : 링크 url의 표시(브라우저 탭) 위치 값: _self(현재 창에 새로운 탭을 띄우겠다, 기본값) , _blank(다른 페이지에 새로운 탭을 띄우고 싶으면 _blank를 해야 한다) 이외 속성 download: 이 요소가 리소스를 다운로드하는 용도로 사용됨을 의미(페이지를 넘어가는 용도가 아닌 다운로드를 받도록 하는 신..

1. 블록 레벨과 인라인 요소 1)블록 요소 (1)div, h1, p (2)특성: 사용 가능한 최대 가로 너비를 사용한다 => 가로 사이즈를 정하지 않아도 100%로 나온다/ 단, 높이는 지정해야 나온다 => 나오는 여백은 body태그의 margin, padding에 있는 것(초기화하면 된다) (3)크기를 지정할 수 있다 : 가로, 세로 지정 가능 (4) width: 100%, height: 0; 로 시작 (둘다 auto로 들어가있지만 구현이 100%,0으로) 2)인라인 요소 (1)span, img (2)특성: 필요한 만큼의 너비만 사용한다 => 태그 안에 포함된 내용만큼만 너비가 생긴다 (3)크기를 지정할 수 없다 : 무조건 내용의 크기만큼만 있다 (4) width:0, height:0으로 시작(둘다 ..

CSS 문법 1. 선택자 2. 속성 3. 값 div{ font-sized: 20px; color: red; } 선택자{ 속성: 값; 속성: 값; } 선택자가 가리키는 태그의 내용의 해당 속성을 해당 값으로 바꿔준다는 의미 1. 선택자의 역할 선택자(selector)는 html에 스타일(css)을 적용하기 위해 html의 특정 요소를 선택하는 사인이다. 태그의 이름을 쓸 수 있다 ex. css h1{ color(속성) : red (값); } p{ color: blue; } 2. 속성(property)과 값(value) html의 속성은 attribute라고 한다 속성 = 값 div{ color: red; font-size: 글자 크기 width: 가로 너비 margin: 바깥 여백 padding: 안쪽 여..

1. 내용 => 이 전체를 요소 element라고 한다 -태그는 각자의 의미를 가지고 있다. -태그의 범위가 한쌍 -태그와 요소는 다르지만 거의 같은 거다 : 제목 : 문단 2. 속성과 값 태그(요소)의 기능을 확장하기 위해 속성을 사용할 수 있다 태그의 의미에 속성을 넣어서 사용할 수 있다 ex. 어떤 이미지를 사용할지, 어디에 쓸지 등을 속성으로 넣는다 img는 닫히는 태그 없는 빈태그다 ex. 내용 div는 의미를 가지지 않는 태그. 분할을 위한 태그 그때 사용되는 내용의 이름, 의미를 넣기 위해 class = ""이라는 속성과 값을 준다 3. 부모와 자식 요소 태그 A가 태그B의 콘텐츠로 사용되면 태그 B: 태그 A의 부모 요소, 태그 A: 태그 B의 자식 요소 => 물론 이런 이름의 태그가 있는..

1. 비트맵과 벡터 이미지 : 이미지 (그래픽)은 크게 비트맵과 벡터로 구분된다 1)비트맵 : 픽셀이 모여 만들어진 정보의 집합, 레스터 이미지라고도 부른다 픽셀 단위로 화면에 렌더링합니다 (렌더링: 컴퓨터가 화면에 그림을 그려서 우리가 볼 수 있게 한다) 우리가 일반적으로 사용하는 대부분의 이미지가 비트맵 ex. jpg, png, gif => 작게 만든 화면을 크게 확대하면 픽셀의 형태로 떨어진다 (계단현상, 품질 저하) => 대신 용량 관리가 용이하다 2)벡터 : 수학적 정보의 형태들이 만들어내는 결고마ㅜㄹ 이미지가 가지고 있는 점, 선, 면의 위치(좌표) 색상 등의 정보를 온전히 가지고 있으며 그를 화면에 렌더한다 => 확대, 축소해소 해상도가 달라지지 않음 => 이에 따른 용량 변화도 없다, 정교..

[ 확장기능 설치하는 방법 ] 1)korean language pack for visual studio code - 에디터의 기본 기능에 사용하고 싶은 확장 기능을 다운로드 받아서 사용 - 한국어로 모든 기능을 바꿔준다 - 껐다가 다시 키면 재부팅이 된다 2) 폴더를 쉽게 여는 방법 파일 - 최근 항목 열기 3)html 작성하는 방법 !입력하고 첫번째걸로 enter를 치면 기본적인 setting이 완성이 된다 or tab키도 사용할 수 있다 4) Beautify : 코드를 보기 좋게 정리해주는 확장 기능 왼쪽 activity bar의 가장 마지막 탭에 들어가서 beautify를 쳐서 설치한다 이제 단축키를 설정할 수 있다 beautify의 feature탭의 commands를 보면 두가지가 나오는데 bea..