본문 바로가기

HTML, CSS

 (9)
[CSS] Display 블록(block) , , 와 같은것 위에서부터 아래로 배치됨 너비와 높이를 지정할 수 있음 인라인(inline) , 같은것 평소에 글 쓰는 방향 화면에 꽉 차면 다음줄로 넘어감 너비나 높이를 지정할 수 없음 (예외로 img 는 가능) 여백은 가로로만(글 쓰는 방향) 가능 인라인블록(inline-block) 인라인처럼 배치되나 블록처럼 크기를 가지고 싶을 때 사용하는 속성 블록인라인 블록 블록 인라인 인라인블록 기본 크기 좌우로 꽉 참 콘텐트에 딱 맞게 콘텐트에 딱 맞게 배치 위에서 아래로 글 쓰는 방향 글 쓰는 방향 width 와 height O O X margin 과 padding O O ▵ 인라인 진행 방향(=가로)만 제대로 사용 가능 float : right / left 요소를 페이지 왼쪽이나 오른..
[CSS] 박스모델 정리 border 속성 굵기, 테두리종류, 색상 순서대로 작성 border: 2px solid #ededed; border-radius 속성 박스 모델의 모서리를 둥글게 만들 때 작성 border-radius: 16px; 타원 만들기 border-radius: 50%; 알약 만들기 border-radius: 9999px; box-sizing 속성 기본적으로 요소의 크기를 지정하면 그 크기는 콘텐트 영역에 대한 크기가 된다. #box 요소의 실제 너비는 100 + 30 + 30 = 160px. #box { margin: 20px; padding: 30px; width: 100px; } 좀 더 직관적으로 코드를 작성하고 싶다면 다음과 같이 작성할 수 있다. #box { margin: 20px; padding: 3..
[CSS] padding/ margin 표기법 Padding 표기법 padding: 16px 8px 24px 10px; // 시계방향 순서대로 상 우 하 좌 padding : 16px 8px; // 상하 16px 좌우 8px padding : 16px 8px 20px; // 상 16px 좌우 8px 하 20px; padding-top: 16px; padding-right: 8px; padding-bottom: 24px; padding-left: 10px; Margin 표기법 padding 과 비슷하나 auto 를 쓸 수 있는데 반드시 width 값이 지정되어 있어야 함. 각각 속성을 작성해줄수도 있음. width: 520px; /* 반드시 너비가 정해져 있어야 자동으로 채울 수 있음 */ margin: 16px auto; margin-top: 16p..
[CSS] 불투명도: opacity opacity 값이 1에 가까워질수록 불투명해지는 속성으로 태그 전체를 반투명, 불투명하게 바꿀수 있음. opacity: 0; /* 투명 */ opacity: 0.6; opacity: 1; /* 불투명 */
[CSS] 그림자: box-shadow box-shadow: 박스에 그림자를 나타내는 기능으로 다음과 같이 작성될 수 있음. box-shadow: 5px 10px 15px 8px rgba(0, 0, 0, 0.6); /* 가로: 5px 세로: 10px 흐린 정도(Blur): 15px 퍼지는 정도(Spread): 8px 색상: rgba(0, 0, 0, 0.6) */ box-shadow: 10px 15px 20px 5px rgba(0, 0, 0, 0.4); /* 가로, 세로, 블러, 그림자가 퍼지는 크기, 그림자 색상*/ 유용한 사이트 https://cssgenerator.org/box-shadow-css-generator.html
[CSS] 그라디언트: linear-gradient linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0)); 그라데이션을 나타낼 수 있는 속성으로 보통 배경이미지에 많이 사용된다. 특정 각도를 입력하여 각도에 맞게 그라데이션이 나타나도록 할 수 있음. 내가 만든 웹사이트에서도 이 속성이 사용되었는데, .wrap{background: linear-gradient(to right bottom,#0f0f0f,#282828);} 오른쪽 아래 방향 ↘️ 으로 그라데이션이 가게끔 작성했음. 다음처럼 그라데이션기능과 이미지를 같이 넣어 디자인 효과를 줄 수도 있다. background-image: linear-gradient(90deg, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0)), url("pizza.png");..
[CSS] 배경이미지: background-image background-imgae: url("") 배경에 이미지를 넣을수 있는 속성으로, 다음 속성들과 같이 사용할 수 있다. 같이 쓰면좋은 속성들 background-repeat: no-repeat; 배경 이미지가 작은 경우, 배경을 반복하지 않는다. background-position: center; 중앙정렬 background-size: cover; 이미지 비율을 유지하면서, 이미지를 꽉 차게 background-size: contatin; 이미지가 잘리지 않는선에서, 최대크기로 배치 background-position: top; /* 위 */ background-position: right; /* 오른쪽 */ background-position: bottom; /* 아래 */ background-po..
[CSS] 크기 단위 1. 절대적인 단위 1-1. 픽셀 (px) 화면을 표시하는 기준이 되는 가장 작은 정사각형 예를 들어 10px = 정사각형 10개의 길이 1-2. PPI (Pixel Per Inch) 모니터에서 1인치 정사각형 안에 픽셀이 얼마나 들어가는지 촘촘할수록 모니터 세밀한 표현 1-3. 해상도 화면에 가로로 몇 px, 세로로 몇 px ex) 1280 X 720 2. 상대적인 단위 2-1. 퍼센트 부모 태그에 대해서 상대적인 크기 크기를 바꾸고 싶을 때 부모의 크기만 바꾸면 됨 2-2. em, rem em : 인쇄에서 전통적으로 대문자 M의 크기로, CSS에서 1em = 부모태그의 font-size rem : 1rem = 최상위 태그 의 font-size 글자크기에 맞춰서 여백을 줄 수 있음.

티스토리툴바