국비 1일차

#사용성개선 #최적화 #효율성

기초부터 시작
나만 알아보게 쓰는 경향 있음

* 경로 읽기

/
/img/
/asf/ //root directory 안에 asf 파일이 있다는 뜻

ex

루트디렉토리 폴더명 '테스트'
/img/
/css/style.css
/js/style.js
/html/index.html
/index.html
(바로 복사해서 new file > 파일 만드는 건 아톰에만 있음)

* 세 태그의 차이점

<a></a>  //디자이너가 많이 씀
<input>  //백엔드
<button></button>  //js(프론트엔드)

* 에밋emmet

- ex01

a*3 + enter or tab

<a href=""></a><a href=""></a><a href=""></a>

- ex02

ul>li*3>a + enter or tab

<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

- ex03

section>div>ul>li>a

<section>
    <div>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </div>
</section>

블럭태그는 밥그릇, 인라인태그는 밥이라고 생각!
그러므로 인라인태그는 컨텐츠, 보여지는 부분.

블럭태그 속에 인라인태그! 그 반대는 안 됨~

ex04

header>h1>img^ul>li*4>a{메뉴들}

<header>
    <h1><img src="" alt=""></h1>
    <ul>
        <li><a href="">메뉴들</a></li>
        <li><a href="">메뉴들</a></li>
        <li><a href="">메뉴들</a></li>
        <li><a href="">메뉴들</a></li>
    </ul>
</header>

'>' 한 레벨 안으로
'^' 한 레벨 밖으로
'{}' 태그 안 텍스트

- ex04

section.banner.d-flex.content#main

<section class="banner d-flex content" id="main"></section>

class 작성은 . (여러 개 작성 가능)
id 작성은 # (태그별 id 값은 오로지 하나)

- ex05

footer#ft.container.ft>ul.ftcontent>li*3>a{하단메뉴}

<footer id="ft" class="container ft">
    <ul class="ftcontent">
        <li><a href="">하단메뉴</a></li>
        <li><a href="">하단메뉴</a></li>
        <li><a href="">하단메뉴</a></li>
    </ul>
</footer>

- ex06

header#hd>div.container>h1>a>img^^ul#gnb>li*4>a{대메뉴}

<header id="hd">
    <div class="container">
        <h1><a href=""><img src="" alt=""></a></h1>
        <ul id="gnb">
            <li><a href="">대메뉴</a></li>
            <li><a href="">대메뉴</a></li>
            <li><a href="">대메뉴</a></li>
            <li><a href="">대메뉴</a></li>
        </ul>
    </div>
</header>

header#hd>.container>h1>a>img^^ul#gnb>li*4>a{대메뉴}
div 생략 가능(default)

- ex07

#wrap>.ad>p{상단광고}^header#hd>.container>h1>a>img^^ul#gnb>li*3>a{대메뉴들}

<div id="wrap">
    <div class="ad">
        <p>상단광고</p>
    </div>
    <header id="hd">
        <div class="container">
            <h1><a href=""><img src="" alt=""></a></h1>
            <ul id="gnb">
                <li><a href="">대메뉴들</a></li>
                <li><a href="">대메뉴들</a></li>
                <li><a href="">대메뉴들</a></li>
            </ul>
        </div>
    </header>
</div>

* 이미지 파일

• svg(태그형, 벡터형 그래픽 -> xml 태그)
  -일러스트, vscode 수정
  -태그 에러 없는 이상 제일 가볍다

• jpg, png, gif(래스터) //포토샵
  -jpg: 압축이 잘 되어있다
  -png: 투명도 표현이 좋다 (그래서 용량이 크다)
  -gif: 압축x, 크기가 작고 애니메이션이 가능하다 (잘 쓰이지 않음)

래스터 -> svg 변경 시 용량이 엄청 커짐
gif 단점 보완 -> png-8 dithered
jpeg 단점 보완 -> png-24

* 포토샵 소스 나누기

• auto-select 체크 필수!
• 코드로 해결 가능한 부분과 이미지로 구현해야 하는 부분을 구분할 줄 아는 눈이 필요하다