TIL 0922 CSS 가운데정렬 display DOM

CSS

요소들을 가운데정렬 할 때

.contentwrapper{
  margin: 0px auto;
}

font-weight: bold; //폰트 굵게
text-shadow: 1px 1px 2px black; //폰트에 그림자 추가

padding: 1px 2px 3px 4px;
순서대로 시계방향 북 동 남 서(margin 또한 동일)

display: flex; justify-content: space-between;

적용된 모습

날짜를 오른쪽으로 붙일 수 있다.

더많은 정보 poiemaweb.com/css3-display

[

CSS3 Display | PoiemaWeb

display 프로퍼티는 layout 정의에 자주 사용되는 중요한 프로퍼티이다.

poiemaweb.com

](https://poiemaweb.com/css3-display)

DOM

엘리먼트 만들기

const oneDiv = document.createElement('div');
console.log(oneDiv); // <div></div>

텍스트 삽입

oneDiv.textContent = 'dev';
console.log(oneDiv); // <div>dev</div>

클래스 추가

oneDiv.classList.add('tweet')
console.log(oneDiv) // <div class="tweet">dev</div>

DOM에 추가

const container = document.querySelector('#container')
container.append(oneDiv)

자식 노드에 순서대로 접근하는 방법

elem.childNodes[0] === elem.firstChild
elem.childNodes[elem.childNodes.length - 1] === elem.lastChild

container.id='hi' 아이디 추가/변경

버튼으로 알림창띄우는 방법 2가지

document.querySelector('#apply').addEventListener('click', function(){

   alert("코드스테이츠에 오신 것을 환영합니다")

})

function displayAlert() {

  alert('코드스테이츠에 오신 것을 환영합니다')

}
document.querySelector('#apply').onclick = displayAlert

다수의 엘리먼트 순회 방법

const tweets = document.querySelectorAll('.tweet')

tweets.forEach(function(tweet){
    tweet.remove();
})

for (let tweet of tweets){
    tweet.remove()
}