CSS 공부 - 5 media query 전체 화면에서의 이미지는 holy grail layout의 형태이다.  mediaquery 적용 후 화면을 축소 시키면 column의 형태가 아니라 row형태로 변하게 된다. 그리고 aside 또한 None형태로 보이지 않게 되는 것을 알 수 있다. 반응형 웹 페이지를 만들 때 자주 쓰이는 것이니 꼭 알아두도록 하자. float multi column 멀티 컬럼은 신문에서 나오는 글처럼 문단을 여럿으로 나눌 수 있다. 그리고 멀티 칼럼을 이용해서 핀터레스트의 레이아웃을 만들 수 있다.

2020. 12. 10.

개발

CSS 공부 - 4 레이아웃containeritemdisplayorderflex-directionflex-growflex-flowflex-shrinkflex-wrapflex-basisjustify-contentflexalign-itemsalign-selfalign-contetn  flexflex-grow flex-shrinkflex-basis 값을 가지고 있을 때, 화면의 엘리먼트들이 줄어듬에 따라 공간 부담을 줄 수 있다. holy grail layout

2020. 12. 9.

개발

CSS 공부 - 3 인라인 vs 블록 레벨 박스 모델(box model)box-sizing bottom이 top보다 우선순위가 높다.left가 right보다 우선순위가 높다.position type이 relative일 때 offset을 사용할 수 있다.absolute의 위치는 부모 엘리먼트의 기준으로 위치가 left, top값으로 지정된다.absolute는 static이 아닌 부모가 나타날 때까지 무시하고, static이 아닌 부모가 나타나면 해당 위치에 맞는 offset값을 설정함.fixed는 특정한 엘리먼트를 화면에 위치를 고정시켜 스크롤로부터 완전히 독립시킬 수 있음.

2020. 12. 8.

개발

CSS 공부 - 2 1. 캐스케이딩 (Cascading) html css javascript style attribute id selector class selector tag selector style 태그에서! important를 추가하면 추가한 태그의 우선순위가 제일 높아진다 style > id > class > tag2. 서체 다루기폰트 사이즈사용자가 브라우저의 글꼴 크기를 키웠을 때 px는 바뀌지 않고 , rem(html 태그의 크기에 비례해서 바뀌게 됨)은 바뀐다. PX rem color(RGB, HEX)RGB는 red(256), blue(256), green(2..

2020. 12. 7.

개발

CSS 공부 -1 HTML + CSS hello world hello world2 h2 {color:blue} = css 문법- HTML과 CSS를 결합하는 방법은 총 2가지가 있다. body 태그 안에서 HTML과 CSS를 결합할 수 있고 head태그 안에서 HTML과 CSS를 결합할 수 있다. Selector (선택자)- id 선택자 CSSid = "이름 지을 id" , # id 이름 { css 문법}을 통해서 id 선택자를 제어할 수 있다. - 부모 자식 선택자 HTML CSS Jascript HTML CSS selector declaration ..

2020. 12. 3.

개발

[WEB] HTML 학습 -1 HTML tag의 종류 - 태그는 그 의미에 맞게 사용해야 한다. 링크  네이버 이미지 제목, 목록 과일의 목록 사과 포도 과일의 목록 사과 포도   ui = Unordered List : 순서가 없는 리스트ol = Ordered List : 순서가 있는 리스트 iframe - 페이지 안에 페이즈를 삽입하는 방법. CSS를 통해서 제어하는 것이 권장.frame - 하나의 화면에서 여러 개의 페이지를 분할해서 보여줌. form - 사용자의 데이터를 서버에 전송하는 방법이다. - 로그인을 위해서 아이디/비밀번호를 입력할 때- 회원가입을 하기 위해서 개인정보를 입력할 때- 블로그나 게시판에 글을 작성하거나, 파일을 전송할 때GET..

2020. 12. 2.

개발