<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="prac1_css/style.css" />
<title>영화 리뷰 페이지입니다</title>
</head>
<body>
<div class="hamzzi">🎥영화 리뷰 페이지🎬</div>
<div class="review_wrap">
<div class="review">
<div class="profile">
<img src="./prac1_images/profile_img.jpg" alt="" />
</div>
<span>후기 제목</span>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quasi,
perferendis voluptatum ut rerum quas facilis et. Harum ipsum officia
natus porro hic corporis, nihil est ipsam amet neque nostrum. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Odio sint, ea
voluptates debitis, quia architecto, consequuntur atque cupiditate
obcaecati dolore eum dicta voluptatibus a id ex. Perferendis eius
aperiam ipsam. Lorem ipsum dolor sit amet consectetur adipisicing
elit. Eius placeat quam beatae, nihil quia ducimus maxime illo. Natus,
inventore? Placeat laudantium aspernatur ad rerum praesentium
veritatis itaque voluptatem quae architecto.
</p>
</div>
<div class="review">
<div class="profile">
<img src="./prac1_images/profile_img2.jpg" alt="" />
</div>
<span>후기 제목</span>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quasi,
perferendis voluptatum ut rerum quas facilis et. Harum ipsum officia
natus porro hic corporis, nihil est ipsam amet neque nostrum. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Odio sint, ea
voluptates debitis, quia architecto, consequuntur atque cupiditate
obcaecati dolore eum dicta voluptatibus a id ex. Perferendis eius
aperiam ipsam.
</p>
</div>
<div class="review">
<div class="profile">
<img src="./prac1_images/profile_img3.jpg" alt="" />
</div>
<span>후기 제목</span>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quasi,
perferendis voluptatum ut rerum quas facilis et. Harum ipsum officia
natus porro hic corporis, nihil est ipsam amet neque nostrum. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Odio sint, ea
voluptates debitis, quia architecto, consequuntur atque cupiditate
obcaecati dolore eum dicta voluptatibus a id ex. Perferendis eius
aperiam ipsam.
</p>
</div>
<div class="review">
<div class="profile">
<img src="./prac1_images/profile_img4.jpg" alt="" />
</div>
<span>후기 제목</span>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quasi,
perferendis voluptatum ut rerum quas facilis et. Harum ipsum officia
natus porro hic corporis, nihil est ipsam amet neque nostrum. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Odio sint, ea
voluptates debitis, quia architecto, consequuntur atque cupiditate
obcaecati dolore eum dicta voluptatibus a id ex. Perferendis eius
aperiam ipsam.
</p>
</div>
<div class="review">
<div class="profile">
<img src="./prac1_images/profile_img5.jpg" alt="" />
</div>
<span>후기 제목</span>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est quasi,
perferendis voluptatum ut rerum quas facilis et. Harum ipsum officia
natus porro hic corporis, nihil est ipsam amet neque nostrum. Lorem
ipsum, dolor sit amet consectetur adipisicing elit. Odio sint, ea
voluptates debitis, quia architecto, consequuntur atque cupiditate
obcaecati dolore eum dicta voluptatibus a id ex. Perferendis eius
aperiam ipsam.
</p>
</div>
</div>
</body>
</html>
이미지 파일을 넣을 때는 `
<img src="./폴더 위치/파일 이름.jpg" alt="만약 로딩 안될 경우 대체해서 나타낼 이미지 파일의 위치 또는 링크">
<span>
태그는 보통 컨텐츠 또는 글의 제목을 적을 때 많이 씀, 인라인 요소
<p>
태그는 보통 컨텐츠 또는 글의 내용을 적을 때 씀, 블록 요소
body{margin: 0; padding: 0;
body에 기본적으로 margin과 padding이 설정되어 있기 때문
padding입력시 padding: top bottom left right 순서로 적용됨
li{list-style: none}
li는 리스트처럼 불렛 포인트를 나타내는 태그로 li 태그 입력 시 불렛 포인트 효과가 자동으로 나타나지 않게 하려면 none으로 설정해야한다
a{text-decoration: none; color: black;}
a태그는 하이퍼링크 거는 태그인데, 기본 설정은 미클릭시 파란색 폰트, 클릭시 보라색 폰트이고 직선 밑줄이 그어져있다.
text-decoration: none할 경우 밑줄이 사라진다
color를 통해 글자색을 고정할 수 있다.
ul,h1,h2,h3,h4,h5,h6{margin:0; padding: 0;}
ul, h1, h2, h3, h4, h5, h6모두 기본적으로 margin과 padding이 들어가는 아이이므로 없애는 것이 편함
button{outline: none; border: none; background: transtparent; cursor: pointer;}
<버튼 기본설정>
<outline: none, border: none 적용>
<outline: none, border: none, background: transparent 적용>
cursor: pointer;는 버튼에 마우스 갖다대면 손모양으로 마우스 커서 모양이 변하게 설정하는 것
*{}
인라인 요소를 블록 요소로 바꾸고 싶을 때 사용
블록 요소를 줄바꿈하는 법(인라인 특징 가지게 하는 법)
요소의 최소 너비 설정, 페이지 사이즈가 줄어도 요소의 너비는 더 작아지지 않음
부모 요소가 되는 것과 자식 요소가 되는 것을 설정하고
자식 요소의 일부를 가운데 정렬로 하는 법
부모요소의 css에 position: relative;
자식요소의 css에 position: absolute;, top: 50%, left: 50%, transform: translate(-50%, -50%);
x축, y축을 설정한 숫자값/퍼센트만큼 이동
transform: translateX translateY로 x, y값 중 하나만 설정하고 싶을 때 따로 설정 가능
x축, 왼쪽과 오른쪽의 내용이 넘칠 때 어떻게 보여줄지 지정
기본값, 내용은 잘리지 않으나 넘치는 내용은 밖으로 흘러 넘침
넘치는 내용은 잘리고 스크롤바가 형성되지 않음
내용이 넘치든 넘치지 않든 항상 가로 스크롤바 형성
내용이 넘치면 잘리면서 자동으로 가로 스크롤 생성, 내용이 넘치지 않으면 스크롤 생성하지 않음
y축, 위/아래 내용이 넘칠 때 어떻게 보여줄지 지정
기본값, 내용은 잘리지 않으나 위아래로 넘치는 내용은 밖으로 흘러 넘침
넘치는 내용은 잘린채로 숨겨짐
내용이 넘치든 넘치지 않든 항상 세로 스크롤바 형성
내용이 넘치면 잘리면서 자동으로 세로 스크롤 생성, 내용이 넘치지 않으면 스크롤 생성하지 않음
border-radius: 50%하면 원형으로 됨
사진같은거 요소 안에 넣을 때 가운데에 딱 정렬시킬 때 사용
box-shadow: offset-x | offset-y | shadow color
그림자 inset과 offset차이
<inset>
요소의 안으로 생기는 그림자
<offset>
class 명 + (특정 지정할 요소)::after
선택한 요소의 마지막 뒤에 가상요소 생성
.class명::-webkit-scrollbar
.class명::-webkit-scrollbar-track
.class명::-webkit-scrollbar-thumb
.class명: -webkit-scrollbar-thumb:hover{background: 컬러설정}