[코드잇 스프린트 1주차] CSS 핵심 개념 2

카테고리 없음 2023. 9. 7. 16:05

✔️ Display

4-01. 블록과 인라인

- Display의 속성은 크게 2가지로 나뉨

- 블록(block) : 위->아래로 배치, 너비와 높이를 정할 수 있음 (ex. <h1>, <p>, <div>)

- 인라인(inline) : 글쓰는 것과 같이 배치 -> 여백도 가로로만 가능, 크기 정할 수 없음 (ex. <a>, <span>)

- 예외적으로 외부에서 불러오는 <img> 같은 것은 인라인이지만, 크기 지정 가능

4-03. 인라인 블록

- display 속성을 바꾸면 블록 <-> 인라인 자유자재로 사용 가능

- 배치는 인라인처럼 되지만, 블록처럼 크기가 있는 것

display : block / inline / inline-block ;

4-04. float

- 요소가 배치되는 방식을 바꾸고 싶을 때

(ex. 이미지를 글 왼쪽에 넣고 싶을 때 -> 블록처럼 왼쪽/오른쪽 배치 가능)

float : left / right ;

4-08. [실습] 코드잇 미술관

- 모범 답안

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>코드잇 미술관</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
      rel="stylesheet"
   >
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <img id="logo" src="logo.png">
      <div class="nav">
        <a class="nav-menu" href="#">소개</a>
        <a class="nav-menu" href="#">관람·참여</a>
        <a class="nav-menu" href="#">전시</a>
        <a class="nav-menu" href="#">교육</a>
      </div>
    </div>
    <div class="content">
      <div class="section">
        <h2 class="title">
          인상주의 거장들과 함께하는<br>
          &lt;모네, 빛을 그리다&gt; 展
        </h2>
        <h3 class="date">2025-05-02 ~ 2025-08-07</h3>
        <div class="artworks">
          <img class="artwork" src="547239.jpg">
          <img class="artwork" src="547250.jpg">
          <img class="artwork" src="547252.jpg">
          <img class="artwork" src="547266.jpg">
          <img class="artwork" src="547292.jpg">
          <img class="artwork" src="547293.jpg">
          <img class="artwork" src="547310.jpg">
          <img class="artwork" src="930543.jpg">
        </div>
        <a class="button" href="#">모든 작품 보기</a>
      </div>
      <div class="section">
        <h2 class="title">공간 소개</h2>
        <p class="description">
          보국산 끝자락에 자리잡은 코드이트 보국은 천혜의 자연 경관과 함께하며 그 자체로 지친 몸과 마음을 쉬게 해 줄 힐링의 공간입니다.
          김수곤 건축가의 작품인 본 갤러리는 캔버스 화폭을 형상화하여 입면을 하늘로 가져 간 전시실이 특징이며,
          한국의 전통 가옥을 연상시키는 천정과 부드러운 자연광이 들어올 수 있게 설계한 쾌적한 전시공간을 연출하고 있습니다.
        </p>
        <img class="full" src="space.jpg">
      </div>
    </div>
  </body>
</html>

- CSS

body {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 16px;
  margin: 0;
}

.header {
  border-bottom: 1px solid #000000;
  font-size: 52px;
  font-weight: 800;
  margin: 0;
}

#logo {
  display: block;
  width: 104px;
  margin-bottom: 24px;
}

.nav {
  font-size: 22px;
  font-weight: 700;
  line-height: 32px;
}

.nav-menu {
  color: #000000;
  margin-right: 16px;
  text-decoration: none;
}

.header {
  padding-bottom: 24px;
  padding-top: 68px;
}

.header,
.content {
  padding-left: 48px;
  padding-right: 48px;
}

.section {
  margin: 40px 0 72px;
}

.title {
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  margin: 8px 0;
}

.date {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  margin: 8px 0;
}

.artworks {
  margin: 24px -48px;
  overflow: scroll;
  white-space: nowrap;
}

.artwork {
  height: 194px;
  margin-right: 8px;
}

a.button {
  display: inline-block;
  background: #000000;
  color: #ffffff;
  padding: 12px 24px;
  text-decoration: none;
}

.description {
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}

img.full {
  margin: 24px 0;
  width: 100%;
}

