'📃 Front-End' 카테고리의 글 목록 (14 Page)

position 속성

2022.10.19

static, relative, absolute, fixed, sticky 가 있습니다. static 기본 상태이며, 차례대로 왼쪽 → 오른쪽, 위 → 아래 위치 합니다. body{ margin: 0; } div{ width : 50px; height : 50px; margin-bottom : 20px; background : red; } section{ background : yellow; } .box{ background-color : blue; } position을 지정하지 않으면 위와 같이 위에서 아래로(div는 block요소) 나타납니다. relative 기존 static이었을 때 위치를 기준으로 top, right, bottom, left 속성을 사용해 위치 조절이 가능 합니다. 아래 그림에서..

📃 Front-End/CSS

display 속성

2022.10.19

요소가 화면에 어떻게 드러나게 할지를 결정하는 속성 입니다. 대표적으로 inline, block, inline-block, none inline inline은 text크기만큼만 공간을 점유하고 줄바꿈을 하지 않습니다. width, height, top, bottom 속성은 무시 됩니다. left, right 속성은 사용 가능 margin 은 상하는 적용 되지 않고, 좌우만 가능합니다. padding 은 다 가질 수 있습니다. block block은 한 영역 전체를 차지하는 박스 형태를 가지는 형태 width, height, margin, padding 속성이 모두 반영 됩니다. 항상 새로운 라인에서 요소가 시작 합니다. 따로 부모의 height를 선언하지 않을 경우, 자식 요소의 height의 합 = 부..

📃 Front-End/CSS

Box Model & box-sizing

2022.10.19

Box Model CSS 박스 모델은 HTML Element가 웹페이지에서 차지하는 공간을 정의한 모델 입니다. Box Model 이미지 Element의 내용이 담긴 Content 영역 Element를 감싸는 경계 Border 영역 Border와 Content 영역 사이의 Padding 영역 Border 바깥의 Margin 영역 box-sizing box-sizing 속성을 사용하면, width 와 height 이 컨텐츠 영역 기준인지, 테두리 영역 기준인지 정할 수 있습니다. box-sizing 종류 box-sizing: content-box 기본값이며 컨텐츠 영역 기준. Padding 영역부터 포함하지 않습니다. box-sizing: border-box 테두리 영역 기준. Margin 영역부터 포함하..

📃 Front-End/CSS

id & class

2022.10.19

id & class html의 특정 요소에만 다른 효과를 주고 싶을 때, 해당 요소에 id 값 또는 class 명을 할당하여 처리가 가능 합니다. id id를 불러올 때 샵(#) 를 사용 합니다. 하나의 요소에 하나의 id만 사용 가능 합니다. 중복으로 사용 불가능 하나의 아이디는 페이지에서 딱 한 번만 사용해야 합니다. id 예제 제목 제목2 제목 #title{ font-size : 20px; } class class를 불러올 때 마침표(.) 를 사용 합니다. 하나의 요소에 여러 개의 class 를 사용 할 수 있습니다. class를 추가할 때는 띄어쓰기로 구분 중복 사용이 가능하며, 동일한 클래스명을 페이지의 여러 곳에 사용 할 수 있습니다. class 예제 제목 제목 제목 .title{ font-s..

📃 Front-End/HTML

Open Graph

2022.10.19

배포한 프로젝트를 카카오톡이나 SNS로 공유 했을 때 상대방에게 보여지는 썸네일 카카오톡 말고도, 페이스북이나 티스토리 등 링크를 공유 했을 때 Open Graph 를 가져오는 플랫폼에 전송을 했을 때도 보여집니다. index.html 프로젝트 썸네일 ( og:image ) // content 경로는 React 프로젝트 예시 웹 이름 ( og:site_name ) 링크 공유 시 사이트 이름이 어떻게 보일 지 웹 이름 아래에 보여지는 설명 글 ( og:description ) 만약 Open Graph 적용이 보이지 않을 경우 Open Graph 의 데이터들을 링크가 공유 될 때 마다 가져오는 것이 아니라 한 번 가져오면 캐시 처럼 보관해놓고 사용하기 때문에, Open Graph 설정을 변경 했을 때 바로 ..

📃 Front-End/HTML

이미지 태그에 srcset 속성을 사용하는 이유

2022.10.19

srcset 속성은 사용자의 디스플레이 사양에 따라 다른 해상도의 이미지를 제공함으로써 사용자 경험을 높이기 위해 사용 합니다. 고사양 디스플레이에는 고사양 이미지를 제공하고 저사양 기기에는 저해상도 이미지를 제공하는 방식 입니다. srcset 같은 비율의 다양한 크기를 가지는 동일 이미지 2개 이상 명시하는 속성 입니다. srcset 사용 브라우저가 사용할 이미지들과 그 이미지들의 원본크기를 지정(이미지 목록) 작은 크기 이미지부터 순서대로 입력 px단위가 아닌 w디스크립터(width) 혹은 x디스크립터(배수 2x, 3x..) 입력 sizes 미디어조건과 그 조건에 해당하는 이미지의 ‘최적화 출력 크기’ 를 지정 합니다. 예제

📃 Front-End/HTML

반응형(Responsive) & 적응형(Adaptive)

2022.10.19

반응형 & 적응형 반응형 웹은 하나의 템플릿을 사용해 모든 기기에 대응 합니다. 적응형 웹은 선별된 기기 유형에 따라 별도의 독립적인 템플릿이 요구 됩니다. 반응형 미디어 쿼리를 사용해 기기 화면의 크기를 확인하고 유연한 이미지와 그리드를 활용해 화면 크기 변화에 따라 페이지의 크기 및 레이아웃을 조절하는 기술 입니다. 반응형의 장점 유지보수 하나의 템플릿만을 사용해 다양한 사용자와 기기에 대응할 수 있어, 하나의 소스를 수정하면 모든 기기 사이즈에 맞추어 콘텐츠가 최적화 됩니다. 사용자가 기기에 구애를 받지 않습니다. 반응형의 단점 데이터를 낭비하고 로딩 시간이 있습니다. 사이트에 사용되는 모든 콘텐츠를 다운 받은 후 사용 하기 때문에 로딩 속도가 느립니다. 기존에 이미 운영 중이었던 데스크톱용 사이트..

📃 Front-End/HTML

커스텀 데이터 속성(date-*)

2022.10.19

HTML에서 기본적으로 제공되는 속성이 아닌, 개발자가 임의의 속성을 추가하고자 할 때 사용 합니다. 특징 커스텀 데이터 속성은 html tag 상에서 별다른 작용을 하지 않습니다. 속성의 시작은 반드시 data-로 시작 자바스크립트와 CSS에서도 커스텀 데이터 속성의 정보를 사용 할 수 있습니다. 브라우저는 커스텀 데이터 속성을 만나면 해석하지 않고 건너 뜁니다. 따라서 보여지는 화면에 아무런 영향을 주지 않습니다. HTML 사용 data-이름 으로 사용 할 수 있습니다. 어떤 엘리먼트든 data-로 시작하는 속성은 무엇이든 사용할 수 있습니다. 화면에 안 보이게 글이나 추가 정보를 엘리멘트에 담아 놓을 수 있습니다. CSS 사용 article[data-columns='3'] { width: 400px..

티스토리툴바