【초보자용】HTML+CSS 치트 시트

소개

초보자·신졸 분들에게 HTML·CSS를 가르칠 기회가 늘어나,
자신이 초보자일 때
이런 것이 있으면 고맙다고 생각했기 때문에 간단하게 정리해 보았습니다.

등장하는 쓰는 법은 내가 빚지고있는 쓰는 법이기 때문에
보다 아름다운 쓰는 방법이 있으면 가르쳐 주시면 감사하겠습니다.

흔한 레이아웃

로고만 오른쪽 정렬된 헤더 탐색

자주 보는 이러한 형태의 레이아웃.

어떻게 구현합니까?
다음과 같이 구현할 수 있습니다.

index.html

    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>

style.html

nav ul {
 height: 60px;
 padding: 0 40px;
 display: flex;
 justify-content: flex-end;
 align-items: center;
 background: #b0c4de;
}
nav ul li {
 margin-right: 20px;
 list-style-type: none;
}
nav ul li:last-of-type {
 margin-right: 0;
}
nav ul li.logo {
 margin-right: auto;
}
nav ul li a {
 color: #333;
 text-decoration: none;
}

전체에 display: flex와 justify-content: flex-end;를 붙이고,
오른쪽 정렬하려는 항목에 margin-right: auto를 부여합니다.
왼쪽 정렬을 원하면 margin-left: auto를 부여합니다.

상단 고정 헤더 탐색

스크롤해도 상단의 동일한 위치에 계속 고정됨
위와 같은 네비게이션은 이렇게 구현됩니다.

index.html

    <nav>
      <ul>
        <li class="logo">ロゴ</li>
        <li><a href="#">リスト1</a></li>
        <li><a href="#">リスト2</a></li>
        <li><a href="#">リスト3</a></li>
        <li><a href="#">リスト4</a></li>
      </ul>
    </nav>

style.html

body {
 position: relative;
}
nav {
 width: 100%;
 position: fixed;
 top: 0;
}

position: fixed 로 고정 지정을 하면 됩니다.

요소를 부모 요소의 상하 중앙에 배치

이와 같이 부모 요소의 상하 중앙에 자식 요소를 배치하고 싶은 경우입니다.
(이것도 잘 사용합니다..!)


index.html

      <div class="parent">
        <p>親要素</p>
        <div class="child">
          <p>子要素</p>
        </div>
      </div>

style.html

.parent {
 position: relative;
 width: 500px;
 height: 500px;
 margin: 30px auto 0;
 border: solid 2px #000;
}
.child {
 position: absolute;
 top: 50%;
 left: 50%;
 width: 200px;
 height: 200px;
 border: solid 2px #ff0000;
 transform: translate(-50%, -50%);
}

transform: translate(-50%, -50%); 마술처럼 기억하는 것이 좋습니다.

a 태그 (링크)를 버튼처럼 보이고 싶습니다.

a 태그를 버튼처럼 보이려면,
다음과 같이 문자를 세로 중앙에 배치 할 수 없습니다.
고민할 수 있습니다.



padding으로 조정하거나 앞에서 설명한 것처럼 position으로 조정할 수도 있습니다.
다음과 같이 간단합니다.

index.html

<a href="#" class="button">ボタン</a>

style.html

.button {
 display: block;
 width: 200px;
 height: 40px;
 background: #4682b4;
 color: #fff;
 text-decoration: none;
 text-align: center;
 border: none;
 border-radius: 4px;
 line-height: 40px; /* 要素の高さと同じだけline-heightを取ってあげる */
}

같은 크기의 요소를 나란히하고 싶습니다.

이것이 제일 자주 있는 레이아웃입니다만,
요소 안에서 모두 같은 크기로 하고 싶다는 것이 있다고 생각합니다.


그러한 경우에는 다음과 같이 하면 좋을 것입니다.

index.html

    <div class="wrap">
      <div class="card">1</div>
      <div class="card">2</div>
      <div class="card">3</div>
      <div class="card">4</div>
      <div class="card">5</div>
    </div>

style.css

.wrap {
 display: flex;
 width: 900px;
 margin: 20px auto;
 background: #eee;
}
.card {
 flex: auto;
 height: 200px;
 border: dotted 1px #888;
 text-align: center;
 line-height: 200px;
}

flex: auto; 를 붙이면 모두 .card가 같은 폭이 됩니다.
다른 속성에 대한 자세한 내용은 여기을 참조하십시오.

사이고에게

이번에 소개한 것은 매우 초보적인 기술입니다.
조사하면 나오는 것만이지만,
시작의 한 걸음으로 참고해 주시면 좋겠습니다