HTML&CSS

[css] 셀렉터 문법

CSS 셀렉터 문법 CSS에서는 스타일을 적용할 대상을 선택하기 위해서 선택자(selector)를 사용하며 대표적으로 id 선택자, 태그 선택자, 클래스 선택자가 있다. 예제를 통해 살펴보자 아래의 html을 대상으로 셀렉터에 대해 알아보자. CSS 셀렉터 문법 셀렉터 문법에 대해서 알아보자 태그로 찾기 getElementsByTagName() 클래스 속성값으로 찾기 getElementsByClassName() id 값으로 찾기 getElementsById() html 문서에서 요소(element)를 찾는 방법은 여러가지가 있다. // article 클래스 속성값을 가진 요소의 내부 안에 있는 p태그 내용 출력 const articleClasses = document.getElementsByClassNa..

[CSS] display, position

See the Pen Untitled by Sunyeong (@cozynye) on CodePen. css 박스모델 모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 한다. contents - 텍스트나 이미지가 들어가 있는 박스의 실질적 내용 부분 padding - 테두리와 컨텐츠 사이의 간격 border - 컨텐츠를 둘러싸는 테두리 margin - 태그 간의 간격, 테두리 바깥쪽의 공간 display 기본적으로 태그들은 왼쪽에서 오른쪽으로 위쪽에서 아래쪽으로 쌓인다. display 속성은 해당 html 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정 inline 컨텐츠를 감쌀정도의 크기만 갖게 된다. 블락태그와 다르게 줄바끔 X 크기를 변화시킬수 없다.(width, height 값..