[CSS 문법] 결합자 && 그 외 스타일 속성

안녕하세요 요즘 날씨가 점점 추워지고 있습니다. 감기가 유행이니 환절기 조심하세요~~ 🤧🤧 😷😷

이번에는 결합자와 간단한 스타일 속성 들을 간단하게 배워보고 넘어가겠습니다. 

우선 결합자에 대한 개념을 짚어보겠습니다. 
결합자란? 👈
여러 개의 선택자를 연결하여 더욱 정확하게 HTML 요소를 선택하고 스타일을 지정하는 방법입니다. 

결합자 종류 

div p {} 자손 결합자
.a .b {} 자손 결합자
div >  p 직계 자식 결합자
p + div 인접 결합자
p ~ div 형제 결합자

자손 결합자 👈
첫 번째 선택자의 후손 요소를 모두 선택합니다. 즉, 자식, 손자 등 모든 하위 요소를 포함합니다.
표기 방법 : 공백으로 표기 

<div>
  <p>첫 번째 단락</p>
  <div>
    <p>두 번째 단락</p>
  </div>
</div>

 

div p {
  color: blue; /* div 안에 있는 모든 p 태그를 파란색으로 */
}

이렇게  div 요소의 해당하는 p 태그에 대한 스타일을 적용시킵니다. 


직계 자식 결합자 👈
첫 번째 선택자의 직접적인 자식 요소만 선택합니다.
표기방법 :  >  기호로 연결합니다.

div > p {
  font-weight: bold; /* div의 직접적인 자식인 p 태그만 굵게 */
}

인접 결합자 👈
같은 부모를 가진 첫 번째 선택자 바로 다음에 오는 형제 요소를 선택합니다.
표기 방법:  + 기호로 연결합니다. 

<h1>제목</h1>
<p>첫 번째 단락</p>
<div>
  <p>두 번째 단락</p>
</div>

 

h1 + p {
  text-align: center; /* h1 태그 바로 다음 p 태그를 가운데 정렬 */
}

형제 결합자 👈
같은 부모를 가진 첫 번째 선택자 다음에 오는 모든 형제 요소를 선택합니다.
표기 방법: ~ 기호로 연결합니다. 

h1 ~ p {
  font-style: italic; /* h1 태그 다음에 오는 모든 p 태그를 기울임 */
}

이러한 방식으로  HTML 요소들 간의 관계를 정의하여 특정 요소를  골라낼 수 있습니다. 

그 외 스타일 속성

.box {
    display : block; 
    /* 블록 요소 -> 한줄을 모두 차지하고, 옆에 요소가 나열될 수 없다. 요소의 크기를 지정할 수 있다. */
    
    display : inline;
    /* 내용의 크기만큼만 영역을 차지하고 요소가 나열될 수 있다. 요소의 크기를 지정할 수 없다. */

    display : inline-block;
    /* 요소의 크기를 지정할 수 있고, 요소가 나열될 수 있다.*/

    display : none;
    /* 화면에서 요소가 보이지않게 지워버린다. */

    display : inherit;
    /* 부모의 속성을 가져와서 값을 적용한다. */

    display : initial;
    /* 태그의 속성값을 초기화 */

    중요
    display : flex; 
    /* 자식요소에게 영향을 준다. 자식요소의 정렬 방법을 정의한다. */

    font-size : 12px;
    /* text의 크기를 지정한다. */

    text-decoration : none;
    /* text의 꾸미기 요소를 정의한다. 밑줄, 삭제선, 상단선 등 */
    text-decoration : underline;
    text-decoration : overline;

    text-align : center;
    /* text의 정렬을 적용할 때 가운데 정렬 */
    text-align : start;
    /* text의 왼쪽 정렬 */
     text-align : end;
    /* text의 오른쪽 정렬 */

    margin : 1px;
    /* 외부 간격을 정의하는 속성 시계 방향 순서로 */

    padding : 1px; 
    /* 내부 간격을 정의하는 속성 */

    color : red;
    /* text 내용의 색을 정의하는 속성 */

    overflow : hidden;
    /* hidden : 부모의 요소의 밖으로 나온 부분을 제거하는 속성 */

    overflow : scroll; 
    /* scroll : 부모의 요소의 상하 좌우 모두 다 자식의 요소가 부모보다 커지게 되면 스크롤이 되는  속성*/

    overflow-y : scroll;
    /* 세로로 스크롤이 되게 적용하는 속성 */

    overflow-x : scroll;
    /* 가로로 스크롤이 되게 적용하는 속성 */
}

다양한 스타일 속성으로 웹 페이지의 스타일을 정의할 수 있습니다.  감사합니다.