- 내가 쓴 코드

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>코드잇 미술관</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap"
      rel="stylesheet"
   >
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
		<img class = "logo_img" src="logo.png">
    <div class = "menu">소개 관람·참여 전시 교육</div>
    
    <div class = "exh">
    인상주의 거장들과 함께하는<br>
    &lt;모네, 빛을 그리다&gt; 展<br>
    </div>
    <div class = "time">
      2025-05-02 ~ 2025-08-07
    </div>
    
    <div class = "photos">
    <img id = "photo" src="547239.jpg">
    <img id = "photo" src="547250.jpg">
    <img id = "photo" src="547252.jpg">
    <img id = "photo" src="547266.jpg">
    <img id = "photo" src="547292.jpg">
    <img id = "photo" src="547293.jpg">
    <img id = "photo" src="547310.jpg">
    <img id = "photo" src="930543.jpg">
    </div>
    <a href="#" class = "click">모든 작품 보기</a>
    
    <div class = "intro">공간 소개</div>
    <div class = "text">
    보국산 끝자락에 자리잡은 코드이트 보국은 천혜의 자연 경관과 함께하며 그 자체로 지친
    몸과 마음을 쉬게 해 줄 힐링의 공간입니다. 김수곤 건축가의 작품인 본 갤러리는
    캔버스 화폭을 형상화하여 입면을 하늘로 가져 간 전시실이 특징이며, 한국의
    전통 가옥을 연상시키는 천정과 부드러운 자연광이 들어올 수 있게 설계한 쾌적한
    전시공간을 연출하고 있습니다.
    </div>
    <img class = "last_img" src="space.jpg">
  </body>
</html>

- CSS

* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 16px;
  margin: 0;
  color : #000000 ;
}

.logo_img{
  width : 104px ;
  margin : 68px auto 24px 48px;
  display : block;
}

.menu{
  padding : 24px 0px 24px 48px;
  font-size : 22px;
  font-weight : 700;
  border-block-end : 3px solid #000000;
}

.exh{
  margin : 40px 0px 8px 48px;
  font-size : 24px ;
  font-weight : 700;
}

.time{
  margin : 8px 0px 24px 48px;
  font-size : 16px;
}

.photos{
  margin : 24px 0px;
  white-space : nowrap;
  overflow : hidden;
}
#photo{
  height : 194px;
}

.click{
  display : inline-block;
  padding : 12px 24px;
  margin : 24px 0px 72px 48px;
  background-color : #000000;
  color : #ffffff;
  font-size : 16px;
  text-decoration : none;
}

.intro{
  font-size : 24px;
  font-weight : 700;
  margin : 0px 0px 16px 48px;
}

.text{
  margin : 0px 48px;
  font-size : 16px;
}

.last_img{
  padding : 24px 48px;
  width : 100%;
}

전체적인 방법은 일단 하나하나 block(<div> 사용)로 쪼갰다! 그냥 블록으로 하는 게 margin 처리하기 편할 것 같아서,,(아닐 수도 있음 그냥 느낌을 따름 ...... 그래도 인라인보다 낫지 않을까..?)

제일 당황했던 건 저 구분선! 같은 애였는데, border-block-end 를 사용해서 밑에만 테두리를 설정하는 걸로 구현했다!

그리고, 모든 작품 보기는 inline-block으로 바꿔서 구현했고

맨 밑에 사진은 background-image로 넣은 것도 아닌데 어떻게 꽉차게 구현할까,, 고민했는데 저 사진이 있는 block의 width 를 100%로 설정해주고, margin이 아니라 padding 을 넣어주었다!

- 23/09/06(수)

✔️ 선택자

5-01. CSS 선택자

.title {
  color: #12172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  margin: 0 0 8px;
}

- .title : CSS 선택자

- { } 안 : CSS 선언(속성 & 속성값)

5-02. 선택자 목록

- 둘 이상의 선택자가 같은 속성을 가지고 있다면 -> 선택자 목록(selector list) 만들기 (굳이 class마다 같은 속성들을 반복해 적을 필요 없다.)

.book-description,
.book-info{
	font-size : 12px;
    font-weight : 400;
    line-height : 17px;
}

- 둘 이상의 선택자를 , 로 이어주면 됨

