22-02-05 영화리뷰 페이지 만들기
영화리뷰 만들기 완성본
<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>html 팁
이미지 파일을 넣을 때는 `
<img src="./폴더 위치/파일 이름.jpg" alt="만약 로딩 안될 경우 대체해서 나타낼 이미지 파일의 위치 또는 링크">
<span>태그는 보통 컨텐츠 또는 글의 제목을 적을 때 많이 씀, 인라인 요소
<p>태그는 보통 컨텐츠 또는 글의 내용을 적을 때 씀, 블록 요소
css팁
기본 셋팅
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들
display: block;
인라인 요소를 블록 요소로 바꾸고 싶을 때 사용
display: flex;
블록 요소를 줄바꿈하는 법(인라인 특징 가지게 하는 법)
min-width
요소의 최소 너비 설정, 페이지 사이즈가 줄어도 요소의 너비는 더 작아지지 않음
position
부모 요소가 되는 것과 자식 요소가 되는 것을 설정하고
자식 요소의 일부를 가운데 정렬로 하는 법
부모요소의 css에 position: relative;
자식요소의 css에 position: absolute;, top: 50%, left: 50%, transform: translate(-50%, -50%);
transform: translate(x축, y축)
x축, y축을 설정한 숫자값/퍼센트만큼 이동
transform: translateX translateY로 x, y값 중 하나만 설정하고 싶을 때 따로 설정 가능
overflow-x
x축, 왼쪽과 오른쪽의 내용이 넘칠 때 어떻게 보여줄지 지정
overflow-x: visible
기본값, 내용은 잘리지 않으나 넘치는 내용은 밖으로 흘러 넘침
overflow-x: hidden
넘치는 내용은 잘리고 스크롤바가 형성되지 않음
overflow-x: scroll
내용이 넘치든 넘치지 않든 항상 가로 스크롤바 형성
overflow-x: auto
내용이 넘치면 잘리면서 자동으로 가로 스크롤 생성, 내용이 넘치지 않으면 스크롤 생성하지 않음
overflow-y
y축, 위/아래 내용이 넘칠 때 어떻게 보여줄지 지정
overflow-y: visible
기본값, 내용은 잘리지 않으나 위아래로 넘치는 내용은 밖으로 흘러 넘침
overflow-y: hidden
넘치는 내용은 잘린채로 숨겨짐
overflow-y: scroll
내용이 넘치든 넘치지 않든 항상 세로 스크롤바 형성
overflow-y: auto
내용이 넘치면 잘리면서 자동으로 세로 스크롤 생성, 내용이 넘치지 않으면 스크롤 생성하지 않음
border-radius: 테두리의 둥근정도 조정
border-radius: 50%하면 원형으로 됨
object-fit: cover
사진같은거 요소 안에 넣을 때 가운데에 딱 정렬시킬 때 사용
box-shadow
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
스크롤 hover 설정 (스크롤에 마우스 커서를 갖다댈 때 색 변화 주는법)
.class명: -webkit-scrollbar-thumb:hover{background: 컬러설정}
Author And Source
이 문제에 관하여(22-02-05 영화리뷰 페이지 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jessiii/22-02-05-영화리뷰-페이지-만들기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
