TIL (HTML & CSS)

choijw1116·2020년 9월 22일
1

TIL

목록 보기
2/5
post-thumbnail

HTML& CSS

twittler의 목업구현을 하면서 찾아봤던 단어들이다. form태그는 만들때마다 항상 찾아보는거 같아서 머릿속에 들어갔으면 좋겠다. 전에 다뤄본적이 있는 마크업언어지만, 역시 자주 사용하지 않으니 손에 잘 익지 않는것같다. 간단하지만, 만들면서 어떻게 사용했었는지 기억이 새록새록 나기도 했다.
그리고 오늘의 난관 DOM은 정확하게 개념이 잡히지가 않아서 공부의 가닥잡는것부터 너무 힘들었다. 간단히 말해서 DOM은 HTML과 Javascript를 연결해주는 통로와 같다고 생각하면 된다. 그 통로를 이용하기 위해 DOM의 언어를 사용하는 것이다. 자바스크립트와 비슷한것같으면서도 달라서 많이 헷갈린다. 내일하게 될, 함수작성이 걱정되는 하루다.

z-index

position 속성이 없는 태그들은 나오는 순서대로 쌓인다. position 속성이 있는 태그들은 없는 태그들보다 위에 나오는 순서대로 쌓인다. position 속성에 z-index까지 있다면 z-index가 큰 태그가 위에 쌓인다. 하지만 z-index가 아무리 크더라도 부모 태그의 z-index가 더 우선이 된다.

position

static

일단 모든 태그들은 처음에 position: static. 기본적으로 static이라 따로 써주지 않아도 된다. 차례대로 왼쪽에서 오른쪽, 위에서 아래로 쌓입니다.

relative

여기서 태그의 위치를 살짝 변경하고 싶을 때 position: relative를 사용한다. 이제 top(위), right(오른쪽), bottom(아래), left(왼쪽) 속성을 사용해 위치 조절이 가능하다. CSS 탭을 눌러 CSS를 확인. 바로 relative는 각각의 방향을 기준으로 태그 안쪽 방향으로 이동합니다.

form 태그

입력양식 ex)로그인창, 회원가입폼 등 텍스트필드에 글자를 입력하거나, 체크박스나 라디오버튼을 선택하고 제출버튼을 누르면 _백엔드 서버창_으로 정보가 처리된다.

name: 폼의 이름
action: 폼 데이터가 전송되는 백엔드 url
method: 폼 전송 방식 (GET / POST)

그러나 form 태그는 추상적인 태그라서 사용자가 실제로 양식을 입력하려면 input 태그를 사용해야한다.
type속성으로 종류를, name으로 데이터이름을, value를 통해 기본값을 지정할 수 있습니다.


DOM (Document Object Model)

document - Root element;
- element:
- element: - Text: 'My title' - element:<body> - element: <h1> - text: 'A heading' - element: <a> - attribute: href - text; 'Link text'

**DOM(DOM : Document Object Model)**은 HTML(document)에 접근해서, Object(JavaScript Object)처럼, HTML을 조작할 수 있는 Model 즉, _태그를 자바스크립트에서 이용할 수 있는 객체_라는 뜻이다. 즉, 자바스크립트를 사용할 줄 알면, DOM을 활용해 HTML을 조작할 수 있다.

아래 단어는 DOM에서 자주 보게 될 단어들이다.

노드(Node): HTML 페이지의 각 요소(html, head, body 등)
- Element Node(요소노드) : HTML 태그
- Text Node(텍스트 노드) : Element Node 안에 있는 글자
태그(Tag) : HTML 페이지에 존재하는 태그


DOM의 CRUD에 대해서 알아보자.

Create
document.createElement('div')
_ // element를 만드는 방법_
**Read **
const oneTweet = document.querySelector('.tweet')
const oneTweet = documet.querySelectorAll('.tweet')
// querySelector는 해당하는 첫번째 인자를 조회할 수 있다.
// querySelctor는 해당하는 모든 인자를 조회한다.

Upgrate
const oneDiv = document.createElement('div')
oneDiv.textContent = 'dev';
oneDiv.classList.add('tweet')
const container = document.querySelector('#container')
container.append(oneDiv)
_// textContent는 해당 태그에 글자를 넣을 수 있고, 해당 태그안의 내용물을 보여준다.
// 여기서 innerHTML은 해당 태그 안에있는 내용물, 글자뿐만 아니라 그안의 정보들까지 전부 보여준다. _
Delete
const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove()
// 이렇게 append 했던 엘리먼트를 삭제가능.
document.querySelector('#container').innerHTML = '';
_// innerHTML를 이용해 그 안에 있는 모든 정보를 다 삭제할 수도 있다. _
const container = document.querySelector('#container');
while (container.firstChild) {
container.removeChild(container firstChild);
}
_// 자식 엘리먼트가 하나도 없을 떄까지 삭제한다. 그래서 while문을 활용할 수 도 있다. _


append() 와 appendChild() 차이점

**append() - javascript 함수 **
document.getElementById('myId').append('Hello');
//appendChild보다 append()를 더 선호하는 편이다.

** appendChild() - DOM 함수 **
~~document.getElementById('myId').appendChild('Hello'); (X)~~
var p = document.createElement('p');
document.getElementById('myId').appendChild(p);

profile
와니완의 월드와이드와니웹🐥

1개의 댓글

comment-user-thumbnail
2020년 9월 24일

오!! 정완님 굳이에요

답글 달기