6월 1주차 정리

정성훈·2024년 6월 24일

html 프론트엔드 오르미

프론트엔드 오르미

목록 보기

1/6

6월 1주차 배움 정리

이스트소프트 프론트엔드 오르미를 시작하면서 기본부터 다시 배우게 되었습니다. 본 게시물은 수업하면서 중요하다고 생각했던 내용들을 정리하는 게시물입니다.

block / inline / inline-block

block

가능한 모든 너비 차지

항상 새로운 줄에서 시작

이전, 이후 요소 사이에 줄바꿈이 일어남

인라인 요소 안에 블록 요소는 중첩 가능하나 반대는 불가능

inline

항상 블록 레벨 요소 내부에 포함 됨

컨텐츠에 따라 너비가 달라짐

새로운 줄을 만들지 X

width, height 지정 X

padding/border/margin(좌우) 사용 O

inline-block

인라인 속성을 따르지만 너비와 높이 조절 가능

margin, padding 상하 간격 지정 가능

button, input, select

div / span

div

block 요소

공간을 나누고 정리의 역할을 하는 광범위하게 사용되는 태그

지정된 기능은 영역을 구분 짓기

SEO, 코드가독성, 접근성 등에 도움을 주는 태그가 아니기 때문에 공간을 나누기 위한 용도로 사용을 권장함.

span

inline 요소

스타일 적용 시 인라인 요소 묶을 때 사용함(p,a 등)

실습

스크린샷

코드

<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>로그인</title>
    <style>
      a {
        color: #767676;
        text-decoration: none;
      }
      #wrapper {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        max-width: 314px;
      }
      section {
        max-width: 350px;
        height: 140px;
        border-radius: 4px;
        border: 1px solid;
        padding-left: 30px;
        padding-right: 25px;
      }
      button {
        background-color: #711bff;
        color: white;
        height: 40px;
        width: 318px;
        text-align: center;
        border-radius: 4px;
        border-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      #icon-lock,
      #icon-user {
        width: 16px;
        height: 16px;
      }
      #weniv-logo {
        height: 18px;
        width: 64px;
      }
    </style>
  </head>
  <body>
    <h1>로그인 페이지</h1>
    <section>
      <p>더 편리해진 위니브에 오신 것을 환영합니다.</p>
      <!-- 로그인 모달 버튼 -->
      <button>
        <img src="./src/weniv-logo.png" alt="위니브 로고" id="weniv-logo" />
        <span>로그인</span>
      </button>
      <div id="wrapper">
        <div>
          <img src="./src/icon-lock.png" alt="" id="icon-lock" />
          <a href="#"><span>아이디</span></a>
          <span style="color: #767676"> | </span>
          <a href="#">비밀번호찾기</a>
        </div>
        <div>
          <img src="./src/icon-user.png" alt="" id="icon-user" />
          <a href="#"><span>회원가입</span></a>
        </div>
      </div>
    </section>
  </body>
</html>

정성훈

초보 프론트엔드 개발자

다음 포스트