HTML, CSS

공부의 기록·2022년 1월 16일
html
0

HTML, CSS

목록 보기
1/2
post-thumbnail

Intro

본 문서는 2022년 1월 17일 에 작성되었습니다.

문서 작성 동기는
다음의 2가지 내용에 대해서 기본적인 가이드라인을 구축하고
상황 별로 파워풀하게 사용할 수 있는 조합을 적어 놓기 위한 용도입니다.

  1. HTML Tag
  2. CSS Attirubtes

HTML

저는 현재 HTML Tag 를 3가지로 구분지어서 생각하고 있습니다.

  1. Basic Tags
  2. Segmentic Tags
  3. Powerful Tags

Baisc Tags

2번과 3번에 해당하지 않으며,
보편적으로 잘 사용하는 Tags 중 제가 사용하는 것들만 적어놨습니다.

  1. div
  2. button
  3. img
  4. span

Segmentic Tags

컨텐츠에 어떠한 의미 를 담고 있는 태그입니다.
검색 엔진 최적화(SEO) 에 대한 내용입니다.
다음의 [HTML] Segmentic Tags for SEO 를 참고해주세요.

MeaningsEx
Block Session Tags<nav> <main> <section> <footer>
Heading Tags<h1> <h2> <h3> <h4> <h5> <h6>
List Tags (정렬/비정렬)<ol> <ui> <li>
Tables Tags<table> <thead> <tbody> <tfoot> <tr> <td>
Form Tags<form> <input> <label> <textaerea> <fieldset>
Links Tags<a>

위 중에서 주로 사용하는 태그는 다음과 같습니다.

  1. nav mail section footer
  2. form input label textaerae
  3. a

Powerful Tags

JS,CSS 를 대체하는 강력한 힘 을 가진 태그입니다.
여기서부터는 실제 사용 방법 등까지 함께 작성하는데,
이는 필요한 상황을 위하여 기록하는 것에 가깝습니다.

진행상황 | progress

<progress value="50" min="0" max="100"></progress>

어떠한 프로세스의 진행상황을 보여주는 태그로 속성은 다음과 같다.

  1. min
  2. max
  3. value

특이사항은 다음과 같다.

  1. min 은 항상 0 이여야 한다.
  2. value 를 없애려면 JavaScript 다음의 코드를 사용할 수 있다.
  3. value 를 지정안하면 좌우로 왔다갔다만 하고 지정하면 정지한다.
element.removeAttribute('value');

상황레벨 | meter

<meter min="0" max="100" optimum="15" low="20" high="65" value="0"></meter>

어떠한 상황의 레벨을 보여주는 태그로 속성은 다음과 같다.

  1. min
  2. max
  3. optimum, low, high
  4. value

특이사항은 다음과 같다.

  1. <progress> 는 작업의 진행사항을 전달하지 않지만, <meter> 는 이를 전달한다.
  2. optimum, low, high 의 기준선에 따라서 색상이 바뀐다.
  3. 다음의 Pseudo Class 기준선 적응 디자인에 접근할 수 있다. 자세한 것은 구글링하자.
progress { }
progress::-webkit-meter-inner-element { }

progress::-webkit-meter-optimum-value { } // 최적
progress::-webkit-meter-suboptimum-value { } // 하위
progress::-webkit-meter-even-less-good-value { } // 최악

폴딩메뉴 | details + summary

<details>
  <summary>
    바로 보여지는 부분
  </summary>
  누르면 보여지는 부분
</details>

details 의 특이사항은 다음과 같다.

  1. CSS selector [open] 이 지원된다.
