퍼블리싱/html, css, javascript

에어비엔비 메인 그리드 정렬 html, css 코드

연지쁨 2023. 10. 28. 14:08
반응형
목차
1. CSS flex 속성
2. CSS grid 
3. CSS Transition/transform
4. 에어비엔비 숙소 css,html
CSS Flex란?

 

자신의 컨테이너가 차지하는 공간에 맞추기 위해 크기를 키우거나 줄이는 방법을 설정하는 속성

 

 

flex-grow

  • 할당 가능한 공간의 정도
  • 형제 아이템들이 모두 동일한 flex-grow 값 = 동일한 공간
  • 형제 아이템들이 다른 flex-grow 값 = 다른 공간

 

 

flex-shrink

  • 아이템의 크기가 container보다  클 때 사용
  • 설정된 값에 따라 크기가 축소
  • flex-shrink: 0 = 줄어들지 않겠다.

 

 

flex-basis

  • 아이템의 초기 크기
  • ‘auto가 아닌 flex-basis’와 ‘width(direction: column이면 height)’ 중 flex-basis가 우선

 

 

방향 flex-direction

  • row (왼쪽에서 오른쪽으로 배치되는 흐름)
  • column (세로 방향 배치, 위에서 아래로)
  • row-reverse (가로방향 역배치, 오른쪽에서 왼쪽으로)
  • column-reverse (세로 방향 역배치, 아래에서 위로)

정렬 justify-content, align-items

  • flex-start (컨테이너 시작)
.container {
    display: flex;
    justify-content: flex-start;
}

 

 

 

  • flex-end (컨테이너 끝)
.container {
    display: flex;
    justify-content: flex-end;
}

 

 

 

  • center (가운데 요소배치)
.container {
    display: flex;
    justify-content: center;
}

 

 

 

  • space-between (요소 사이에 동일한 간격을 두면서 컨테이너 시작과 끝은 간격이 없도록 배치)
.container {
    display: flex;
    justify-content: space-between;
}

 

 

 

  • space-around (요소 주위에 동일한 간격을 두면서 컨테이너 시작과 끝에는 반 간격만큼 배치)
.container {
    display: flex;
    justify-content: space-around;
}

 

 

 

block

  • 한 줄을 차지
  • width, height, margin, padding 지정 가능
  • <div>, <h1~6>, <header> 등

inline

  • 컨텐츠 영역 만큼만 차지
  • width, height 지정 불가능
  • margin 좌우에만 적용
  • padding
  • <span>, <a>, <button> 등

 

CSS Gird 란

 

세로 열과 가로 행을 기준으로 요소를 정렬하는 레이아웃

 

 

레이아웃 정의

  • grid-template-rows : 행의 형태를 정의
  •  grid-template-columns: 열의 형태를 정의
  • gap : 간격 정의

 

 

아이템의 형태를 정의

  • grid-column-start (그리드 수평 가로 시작 위치 지정) 
    .item {
    grid-column-start: 2; /* 그리드 컬럼의 두 번째 위치에서 시작 */
}​

 

  • grid-column-end (그리드 수평 가로 끝 위치 지정) 
    .item {
    grid-column-end: 4; /* 그리드 컬럼의 네 번째 위치에서 끝 */
}
     
반응형
  • grid-row-start (그리드 수직 가로 시작 위치 지정)
