HTML, CSS

헷갈리는 부분들

 

html상의 tag에 attribute에 값 줄 때 = 사용. style이나 css에선 : 사용.

html문 안에 css 섞을 때는 html상의 tag에 attribute(color, font-size, font-family 등) 추가하거나 head tag 사이에 style tag 넣어서 적용. = 말고 : 로 부여하고 ; 로 다른 attribute와 분리.

---

head tag는 페이지 자체에 대한 정보값(title, meta, link).

meta tag는 character set 뭐 쓰는지에 대한 것. self-closing tag.

<meta charset="utf-8"/>

---

a tag는 href attribute에 url 또는 html 파일(상대경로 사용) 넣어서 하이퍼링크 거는 것. target attribute로 새 창에서 열게할 수 있음. 같은 페이지 안의 특정 id를 링크로 걸고 싶으면 href=”#id”

<a href="연결할 주소" target="_blank"></a>

이미지에 걸고 싶으면 img tag를 a tag로 감싸기.

<a href="연결할 주소">
    <img alt="" src="이미지">
</a>

ul의 li tag에 하이퍼링크를 넣을 땐 a tag를 li tag가 감싸도록.

<ul>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
    <li><a href="#">Click one</a></li>
</ul>

---

section vs div vs article

section은 내용이 서로 관계있을 때 묶는 거, div는 관계 없는데 묶을 때, article은 그거만 따로 떼서 다른데 갖다놔도 될 때.

---

span tag: 줄바꿈 없이 p tag에서 분리 (=inline)

---

em tag와 strong tag는 semantic 관점. html에서 사용. i tag와 b tag는 displaying, presenting하는 css쪽. em과 strong을 사용하자. css에서 스타일을 지정해줄 수 있고 blind friendly함.

em tag vs i tag

strong tag vs b tag

---

img tag(not image)의 alt attribute는 seo에도 쓰임. 당연한데 의식해본 적이 없다. 앞으로 이미지 넣을 때 alt 붙여야지. img는 self-closing tag인데 video는 아님. video의 controls attribute는 basic video controls(pause, play and skip)를 포함시킨다. video tag 사이에 들어가는 텍스트는 영상 로드가 안되면 나옴. video tag에 들어가는 type attribute는 형식. e.g. type=”video/mp4”

<video width height controls> <source src type> </video>

이 외 video tag attributes 참고

 

video가 끝난 뒤 함수를 실행하는 방법 두 가지. 둘다 html 파일에 넣으려면 script tag 필요.

1. onended attribute에 DOM으로 조작하는 함수 넣기 (참고 링크)

<div id = "videoContainer">
    <video controls autoplay onended="videoFinished()">
        <source src="영상링크">
    </video>
</div>
<script>
    function videoFinished() {
        var 변수 = 대체할html문을 string으로 넣음
        document.getElementById("videoContainer").innerHTML = 변수;
        또는 window.location.replace("링크") 이렇게 다른 페이지로 redirect할 수 있음
    }
</script>

2. property ended 사용해서 jquery 사용 (참고 링크)

setInterval은 일정 시간 간격을 두고 함수를 실행. 

<script>
    setInterval(() => if($(".video").prop("ended")){ 영상 종료 후 실행할 함수 }, 200);
</script>

 

attribute vs property

property는 attribute에 대한 HTML DOM tree 안에서의 표현이라 함. document dir을 좀 뜯어봐야겠다.

---

form tag의 action attribute는 form으로 받은 정보가 가는 곳. label과 input을 연결하기 위해 for과 id가 필요. value는 default로 넣어둔 값.

<form action="/example.html" method="POST">
    <label for="name">username</label>
    <input type="text" name="username" id="name" value="Davie">
</form>

---

css 파일 연결하기

head tag 사이에 link 태그 넣기. link는 self-closing tag. href(css파일 이름이나 url), type(text/css), rel(stylesheet) attribute를 꼭 갖춰야. class는 .로 시작, id는 #로 시작.

html상의 tag class attribute에 여러 개의 class를 쓸 수 있음.

---

selector에 스타일 적용하기

tag < class < id 우선 적용. id selector 남발하면 추후 css 수정이 힘들 수 있음.

h3, .temp: h3 tag와 class name이 temp인 데에 같은 스타일 적용.

아래와 같은 방식으로 specify 해둔 스타일은 단순 tag의 스타일보다 우선 적용.

h3.temp{} : h3 tag이면서 class name이 temp인 데에 적용(chaining) .temp h3{} : class name이 temp인 tag 내부에 있는 h3 tag에 적용