details[open] {
 background-color: #9b59b6;
 background-image: #2ecc71;

달력메뉴 | input ... type?

자주 사용하는 input 의 type 으로 달력 메뉴를 만들 수 있다.
지원되는 type 은 다음과 같다.

  1. date
  2. month
  3. week
  4. time
<input type="date"/>
<input type="month"/>
<input type="week"/>
<input type="time"/>

반응형이미지 호출 | picture + source

picture 은 미디어 쿼리에 의해서,
기기 환경에 따라서 이미지를 바꿀 수 있다.

단순히 img + CSS 로 미디어 쿼리로 하는 것과의 차이점은 다음과 같다.

  1. img + CSS 는 n 개의 이미지를 받아와서 이를 송출한다.
  2. picture 은 해당하는 이미지만 받아와서 이를 송출한다.
<picture>
  <!--picture 이 지원될 때...-->
  <source srcset="src/01.jpeg" media="min-width: 900px"/>
  <source srcset="src/02.jpeg" media="min-width: 600px"/>
  <source srcset="src/03.jpeg" media="min-width: 300px"/>
  <!--picture 이 지원안될 때...-->
  <img src="src/04.jpeg" \>
</picture>

자동완성 기능 | input + datalist + option

datalist 는 option 과 같이 사용하여 자동완성을 구현해준다.
한글 영어 둘다 가능하며 글자의 중간을 기준으로 검색해준다.

<input type="text" list="food-datalist" />
<datalist id="food-datalist" />
  <option value="오이소박이" />
  <option value="오이감자" />
  <option value="감자볶음밥" />
  <option value="치즈볶음밥" />
  <option value="potato" />
  <option value="stick" />
</datalist>

CSS

저는 현재 CSS Attributes 를 3가지로 구분지어서 생각하고 있습니다.
4번째는 CSS 의 강력한 기능 지원 등을 취합하고 있습니다.

  1. Basics Attributes
  2. Display Flex
  3. Display Grid
  4. Powerful Functions

추가적으로 개인적으로 관심있었던 주제들을 마지막 챕터에서 다뤄보고자 합니다.

Basics Attributes

2~3 에서 언급하지 않았으며
4번 에는 해당하지 않는 것들 모두를 포함하고 있습니다.

Display Flex

거의 모든 상황에서 좋은 선택지가 될 수 있습니다.
하지만 Flex 라는 말 그대로 유연하기 때문에 메모리 점유율 이 매우 높아질 수 있습니다.
이미지가 많이 들어가고 FLex 요소가 심각하거나 낭비적이면 웹 사이트가 렉걸립니다.

하지만 매우 안좋게 사용한 경우고 대다수의 경우에는 좋습니다. 지원되는 내용은 매우 많지만 저는 다음의 기능만 flex 에서 활용하는 것으로 가이드라인을 확정하였습니다.

  1. gap: 30px; or 30px 5px;
  2. flex-direction: row/column;
  3. align-items: center/flex-start/flex-end/...;
  4. justify-contents: center/space-between/flex-start/...;

이 외에도 다음의 코드 들이 있지만,
솔직히 사용할 이유를 찾지 못하였습니다.

align-self, align-items, align-contents,
justify-self, justify-items, justify-contents

Display Grid

격자형 구조를 구현한다면 혁명적인 선택지입니다.
하지만 특정한 상황에서 큰 이슈를 겪을 수 있습니다.

반응형과 섞어서 사용할 시 자연스러운 그리드 변화를 만들기 어렵습니다. 하지만 큰 단점이라고 여길 수 없을 것 같습니다.

  1. gap: 30px;
  2. grid-template: repeat(4,1fr) / repeat(12, 1fr)
  3. grid-column: span 3; or span 6; or span 12;

이 외에도 정말 다양한 기능이 있지만,
대부분의 기능은 사용하지 않는데 그 이유는 다음과 같습니다.

shrink 와 같은 기능은 매우 동적으로 아름답게 보이지만,
실제 컨텐츠가 들어갔을 때 overflow 나 줄바꿈이 심하게 발생하는 경우가 있다.

실제 사이트에서도 스크롤을 줄이고 늘리다보면 가로 스클바가 생기는데 이는 grid 혹은 flex 에 동적 요소를 가미한 실패물로 보인다. (하지만 코딩 단계에서는 발견되지 않는 경우도 있었기에, 최대한 하위 컨텐츠의 colums 제어를 통해서 목표를 달성합니다.

Powerful Functions

정말로 신기한 것들이 많습니다.

지원여부 확인 | @Support

@Support (display:grid) {
  // 브라우저가 grid 를 지원하면...
}
@Support not (display:grid {
  // 브라우저가 grid 를 지원하지 않으면..
}

끈적한 스크롤링 | scrol-snap-type, align

.parent {
  scroll-snap-type: y mandatory;
}
.child {
  scroll-snap-align: center;
}

짧은 선택자 | :is

// 기존
header button,
nav button,
form button {
  background-color: #2c3e50;
}

// is 사용
:is(header, nav, form) button {
  background-color: #2c3e50;
}

비율 유지 | aspect-ratio

이건 미친 것 같은데,
기존에 제가 사용하던 방식과 새 방식을 적어보겠습니다.

// Old
.parent {
  padding-top: 150%;
  width: 100%;
  height: 0;
  
  position: relative;
}
.child { // 이미지
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  object-fit; cover;
}
// New
.child { // 이미지
  aspect-ratio: 16/9;
}

스크롤링 화면 | position: sticky;

sticky 를 이용하면 스크롤에 따라 컨텐츠가 움직이는 것을 구현할 수 있고 이는 다음의 2가지 조건을 가지고 있다.

  1. 대상이 position: sticky 일 것
  2. 대상의 부모가 높이 값을 가지고 있을 것

단, 주의사항이 있습니다.

  • 높이나 폭이 선언된 부모와 sticky 를 사용한 자식 사이에 overflow 속성을 가진 요소가 있으면 sticky 가 적용되지 않는다.
.target__container {
  heigth: 700px; or 70%;
}
.target {
   position: sticky;
}

관심있어?

Pinterest Feed

Pinterest Feed 를 구현하는 방법은 다음과 같다.

  1. HTML + CSS
  2. HTML + CSS + JS
  3. HTML + CSS + Masonry.JS

과거 Life Folio 프로젝트를 진행하면서 3번의 방법으로 이를 구현하였는데, 지금에 와서는 간단하게 1번의 방법으로 구현해보고 싶어졌다.

따라서
아래의 영상을 통해서 공부한 내용을 적어놓고자 했다.

Build a Pinterest Layout HTML & CSS

        :root {
        --card_width: 250px;
        --card_border_radius: 16px;
        --row_increment: 10px;
        --card_small: 10;
        --card_medium: 30;
        --card_large: 45;
        }

        body {
        margin: 0;
        padding: 0;
        background-color: grey;
        }

        .pin_container {
        margin: 0;
        padding: 0;
        width: 80vw;
        height: 100vh;
        position: absolute;
        left: 50%;

        transform: translate(-50%);

        display:grid;
        grid-template-columns: repeat(4,3fr);
        /* // auto-fill 을 쓰려면 하위 요소가 크기가 고정값이여야 한다. */

        grid-template-rows: var(--row_increment);
        justify-content: center;
        background-color:black;
        }

        .card {
        padding: 0;
        margin: 15px 10px;
        border-radius: var(--card_border_radius);

        background-color: red;
        width: 250px;
        }

        .card_small {
        grid-row-end: span var(--card_small);
        }
        .card_medium {
        grid-row-end: span var(--card_medium);
        }
        .card_large {
        grid-row-end: span var(--card_large);
        }
<body>
  <div class="pin_container">
  <div class="card card_small">content</div>
  <div class="card card_medium">content</div>
  <div class="card card_large">content</div>
  <div class="card card_small">content</div>
  <div class="card card_small">content</div>
  <div class="card card_medium">content</div>
  <div class="card card_large">content</div>
  <div class="card card_small">content</div>
  <div class="card card_medium">content</div>
  <div class="card card_large">content</div>
  <div class="card card_medium">content</div>
  <div class="card card_large">content</div>
  <div class="card card_small">content</div>
  <div class="card card_medium">content</div>
  <div class="card card_large">content</div>
  </div>
</body>

Data Visualization

요즘은 백오피스 혹은 클라이언트에게 데이터들을 가공해서 시각화 자료를 만드는 것에 관심이 많이 생겼다.
그래서 D3.js 를 공부하였는데 아래 그림에 관심이 간다면 관련 포스트를 참고하자.
색깔이 진해진 부분은 마우스 hover 상태이다.

Dev 데이터 시각화

profile
공부의 기록
2022년 12월 9일 부터 노션 페이지에서 작성을 이어가고 있습니다.
다음 포스트

간단하게 만드는 반응형 웹 디자인

0개의 댓글