쿠루가이

쿠루가이

프로그래머가 되고싶은 중년 :)

Chapter 2-1. Flex UI - 메뉴, 검색창, 불릿 리스트,

Date:     Updated:

카테고리:

태그:

인프런에 있는 1%코딩님의 강의 CSS Flex와 Grid 제대로 익히기 를 듣고 정리한 필기입니다. 😀

메뉴 만들기

  • 상단에 Home, About, Product, Cantact 메뉴를 화면 너비에 맞게 늘어나게 하는 예제입니다. 마우스로 메뉴에 갖다 되면 늘어나게 하는 효곽까지 넣었습니다. html의 구조를 만들고, css 적용하는 순서로 하시면 됩니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
  <link rel="stylesheet" href="ui.css">
</head>
<body>
  <ul class="menu">   <!-- flex-container -->
    <li class="menu-item">  <!-- flex-item -->
      <a href="#" class="menu-link">Home</a>
    </li>
  </ul>
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">About</a>
    </li>
  </ul>
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">Product</a>
    </li>
  </ul>
  <ul class="menu">
    <li class="menu-item">
      <a href="#" class="menu-link">Contact</a>
    </li>
  </ul>	
</body>
</html>

/* ui.css */
/* menu */
.menu {
  display: flex;
}

.menu-item {
  flex-grow: 1;
  background: gold;
  transition: 0.5s;
}

.menu-item:hover {
  flex-grow: 1.5;
  background: crimson;  
}

.menu-link {
  display: block; /* 아무대나 클릭해도 메뉴를 누를 수 있게 block으로 설정함*/  
  font-size: 1.2rem; /* 포트 사이즈 설정 : rem은 html의 폰트사이즈의 1.2배로 설정한다는 의미임 */
  padding: 1em; /* 현재 내 폰트 사이즈만큼 여백을 준다는 의미임. */
  font-weight: bold;  /* 글씨를 굵게 설정 */
  color: #555;
  text-decoration: none;  /* 하이퍼링크 줄선을 없앰 */
  text-align: center; /* 글자를 가운데 정렬 함 */  
}

.menu-link:hover {
  color: white;
}

유연한 검색창

  • 상단에 search 타입의 input과 submit 타임의 input 버튼을 배치하는 예제입니다. 이때 input은 창 너비에 따라서 유연하게 늘어납니다.
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>CSS Flex</title>
	<link rel="stylesheet" href="default.css">
  <link rel="stylesheet" href="ui.css">
</head>
<body>
  <form class="search-form">
    <input type="search">
    <input type="submit" value="찾기">  
  </form>
</body>
</html>

/* ui.css */
/* search */
.search-form {
  display: flex;
  height: 40px  /* 컨테이너 높이 설정 */
}

.search-form input[type='search'] {
  flex: 1;  /* flex-glow: 1로 설정 */
  margin-right: 10px; /* 오른쪽 여백 줌. 검색창과 버튼 사이에 여백을 준것임 */
  border: 0;  /* 테두리 두께를 주지 않음 */
  border-radius: 0.3em;  /* 사각형을 둥글게 설정 */
  font-size: 1rem;  /* HTML 폰트 사이즈로 설정*/
}

.search-form input[type='submit'] {
  width: 4em;
  border: 0;  /* 테두리 두께를 주지 않음 */
  border-radius: 0.3em;  /* 사각형을 둥글게 설정 */
  font-size: 1rem;  /* HTML 폰트 사이즈로 설정*/
  background: gold; /* 버튼 배경색을 골드색으로 설정 */  
}

불릿 리스트

  • 상단에 search 타입의 input과 submit 타임의 input 버튼을 배치하는 예제입니다. 이때 input은 창 너비에 따라서 유연하게 늘어납니다.


🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기

Css 카테고리 내 다른 글 보러가기

댓글 남기기

최근 글 10 개 :)