[Front-end🦁] #8 Webプロジェクト—Jungle Cinema/CSSアニメーション

1.Jungle Cinema(Weniv)の実装

コースソース

2-1. ガイド人

講師のリアルタイム実施を見て、コードに従ってタイプして、順番に読み直して、最初から実施します...ウェブページを作成する達人がどのような順序で作成されているかを見ることができる時間になりました.

1.表示順序と各種ヒント

1.ページ分割領域を表示してhtmlタグを作成する

- 웹 접근성을 위한 화면에 보이지 않는 태그는 마크업 단계에서 class="sr-only" 처럼 알아볼 수 있는 속성을 준다.
\
- 화면에 안보이는 정보라도 꼭 heading을 달자. heading을 달 때는 논리적인 흐름을 생각해보고 달자.
\
- nav 안의 li의 경우는 나중에 js로 눌렀을 때에 대한 처리를 해줘야하므로 class="on" 처럼 상태에 대한 클래스를 따로 주자.
\
- alt는 상세하게 달면 좋다.
\
- 보이는 순서도 중요하지만, 논리적인 순서도 꼭 생각해보고 마크업을 한 뒤 css로 옮기자.

2.CSSファイルへの接続

/* 일반적인 CSS file 구조! */
/* setting */
/* animation */
/* utility */
/* reset */
/* layout */
/* design */
/* media query */

上の4つも順番が変わります.
3. setting

@media 나 한글 주석이 깨지지 않도록 하는 @charset "utf-8"; 같은 태그들!

4. util

- 말줄임 같은 여러가지 태그에 적용되는 속성은 CSS 맨 위에 속성들 먼저 만들고 태그에 달아준다. 
익숙해지면 html 마크업 먼저 진행하고, class를 만들 수 있을 것 같다. (ex. sl-ellipsis)

5. reset CSS

- reset CSS: a태그 속성은 없는 경우가 많아서 추가하기.

6. design/style

이번 프로젝트에는 animation이나 layout가 거의 없고 바로 design 이었다. 진행하면서 들은 몇 가지 팁들을 정리한다.
|
|
- 가로 선, 세로 선, 아이콘은 가상 요소(::before, ::after / background-image)를 이용해서 주는 것이 깔끔하다. border를 이용해서 줘도 되지만, hr로는 절대 주지말자.
-
- style 선언을 할 때, 부모 태그는 적어도 2개는 명시해서 나중에 요소가 추가될 때 충돌하지 않게 하자.
-
- anchor의 경우 마크업 내의 띄어쓰기가 인식이 되어서 layout이 깨질 수 있다. - 띄어쓰기X or float로 해결하자.
-
- Vendor prefix 도 사용해보았는데, 브라우저별로 지원하지 않는 형식을 지원하게 하려는 것. 
-
- naming convention의 경우 일하게 될 곳의 규칙을 따르면 된다. 
-
-안쪽 요소에 테두리를 주려면, 부모에 padding을 주거나, 자식에 margin을 줘서 해결한다.

CSS Validatorを使ってもいい要素で編まれているかどうか見ることができます.

2.Webアクセス性

Webのアクセス性を考慮して、4つの隠し文字の方法があります.display: noneで隠すと、スクリーンリーダーが見えなくなります.

.sr-only { text-indent: 1000px; }
.sr-only {
    position: absolute;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}
.sr-only {
    position: absolute;
    overflow: hidden;
    width: 1px; height: 1px;
    clip: rect(1px, 1px, 1px, 1px);
}
.a11y-hidden {
    position: absolute;
    overflow: hidden;
    clip: rect(0,0,0,0);
    width: 1px; height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
}

skipナビゲーションを作成します.

<div class="nav-skip">
  <a href="#cont-nav">영화 정보 목록 바로가기</a>
  <a href="#cont-company">회사 정보 목록 바로가기</a>
</div>

.nav-skip a {
    position: absolute;
    top: -200px;
    left: 0;
    width: 160px;
    border: 1px solid #fff;
    color: #fff;
    background: #333;
    text-align: center;
}
.nav-skip a:active, .nav-skip a:focus {
    top: 0;
}

2. CSS animation

上記のJungle Cinemaの実装が完了すると、svgファイルのプロパティを簡単に学習し、実際のsvgファイルをhtmlに開き、プロパティを変更してシェーディングし、簡単なアニメーションを提供することができます.私は友達の画像のアカウントをめくって、熱くなくて熱くなくて、私は受け入れて、私はかわいい子犬の色を変えて、アニメーションでイヌアサの終わりの図を作りました.pngを変換したので、これ以上色をつけられないのが残念です.

そしてtransion,transform,animationを学び,#6-2で概念を整理した.実際、これらの属性は慣れていないだけで、そんなに難しくありません.
fake...最後に、与えられた透視図+移行実習を補充した061.htmlは、圧倒的に時間を浪費した.dollyはに道を教えるを完全に一人で考えることはできませんでしたが、検索したコードが理解できてそのまま書いてしまいましたが、アニメは私が予想したように動いていませんでした.元々はサンプルコードに基づいて修正されていたので、変換が必要なタグよりも1レベルで変換されていました...こんな時が一番虚しい...

3.疑問点&感じ

Q.アイコンの背景-画像とwidth、heightをあげると、画像の大きさがそれより大きい場合、背景部分が出ているので、画像の大きさを縮小したサイトで縮小して入れるのは難しいですが、このように入れてもいいですか?
A.いいですが、調べてみるとbackground-sizeという属性が...back-ground-size: 10px 10px;

html,cssを記述する際には良いルールが多く,特にこれまで例はWebのアクセス性を考慮せず,ほとんど書かず,授業を記述し,授業終了後に時間を割いて修正すべきであった.

dl、dt、ddプロパティを使用する数の多さに驚きました.今までpタグにclassを付けていました

変換の最後の部分で、DOMの木を読んで、htmlの構造を身につける過程は、学校の正規授業であれば、試験問題の形で出てくると思いますが、さすがに...これは技術面接で聞かなければならない質問です.JavaScriptを書くには、DOM treeに慣れる必要があります.この部分も講義資料を見てから、勉強を探します.

+)符号化に役立つchrome拡張
color zilla-色が表示されます.
タイトルmapブラウザのタイトル構造
OpenWax—Webアクセス性の計算
whatfont-フォントが表示されます.
Page Ruler Redux-px単位で表されます.
https://placeholder.com-リンクの後ろにサイズを配置し、適切なサイズの画像を読み込みます.

https://via.placeholder.com/300