.item {
    grid-row-start: 2; /* 그리드 로우의 두 번째 위치에서 시작 */
}

 

 

 

  • grid-row-end (그리드 수직 끝 위치 지정 
.item {
    grid-row-end: 4; /* 그리드 로우의 네 번째 위치에서 끝 */
}

 

 

 

 

CSS Transition/transform
  • CSS  transition

 

  • property (CSS 애니메이션 전환에서 변경할 속성 지정)
.animation {
    property: transform; /* 이 애니메이션은 transform 속성을 변경합니다. */
}

 

 

 

  • duration (애니메이션 전환의 지속시간 초(s) 또는 밀리초 (ms)단위로 표현)
.animation {
    duration: 2s; /* 이 애니메이션은 2초 동안 지속됩니다. */
}

 

 

 

  • timing-function (시간이 흐름에 따라 스타일 속성이 어떻게 변화하는지를 제어)
.animation {
    timing-function: ease-in-out; /* 이 애니메이션은 처음에는 빠르게 시작하고 나중에 느려집니다. */
}

 

 

 

  • delay (애니메이션이나 전환의 시작을 지연시키는 시간을 정의. 이 값도 초(s) 또는 밀리초(ms) 단위로 표현)
.animation {
    delay: 1s; /* 이 애니메이션은 1초 후에 시작됩니다. */
}

 

  • transform
  • translate : 이동 
  • scale : 확대, 축소 
  • rotate: 회전 
  • skew: 기울이기

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8"> <!-- 문서의 문자 인코딩을 설정하는 meta 태그 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 뷰포트 설정을 위한 meta 태그 -->
    <link rel="stylesheet" href="./index.css"> <!-- 외부 스타일 시트 파일을 연결하는 링크 태그 -->
    <title>Clone coding</title> <!-- 웹 페이지의 제목을 설정하는 태그 -->
</head>
<body>
    <!-- 웹 페이지의 시작 -->

    <!-- 헤더 섹션 -->
    <header>
        <img id="logo" src="./img/comp_0685990 (1).png" alt="fast campus logo"> <!-- 로고 이미지를 표시하는 이미지 태그 -->
        <div id="little-search">
            <button class="little-search_button">언제든지</button><span class="divider"></span> <!-- 검색 옵션 버튼과 구분선을 포함하는 div 요소 -->
            <button class="little-search_button">언제든 일주일</button><span class="divider"></span>
            <button class="little-search_button">게스트 추가</button>
            <div id="magnifying-glass-wrapper">
                <img id="magnifying-glass-icon" src="./img/Magnifying_glass_icon.svg" alt="magnfying-glass-icon"> <!-- 돋보기 아이콘을 표시하는 이미지 태그 -->
            </div>
        </div>
        <div id="header-right-section"> 
            <div id="do-airbnb">
                당신의 강의를 패스트캠퍼스 하세요.
            </div> <!-- "당신의 강의를 패스트캠퍼스 하세요." 텍스트를 포함하는 div 요소 -->
            <div id="profile-section">
                <img width="16" src="./img/list.svg" alt="list icon"> <!-- 목록 아이콘을 표시하는 이미지 태그 -->
                <img width="30" src="img/user-circle.svg" alt="user user-circle"> <!-- 사용자 아이콘을 표시하는 이미지 태그 -->
            </div>
        </div>
    </header>

    <div id="category-bar">
        <!-- 카테고리 버튼들을 나중에 추가할 예정 -->
    </div>

    <main>
        <div id="place-items-wrapper">
            <!-- 숙박 장소 정보를 나중에 추가할 예정 -->
        </div>
    </main>

    <button id="floating-map-button">
        <span>지도 표시하기</span>
        <img width="16" src="./img/map-trifold.svg" alt="map icon"> <!-- 지도 아이콘을 표시하는 이미지 태그와 텍스트를 포함한 버튼 -->
    </button>

    <!-- 웹 페이지의 끝 -->
</body>
<script>
    // 카테고리 버튼을 클릭할 때 활성화 클래스를 설정하는 JavaScript 코드를 여기에 추가할 수 있음
</script>
</html>

 

 

/* CSS 리셋: 기본 스타일 초기화 및 표준 스타일 재정의 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 버튼 스타일 초기화: 버튼의 스타일을 초기화 */
button {
    background-color: transparent;
    border: none;
}

/* 로고 스타일 */
#logo {
    height: 64px;
    cursor: pointer;
}

/* 헤더 스타일 */
header {
    display: flex;
    padding: 0 80px;
    height: 80px;
    justify-content: space-between;
    align-items: center;
    box-shadow: rgb(0 0 0 / 8%) 0 1px 0;
}

/* 검색창 스타일 */
#little-search {
    display: flex;
    padding: 0 8px;
    justify-content: center;
    align-items: center;
    border: 1px solid #DDDDDD;
    border-radius: 40px;
    height: 48px;
    box-sizing: border-box;
    min-width: 370px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 8%), 0 4px 12px rgb(0 0 0 / 5%);
    cursor: pointer;
}

/* 작은 검색 버튼 스타일 */
.little-search_button {
    display: block;
    flex-shrink: 0;
    padding: 0 16px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: rgb(34, 34, 34);
}

/* 검색창 호버 시 스타일 */
#little-search:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.18);
}

/* 검색창 하위 요소(버튼 등) 커서 스타일 */
#little-search * {
    cursor: pointer;
}

/* 작은 검색 버튼 중 3번째 버튼 스타일 */
.little-search_button:nth-of-type(3) {
    color: #717171;
}

/* ... (나머지 CSS 규칙들) */
반응형
저작자표시 동일조건

'퍼블리싱 > html, css, javascript' 카테고리의 다른 글

CSS 속성 부여시 . # 차이점  (0) 2023.10.31
프론트, 퍼블리싱 개발자 도구 VisBug 추천 [크롬에서만 가능]  (0) 2023.10.30
에어비앤비 홈페이지 상단메뉴처럼 css 적용하기  (0) 2023.10.23
node.js 윈도우 설치 및 설치확인방법 React 시작하기  (0) 2023.10.17
[css] 쇼핑몰 테이블(border)이 이미지에 가려 안보일때 overflow 설정  (0) 2023.10.13

'퍼블리싱/html, css, javascript'의 다른글

  • 현재글에어비엔비 메인 그리드 정렬 html, css 코드

관련글

티스토리툴바