TIL(2022.05.06)- clearfix class & pseudo

박세진·2022년 5월 9일
0

clearfix

float에서 ul의 높이 값을 따로 주지 않았을 경우, li태그의 콘텐츠 값으로 지정이 된다. 근데 ul의 자식 태그들을 모두 float 할 경우에는 ul 태그의 height 값이 0이 된다. 그렇게 되면 형제 요소가 끌려 올라오는 현상이 발생하기 때문에 이를 방지하기 위해서 3가지 방법이 있다.

  • 부모 요소에 height 값을 설정하는 것이다.

    • 하지만, 생각보다 많이 사용하지 않는다. height 값을 줄 수 있는 요소가 있고, 없고의 차이 때문
  • overflow: hidden;

    • 부모 요소에 overflow: hidden;을 준다.
    • overflow: hidden;은 자신에게 주어진 크기에서 넘친 것을 숨기는 css 속성이기 때문에 부모 요소에 적용할 경우 부모 요소가 포함하는 컨텐츠의 크기가 자신의 높이가 된다. 그렇기 때문에 자식 요소가 float 되어도 자신의 높이를 가질 수 있게 되는 것이다.
  • .clearfix 클래스

    • pseudo class를 이용해서 가상으로 마지막 자식을 만들어주고
      ul::after {
      	content: "";
      	clear: both;
      	display: block;
      }
      이런 식으로 요소에 가상 요소를 만들 수 있는데, 자주 만들어 쓰기 불편하기 때문에 .clearfix라는 클래스 이름을 만들어놓고, 해당 클래스 이름이 붙은 요소에 무조건 after 가상 요소가 만들어지게 해놓으면 된다.
      .clearfix::after {
      		content: "";
      		clear: both;
      		display: block;
      }
      
      /* 줄여서 cf라고 써도 된다.*/
      .cf::after {
      		content: "";
      		clear: both;
      		display: block;
      		width: 0;
      		height: 0;}

pseudo

사용자 동작에 반응하는 가상 클래스

  • :link - 방문하지 않은 링크에 스타일을 적용

    <head>
    <style>
    	a {
      	text-decoration: none;
      	font-size: 16px;
      	color: red;
      }
      a:link {
      	font-size: 24px;
      	color: purple;
      }
    </style>
    </head>
    <body>
    <a href="https://naver.com">네이버</a>
    </body>

    네이버 링크를 방문하지 않았을 경우에는 a:link 스타일이 적용되고, 방문하였을 경우에는 a 스타일이 적용된다.

  • :visited - 방문한 링크에 스타일 적용

    <head>
    	<style>
    		a {
      	text-decoration: none;
      	font-size: 16px;
      	color: red;
      	}
      		a:link {
      	font-size: 24px;
      	color: purple;
      	}
    	</style>
    </head>
    <body>
    	<a href="https://naver.com">네이버</a>
    </body>
  • :hover - 웹 요소에 마우스 커서를 올렸을 때 스타일 적용

<head>
  <style>
    a {
    	color: yellow;
    	font-size: 20px;
    }
    a:hover {
		color: red;
    	font-size: 30px;
    }
  </style>
</head>
<body>
<a href="https://naver.com">네이버</a>
</body>
  • :active - 웹 요소를 활성화했을 때 스타일 적용

  • :focus - 웹 요소에 초점이 맞추어졌을 때의 스타일 적용(마우스 커서나 tab 눌러서 초점 맞췄을 때)

구조 가상 클래스

웹 문서 구조를 기준으로 특정 위치에 있는 요소를 찾아서 스타일 지정할 때 사용하는 선택자

  • :root - 문서 안의 루트 요소(HTML)에 스타일 적용

  • :nth-child(n)- 자식 요소의 위치에 따라 스타일 적용

    <head>
    span:nth-child(2) {
    color: red;
    }
    </head>
    <div class="list-box">
    <div class="list">
      <a href="https://naver.com">naver</a>
      <div class="txt-box">
        <h3>쥬니어네이버</h3>
        <span>코어자바스크립트</span>
        <span>HTML & CSS</span>
      </div>
    </div>
    </div>

