<오늘부터 CSS 마스터 12일차> pseudo-class와 pseudo-element

카테고리 CSS

pseudo-class

요소의 특정한 상태를 정의하기 위해 사용하는 CSS 속성이다.

  • 사용자가 마우스를 올렸을 때, 요소를 스타일링 하기
  • 방문한 링크와 미방문 링크 스타일 구분하기
  • focus가 잡혔을 때, 요소 스타일 주기
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* unvisited link */
a:link {
  color: #ff0000;
}

/* visited link */
a:visited {
  color: #00ff00;
}

/* mouse over link */
a:hover {
  color: #ff00ff;
}

/* selected link */
a:active {
  color: #0000ff;
}

a:hover는 a:link, a:visited 속성 이후에 선언되어야한다. 또한 a:active 속성은 a:hover 속성 이후에 선언되어야 한다.

:first-child pseudo-class

요소의 첫번째 자식을 선택하는 선택자이다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
  <head>
    <style>
      p:first-child {
        color: blue;
      }
    </style>
  </head>
  <body>
    <p>This is some text.</p>
    <p>This is some text.</p>

    <div>
      <p>This is some text.</p>
      <p>This is some text.</p>
    </div>
    <section>
      <p>this is first element</p>
      <p>this is second element</p>
    </section>
  </body>
</html>

first-child

이 외에도 많은 pseudo-class들이 있으니 필요하면 찾아서 사용하자.

pseudo-element

요소의 특정 부분을 스타일링 하기 위해 사용하는 CSS 속성이다.

  • 요소의 첫번째 줄이나 첫문자를 스타일링 하기
  • 요소 content의 이전이나 이후에 content를 삽입하기

::first-line

첫번째 줄의 특별한 스타일링을 추가하기 위해 사용한다.

  • block level 요소에만 설정 가능하다.
1
2
3
4
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

::first-letter

첫번째 문자를 스타일링 하는데 사용된다.

  • block level 요소에만 설정 가능하다.
1
2
3
4
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

::before

요소의 content 이전에 어떤 content를 삽입하기 위해 사용한다.

1
2
3
h1::before {
  content: url(smiley.gif);
}

before

::after

요소의 content 이후에 어떤 content를 삽입하기 위해 사용한다.

1
2
3
h1::after {
  content: url(smiley.gif);
}

::selection

사용자에 의해 선택된 부분을 스타일링한다. 아래는 드래그하여 텍스트를 선택하였을 때의 상황이다.

1
2
3
4
::selection {
  color: red;
  background: yellow;
}

selection

댓글 공유

<오늘부터 CSS 마스터 11일차> combinators(셀렉터 조합)

카테고리 CSS

combinators 셀렉터 조합

4가지의 셀렉터 조합이 있다.

  • 자손(descendant) 셀렉터 (space)
  • 자식(child) 셀렉터
  • 인접한 형제 셀렉터 (+)
  • 두루두루의 형제 셀렉터 (~)

descendant 셀렉터

특정 요소의 자손인 모든 요소와 매치되는 셀렉터이다.

아래 예시는 div 태그 내부의 모든 p 태그를 선택하는 예시이다.

1
2
3
div p {
  background-color: yellow;
}

child 셀렉터

해당 요소의 모든 자식들을 선택하는 셀렉터이다.

아래 예시는 div 태그 내부의 모든 p 태그 자식들을 선택한다.

1
2
3
div > p {
  background-color: yellow;
}

child와 descendet의 차이는 descendent는 자신 내부의 모든 자식 손자 증손자 등 모든 자손을 포함하지만, child는 딱 1 level의 자식들만 선택한다.

인접한 형제 셀렉터 (+)

다른 요소와 직접적으로 인접한 요소를 선택하기 위해 사용된다.

1
2
3
div + p {
  background-color: yellow;
}

두루두루 형제 셀렉터 (~)

같은 레벨에 있는 형제 요소를 모두 선택한다.

1
2
3
div ~ p {
  background-color: yellow;
}

댓글 공유

<오늘부터 CSS 마스터 10일차> Align

카테고리 CSS

align

div 와 같은 block 요소를 수평으로 가운데 배치하려면 margin: auto;를 사용하였다.

1
2
3
4
5
6
.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

하지만 내부의 텍스트를 가운데 정렬하기 위해서는 text-align: center;를 사용한다.

1
2
3
4
.center {
  text-align: center;
  border: 3px solid green;
}

이미지 가운데 정렬

image를 가운데 정렬하기 위해서는 block 요소로 바꾸고 width를 설정해준 뒤 margin:auto; 속성을 사용한다.

1
2
3
4
5
6
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

좌우 정렬 - position 속성

좌우 정렬을 위해서 position:absolute; 속성을 사용할 수 있다.

1
2
3
4
5
6
7
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73ad21;
  padding: 10px;
}

