3주차 Front-E 스터디 TIL

결합자와 선택자
먼저 결합자와 선택자에 대해 알아보자.

먼저 ul,li,ol 태그를 알아보자.
ul태그는 글머리 기호를 붙이는 태그로, 순서가 필요없는 목록을 만들때 사용한다.
ol태그는 순서가 필요한 목록을 만들때 사용한다.
li태그는 ul,ol태그 안에서 사용하는 태그로 ul태그와 ol태그의 실질적인 내용역할을 한다.
예시로 작성된 코드와 결과를 확인해 보자.

<ul class="outer">
        <li>육류</li>
        <li>채소</li>
        <li>유제품</li>
        <li>과일
            <ul>
                <li>사과</li>
                <li>포도</li>
                <li>딸기</li>
                <li>키위</li>
            </ul>
        </li>
    </ul>

    <ol>
        <li>하나</li>
        <li>둘</li>
        <li class="starter">셋</li>
        <li>넷
            <ol>
                <li>test</li>
                <li>test</li>
                <li>test</li>   
            </ol>
        </li>
        <li>다섯</li>
        <li>여섯</li>
        <li>일곱</li>
        <li>여덟</li>
        <li>아홉</li>
    </ol>

가상클래스에 대해 알아보자
가상클래스란? 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용 할 스타일을 설정 할 수 있으며, 이를 가상 (추상)클래스라 합니다.

:link - 방문한 적이 없는 링크
:visited - 방문한 적이 있는 링크
:hover - 마우스를 롤오버 했을 때
:active - 마우스를 클릭했을 때
:focus - 포커스 되었을 때 (input 태그 등)
:first - 첫번째 요소
:last - 마지막 요소
:first-child - 첫번째 자식
:last-child - 마지막 자식
:nth-child(2n+1) - 홀수 번째 자식

결합자를 알아볼 필요가 있다. 결합자는 선택자를 여러개 결합하여 세밀하게 찾을 수 있게 해준다.

결합자의 종류는 이러하다.

결합자를 사용하여 css를 작성해보자.

.outer > li li { //바로 하나 밑 두번째 자식까지 적용된다.
    text-decoration: underline;
}

.starter ~ li{ //뒤따르는 모든 자식들, 같은레벨에 있는 것들에 적용
    font-style: italic;
}

.starter + li{ //뒤따르는 다음 자식에 적용.
    font-weight: bold;
    color: green;
}

ol li:first-child, //첫번째, 마지막 태그에 적용하는 가상클래스
ol li:last-child{
    color:yellowgreen;
}

.outer > li:not(:last-child){ //~가 아닌 요소 가상클래스 last-child가 아닌 것을 뜻함
    text-decoration: line-through;
}

ul:not(.outer) li{ //outer클래스가 아닌 ul 아래의 li태그
    font-weight:bold;
}

ol li:nth-child(3){ //ol태그아래 3번째 자식이 아닌 li태그 
    font-weight: bold;
    color: deeppink;
}

li:hover{ //li태그에 마우스가 올라가면 적용되는 효과. 마우스 오버 가상클래스
    font-weight: bold;
    color: blue;
}

inline,block,inline-block 에 대해 알아보자 아래는 서로를 구별할 수 있도록 만든 표이다.

인라인 요소는 콘텐츠의 흐름을 끊지 않고, 요소를 구성하는 태그에 할당된 공간만 차지합니다.

텍스트 사이에 들어있는 <span>span 요소</span>입니다.

기본적으로 블록 레벨 요소는 부모 요소의 전체 공간을 차지하여 "블록"을 만듭니다.
브라우저는 보통 블록 레벨 요소의 앞과 뒤를 개행해서 그립니다. 상자를 쌓는 것 처럼 생각할 수 있습니다.
참고: 블록 레벨 요소는 언제나 새로운 줄에서 시작하고, 좌우 양쪽으로 최대한 늘어나 가능한 모든 너비를 차지합니다.

<div>div 요소</div>

인라인 블록 엘리먼트의 특징은 다음과 같습니다.
외부에서는 인라인처럼 내용물만큼의 크기를 가집니다.
내부에서는 블록처럼 너비 높이 마진 설정이 가능합니다.
인라인 블록은 인라인의 성질과 블록의 성질을 모두 갖고 있습니다.

<div>
     div 요소 안에 들어있는 <span>span 요소</span> 입니다.
</div>
<span>span 요소 안에 들어있는 <div>div 요소</div>입니다.</span> 

물론 글자색과 배경은 css를 먹인것이다. 전체코드를 작성해두고 주석처리를 하며, 인라인,블록,인라인-블록의 개념을 연습해보자

/*span{ /csss
    background-color: aqua;
    color:bisque;
}

div{
    background-color: blue;
    color:red;
} */

/* div{
    background-color: blue;
    color: red;
    display: inline;
}
span{
    background-color: aqua;
    color: bisque;
    display: block;
}*/

span{
    background-color: aqua;
    color: bisque;
    display: inline-block;
}

div{
    background-color: blue;
    color: bisque;
    display: inline-block;
}

 <span>span 요소</span>

      <div>div 요소</div>

      <span>span 요소</span>
      <span>span 요소</span>

      <div>div 요소</div>
      <div>div 요소</div>

      <span>span 요소</span>
      <span>span 요소</span>
      <span>span 요소</span>

      <div>div 요소</div>
      <div>div 요소</div>
      <div>div 요소</div>
      <br>

      텍스트 사이에 들어있는 <span>span 요소</span>입니다. 
      <br><br>

      <div>
        div 요소 안에 들어있는 <span>span 요소</span> 입니다.
      </div>
      <br>

      <span>span 요소 안에 들어있는 <div>div 요소</div>입니다.</span>