TIL : css태그

reset.css

HTML에 존재하는 150여개의 태그 속성을 초기화 해주는 css 파일

z-index

position 태그에 사용됨(absolute, relative, fixed, sticky) 최대 999까지 적용되며 수가 클 수록 작은 z-index보다 앞으로 옴
absolute의 경우 해당 영역의 left, top 값을 줘야함(x,y값)

image spriting

sprite cow 사용

after

실제 내용(부모) 뒤에 바로 생성되는 요소
무조건 content를 넣어야함

예시

#header .inner .logo .sprite_insta_logo{
    position: relative; /* after에게 위치 기준을 전달하기 위함 */
    margin-right: 30px;
}

#header .inner .logo .sprite_insta_logo:after{
    content: ''; /* 공백을 받음 */
    width: 2px;
    height: 28px;
    background: #000;
    position: absolute; /* 부모를 기준으로 위치를 잡음 */
    right: -15px;
    top: 0px;
}


            <section class="inner">
                <h1 class="logo">
                    <a href="index.html">
                        <div class="sprite_insta_logo"></div>
                        <div class="sprite_insta_write_logo"></div>
                    </a>
                </h1>
            </section>
        </header>

바를 만들기 위해 bar의 부모는 인스타 로고. 그래서 위치는 relative
공백을 만들고 공백 안에 bar를 생성하기 위해 after 사용

display : flex

선택된 요소 안의 것들을 수평 정렬함

    justify-content: space-between; /* x축 정렬 공간을 자동 분배 */
    align-items: center; /* y축 정렬 */

를 같이 사용함

예시
inner 내부 요소들인 logo, search_box, right_icons를 수평으로 정렬하기 위해 display: flex justify-content, align-items를 사용하면 가로 세로(x,y축) 정렬이 균등하게 분배됨