FrontEnd
03_CSS속성,박스모델
오늘은 박스모델에 대한 속성들에 대해 공부하였다. width block 기본 : 100% inline 기본 : 0 heght block 기본 : 0px inline 기본 0 >> 인라인요소는 가로세로를 설정해도 적용이 되지 않는다. max-width 요소의 최대 가로넓이 min-width 요소의 최소 가로넓이 max-height 요소의 최대 세로넓이 min-width 요소의 최소 세로넓이 >> 기본값이 none 자식요소는 부모요소의 값을 %로 받아온다는 것이 차이 margin 요소의 외부(바깥) 여백을 지정 _단축특성 단축특성?? top,left,right,bottom 을 아우를수 있는 속성이다 음수의 값도 사용할 수 있다 margin : 10 px 20 px 30 px 40 px 위 우 아래 좌 mar..
02_CSS_단위
오늘은 CSS reset하는 방법과 단위들에 대하여 간단하게 공부했다. 위와같은 식으로 각 인터넷 브라우저마다, margin,padding등이나 header의 크기등 기초적으로 설정되어 있는 부분들이 있는데, 이들을 무시하고 처음부터 할 수 있는 방법이다. 방법은 위와같은 줄을 추가하면 간단하게 추가된다. 정상적으로 css를 공부하기 편하게 설정된 것으로 알 수 있다. px : 픽셀단위로 css를 설정하는 단위 % : 상위 항목의 설정된 값을 %값으로 설정 쉽게 생각하면 위의 값의 %로 받아오는것이다. 아무것도 없다면 윈도우 창 크기를 받아온다. em : 폰트 사이즈에 따른 크기단위 밑의 실행을 한번보면 이해가 편할 것이다. 각 font-size에 비례하여 값이 정해진다. rem : html의 폰트사이즈..
01_CSS개요,선택자,상속
HTML의 기본적인 이론부분 공부가 끝나서 CSS공부에 들어갔다. 이 둘을 전반적으로 공부해둬서 JS까지 공부한다면 많은걸 할 수 있을것 같다. CSS의 기본문법은 아래와 같다. 기본문법 : 선택자 { 속성 : 속성값; 속성 : 속성값; } HTML을 배우면서도 자주 사용했던 방식이라 그리 어색하진 않았다. CSS의 선언 방식 링크방식 직렬호출방식이다. 선택자(Selector) 기본 선택자 크게 어렵지 않다. 밑의 예를 한번만 읽어봐도 알 수 있다. 1. 전체 선택자. >요소내부의 모든 요소를 선택 *{ color : red; } 2. 태그 선택자 div,img,span 등 태그이름으로 요소 선택 3. 클래스 선택자 스팬태그의 orange클래스만을 지칭 자식 선택자 E > F > E의 자식요소 F를 선택..
10_전역속성, 기타 요소들
오늘은 HTML의 전역속성, 기타 요소들에 대해 공부했다. 이전에 공부하면서 배운내용들중에 틈틈히 계속 나온내용들과, 기본적인 개념이라서 어렵지는 않았다. 우선 class와 id에대해 보자 class (별명) 공백으로 구분한 요소의 별칭을 지칭 id (이름) 클래스와 유사하나 class는 여러개의 별칭을 붙일수 있는거와 달리 고유한 식별자 style css 요소 선언 안녕 안녕 안녕 안녕 안녕 안녕 계속 나왔던 개념이다. 참고로 head부분에 style부분을 추가해놨다. 가장 중요한건, class는 별명, id는 이름이란것만 생각하면 될 것 같다. title 요소의 정보를 지정(설명) lang 요소의 언어(ISO 639-1)를 지정 >보통 html태그 안에서 한번에 설정 data-* 사용자 정의 데이터 ..
09_Form,input
웹 서버에 정보를 제출하기 위한 양식 범위를 정의 이 다른 을 자식 요소로 포함할 수 없음. 속성 의미 값 기본값 action 전송한 정보를 처리할 웹페이지의 URL URL autocomplete 사용자가 이전에 입력한 값으로 자동 완성 기능을 사용할 것인지 여부 on, off on method 서버로 전송할 HTTP 방식 GET, POST GET name 고유한 양식의 이름 novalidate 서버로 전송시 양식 데이터의 유효성을 검사하지 않도록 지정 target 서버로 전송 후 응답받을 방식을 지정 _self, _blank _self form은 쉽게말하면 내가 웹사이트에 로그인, 보내기 등으로 뭔가 정보를 보낼때 묶을 수있는 태그이다. 그중 대표적인 형식으로 이 있는데, 사용자에게 입력 받을 데이터 ..
08_표 콘텐츠
이번엔 표 콘텐츠에 대해서 공부하였다. , , , 데이터 표()의 행(줄 / )과 열(칸, 셀(Cell) / , )을 생성. (Table Row, Table Header, Table Data) -블럭요소와 비슷함. table태그를 사용하여 만들면 되고 표의 헤더,데이터에 나누어서 tr,th,td등 데이터로 나누어서 사용하면 된다. 데이터 타입 값 1 알파벳 A 1 숫자 7 아주간단하게 만들어본 표이다. table{ border-collapse: collapse; } td{ border : 1px solid red; padding : 10px; } th{ border : 1px solid red; padding : 10px; background: lightblue; } 위 css를 적용하여서 색을 적용해보..