5-04. 선택자 붙여쓰기

<p class = "delay book-info"></p>

- HTML 코드에서 class 여러 개 사용하는 법 : 띄어쓰기로 구분

- 해당 부분이 delay 클래스에도 속하게 하고 싶고, book-info라는 클래스에도 속하게 하고 싶을 때 사용 !

.delay.book-info{
	background-color : #c76546
}

- 여러 개의 선택자를 함께 선택하려면? : 붙여쓰기

- 만약 delay라는 클래스에 여러 개의 요소가 포함되어 있는데 나는 위에 있는 <p>부분만 쓰고 싶다면 delay와 book-info를 같이 선택해야 <p>만 선택할 수 있을 것

5-06. 자식, 자손 선택하기

- "title"이라는 class를 선언했더니 이미 "title" class가 있는 경우! -> 부모 & 자식 클래스 이름을 조합해서 사용

.book-container > .title {
  color: #12172a;
  font-size: 24px;
  font-weight: 700;
  line-height: 35px;
  margin: 0 0 8px;
}

- 부모 class > 자식 class 형태로 사용

- > : 자식 결합자

- book-container를 부모로 가지는 title 클래스를 선택하라는 뜻

.book .date {
  font-weight: 700;
}

- 띄어쓰기 : 자손 결합자

- 보통 자식 결합자보다 자손 결합자를 많이 사용한다.

- 얘를 활용하는 것보단 그냥 class 이름을 바꾸는 게 편하다!

5-08. 가상 클래스

- ex. 글자에 마우스 올리면 밑줄 생기게 하는 것

- . 대신 :로 시작

- 이름이 미리 정해져 있음

/* a에 마우스를 올리면 밑줄이 생기도록 */
a:hover{
	text-decoration: underline;
}

- hover : 마우스 올린 상태

- active : 마우스로 클릭

- focus : 입력을 기다리는 상태(ex. 주소창 클릭하고 주소 안치는 상태)

- visited : 링크 방문 표시

5-09. [실습]

마우스 올리면 배경색 바뀌도록 하기

a.see-more:hover{
  background-color : #524cad;
}

- 왜 a를 떼면 안되는거지 막혔었는데,, 멍충이같이 앞에 .까지 떼버려서 안된거였다,,,^^

5-11. 팁: 알아두면 좋은 선택자

- * : 전체 선택자(universal selector)

- :nth-child(n/2n/even/odd) : n번째 자식 선택자(n-th child selector) , 1부터 시작

5-13. [실습]

- 내 코드

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chainit</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "bg1">
      <div class = "mini_logo">
      CHAIN<span>IT</span>
      </div>
      <div class = "part1">
      <div class = "semi_title">세상 모든 화폐를 바꾸다</div>
      <div class = "title">Exchange<br>THE WORLD.</div>
      <div class = "mini_title">
      2014년, 국내 최초로 시작한 암호화폐 거래소<br>
      블록체인 기술로 세계를 선도합니다.</div>
      </div>
    </div>
    <div class = "part2">
      <h1>CHAINIT</h1>
      <img src = 'chainit.png'>
      <p>체인잇은 2014년 국내 최초로 암호화폐 거래소 Chainit Exchange 개발을 시작으로,
      현재 탈중앙 암호화폐 교환 플랫폼 Chainit DEX를 운영 중입니다. 여기서 얻은 노하우를
      바탕으로 블록체인을 이용한 다양한 사업 분야로 영역을 넓혀가고 있습니다.
      </p>
      <span class = "click">거래소 둘러보기</span>
    </div>
    <div class = "part3-color">
    <div class = "part3">
      <h1>CHAINIFY</h1>
      <img src = 'chainify.png'>
      <p>Chainify는 체인잇 회원들이 보유한 암호화폐를 체인잇에서 하는 블록체인 서비스에 투자할 수 있는
      서비스입니다. 체인잇 생태계에서 기축통화 역할을 하는 체인잇 코인(CNB)으로 보상을 받을 수 있습니다.
      </p>
      <span class = "click">Chainify 둘러보기</span>
    </div>
    </div>
    <div class = "part4">
      <h1>CHAINIT NANO</h1>
      <img src = 'chainit-nano.png'>
      <p>
      암호화폐를 안전하게 보관할 수 있는 지갑입니다.
      타이완의 제조기업 하이낸스와의 협업으로 Chainit Nano 시리즈를 출시하였습니다.
      </p>
      <span class = "click">자세히 알아보기</span>
    </div>
    <div class = "part5">
    <div class = "logo">Careers<br></div>
    <div class = "last">블록체인의 미래를 함께 만들어 갈 여러분들을 기다립니다.</div>

    <span class = "click round">채용공고 보기</span>
    </div>
    <div class = "part6">
      <div class = "copy">
      Chainit<br>
      Copyright © Chainit, Inc. All rights reserved.
      </div>
    </div>
  </body>
