レイアウト設定

31416 ワード
CSS html テキストリンク


html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Main | (타이틀)</title>
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <header class="header">
        <div class="bot">고객지원</div>
        <div>정보게시판</div>
        <div class="nav">
            <span>마이페이지</span>
            <span>로그아웃</span>
        </div>
    </header>
    <h1>(타이틀)</h1>
    <section class="main-area">
        <section>
            <form action="#" method="get" class="search-area">
                <div>
                    <label for="locale">검색 위치</label>
                    <input type="text" id="locale" autocomplete="off">
                </div>
                <div>
                    <label for="branch">진료 과</label>
                    <select name="branch" id="branch">
                        <option value="">선택</option>
                        <option value="">소아청소년과</option>
                        <option value="">이비인후과</option>
                        <option value="">치과</option>
                        <option value="">안과</option>
                        <option value="">피부과</option>
                        <option value="">내과</option>
                    </select>
                </div>
                <div>
                    <label for="time">이용 시간</label>
                    <input type="datetime-local" id="time">
                </div>
                <button type="submit" id="btn">search</button>
            </form>
            <section class="map-area">
                <div class="map">
                    map
                </div>
            </section> 
        </section> 
        <form action="#" method="get">
            <div class="list">
                병원리스트
            </div>
        </form>
    </section>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap');

* {
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 5rem;
  margin: 0.5em;
  text-align: center;
}

body {
  display: flex;
  flex-direction: column;
  font-family: 'Noto Sans KR', sans-serif;
}

.header {
  display: flex;
  justify-content: space-around;
  margin: 1em;
  font-size: 1rem;
}

.nav span {
  margin: 1em;
}

.search-area {
  display: flex;
  margin: 1em 1em 0.5em 1em;
  font-size: 1.25rem;
}

.map {
  width: 95%;
  height: 40vh;
  border: 1px solid black;
  font-size: 1.25rem;
  margin: 0 1em;
}

.list {
  width: 20vw;
  height: 50vh;
  border: 1px solid black;
  font-size: 1.25rem;
  margin: 1em;
}

input,
select,
label,
button {
  margin: 0.5em;
}

input {
  align-self: baseline;
}

label {
  display: block;
}

#btn {
  background-color: white;
  border-radius: 1em;
  font-size: 1rem;
  padding: 0.25em;
  cursor: pointer;
}

.main-area {
  display: flex;
  margin: 1em;
  justify-content: center;
}

@media screen and (max-width: 800px) {
  .main-area {
    display: flex;
    flex-direction: column;
  }

  .search-area {
    display: flex;
    flex-direction: column;
    margin: 1em;
    font-size: 1.25rem;
  }

  label {
    display: inline-block;
  }

  .list {
    width: 80vw;
    height: 50vh;
    border: 1px solid black;
    margin: 1em;
    font-size: 1.25rem;
  }

  .map {
    width: 80vw;
    height: 50vh;
    border: 1px solid black;
    margin: 1em;
    font-size: 1.25rem;
  }
}
1.反応型を最大限に作るためには、絶対値を最大限に使用しない.
残念なことに、em、rem、vw、vh、%を使いましたが、用途に応じて使いたかったのですが、値段をあげてちょっと不均衡な感じがしたので、欲しい形を使いました…
2.flex boxを使用してみます.
残念なことに、flex boxは複数の部分に分けて設定されていますが、このように使ってもいいですか?疑問がある.ちょっと乱れた感じがします.
そして、flex boxに専念しただけで、positionを使っていないことに気づいた.
3.メディアクエリを使用してみました.
反応型Webに必要なmediaquestionsを用いた.
「こんな風に使ってるんだって…」使うことしか知らないので、次回はもう少し勉強してから使います.
4.レイアウト
自分が望むレイアウトイメージに合わせて配置するよう最善を尽くします.
複数のケースの配置を試みたが、欲しい場所に欲しいケースを置くのは難しい.
次回の練習では、できるだけ手描きでレイアウトを描き、使う箱に分けてコードを書きます.じゃあ今よりそんなに散らかってないよね…?
Introduction to Build Profiles
HDu 4666 Hyperspace(セグメントツリー)