CSS Selector
- ,로 여러 개 선택 가능
#container, #header {
margin: 0;
padding: 0;
}- 공백으로 하위 요소 선택
div li {
list-style: decimal;
}- 직계 자식 요소 선택
div > h1 {
font-weight: bold;
color: lightblue;
}시멘틱 태그란?
시멘틱 태그는 웹 문서의 의미와 구조를 명확하게 전달하기 위해 사용되는 HTML 태그입니다. 시멘틱 태그는 요소의 의미와 목적을 설명하는 역할을 하며, 검색 엔진이나 웹 접근성과 같은 측면에서도 중요한 역할을 합니다. 예를 들어, <header, nav, article, footer>와 같은 시멘틱 태그를 사용하여 웹 문서를 구성할 수 있습니다.
상대적 단위와 절대 단위
상대적 단위는 웹 요소의 크기를 상대적인 비율로 지정하는 방식입니다. 주로 %와 em 단위를 사용합니다. %는 부모 요소의 크기를 기준으로 상대적인 크기를 설정하며, em은 해당 요소의 폰트 크기를 기준으로 상대적인 크기를 설정합니다. 상대적 단위를 사용하면 다양한 화면 크기에 유연하게 대응할 수 있습니다.
반면에 절대 단위는 고정된 크기를 가지며, 특정한 값으로 지정됩니다. 대표적으로 px, pt, cm 등이 있습니다. px은 픽셀 단위로 고정된 크기를 나타내며, pt는 포인트 단위로 인쇄용 크기를 나타냅니다. 절대 단위는 보다 정확한 크기 조절이 필요한 경우에 사용될 수 있습니다.
display 속성 5가지
block: 해당 요소를 블록 레벨 요소로 지정합니다. 예를 들어, <div>는 기본적으로 block 속성을 가지고 있으며, 한 줄을 모두 차지하는 형태로 표시됩니다.
inline: 해당 요소를 인라인 요소로 지정합니다. 예를 들어, <span>은 inline 속성을 가지고 있으며, 요소의 내용만큼만 차지하며 줄바꿈이 일어나지 않습니다.
inline-block: 해당 요소를 인라인 블록 요소로 지정합니다. inline과 block의 특성을 모두 가지며, 한 줄에 여러 요소를 나란히 배치할 수 있습니다.
none: 해당 요소를 화면에서 숨깁니다. 일반적으로 요소를 완전히 제거하는 것이 아니라, 해당 요소의 공간을 차지하지 않도록 처리됩니다.
flex: 해당 요소를 플렉스 박스(flexbox) 요소로 지정합니다. 플렉스 박스는 요소의 배치를 유연하게 조정하기 위한 기능을 제공하며, 주로 요소들을 가로 또는 세로로 정렬하거나 간격을 조절하는데 사용됩니다.
마진과 패딩의 차이는?
마진(Margin)은 요소의 외부 여백을 의미하며, 해당 요소와 주변 요소 사이의 간격을 조정하는 데 사용됩니다. 마진은 요소의 테두리(border) 바깥쪽에 적용되며, 주로 요소들 사이의 간격 조정이나 레이아웃 구성에 사용됩니다.
반면에 패딩(Padding)은 요소의 내부 여백을 의미하며, 해당 요소의 내용(content)과 테두리 사이의 간격을 조정하는 데 사용됩니다. 패딩은 요소의 테두리 안쪽에 적용되며, 요소의 내용과 테두리 사이의 간격을 조절하는 데 사용됩니다.
요약하자면, 마진은 요소와 주변 요소 사이의 간격을 조정하고, 패딩은 요소의 내부 간격을 조정한다는 차이가 있습니다.
박스모델에 대하여 설명하시오.
박스 모델은 HTML 요소가 브라우저에 표현될 때, 각 요소가 사각형 박스로 간주되어 크기와 위치를 결정하는 모델입니다. 박스 모델은 요소의 콘텐츠 영역, 패딩 영역, 테두리 영역, 마진 영역으로 구성됩니다.
콘텐츠 영역: 요소의 실제 내용이 들어가는 영역입니다. 텍스트나 이미지 등이 표시되는 영역입니다.
패딩 영역: 콘텐츠와 테두리 사이의 간격을 나타내는 영역입니다. 패딩은 요소의 내부 여백을 조정하는 데 사용됩니다.
테두리 영역: 패딩과 마진을 구분하기 위한 테두리 선을 나타내는 영역입니다. 테두리는 요소의 외곽을 감싸며, 굵기와 스타일을 지정할 수 있습니다.
마진 영역: 요소와 주변 요소 사이의 간격을 나타내는 영역입니다. 마진은 요소들 사이의 간격을 조정하는 데 사용됩니다.
이렇게 구성된 박스 모델을 통해 각 요소의 크기와 위치를 조정하여 웹 페이지의 레이아웃을 구성할 수 있습니다.