</html>

- CSS

* {
  box-sizing: border-box;
}

body {
  font-family: Poppins, 'Noto Sans KR', sans-serif;
  margin: 0;
}

.bg1{
  background-image : url('bg.png');
  background-repeat : no-repeat;
  background-size : cover;
  background-position : center;
}

.part1,
.part2,
.part3,
.part4{
  width : 720px;
  margin : 0px auto;
}

.part3-color{
  background-color : #f1f4fa;
}

.part5{
  background-color : #161346;
}

.part6{
  background-color : #120f3f;
}

.mini_logo, .title, .click, .logo{
  color : #ffffff;
}

.semi_title,
.mini_title, .last{
  color : #8287a4;
}

.mini_logo{
  font-size : 20px;
  font-weight : 700;
  margin : 12px 0px 80px 40px;
}

.mini_logo span{
  font-weight : 400;
}

.semi_title{
  font-size : 20px;
  font-weight : 500;
  margin : 12px 0px;
}

.title{
  font-size : 56px;
  font-weight : 700;
}

.mini_title{
  font-size : 14px ;
  font-weight : 400;
  padding : 14px 0px 280px 0px;
}

h1{
  font-size : 36px;
  font-weight : 700;
  color : #161346;
  padding : 74px 0px 42px;
}

img{
  width : 100%;
  border-radius : 24px;
}

p{
  font-size : 16px;
  font-weight : 500;
  color : #4c497b;
  padding : 32px 0px;
}

.click{
  background-color : #413c91;
  font-size : 16px;
  font-weight : 700;
  border-radius : 8px;
  padding : 16px 32px;
  display : inline-block;
  margin : 0px 0px 64px;
  text-align : center;
}
.logo{
  font-size : 32px;
  font-weight : 500;
  padding : 40px 0px 8px;
  text-align : center;
}
.last{
  font-size : 16px;
  font-weight : 400;
  text-align : center;
  padding : 0px 0px 32px;
}

.copy{
  width : 720px;
  margin : 0px auto;
  padding : 32px 0px;
  text-align : left;
  font-size : 16px;
  font-weight : 400;
  color : #d9d9d9;
}

- 모범 답안

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Chainit</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Poppins:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="header">
      <div class="header-title">
        <span class="header-title-accent">CHAIN</span>IT
      </div>
      <div class="header-content">
        <h1 class="header-tagline-small">세상 모든 화폐를 바꾸다</h1>
        <h2 class="header-tagline">Exchange<br>THE WORLD.</h2>
        <p class="header-description">
          2014년, 국내 최초로 시작한 암호화폐 거래소<br>
          블록체인 기술로 세계를 선도합니다.
        </p>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <h2 class="title">CHAINIT</h2>
        <img class="cover" src="chainit.png">
        <p class="description">
          체인잇은 2014년 국내 최초로 암호화폐 거래소 Chainit Exchange 개발을 시작으로, 현재 탈중앙 암호화폐 교환 플랫폼 Chainit DEX를 운영 중입니다. 여기서 얻은 노하우를 바탕으로 블록체인을 이용한 다양한 사업 분야로 영역을 넓혀가고 있습니다.
        </p>
        <div class="button-container">
          <a class="button" href="https://codeit.kr">
            거래소 둘러보기
          </a>
        </div>
      </div>
    </div>
    <div class="section dark">
      <div class="container">
        <h2 class="title">CHAINIFY</h2>
        <img class="cover" src="chainify.png">
        <p class="description">
          Chainify는 체인잇 회원들이 보유한 암호화폐를 체인잇에서 하는 블록체인 서비스에 투자할 수 있는
          서비스입니다. 체인잇 생태계에서 기축통화 역할을 하는 체인잇 코인(CNB)으로 보상을 받을 수 있습니다.
        </p>
        <div class="button-container">
          <a class="button" href="https://codeit.kr">
            Chainify 둘러보기
          </a>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="container">
        <h2 class="title">CHAINIT NANO</h2>
        <img class="cover" src="chainit-nano.png">
        <p class="description">
          암호화폐를 안전하게 보관할 수 있는 지갑입니다.
          타이완의 제조기업 하이낸스와의 협업으로 Chainit Nano 시리즈를 출시하였습니다.
        </p>
        <div class="button-container">
          <a class="button" href="https://codeit.kr">
            자세히 알아보기
          </a>
        </div>
      </div>
    </div>
    <div id="career" class="section">
      <h2 class="title">Careers</h2>
      <p class="description">블록체인의 미래를 함께 만들어 갈 여러분들을 기다립니다.</p>
      <a class="button round" href="https://codeit.kr">
        채용공고 보기
      </a>
    </div>
    <div id="footer" class="section">
      <div class="container">
        <p>
          Chainit<br>
          Copyright © Chainit, Inc. All rights reserved.
        </p>
      </div>
    </div>
  </body>
