영벨롭 개발 일지

웹 이미지에는 비트맵과 벡터, 크게 두 가지 종류가 있습니다. 오늘은 웹 이미지의 각 특성을 살펴보고 어떤 상황에 어떤 이미지가 적절한지 공부해볼게요! 1. 비트맵(Bitmap, Raster): jpg(jpeg), gif, png, webp 먼저 비트맵 이미지 입니다. Raster라고도 불리는 비트맵 이미지는 픽셀이 모여 만들어진 정보의 집합입니다. 특징 정교하고 다양한 색상을 자연스럽게 표현 가능 확대/축소 시 계단 현상 발생 -> 품질 저하 사진, 인물, 또는 그림에 적합 그 종류에는 jpg, gif, png, webp 정도가 있습니다. 하나씩 살펴보겠습니다. (1) JPG(JPEG) JPG는 full-color와 gray-scale의 압축을 위해 만들어졌으며, 압축률이 훌륭해 사진이나 예술 분야에서..

오늘은 .css 파일과 .js파일을 .html 파일에 연결하는 방법에 대해 살펴볼게요 만약 우리가 .css와 .js 파일을 .html에 맞게 코드를 짰다고 칩시다. 그런데 파일을 만들기만 하고 .html에 연결을 하지 않으면 아무 쓸모 없게 되겠죠? 폴더를 생성하고 .html, .css, .js 파일들이 어떻게 연결되는지 차례대로 보겠습니다. 1. 폴더 생성 일단 원하는 장소에 폴더를 하나 생성해주세요. 저는 보통 바탕화면이나 문서에 생성한답니다~! 저는 바탕화면에 'temp'라는 폴더를 하나 생성했습니다. 2. VS Code에서 해당 폴더 열기 이제 VS Code를 열고 [파일] -> [폴더 열기] -> 해당 폴더 열기 을 순서대로 해주세요. 그럼 다음과 같이 VS Code가 세팅됩니다. 3. .htm..

초기 그라데이션 구문은 브라우저마다 지원 방법이 달랐기 때문에 그라데이션을 사용하기 위해선 브라우저 제조업체를 표시하는 접두사를 붙여 사용해야 합니다. 접두사 브라우저 버전 -webkit- 사파리 5.1 ~ 6.0 -moz- 파이어폭스 3.6 ~ 15 -o- 오페라 11.1 ~ 12.0 따라서 표준화된 구문과 그라데이션을 지원하지 않는 브라우저, 접두사를 붙여 사용하는 브라우저까지 고려해 함께 입력해야 합니다. 1. 선형 그라데이션 선형 그라데이션이란 색상이 수직이나 수평 또는 대각선 방향으로 일정하게 변하는 것을 말합니다. 기본형 linear-gradient( to , color-stop, [color-stop, ...] ) 선형 그라데이션 구문에서 사용하는 옵션을 하나씩 살펴보겠습니다. 방향을 지정할..

배경 색 지정하기 배경 색을 지정하려면 배경을 넣고 싶은 요소의 속성에 background-color 속성을 넣으면 됩니다. 기본형 background-color: 색상표기법; 배경 적용 범위 조절하기 박스 모델 관점에서 배경 적용 범위를 조절할 때에는 background-clip 속성을 사용합니다. 기본형 background-clip: border-box | padding-box | content-box; 속성 값 설명 border-box 박스 모델의 테두리까지 적용 padding-box 박스 모델의 테두리 제외한 패딩 범위까지 적용 content-box 박스 모델의 내용 부분에만 적용 웹 요소에 배경 이미지 넣기 배경 이미지를 넣을 때는 background-image 속성을 사용합니다. 배경 이미지는..

웹 문서에서 색상을 표현하는 방법에 대해 알아보겠습니다. 1. 16진수 표기법 16진수 표기법은 색상을 표현하는 가장 기본적인 방법으로, 세밀히 색상을 조절하고 싶을 때 사용합니다. 기본형 #RRGGBB (두 자리 씩 16진수, 00~ff) 2. rgb와 rgba 표기법 이 표기법은 16진수 표기법과 달리 10진수로 RGB 값을 지정합니다. rgba 로 사용할 때, a는 alpha 값으로, 투명도를 조절할 수 있습니다. R, G, B 값의 범위는 0부터 255이고 alpha 값의 범위는 0부터 1(0에 가까울수록 투명)입니다. 기본형 rgb(R, G, B) rgba(R, G, B, a) 3. hsl과 hsla 표기법 hsl은 차례대로 색상(hue), 채도(saturation), 밝기(lightness)를..