[인프런] html, css 공부(3) - 영화리뷰 페이지 만들기

Jessie H·2022년 2월 6일
0

HTML & CSS

목록 보기
3/3
post-thumbnail

영화리뷰 만들기 완성본

<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: 컬러설정}

profile
코딩 공부 기록장

0개의 댓글