고정 헤더 영역
상세 컨텐츠
본문
white-space: nowrap;
기본크기 넘어가게하는거
이것이 폰트가져오는법!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Single+Day&display=swap');
.webfont{
font-family: 'Single Day', cursive;
}
</style>
</head>
<body>
<p>브라우저 기본 글꼴</p>
<p class = "webfont">구글 웹 글꼴</p>
</body>
</html>
삐뚤! 하게 하는법
transform: rotate(15deg);
background-origin
리스트스타일 알파벳 로마
list-style-type : lower-alpha
list-style-type : upper-roman
display 의 속성에 무엇이 있느냐?
backgroundimage 배경 사이즈, 설정
body {
background-image: url(recipe.png);
background-size: cover; /* 이미지 크기를 화면에 맞춤 */
background-repeat: no-repeat; /* 이미지가 반복되지 않도록 함 */
background-position: center; /* 이미지를 중앙에 배치 */
}
background-image: url(recipe.png);
background-size: cover; /* 이미지 크기를 화면에 맞춤 */
background-repeat: no-repeat; /* 이미지가 반복되지 않도록 함 */
background-position: center; /* 이미지를 중앙에 배치 */
}
화면을 중앙에, 반복
background-image: url(recipe.png);
/*background-size: cover; !* 이미지 크기를 화면에 맞춤 *!*/
background-repeat: repeat; /* 이미지가 반복되지 않도록 함 */
background-position: center; /* 이미지를 중앙에 배치 */
}
div 안에 백그라운드의 사이즈를 어떻게 설정할것인가?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width : 1000px;
height : 1000px;
background-image: url(recipe.png);
background-repeat: no-repeat; /* 이미지가 반복되지 않도록 함 */
background-position: center; /* 이미지를 중앙에 배치 */
}
/*컨테인은 나오게 꾸겨넣는다
cover는*/
.box1{
background-size: auto;
}
.box2{
background-size: contain;
}
.box3{
background-size: cover;
}
.box4{
background-size: 200px 150px;
}
.box5{
background-size: 60% 40%;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>background-size: contain;
비율 맞춰서 꽉 차게
background-size: cover;
잘려서 꽉 차게
background-size: 200px 150px;
진짜 그 사이즈
div 안에 백그라운드 포지션도 좀 바꿀수 있다. 왼쪽위 아니면 앱솔루트로
background-position: left center;
}
.box2{
background-position : 250px 250px;
백그라운드 안에 사진을 어디부터 시작할건지, 보더 패딩 콘텐츠 등등
background-origin: border-box;
}
.box2{
background-origin : padding-box;
}
.box3{
background-origin : content-box;
}
백그라운드가 스크롤 올리고 내려도 붙어있게
background-attachment: fixed;
근데 이걸 한번에 이렇게 쓸수도 있음
background : url(recipe.png) no-repeat fixed left top;
일자로 연결하고싶다? 디스플레이 인라인블록
display: inline-block;
스판 span도 비슷한거
스판도 블록처럼 만들수가 있다.
.block span {
display: block;
width: 100px;
height: 100px;
box-sizing: border-box;
}
p도 인라인으로 만들 수 있다.
.inline p{
display: inline;
}
전환하는거
p지만 display를 inlinE으로
span이지만 display를 block으로
none는 공간까지 사라지고
hidden은 공간은 남는다.
호버hover 할때 바뀌게 하는거
div:hover{
width: 1000px;
}
div를 가로로 쭉 나오게 하는거
display = inline - block
border-style의 여러가지 종류
.box1{
border-style: solid;
}
.box2{
border-style: dotted;
}
.box3{
border-style: dashed;
}
.box4{
border-style: double;
}
border의 위아래 오른쪽 보더를 따로따로 설정하는법
border-top-width: 1px 5px 15px;
border-right-width: 1px;
border-bottem-width: 1px;
border-left-width: 1px;
border-style: solid;
보더의 각 모서리마다 래디어스 다르게 주는법
border-top-left-radius: 10%;
border-top-right-radius: 20px;
border-bottom-left-radius: 20%;
border-bottom-lright-radius: 5px;
박스의 그림자 넣는법
box-shadow : 105px 105px 115px 105px gray;
background-clip: content-box;
백그라운드가 어디까지 확장될지.
글자 사이사이 간격
letter-spacing: 06.2rem;
direction: rtl;
}
.spacing2{
letter-spacing: 0.5rem;
direction: rtl;
}
.spacing3{
word-spacing: 0.5rem;
direction: rtl;
}
.spacing2{
letter-spacing: 0.5rem;
direction: rtl;
}
.spacing3{
word-spacing: 0.5rem;
background-clip: content-box;는 배경이 콘텐츠 박스까지만 렌더링되도록 지정합니다. 콘텐츠 박스는 엘리먼트의 실제 콘텐츠가 존재하는 영역을 말합니다. 여기에는 padding, border, margin이 포함되지 않습니다. 따라서, 이 설정을 사용하면 배경이 패딩과 테두리 영역으로 확장되는 것을 방지할 수 있습니다.
background-clip 속성은 다음 세 가지 값을 가질 수 있습니다:
border-box: 배경이 테두리 상자까지 확장됩니다 (기본값).
padding-box: 배경이 패딩 상자까지, 테두리 내부까지 확장됩니다.
content-box: 배경이 콘텐츠 박스까지만 확장됩니다.
예를 들어, 엘리먼트에 패딩과 테두리가 있고 배경 색상이 지정되어 있을 경우 background-clip: content-box;를 설정하면 배경 색상은 콘텐츠 영역에만 적용되고 패딩 영역과 테두리 영역에는 배경 색상이 적용되지 않습니다.
box-sizing: border-box;
박스사이징이 중요함
기본값이 보더박스
-content-box : width, height를 설정해도 콘텐트영역만 포함한다.
-border-box : width, height가 패딩, 테두리 모두 포함 이게 기본값이다.
float을 해도 가로로 쭉 정렬이 가능.
justify가 뭘까
양쪽 동일하게 공백, 거의 꽉 찼을때.
white-space: normal; /* 추가: 텍스트 줄바꿈 허용 */
마우스 대면 그 아래 숨겨져있는 글 나오는거
<style>
.content {
border: 1px solid gray;
width: 300px;
max-height: 20px; /* 추가: 최대 높이 설정 */
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.content:hover {
overflow: visible;
white-space: normal; /* 추가: 텍스트 줄바꿈 허용 */
max-height: none; /* 추가: 최대 높이 해제 */
height: auto; /* 추가: 높이 자동 설정 */
}
</style>
박스 안에 텍스트 가운데 정렬하는법
display: flex;
justify-content: center;
align-items: center;
font-size: 30px;
어떠한 상자를 가로로 배열하고 싶으면 그 부모상자의 디스플레이를 플랙스로 해야한다.
이거는 플렉스로 배열하는거임. 매우 중요함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>플렉서블 박스 - 주축을 설정하는 flex-direction</title>
<link rel="stylesheet" href="css/_03_flex_box_direction.css" type="text/css">
<style>
.container1,.container2, .container3, .container4{
border: 1px solid black;
}
.box {
display: flex;
width: 100px;
height: 100px;
background-color: green;
border: 1px solid black;
justify-content: center;
align-items: center;
}
.container1{
display: flex;
}
.container2{
display: flex;
flex-direction: row-reverse;
}
</style>
</head>
<body>
<div class="container1">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="container2">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="container3">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div class="container4">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
</body>
</html>
댓글 영역