개발새발

1. font, font-style 글자 관련 속성들을 지정[단축] 값 의미 기본값 font-style 글자 기울기 normal font-weight 글자 두께 normal font-size 글자 크기 medium (16px) line-height 줄 높이(줄 간격) 지정 normal (reset.css 적용시 1) font-family 글꼴(서체) 지정 운영체제(브라우저)에 따라 달라짐 font: 기울기 두께 크기 / 줄높이 글꼴; [최소한 크기, 글꼴은 지정해야 나온다] .box{ font: italic bold 20px / 1.5 "Arial", sans-serif; } font-style 글자 스타일(기울기)를 지정[개별] 속성 값 값 의미 기본값 normal 스타일 없음 normal italic..

CSS의 속성들 1. width, height (1)width: 요소의 가로 너비 지정 기본값 : auto 의미: 브라우저가 너비를 계산 단위: px, em, cm, %, vw (2)height: 요소의 세로 너비 지정 기본값 : auto 의미: 브라우저가 높이를 계산 단위: px, em, cm, %, vw //인라인 요소는 width, height가 0으로 시작. 가로, 세로 값을 가질 수 없다. 대신 text를 작성한 만큼만 나온다 블록 요소는 width가 auto(100%), height를 설정해줘야 뜬다 div{ width: auto; /100%/ height: auto; /0/ } span{ width: auto; /0/ height: auto; /0/ } 2. max-width, min-wid..

1. px, % body *{ border: 2px solid;} .container{ width: 600px; } .parent{ width:300px; // 50%(부모 요소인 container의) } .child{ width: 150px; // 50%(부모 요소인 parent의) } %는 부모 요소의 영향을 받는다 부모(바로 상위인 요소. 즉 그 이상의 요소의 영향을 받는 건 아니다) 2. em, rem em은 자신의 font 크기의 영향을 받는다 %와 달리 상속하는 요소의 영향을 모두 똑같이 받는다 .container{ width: 600px; // 60em (font 크기에 상대적) font-size: 10px; // 이 크기를 바꾸면 아래 em으로 정의한 사이즈도 함께 바뀐다 } .parent..

1) 기본문법 (1)css는 화면에 꾸미는 도구 선택자{ 속성: 속성값; 속성: 속성값; } => 이렇게 쓰는 것이 가독성이 더 좋다 (2) 선택자의 역할 : 속성과 값을 지정할 대상을 검색 첫번째 요소는 div 두번째 요소는 span css div{ color: red; } 속성과 값의 역할 : 검색된 대상에 지정될 css 명령 /* 주석 */ 문서내 수정사항이나 설명 등을 작성(주석) 2) 선언 방식 (1)인라인 방식 : html 요소(태그)의 style 속성에 직접 작성하는 방식 [html 안 속성] Hello - 이 방식은 선택자가 필요하지 않다. (2)내장 방식 : html 안에 작성하는 방법 [html 안 태그] Hello (4)@import 방식 css @import를 이용하여 외부 문서로 ..

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

꼭 알아둬야 할 자료 구조: 배열 (Array) 데이터를 나열하고, 각 데이터를 인덱스에 대응하도록 구성한 데이터 구조 파이썬에서는 리스트 타입이 배열 기능을 제공함 (리스트는 배열보다 더 많은 기능을 가지고 있음) 기본부터 철저하게 익히세요 동기부여 영상 1. 배열은 왜 필요할까? 같은 종류의 데이터를 효율적으로 관리하기 위해 사용 같은 종류의 데이터를 순차적으로 저장 //저장공간에서 한 칸(일정한 양)당 하나의 데이터만 들어갈 수 있을 때 임의의 공간에 저장하는 것보다 순차적으로 저장하는 것이 더 효율적=> 그러므로 배열을 사용 : 인덱스를 통해서 접근할 수 있음 장점: 빠른 접근 가능 첫 데이터의 위치에서 상대적인 위치로 데이터 접근(인덱스 번호로 접근) 단점: 데이터 추가/삭제의 어려움 미리 최대..

cf, (1)은 강의 소개 1. 자료구조란? - a.k.a 자료구조, 데이터 구조, data structure - 대량의 데이터를 효율적으로 관리할 수 있는 데이터의 구조를 의미 //현실 세계의 정보를 프로그래밍에서 사용하기 위해 데이터를 컴퓨터에 저장하는 구조 - 코드상에서 효율적으로 데이터를 처리하기 위해, 데이터의 특성에 따라, 체계적으로 데이터를 구조화해야 함 - 어떤 데이터 구조를 사용하느냐에 따라, 코드 효율이 달라짐 ex. 효율적으로 데이터를 관리하는 예 - 우편번호 : 5자리 우편 번호로 국가의 기초구역 제공 = 앞 3자리는 시,군,자치구 + 뒤 2자리는 일련번호 // 이렇게 한 국민의 주소를 일정 데이터 구조를 이용해서 쉽게 관리할 수 있다 - 학생관리 : 학년, 반, 번호를 학생에게 부..

출처 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..