float에서 ul의 높이 값을 따로 주지 않았을 경우, li태그의 콘텐츠 값으로 지정이 된다. 근데 ul의 자식 태그들을 모두 float 할 경우에는 ul 태그의 height 값이 0이 된다. 그렇게 되면 형제 요소가 끌려 올라오는 현상이 발생하기 때문에 이를 방지하기 위해서 3가지 방법이 있다.
부모 요소에 height 값을 설정하는 것이다.
overflow: hidden;
overflow: hidden;
을 준다.overflow: hidden;
은 자신에게 주어진 크기에서 넘친 것을 숨기는 css 속성이기 때문에 부모 요소에 적용할 경우 부모 요소가 포함하는 컨텐츠의 크기가 자신의 높이가 된다. 그렇기 때문에 자식 요소가 float 되어도 자신의 높이를 가질 수 있게 되는 것이다..clearfix
클래스
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;}
: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
- 특정 요소의 내용 뒤에 지정한 내용을 넣을 수 있다./* 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;
}
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 값의 절반을 빼주면 된다.) 이런 부분이 혼자서 공부했을 때는 이해하기 어려웠는데, 이번 기회에 이해할 수 있었다.