PRDEN

1. SVG란 : SVG란 Scalable Vector Graphics의 약자로 벡터 이미지를 뜻한다. jpg/jpeg, png파일을 크게 화대해 나타내면 이미지 테투리 부분이 울퉁불퉁해진다. 이런 이미지를 비트맵 이미지라고 한다. 반면, 이미지를 아무리 확대하거나 축소해도 원래 깨끗한 상태 그대로 유지되는 이미지를 벡터 이미지라하는데 그런 이미지가 SVG이미지이다. 아이콘이나 로고 이미지에 SVG 이미지 파일 형식을 많이 사용한다. 복잡한 데이터를 웹에 표현해주는 d3.js나 Raphael.js 같은 자바스크립트 라이브러리에서 차트나 그래프를 표현하는 방식이 바로 SVG 이미지이다.

1. text-align = "center" block 요소 안 inline 요소만 가운데 정렬 된다. https://blog.pages.kr/2556 [html/css] text-align 속성으로 정렬하기 (left, right, center, justify) html에서는 문서를 수평으로 정렬할 때 align 속성을 썼는데요 align은 html5에서 지원하지 않는 속성으로 되도록 css로 정렬하는 것을 권장한다고 합니다... css에서는 문서를 수평으로 정렬할 때 text-a blog.pages.kr 2. display = "flex", justifycontent="center" 3. maring = "0 auto" https://kikit-study.tistory.com/entry/%EC%B4%..

1. flex- container = Parentdisplay : inline-block을 display : flex로 변경하기display: flex 와 inline-flex 차이 명확히 flex-direction : row(default) vs column // row-reverse, column-reverseflex-wrap : nowrap(default) vs wrap...2. Main Axis vs. Cross Axisflex-direction : row(default) vs column // row-reverse, column-reverse3. Flex Items = Childrenalign-items : stretch(default), flex-start, ...   align-content..

1. 가상클래스와 가상요소 웹 요소를 클릭하거나 마우스 커스를 올러놓는 등 특정 동작을 할 때 스타일이 바뀌도록 만들고 싶을 때 활용한다. 1) : link, 가상 클래스 선택자 : 방문하지 않은 링크 스타일에 적용 2) : visited : 방문한 링크 스타일에 적용 3) : hover : 마우스 커서를 올려놓았을 때 스타일 적용 4) : active : 웹 요소를 활성화 했을 때 스타일 적용 5) : focus : 웹 요소에 초점이 맞추어졌을 때 스타일 적용 6) : enabled, :disabled : 요소를 사용할 수 있을 때와 없을 때 7) :checked : 라디오 박스나 체크 박스에서 해당항목을 선택했을 때의 스타일 지정 8) :root : 문서 전체에 적용하기 ... ex13) ::befo..

1. outline https://aboooks.tistory.com/228#google_vignette [css] outline 속성, 용도는? [css] outline 속성, 용도는? 오늘 배울 outline 속성은 border 속성과 비슷합니다. border 속성 자세히 알아 보기(border-width, border-style, border-color 사용법) boder를 테두리라고 한다면 outline은 border 바깥 외곽 aboooks.tistory.com 2. width: 100%, height: 100% vs. 100vh, 100vw https://shinye0213.tistory.com/372 [CSS] 100%와 100vw/100vh % %는 부모의 영향을 받는다. 정확히 말하면 부..

1. CH10. Making our Website Responsive 1) hardware device pixels vs. software CSS pixels 생략 시 mobile에서 전체화면 전체가 작게 보임. content에 maximum-scale, minimum-scale, user-scaleable,... 넣을 수 있다. 2) viewport metatag vs. @media query viewport : device viewport에 맞게 hardware pixel을 software CSS pixel로 바꿔주는 역할을 함. 그러나 design의 변화는 없음. @media query : size에 따라 디자인 변경 3) mobile first 4)media query 40rem이상이면~ @med..

1. Background #product-overview { background: url("freedom.jpg"); // bacgroung-image("freedom.jpg"); 도 똑같다 background-image: url("freedom.jpg"); background-size: 100px; // 반복되게 된다. // background-size:cover 는 100%랑 같다. // 다른 요소 : contain background-position: 20px; // 왼쪽에서 얼마나 떨어지는지 backgroud-repeat: norepeat; background-origin: border-box // 이미지가 border라인에 겹치게// content-box, padding-box backgroun..

1. 인터넷과 웹의 관계 : 파이어폭스, 엣지, 크롬 등 은 문서를 전달하기 위한 프로그램 (http를 통해) Hyperlink , Hybertext Mosaic 브라우져 : 최초의 브라우저이다. -> Mosaic 이용해서 인터넷 익스플로러로 개발했다. 2. MarkUp() DOCTYPE쓰는 이유 : 똑같은 태그를 이용해서 html문서 만들어도 브라우저가 달라지면 결과가 달라지게 되어서 각각의 브라우저들이 공통으로 표준화된 방식 만듬 - 이걸 쓰면 표준화된 방식으로 모든 브라우저에서 렌더링 됨 body와 head의 차이 head와 body 순서 변경되면 안된다. HTML TAG 집합 ####################################################################..

1. BEM 네이밍 : Block(블록), Element(요소), Modifier(수정자)를 기준으로 작성한다. BEM의 가장 큰 특징은 ID를 절대 사용하지 않는다는 것이다. BEM의 장점은 목적과 기능을 명확히 전달하며 요소의 구조를 효율적으로 전달한다. 1) Block (블록) block(블록)은 페이지 전체 Element(요소)를 의미하거나 하위 Element(요소)를 감싸는 컨테이너를 의미한다. 블록끼리는 상호작용할 수 있지만, 우선순위나 계층이 없다. Naming 문자, 숫자, 대시(-)로 구성될 수 있다. ex) ... 2) Element (요소) 블록의 하위 요소이다. 모든 요소는 상위 블록과 연결된다. Naming 문자, 숫자, 대시(-) 및 밑줄(_)로 구성될 수 있다. 블록이름__요소..

https://hsj306.tistory.com/49 데이터 속성 사용(data-*) HTML5에서는 해당 요소에서 사용자가 임의로 지정한 속성값을 활용할 수 있으며, 이를 Custom Data Attribute라고 부른다. data-* 속성은 두 부분으로 구성된다. 1. 속성 이름은 대문자를 포함해서는 안되 hsj306.tistory.com