본문 바로가기

전체 글525

[CSS] Selector (자식/후손/형제) 첫번째로 입력한 요소의 바로 아래 자식인 요소를 선택한다. header > p { } 첫번째로 입력한 요소의 후손을 선택한다. 아래 예시의 경우 자식인 p 요소 뿐아니라 자식의 자식인 p요소까지 모두 선택된다. header p { } 같은 부모 요소를 공유하면서, 첫번째 입력한 요소 뒤에 오는 두번째 입력한 요소를 모두 선택한다. 아래 예시의 경우 section 요소 뒤에 있는 세개의 p요소를 모두 선택한다 section ~ p { } 같은 부모 요소를 공유하면서, 첫번째 입력한 요소 바로 뒤에 오는 두번째 입력한 요소를 선택한다. 예시의 경우 section 요소 뒤에 있는 세개의 p요소 중 첫번째 p요소를 선택한다. section + p { } 2022. 12. 22.
[CSS] Selector (기본) * :문서의 모든요소를 선택 같은 태그명을 가진 모든 요소를 선택. 복수로도 가능 h1/ div/ section, h1 : section과 h1 모두를 선택했다는 의미이다 #id로 입력하여 선택 ex) #only 같은 class를 가진 모든요소를 선택 .class ex) .widget 같은 속성을 가진 요소를 선택 2022. 12. 22.
[CSS] 박스를 구성하는 요소 # border 테두리 -심미적인 용도 외에도 개발과정에서도 매우 의미있게 사용된다. 각 영역이 차지하는 크기를 파악하기 위해, 레이아웃을 만들면서 그 크기를 시각적으로 확인할수 있도록 만든다. border: 1px solid red; -테두리두께(border-width)/ 테두리 스타일(border-style)/ 테두리 색상(border-color) - 둥근모서리: border radius -border style # margin (바깥여백) -값이 4개면 top, right, bottom, left (시계방향) 값이 2개면 top와 bottom, left와 right (10px 20px이면 top=bottom=10, left=right=20) 값이 1개면 모든 방향 위의 내용은 padding도 동일하.. 2022. 12. 22.
박스모델기초 #줄바꿈이 되는 박스: block박스 (h1, p, div) 줄바꿈이 일어나지 않고 크기 지정을 할수 없는 박스: inline박스(span) 줄바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 : inline-block 박스 #span요소(inline박스)에서는 width, height 속성이 적용되지 않는다 2022. 12. 22.

티스토리툴바