CSS,HTML 과 CSS3 HTML5 이전 핀테크 기업 면접에서 HTML과 HTML5의 차이에 대해서 질문이 들어왔는데 제대로 된 답을 못해서 공부하고자 한다. 그리고 공부하는 김에 CSS와 CSS3의 차이에 대해서도 알아보자. CSS2와 CSS3의 대표적인 차이는 이미지를 사용하지 않고 그라이데션 등의 표현을 할 수 있게 된 점이다.CSS2에서는 모서리를 둥글게 표현하려면 모서리가 둥글게 처리된 이미지를 준비해야 했다.CSS3에서는 그런것이 필요하지 않다. 그 외 그림자나 그러데이션을 추가할 수 있다.  HTML과 HTML5의 대표적인 차이는 많은 브라우저들이 HTML5를 지원하기 시작했다는 것이다.기능내용표준 코덱 및 영상 플레이어 내장브라우저 내부에서 영상 플레이어가 내장되어 별도의 플에이어 설치 없이도 영상 재싱 가능.캔버스 기능그리..

2021. 1. 6.

개발

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.

개발