</html>

- CSS

* {
  box-sizing: border-box;
}

body {
  font-family: "Noto Sans KR", sans-serif;
  margin: 0;
}

.header {
  background-image: url("bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: #ffffff;
}

.header-title {
  font-family: Poppins;
  font-size: 20px;
  line-height: 30px;
  padding: 12px 40px;
}

.header-title-accent {
  font-weight: 700;
}

.header-tagline-small {
  color: #8287a4;
  font-size: 20px;
  font-weight: 500;
  line-height: 29px;
  margin: 12px 0;
}

.header-tagline {
  color: #ffffff;
  font-family: Poppins;
  font-size: 56px;
  font-weight: 700;
  line-height: 74px;
  margin: 0;
}

.header-description {
  color: #8287a4;
  font-size: 14px;
  font-weight: 400;
  line-height: 27px;
  margin: 14px 0;
}

.header-content {
  margin: 0 auto;
  padding: 80px 0 280px;
  width: 720px;
}

.section {
  padding: 32px 0;
}

.section.dark {
  background-color: #f1f4fa;
}

.container {
  margin: 0 auto;
  width: 720px;
}

.title {
  color: #161346;
  font-family: Poppins;
  font-size: 36px;
  font-weight: 700;
  line-height: 54px;
  margin-bottom: 42px;
  margin-top: 42px;
}

.description {
  color: #4c497b;
  font-size: 16px;
  font-weight: 500;
  line-height: 27px;
  margin: 32px 0;
}

.cover {
  border-radius: 24px;
  width: 100%;
}

#career.section {
  background-color: #161346;
  color: #ffffff;
  text-align: center;
}

#footer.section {
  background-color: #120f3f;
  color: #d9d9d9;
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
}

#career .title {
  color: #ffffff;
  font-size: 32px;
  font-weight: 500;
  line-height: 48px;
  margin: 8px 0;
}

#career .description {
  color: #8287a4;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
  margin: 8px 0;
}

.button-container {
  text-align: center;
}

a.button {
  background: #413c91;
  border-radius: 8px;
  color: #ffffff;
  display: inline-block;
  font-size: 16px;
  font-weight: 700;
  line-height: 23px;
  margin: 32px 0;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
}

a.button:hover {
  background-color: #504ba8;
}

a.button.round {
  border-radius: 9999px;
}

1시간.. 조금 넘도록 불태웠다,, 내 코드는 엄청나게 비효율적일거다,, 왜냐면 그냥 쓰면서도 그렇게 느껴졌다. 하나하나 다 쪼개가면서 맞추는 식으로 했기 때문.. 이걸 빠르게 할 수 있는 방법이 뭘까 ㅠㅠ?

그리고 가장 아쉬운 점은 원래라면 둘러보기 버튼들이 가운데정렬이 되어야 하는데 도저히 모르겠다는 것이다 ,, block으로 하면 버튼이 정한 너비만큼 꽉 채워버려서 inline으로 했는데,, 어떻게 하는거냐묘! margin auto로 해도 안되고.. 흠,,, 이따 답보고 공부 좀 해봐야겠다 그래도 시간에 쫓기면서 한 것치고는 나름 만족 !

