https://opentutorials.org/course/2418/13405 box-sizing - 생활코딩 box-sizing은 박스의 크기를 화면에 표시하는 방식을 변경하는 속성입니다. width와 height는 엘리먼트의 컨텐츠의 크기를 지정합니다. 따라서 테두리가 있는 경우에는 테두리의 두께로 인해서 원하 opentutorials.org
CSS
이 글은 이미지 파일 포맷 방식인 PNG 와 SVG를 비교하면서 SVG 를 알아가는 글이 된다. 개발 시 이미지 파일은 대부분 .png를 사용하고 있어, .svg 를 모르는 경우도 많이 존재한다. 모르더라도 크게 도움이 될 것이니 읽어보길 바란다. 참고 링크 - https://stackoverflow.com/questions/24433640/svg-icons-vs-png-icons-in-modern-web-sites svg 응용 - https://codepen.io/collection/DKaZba/ 먼저 기본적인 이해를 위해 무엇인지 알아보자. PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다. PNG 는 화소(pixel) 단위로 구성되는 형태로써, 비트맵 방식이라고 불린다. SVG 는 ..
텍스트를 가운데 정렬하기 위해선 여러가지 방법이 있지만, 가장 고전적인 방법으로 정렬한다면 아래의 속성들을 이용할 수 있다. text-align line-height 박스 안에서 텍스트 정렬 위와 같이, 박스안에 텍스트를 입력하면 공책의 줄글에서 첫번째 줄에 적히듯이 상단 좌측 위치에 생성된다. 이 때 가운데 정렬하기 위해서는 아래와 같이 속성을 입력해준다. text-align : center; //가로로 가운데 정렬 line-height: 45px; //수직으로 가운데 정렬 **line-height는 줄글 사이의 길이를 조절하는 것으로 만약 박스 텍스트 길이가 길어서 박스를 넘어가게 되어 두줄이 된다면, 바로 밑에 서지는 것이 아니라 45px 밑에 다음 줄이 생성되므로 정상적인 가운데 정렬 방법은 아니..
Border의 기본 속성
font-family font-style font-stretch 폰트 패밀리 font-family : 글꼴을 설정하는 속성입니다. 폰트 스타일 font-style : normal; 아무런 효과 없음 font-style : italic; 글자들이 기울어짐 font-style : oblique 10deg; italic과 동일하지만 기울임 각도 설정 가능 font-family에 해당 font-style이 있어야 적용 된다. 폰트 스트레치 글자를 좁게(narrow) 혹은 넓게(wide)하게 설정하는 속성, 즉 글자의 폭(너비)에 대해서 설정하는 속성 (font-family에 해당 속성이 있어야 사용 가능) 웹 폰트 기존에는 폰트를 설치 후 가지고 있어야 사용이 가능했지만 시간에 지남에 따라 배포 가능한 폰트가 ..
background-clip 백그라운드 이미지가 보여질 영역을 지정 //border 끝까지 이미지 영역 지정 background-clip : border-box; //padding영역까지만 이미지 영역 지정 background-clip : padding-box; //컨텐츠 영역만 이미지 영역 지정 background-clip : content-box; //TEXT에만 이미지 영역 지정 background-clip : text; //크롬에서는 지원 안함 color : transparent;
배경보다 창의 크기가 작을 경우 background-attachment : scroll; background-attachment : fixed; background-attachment : local; 박스의 height가 고정되어 있을 경우, 안의 컨텐츠가 박스보다 클 때 내용이 빠져나와 버린다. 이 때, 해당 박스에 overflow: hidden, srcoll; 을 설정할 수 있다. overflow: hidden일 때 overflow : scroll일 때, 이 때, overflow : scroll을 설정하면 내용 길이에 맞춰 스크롤 바가 생셩된다. 스크롤 바를 내리면 배경화면은 고정되고, 아래 내용이 올라오면서 보여지게 된다. 이때, 컨텐츠를 내릴 때 백그라운드도 같이 내릴 건지 설정하는 방법이 bac..
기본 사용 법 5가지 퍼센테이지를 주지 않으면 자연스럽게 그라데이션 효과가 나타나지만, 퍼센테이지를 주면 다음과 같이 그라디언트(그라데이션)이 없어진 것 처럼 표현된다. Radial gradient (원형 그라디언트) https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/radial-gradient() radial-gradient() - CSS: Cascading Style Sheets | MDN The radial-gradient() CSS function creates an image consisting of a progressive transition between two or more colors that radiate from an origin...
이미지 넣는 법 //이미지 넣는 법 background-image : url("이미지경로/이미지이름.확장자"); //이미지 반복하는 법 background-rpeat : repeat-x; //x축 방향으로 반복 background-rpeat : repeat-y; //y축 방향으로 반복 background-rpeat : repeat-xy; //xy축 방향으로 반복 //이미지 한개만 나오게 하는 법(반복x) background-rpeat : no-repeat; 이미지 위치 //이미지 위치 조절하는 법 background-position : center bottom; //가운데 하단에 이미지 표시 background-position : center; //가운데 이미지 표시 배경 이미지 크기 설정(비율) bac..
가변 크기 : em, rem, ex, vw, vh, vmin, vmax 나는 .top요소를 브라우저 화면에 100%꽉 채우고 싶다. .top{ height: 100%; } 그래서 위 화면과 같이 height를 100%주어도 생각처럼 화면을 꽉 채우지 않고 그대로이다. 왜냐하면 %는 부모에 종속되어 있기 때문인데, 부모요소 height크기에 기준해서 %를 계산하기 때문이다. 그래서 body에 height:100%를 주어보았지만 여전히 똑같다 body는 body의 부모인 html을 기준으로 100%를 계산하기 때문이다. 그래서 최상위 요소인 html까지 height:100%;를 설정해야한다. .top, .mid, .bottom{ border: 1px solid red; } html, body{ height:..
