FrontEnd/HTML&CSS
05_CSS_float,position
float 요소를 좌우 방향으로 띄움(수평 정렬) flex-box라는 대체 개념이 생겨서 많이 퇴색되었다. none : 요소 띄움 없음 left : 왼쪽으로 띄움 right : 오른쪽으로 띄움 float : 방향 >>float을 사용하면 꼭 해제를 사용해야한다. >>해제를 안하면 요소들이 곂치는 현상이 일어난다. clear : both 위 요소를 적용해도 실제위치는 원지점과 같고, 홀로그램처럼 보이는것만 다르게 보여지는 것이다. abolute 쓰면 붕 떠지는 듯한 느낌 위치상 부모는 html상 부모가 아닌, position = ~~ 으로 설정된 부분의 부모요소를 의미한다. >>습관적으로 부모요소에 position이 있는걸 확인하고 없으면 습관적으로 relative를 사용할 것 fixed 고정된다 (쇼핑몰..
04_CSS_글꼴,문자
오늘은 CSS설정중 글꼴, 문자에 대해 공부하였다. font font-style : 글자 기울기 지정 font-weight :글자 두께 지정 font - size : 글자 크기 지정 line-height : 줄높이(줄간격) 지정 font-family : 글꼴 지정 font : 기울기 두께 크기 / 줄높이 글꼴; >> /(슬래시) 가 들어가는 부분이 있다. 이유 ? 크기와 줄높이 모두 px값으로 설정이 가능하기에 헷갈림을 방지하기 위함 >> font-size와 font-family는 필수로 입력해야 사용이 가능하다. font-style nomal : 스타일 없음 italic : 이텔릭체 oblique : 기울어진 글자 font-weight normal : 두께(400) bold : 두껍게 (700) bol..
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-* 사용자 정의 데이터 ..