✔️ 스타일 계산하기

6-01. 캐스케이드

- style이 겹칠 때 어떤 걸 적용시킬 지?

- 개발자 도구에서 봤을 때 위->아래 방향으로 적용됨 (캐스케이드되는 순서)

6-02. 캐스케이드 순서

- 스타일 시트의 종류

브라우저 기본 스타일(User Agent Stylesheet)0 < 우리가 작성한 css 코드 < inline style(가장 순위가 높음)

- 코드 상의 순서

똑같은 선택자를 쓰는 경우 : 나중에 작성한 코드가 우선 순위 더 높음

- 선택자의 명시도(specificity)

명시도 점수가 더 높을수록 우선순위

명시도 점수는 아이디 개수 -> 클래스 개수 -> 요소 개수 순서로 점수가 매겨진다.

6-04. 상속

- 조상 태그에서 속성을 상속받는다.

- 글자색, 글꼴, 정렬 등

6-05. 스타일 계산하기 퀴즈

<div id="header">
  <h1 class="title">CSS 상속</h1>
  <p class="description">
    태그들은 <span class="accent">CSS 속성</span>을 부모 태그에서 물려 받습니다.
  </p>
</div>

body {
  color: #0000bb;
}

.title {
  color: #bbbb00;
}

.description {
  color: #cc0000;
}

#header > .description {
  color: #bb0000;
}

.accent {
  color: #00cc00;
}

명시도 점수가 제일 높은 4번째 컬러가 정답인줄 알았는데

<span>의 부모는 <p>이므로 <p>로부터 상속받는 속성을 먼저 계산하고, <span>에 적용되는 애들끼리 따로 우선순위를 결정한다.

가까운 조상에게 물려받은 속성일수록 우선순위가 더 높다,,

6-07. [실습] 코드잇 항공

- 내 코드

- HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Codeit Airline</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Titillium+Web:wght@300;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class = "header">
      <div>
      <img src = 'logo.png'>
      <span class = "logo">Codeit</span> Airline
      </div>
    </div>
    <div class = "part1">
      <img src = 'depart.png'>
      <span id = "dp">출국</span>

      <div id = "where">ICN → YYZ</div>

      <span id = "when">일요일, 4월 20일, 2025</span>

      <div class = "etc">왕복여행 가격은 수수료와 세금이 포함된 가격입니다.
      추가 수하물이 있을 경우 수수료가 추가로 적용됩니다.
      서비스 및 편의시설은 적혀있는 내용과 달라질 수 있습니다.</div>
    </div>
    <div class = "line"></div>
    <div class = "ticket_box first">
      <div class = "ticket_num">AIR TICKET 01</div>

      <span class = "exp">출발 / 도착<br></span>

      <span class = "time">오후 12:30</span>
      <img src = 'airplane.svg'>
      <span class = "time">오후 8:29<br></span>

      <span class = "exp">운행 항공편</span>
      <div class = num>CL117, CL2402, CL8078</div>

      <div class = "click">
        <span>좌석</span>

        <span>편의시설</span>

        <span>예약하기</span>
      </div>
    </div>

    <div class = "ticket_box">
      <div class = "ticket_num">AIR TICKET 02</div>

      <span class = "exp">출발 / 도착<br></span>

      <span class = "time">오후 1:12</span>
      <img src = 'airplane.svg'>
      <span class = "time">오후 9:02<br></span>

      <span class = "exp">운행 항공편</span>
      <div class = num>CL7321, CL440, CL1324</div>
      <div class = "click">
        <span>좌석</span>

        <span>편의시설</span>

        <span>예약하기</span>
      </div>
    
    </div>

    <div class = "ticket_box">
      <div class = "ticket_num">AIR TICKET 03</div>

      <span class = "exp">출발 / 도착<br></span>

      <span class = "time">오후 03:10</span>
      <img src = 'airplane.svg'>
      <span class = "time">오후 12:45<br></span>

      <span class = "exp">운행 항공편</span>
      <div class = num>CL1278, CL592, CL2156</div>
      <div class = "click">
        <span>좌석</span>

        <span>편의시설</span>

        <span class = "soldout">매진</span>
      </div>
    </div>

  </body>
