Notice
Recent Posts
Recent Comments
Link
«   2025/01   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

기초공사 (html,css,javascript)

실습 본문

css/flex-shrink grow

실습

에스프레소라떼 2024. 12. 2. 21:33

//

 

flex: 1 1 25%와 1 0 25% 일떄 비교해보기

 

//

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <!-- <link rel="stylesheet" type="text/css" href="/css/style.css"> -->
  <link rel="stylesheet" type="text/css" href="./2-5-mod-6.css">
</head>

<body>
  <article id="main" class="ly_cont">
    <div class="bl_media bl_media__rev">
      <figure class="bl_media_imageWrapper">
        <img src="./assest/persona.jpg" alt="사진: 손에 든 스마트폰">
      </figure>

      <div class="bl_media_body">
        <h2 class="bl_media_title">
          사용자를 고려한 설계로 만족스러운 체험을
        </h2>
        <p>
          웹사이트 설계는 제공하는 서비스나 퍼소나에 따라 달라집니다. 서비스와 퍼소나에 맞춘 설계를 통해 방문자에게 스트레스를 주지 않는 보다 나은 체험을 만들어 만족감을 높입니다.<br>
          우리는 고객의 사이트에 맞는 사용성을 고려하기 때문에 세심한 분석과 의견 청취를 실시함으로써, 만족을 체험할 수 있는 크리에이티브 및 테크놀로지를 설계하고 구현함으로써 지금까지는 없던 기대를
          뛰어넘는 사용자 체험을 제공합니다.
        </p>
        <h3 class="subTitle">퍼소나란?</h3>
        <span>
          자사 상품, 서비스의 이상적/상징적인 고객 이미지를 말합니다. 접근할 대상을 명확히 함으로써 효율적인 마케팅을 수행할 수 있습니다.
        </span>
      </div>
    </div>
  </article>
</body>

</html>

 

 

 

/* 베이스
  ======================================== */

  body {
    font-family: sans-serif;
  }


  /* 레이아웃
  ======================================== */

.ly_cont {
  max-width: 1200px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 모듈 */
.bl_media{
  display: flex;
  align-items: center;
  font-size:16px;
  line-height: 1.5;
}
.bl_media_imageWrapper{
  flex:1 1 25%;
  margin-right:3.33%;
}
.bl_media_imageWrapper img{
  width:100%;
  vertical-align: top;
}
.bl_media_body{
  flex:1 1 68.33%;
}
.bl_media_title{
  margin-bottom:10px;
  font-size:18px;
  font-weight:bold;
}
.bl_media_body > span {
  color:#555;
  font-size:14px;
}

/* 반대 */
.bl_media__rev{
  flex-direction: row-reverse;
  text-align:right;
}
.bl_media__rev .bl_media_imageWrapper{
  margin-right:0;
}

.bl_media__rev .bl_media_body{
  margin-right:3.333%;
}
.subTitle{
  margin-top:10px;
  margin-bottom:10px;
  font-size:16px;
  border-bottom:1px solid #555;
}

 

 

img

저작자표시

'css > flex-shrink grow' 카테고리의 다른 글

flex  (0) 2023.09.30
flex-ex-생활코딩에서 연습  (0) 2023.09.16
'css/flex-shrink grow' Related Articles more