position:absolute 속성은 기본 flow를 제거하므로 다른 요소에 오버랩 될 수 있다.

clearfix 팁

만약, 요소가 요소를 감싸는 컨테이닝 블록보다 길고 이것이 float 속성을 가졌다면, 해당 요소는 컨테이너의 외부로 넘칠 것이다. 이를 해결하기 위해서 clearfix 속성을 사용한다.

해당 컨테이닝 블록에다가 다음 속성을 설정한다.

1
2
3
4
5
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

clearfix

수직 가운데 정렬 - padding

padding을 상하로 주어서 수직 가운데 정렬을 해줄 수 있다.

1
2
3
4
.center {
  padding: 70px 0;
  border: 3px solid green;
}

이를 text-align:center; 와 같이 쓰면 수평 수직 가운데 정렬이 가능하다.

1
2
3
4
5
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}

수직 가운데 정렬 - line-height

line-height 속성을 사용하여 수직 가운데 정렬을 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}

수직 가운데 정렬 - position & transform

1
2
3
4
5
6
7
8
9
10
11
12
13
.center {
  height: 200px;
  position: relative;
  border: 3px solid green;
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

수직 가운데 정렬 - flexbox

flexbox는 IE10나 이전버전에서는 지원되지 않는다.

1
2
3
4
5
6
7
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}

댓글 공유

<오늘부터 CSS 마스터 9일차> inline-block

카테고리 CSS

inline-block

display:inline-block 속성은 inline 속성과 block 속성을 함께 가진다.

  • inline과 달리 상하 margin, padding이 적용된다.
  • block과 달리 요소 이후 줄바꿈이 되지 않는다. 다른 요소 옆에 배치된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
span.a {
  display: inline; /* the default for span */
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.b {
  display: inline-block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

span.c {
  display: block;
  width: 100px;
  height: 100px;
  padding: 5px;
  border: 1px solid blue;
  background-color: yellow;
}

inline-block

가장 일반적인 inline-block의 사용 예시는 수평으로 목록들을 배치할 때 사용된다.

1
2
3
4
5
6
7
8
9
10
11
12
13
.nav {
  background-color: yellow;
  list-style-type: none;
  text-align: center;
  padding: 0;
  margin: 0;
}

.nav li {
  display: inline-block;
  font-size: 20px;
  padding: 20px;
}

navlink

댓글 공유

<오늘부터 CSS 마스터 8일차> Overflow

카테고리 CSS

overflow

overflow 속성은 컨텐츠가 너무 커서 영역에 맞지 않는 부분을 설정할 때 사용한다.

또한, overflow 속성은 정확한 높이를 가진 block 요소에만 동작한다.

overflow:visible

visible이 기본값이다. 이는 잘리지 않고 요소 박스 바깥에도 렌더링된다.

1
2
3
4
5
6
div {
  width: 200px;
  height: 65px;
  background-color: coral;
  overflow: visible;
}

visible

overflow:hidden

박스를 넘치는 컨텐츠는 숨긴다.

1
2
3
div {
  overflow: hidden;
}

visible

overflow:scroll

박스를 넘치는 컨텐츠를 스크롤을 통해서 보이게 한다. 이 때, overflow-x, overflow-y로 수평, 수직방향 스크롤을 각각 설정해줄 수 있다.

또한, overflow:auto; 속성은 scroll과 비슷하지만, 스크롤이 필요한 경우에만 스크롤바가 생성된다.

1
2
3
4
div {
  overflow-x: hidden; /* Hide horizontal scrollbar */
  overflow-y: scroll; /* Add vertical scrollbar */
}

overflow

댓글 공유

<오늘부터 CSS 마스터 8일차> Z-index

카테고리 CSS

z-index

z-index 속성은 요소의 쌓는 순서를 설정한다.

z-index는 position 속성이 설정된 요소, flex의 직접적인 자식 요소에서만 동작한다.

예를들어, position: absolute, position: relative, position: fixed, or position: sticky 그리고 display: flex가 설정된 요소의 직접적인 자식 요소

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.container {
  position: relative;
}

.black-box {
  position: relative;
  z-index: 1;
  border: 2px solid black;
  height: 100px;
  margin: 30px;
}

.gray-box {
  position: absolute;
  z-index: 3; /* gray box will be above both green and black box */
  background: lightgray;
  height: 60px;
  width: 70%;
  left: 50px;
  top: 50px;
}

.green-box {
  position: absolute;
  z-index: 2; /* green box will be above black box */
  background: lightgreen;
  width: 35%;
  left: 270px;
  top: -15px;
  height: 100px;
}

z-index

만약 z-index 설정없이 두 요소가 오버랩되어 있다면, HTML 코드가 나중에 정의된 요소가 제일 위에 보여진다.

댓글 공유

<오늘부터 CSS 마스터 7일차> Position

카테고리 CSS

Position

position 속성은 요소에 사용된 포지셔닝 방법을 설정한다.

  • static
  • relative
  • fixed
  • absolute
  • sticky

position: static;

HTML 요소는 static 속성이 기본값으로 되어있다.

static 속성은 top, bottom, left, right 속성에 영향을 받지 않는다.

positioin: relative;

relative 속성은 원래 위치의 상대으로 배치되는 속성이다.

relative 속성이 설정된 요소의 top, right, bottom, left 속성을 설정하는 것은 원래 위치로부터 조정될 수 있을 것이다.

다른 컨텐츠는 요소가 남긴 간격에 맞게 조정되지 않는다. 마치 relative 속성이 설정된 요소가 붕 띄워진 것 처럼 작동한다.

1
2
3
4
5
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73ad21;
}

position: fixed;

fixed 속성이 설정된 요소는 viewport에 상대적으로 위치한다.

이것은 page가 스크롤되더라도 항상 같은 위치에 머물러 있다는 것을 의미한다.

top,left,bottom,right 속성으로 요소의 위치를 조정할 수 있다.

1
2
3
4
5
6
7
div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73ad21;
}