두 번째 span 태그(HTML & CSS 내용)를 선택하려고 했으나, span:nth-child(2)의 경우 <span>코어자바스크립트</span>을 선택하게 된다. 이런 경우에는 부모 요소에서 <span>HTML & CSS</span>는 3번째 자식이기 때문에 span:nth-child(3)을 해야 선택이 된다.

  • :nth-last-child(n) - 끝에서부터 n번째 자식 요소에 스타일 적용
  • :nth-of-type(n) - 특정 태그의 n번째에 스타일 적용
span:nth-of-type {
	color: red;
}
/* 2번째 span태그가 선택되어 HTML & CSS 글씨 색상이 빨갛게 스타일이 적용된다. */
  • 그외에도 :first-child, :last-child 등이 있으나, 선택자 적는 방법은 비슷하기 때문에 따로 정리해놓지 않을 예정이다.

가상 요소

  • ::before - 특정 요소의 내용의 앞에 content를 추가 ( content 속성은 필수이다)
<head>
  ul {
  list-style: none;
}
  li::before {
  content: "👩🏻💻"
}
</head>
<body>
  <ul>
    <li>Github</li>
    <li>Notion</li>
    <li>Velog</li>
  </ul>
</body>
/* list 이름 앞에 content 내용이 붙는다.*/
  • ::after - 특정 요소의 내용 뒤에 지정한 내용을 넣을 수 있다.
    clearfix 만들면서도 배웠고, 메뉴 바에 효과를 줄 때 사용하는 방법으로도 배웠다.
/* float 속성을 이용할 때 끌려올라가지 않게 하는 clearfix를 만들 때*/
.clearfix::after {
	content: "";
    clear: both;
    display: block;
}

/* li 스타일 중 hover 되었을 때 효과를 만들어 주기 위해서 가상의 마지막 자식을 만들어서 사용 */
 ul>li>a::after {
      content: "";
      display: block;
      height: 2px;
      width: 0px;
      background-color: red;
      position: absolute;
      left: 50%;
      top: 45px;
      transform: translateX(-50%);
    }
    ul>li:hover>a::after {
      width: 100px;
      transition: width  1s;
    }

reset CSS

css에는 기본적으로 스타일이 적용된 부분이 있다. 그렇기 때문에 css를 reset하는 작업이 필요하다.

직접 초기화 하는 방법

body,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,p {
   margin: 0;
   padding:0;
}
li {
	list-style: none;
}
a {
	text-decoration: none;
	color:inherit
}
h1,h2,h3,h4,h5,h6 {
	font-weight: normal;
   font-size: 100%;
}
body {
	line-height: 1;
}
table {
	border-collapse: collapse;
}
.cf::after {
	content:'';
	display: block;
   width: 0;
   height: 0;
   clear: both;
}

만들어진 파일을 다운받는 방법

  • https://www.jsdelivr.com/package/npm/reset-css
    reset css cdn이라고 검색하면 다운 받을 수 있는 곳이 나온다.

    <head>
    	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
    <head>
    

    ::after를 적용하는 것은 조금 더 이해가 필요할 것 같다.
    그리고 position 속성을 이용하는 방법도 배웠는데, position은 이미 공부해서 정리한 부분이라 따로 정리해서 올리지는 않았지만, 가운데에 위치하게 하는 방법도 더 잘 이해하게 됐다. (예를 들어 백분율로 position 위치(left: 50%; top: 50%;)를 지정한 다음에 margin을 width 값의 절반을 빼주면 된다.) 이런 부분이 혼자서 공부했을 때는 이해하기 어려웠는데, 이번 기회에 이해할 수 있었다.

profile
경험한 것을 기록

0개의 댓글