</html>

- CSS

* {
  box-sizing: border-box;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
  background-color : #f8f8f8;
}

.header{
  background-color : #11172b ;
  color : #ffffff;
  font-size : 24px;
  font-weight : 300;
  font-family : 'Titillium Web';
  padding : 12px 0px;
  text-align : left;
}

.header img{
  height : 24px;
}

.header .logo{
  font-weight : 600;
}

.header div,
.part1,
.ticket_box,
.line{
  width : 640px;
  margin : 0px auto;
}

.part1{
  background-color : #ebeff8;
  border-radius :8px;
  padding : 24px 32px;
  margin : 40px auto 20px;
  text-align : left ;
}

.part1 img{
  height : 12px;
}

.part1 #dp{
  font-size : 16px;
  color : #b3bdd5;
}

.part1 #where{
  font-size : 32px;
  font-weight : 800;
  font-family : 'Titillium Web';
  margin : 8px 0px 24px;
}

.part1 #when{
  font-size : 16px;
  padding : 8px 24px;
  background-color : #ffffff;
  display : inline-block;
}

.part1 .etc{
  font-size : 12px;
  color : #b3bdd5;
  margin : 16px 0px 0px;
}

.ticket_box{
  margin : 20px auto;
  background-color : #ffffff;
  border-radius :8px;
  padding : 0px 24px 24px;
}

.line{
  border-bottom : 3px dotted #b6bfd3;
}

.ticket_num{
  font-size : 12px;
  font-weight : 700;
  font-family : 'Titillium Web';
  color : #16bf97;
  padding : 8px 0px;
  border-bottom : 2px solid #16bf97;
}

.exp{
  color : #b3bdd5;
  font-size : 12px;
  font-weight : 500;
}

.time{
  font-size : 16px;
  font-weight : 700;
  color : #1a345e;
  padding : 4px 0px;
}

.ticket_box img{
  padding : 0px 10px;
}

.num{
  font-size : 16px;
  color : #0b1f66;
  font-weight : 500;
}

.click{
  color : #1a345e;
  text-align : right;
  font-weight : 500;
}

.click span{
  display : inline-block;
  margin : 24px 0px 0px 24px;
}

.soldout{
  color : #dce0e8;
}

이번 실습은 너무너무 만족하기 때문에 모범답안 코드를 따로 올리지는 않겠다 ! 왜냐면 지금 넘 뿌듯하걸랑요,, 이제 조금은 큰 block들의 구조를 생각할 수 있게된 것 같다. 물론 아직도 html 파일에서 뭐를 <div>로 두고 <span>으로 둬야할지는 잘 모르겠지만,, 뭐 코드에 정답이 있나! inline-block도 써먹었고,, 아무튼 뿌듯해서 사이트 배포도 시켰다ㅋㅋ 헷,,

그리고 vs code에 live ..어쩌구 설치했더니 코드 쓰면서 바로바로 사이트 확인할 수 있어서 진짜 너무 좋다,, 코딩의 질 향상 ~><

음 간단히 설명해보자면 크게 총 5개의 블록으로 나뉘어져 있는 셈이다. 사실 가장 공들인 건 위에 로고부분이랑 출국정보! 왜냐면 밑에 티켓들은 거의 다 똑같아서,, class만 잘 지정해주면 됐었다. 그리고 이번에 작은 요소들은 거의 인라인 위주로 써봤다.

https://airplane-x-hw.netlify.app/

Codeit Airline

출국 ICN → YYZ 일요일, 4월 20일, 2025 왕복여행 가격은 수수료와 세금이 포함된 가격입니다. 추가 수하물이 있을 경우 수수료가 추가로 적용됩니다. 서비스 및 편의시설은 적혀있는 내용과 달라질

airplane-x-hw.netlify.app

23/09/07

실습하는데 시간을 너무 많이 잡아먹어서 진도가 느려졌다 ,,힝구

그리고 가운데 정렬은 margin : 0px auto !!

저작자표시

ABOUT ME

nnnnxyx.com nnnnxyx.com

티스토리툴바