position:absolute;

absolute 속성이 설정된 요소는 fixed 같이 viewport에 상대적인 위치를 갖는 것 대신, relative 속성을 가진 가장 가까운 부모 요소를 기준으로 위치한다.

부모 요소에 relative 속성이 없더라도, absolute 속성을 가진 요소는 document body를 기준으로 움직인다.

absolute 속성을 가진 요소는 기존 flow에서 제거되어 요소들에게 오버랩 될 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73ad21;
}

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73ad21;
}

absolute

position:sticky;

sticky 속성을 가진 요소는 사용자의 스크롤 위치를 기준으로 배치된다.

sticky 요소 스크롤 위치에 따라 relative와 fixed 속성을 왔다갔다 한다.

주어진 offset 위치가 viewport에서 충족되기 전까지는 relative로 배치된 다음, 조건이 충족되면 fixed로 고정된다.

댓글 공유

<오늘부터 CSS 마스터 6일차> Display

카테고리 CSS

Display

diplay 속성은 레이아웃을 조작하는데 매우 중요한 속성이다.

대부분 요소의 기본값은 block 또는 inline이다.

Block-level 요소

block-level 요소는 새로운 줄에서 시작하고 가능한 최대 너비로 차지한다.

  • div
  • h1 ~ h6
  • p
  • form
  • header
  • footer
  • section

inline 요소

inline 요소는 필요한 만큼의 너비를 가지고 새로운 줄에서 시작하지 않는다.

  • span
  • a
  • img

display: none;

위 속성은 요소를 제거하고 다시 만드는 것 대신 요소를 숨기고 나타내기 위해 JavaScript와 함께 사용하는 속성이다.

script 요소는 display:none 속성이 기본값이다.

display:none과 visibility:hidden의 차이

display:none은 요소를 숨기고 페이지는 그곳에 해당 요소가 없는 것처럼 나타낸다.

하지만, visibility:hidden은 요소를 숨기지만 이전과 동일한 공간을 차지한다. 즉, 요소는 보이지 않지만 layout에는 영향을 미친다.

display:none과 visibility:hidden 비교

댓글 공유

<오늘부터 CSS 마스터 6일차> List

카테고리 CSS

List

list-style-type을 바꾸면 list item 마커를 변경할 수 있다.

추가로 list-style-image로 이미지를 삽입할 수도 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
ul.a {
  list-style-type: circle;
}

ul.b {
  list-style-type: square;
}

ol.c {
  list-style-type: upper-roman;
}

ol.d {
  list-style-type: lower-alpha;
}
ul {
  list-style-image: url("sqpurple.gif");
}

list-style-position

list-item 마커를 list-item 내부 또는 외부로 위치를 이동시킬 수 있다.

1
2
3
4
5
6
7
ul.a {
  list-style-position: outside;
}

ul.b {
  list-style-position: inside;
}

기본 셋팅 제거하기

1
2
3
4
5
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

댓글 공유

<오늘부터 CSS 마스터 6일차> Link

카테고리 CSS

Link

Link는 CSS 속성으로 스타일링 할 수 있다. 추가로 상태까지 다르게 스타일링 할 수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* unvisited link */
a:link {
  color: red;
}

/* visited link */
a:visited {
  color: green;
}

/* mouse over link */
a:hover {
  color: hotpink;
}

/* selected link */
a:active {
  color: blue;
}

❗️주의사항

  • a:hover는 무조건 a:link, a:visited 이후에 와야한다.
  • a:active는 무조건 a:hover 이후에 와야한다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
a:link,
a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover,
a:active {
  background-color: red;
}

linkbutton

댓글 공유

loco9939

author.bio


author.job