이전 핀테크 기업 면접에서 HTML과 HTML5의 차이에 대해서 질문이 들어왔는데 제대로 된 답을 못해서 공부하고자 한다. 그리고 공부하는 김에 CSS와 CSS3의 차이에 대해서도 알아보자. CSS2와 CSS3의 대표적인 차이는 이미지를 사용하지 않고 그라이데션 등의 표현을 할 수 있게 된 점이다. CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했다. CSS3에서는 그런것이 필요하지 않다. 그 외 그림자나 그러데이션을 추가할 수 있다. HTML과 HTML5의 대표적인 차이는 많은 브라우저들이 HTML5를 지원하기 시작했다는 것이다. 기능 내용 표준 코덱 및 영상 플레이어 내장 브라우저 내부에서 영상 플레이어가 내장되어 별도의 플에이어 설치 없이도 영상 재싱 가능. 캔버..
media query 전체 화면에서의 이미지는 holy grail layout의 형태이다. mediaquery 적용 후 화면을 축소 시키면 column의 형태가 아니라 row형태로 변하게 된다. 그리고 aside 또한 None형태로 보이지 않게 되는 것을 알 수 있다. 반응형 웹 페이지를 만들 때 자주 쓰이는 것이니 꼭 알아두도록 하자. float multi column 멀티 컬럼은 신문에서 나오는 글처럼 문단을 여럿으로 나눌 수 있다. 그리고 멀티 칼럼을 이용해서 핀터레스트의 레이아웃을 만들 수 있다.
레이아웃 container item display order flex-direction flex-grow flex-flow flex-shrink flex-wrap flex-basis justify-content flex align-items align-self align-contetn flex flex-grow flex-shrink flex-basis 값을 가지고 있을 때, 화면의 엘리먼트들이 줄어듬에 따라 공간 부담을 줄 수 있다. holy grail layout
인라인 vs 블록 레벨 박스 모델(box model) box-sizing bottom이 top보다 우선순위가 높다. left가 right보다 우선순위가 높다. position type이 relative일 때 offset을 사용할 수 있다. absolute의 위치는 부모 엘리먼트의 기준으로 위치가 left, top값으로 지정된다. absolute는 static이 아닌 부모가 나타날 때까지 무시하고, static이 아닌 부모가 나타나면 해당 위치에 맞는 offset값을 설정함. fixed는 특정한 엘리먼트를 화면에 위치를 고정시켜 스크롤로부터 완전히 독립시킬 수 있음.
1. 캐스케이딩 (Cascading) html css javascript style attribute id selector class selector tag selector style 태그에서! important를 추가하면 추가한 태그의 우선순위가 제일 높아진다 style > id > class > tag 2. 서체 다루기 폰트 사이즈 사용자가 브라우저의 글꼴 크기를 키웠을 때 px는 바뀌지 않고 , rem(html 태그의 크기에 비례해서 바뀌게 됨)은 바뀐다. PX rem color(RGB, HEX) RGB는 red(256), blue(256), green(256) 총 16777216 정도의 컬러를 표현할 수 있다. HEX 정렬 : text-align right, center , left 등 다양한 정..
HTML + CSS hello world hello world2 h2 {color:blue} = css 문법 - HTML과 CSS를 결합하는 방법은 총 2가지가 있다. body 태그 안에서 HTML과 CSS를 결합할 수 있고 head태그 안에서 HTML과 CSS를 결합할 수 있다. Selector (선택자) - id 선택자 CSS id = "이름 지을 id" , # id 이름 { css 문법}을 통해서 id 선택자를 제어할 수 있다. - 부모 자식 선택자 HTML CSS Jascript HTML CSS selector declaration javascript #lecture > id 는 선택된 id 부모에 속해있는 자식들(직계 자손) 고른다. - 선택자 공부 방법 flukeout.github.io/ CS..