1일차. HTML, CSS(3)

ul, ol, li

ul이나 ol안에 li가 있다.

ul이나 ol이 block이기 때문에 안에 li도 block요소라고 생각하면 된다.

(실제로는 list-item이라는 display속성을 가지고 있지만 block속성이라고 생각하자.)

정리가 안되있을 때 내가 beautify깔고 키보드 키맵핑을 해놓은 cmd + alt + l을 이용해서 정리하자.

dl, dt, dd

dl은 dt와 dd만 포함해야 한다.

dt는 용어

dd 설명

dt와 dd가 세트로 나열된다.

dl dt dd는 모두 block요소다.

dl안에는 div가 들어갈 수 없다.

스타일링 하기가 어렵다. 그래서 많이 활용되지 않는다.

그러면 스타일을 위해 어떻게 사용하나? ul(ol) li로 사용을 많이 한다.

바꾸면 아래가 예시가 된다.

<ul>
    <li>
        <dfn>Coffee</dfn>
        <p>Coffee is a ~~~</p>
    </li>
</ul>

a

인라인 형식이다. 그래서 버튼으로 많이 사용하기 위해서 block으로 많이 바꿔준다.

hreflang 넘어가는 페이지 언어를 지정해줄 수 있다.

rel : license나 prev, next

target에 : _self, _blank(새로운 페이지) // 기본 값은 __self라서 페이지 자체가 넘어간다.

type 굳이 명시해줄 필요 없다.

download는 브라우저에게 download할 것이라는 것을 명시해주는 것이다.

href, target만 거의 많이 사용.

a 태그를 버튼으로 만드려면

a {
    display: block;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 1px solid black;
    border-radius: 6px;
    text-align: center
}

a:hover {
    background: tomato;
}

img

- html에서 사이즈 width or height만 입력해도 정사각형 유지하면서 크기가 변경된다. px을 입력하지 않아도 된다.

- css에서도 사이즈를 조절할 수 있다. px을 붙인다.

반응형을 제작할 때 srcset, sizes을 이용한다.

ie는 적용되지 않는다.

아래 예제에서는 뷰포트의 너비가 400이하일 때 small이

401~700일때 medium이

701이상일때 large가 사용된다.

<img
    srcset="./small.png 400w,
            ./medium.png 700w,
            ./large.png 1000w",
    src="./normal.png"
    alt="randomimage" />

sizes 예시 1

가로너비가 1000픽셀 이상일 때는 700px로 크기를 만들겠다.(최적화 출력을 한다. / 일반출력은 width로 그냥지정하면 된다.)

그러면 701~999까지는 large.png가 나왔다가

1000픽셀 이상 일때 401~700 범위에 있는 medium 이미지가 나온다.

<img
    srcset="./small.png 400w,
            ./medium.png 700w,
            ./large.png 1000w",
    src="./normal.png",
    sizes="(min-width: 1000px) 700px",
    alt="randomimage" />

그렇다면 일반출력과 최적화 출력은 무엇인가?

일반출력은 위 예제에서 sizes대신에 width를 넣고 500px을 넣었을 때

브라우저의 크기를 아무리 변경해도 이미지의 사이즈는 500으로 고정되있다.

하지만 범위에 따른 이미지 변경은 일어난다.

최적화 출력은 sizes="500px"로 하면 사이즈 크기를 아무리 조정하더라도 medium.png 이미지만 나온다.

small이미지를 400w로 사용하고 있는 이미지는 늘리면 화소가 깨질 것이기 때문에

medium 이미지를 사용한다.

즉, sizes는 출력 크기와 최적 크기를 함께 지정하는 셈이다.

sizes와 width를 같이 사용하면 sizes는 적용이 안된다.

위에 srcset이 사용되면 아래의 src는 사용되지 않는다.

w는 가로 값이다.

sizes의 조건에 부합하는 상황이 오면 해당 조건에 맞게 세팅할 값을 바로 적용하는데

위에 srcset에서 해당 조건에 맞는 후보를 골라와서 적용한다.

<img
    srcset="./small.png 400w,
            ./medium.png 700w,
            ./large.png 1000w"
    sizes="(max-width: 500px) 444px,
           (max-width: 800px) 777px,
           1222px"
    src="./normal.png"
    alt="randomimage" />

audio

인라인 객체

autoplay 준비되면 바로 재생

controls 제어 메뉴 표시

loop 재생이 끝나면 다시 처음부터 재생

preload none:로드하지 않음 ,metadata : 메타데이터만 로드, auto : 전체파일 로드 / 기본값은 metadata

src 콘텐츠 url

muted 음소거여부

video

autoplay 준비되면 바로 재생

controls 제어 메뉴 표시

poster 썸네일 url

preload

src

width, height

figure, figcaption

브라우저에게 이미지와 설명이 이어져있다는 것을 알려주기 위함

<figure>
    <img src="milk.jpg" alt="a milk">
    <figcaption>milk is ....</figcaption>
</figure>

iframe

다른 사이트 페이지를 현재 페이지에 삽입

sandbox : 보안은 강화할수있지만 다른게 작동하지 않을 수 있다.

그래서 allow-scripts 처럼 보안으로 다 막되 스크립트 실행만 가능하게 한다.

보안적 이슈가 있다.