Section 9. 유용한 CSS 속성들(1)

Notice

Recent Posts

Recent Comments

Link

« 2024/05 »
일	월	화	수	목	금	토
			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

Tags more

Archives

Today

Total

관리 메뉴

개발 공부 기록하기

Section 9. 유용한 CSS 속성들(1) 본문

프밍/CSS

Section 9. 유용한 CSS 속성들(1)

태영(泰伶) 2023. 1. 18. 23:24

이번 섹션에 포함된 강의명은 다음과 같다.

^{(강의에서 제공된 번역 내용을 기반으로 작성하지만, 간혹 오역으로 판단될 경우에는 내 해석으로 대체할 수 있음..!!)}

순서	강의명	소요 시간	중요도 ^{(필수_crucial/중요_important/선택_{nice to have})}
01	불투명도와 알파 채널 Opacity & The Alpha Channel	6' 32"	중요
02	위치 속성 The Position Property	9' 40"	필수&약간 어렵
03	CSS 트랜지션 CSS Transitions (yay!)	11' 17"	필수
04	CSS 변형이 가진 능력 ^{The Power of CSS Transforms}	13' 13"	선택(알면 좋음)
05	멋진 버튼 호버(Hover) 효과 주기 ^{Fancy Button Hover Effect CodeAlong}	10' 21"	필수
06	배경에 관한 진실 ^{The Truth About Background}	8' 45"	중요
07	구글의 글꼴은 놀랍다 ^{Google Fonts is Amazing}	7' 47"	중요
08	사진 블로그 코딩하기 1 ^{Photo Blog CodeAlong Pt. 1}	8' 44"	-
09	사진 블로그 코딩하기 2 ^{Photo Blog CodeAlong Pt. 2}	8' 38"	-

~~독립하고 싶다고 노래노래를 부르면서 진짜 서울, 경기, 인천 지역에서 LH, SH, 역세권청년주택 공고 뜨는 것마다 다 신청했던 게,~~

~~오늘 드디어 한 군데 연락이 왔다!!! 고 좋아했다가...~~

~~너무 어마어마한 전세보증금과 월세를 감당하기 어려울 것 같은 조건이어서 그냥.. 포기하기로 하고 우울한 마음에....~~

~~오늘 제목 배경색은 진한 blue로 골라봤다... TMI....~~

01. 불투명도와 알파 채널

불투명도opacity와 알파 채널alpha channel 둘 모두 투명도와 관련된 특성이지만 서로 다른 속성이라고 할 수 있다.

알파 채널

사실 처음에 알파 채널이라고 제목에 되어 있어서, 긴장을 좀 했었다.

이미 Do it! 책으로 웬만한 CSS는 거의 다 다뤄본 상태인 것 같다고 느꼈는데..

내가 뭔가 모르는 다른 게 더 있나?? 했는데,

rgba(0, 209, 112, 0.5)와 같이 rgb 색상 옆에 쓰는 투명도 표시, 그것을 말하는 거였다.. 하핳.....

~~영어 표현이라고 다른 것인 줄 알면 어떡해!!ㅋㅋㅋㅋㅋ~~

아니, 생각해보니까 저 네 번째 부분을 a로 쓰는 게 아니라 α(알파)로 썼던 것 같기도...?ㅎ

아무튼 복습하는 셈 치면!!

0 < α < 1

알파의 값은 0부터 1 사이의 숫자로 작성한다! (0은 제일 투명한 것, 1은 제일 불투명한 것)

div {
	background-color: rgba(0, 209, 112, 0.5);
}
/* r, g, b, a 하나 하나를 channel이라고 부른다고 한다. */



/* 16진법으로 색을 나타내는 경우에도 알파 채널을 쓸 수 있다. */
div {
	background-color: #ae000155;
}
/* 자세히 보면 6자리의 16진법 표기 방식 RRGGBB 뒤에 두 글자가 더 붙어 있다. */
/* 00 = 완전 투명, FF= 완전 불투명
으로 인식하면 되는데, FF가 되어버리면, 쓸 가치가 없다고 판단하는지
아무리 입력해봤자, 그 두 글자는 사라지게 된다..ㅎㅎ */

그리고 새로 알게 된(?) 사실!

알파 채널에 값을 지정하더라도, 이것은 배경 색에만 실제로 영향력이 있고,

글자 색에는 지정해봤자 안 먹힌다는 점!!

불투명도opacity

opacity 역시 비슷하다.

0 < opacity < 1

(0은 제일 투명한 것, 1은 제일 불투명한 것)

div {
	opacity: 0.5;
}

그러나 알파 채널과 다른 점이라고 한다면,

똑같이 0.5라는 값을 가졌을 때,

알파 채널은 배경 색만 50%의 투명도를 갖는다면,

opacity의 경우는 div 안의 모.든. 요소에 투명도가 적용된다는 것이다.

(그게 설령, 텍스트가 되었든, 버튼이 되었든 모두)

02. 위치 속성

윽.. 이거 Do it! 책으로 공부할 때도 어려웠던 부분이다ㅠㅠㅠ

position.

문서 내에서 요소의 위치를 설정하는 굉장히 유용한 기능이라고 하는데,

초심자들은 물론이고 현직자들도 많이 헷갈려하는 개념이라고 한다..ㅎㅎ

그래서 많은 사람들이 MDN 페이지를 참고한다고....

position 속성에는 static, relative, absolute, fixed, sticky 등이 있다.

static ─ default 값

지금까지 다뤘던 모든 요소의 기본적인 위치 특성이다.

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Position</title>
      </head>
      <body>
         <h1>Position Property</h1>
         <section id="static">
            <h2>Static</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
      </body>
   </html>

div {
   width: 100px;
   height: 100px;
   background-color: #3d405b;
   border: 2px solid black;
   margin: 10px;
   display: inline-block;
}

#middle {
   background-color: #81b29a;
}
#static #middle {
  position: static;
  top: 100px;
}

↓

relative

문서의 일반적인 흐름에 따라서 위치가 정해진다. top, right, bottom, left 등으로 현재 위치를 기준으로 상대적으로 *offset을 줄 수 있다.

*offset: 출발, 시초

<!DOCTYPE html>
   <html lang="en">
      <head>
         <meta charset="UTF-8">
         <title>Position</title>
      </head>
      <body>
         <h1>Position Property</h1>
         <section id="static">
            <h2>Static</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="relative">
            <h2>Relative</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
      </body>
   </html>

div {
   width: 100px;
   height: 100px;
   background-color: #3d405b;
   border: 2px solid black;
   margin: 10px;
   display: inline-block;
}

#middle {
   background-color: #81b29a;
}
#static #middle {
  position: static;
  top: 100px;
}
#relative #middle {
  position: relative;
  top: 100px;
}

↓

원래 정해져있던 위치보다 상대적으로 위(top)에서 100px만큼 밀려났다.

absolute

문서의 일반적 흐름에서 요소가 제거되고 공간을 차지하지 않는다.

<!DOCTYPE html>
   <html lang="en">
      <head>
  <meta charset="UTF-8">
  <title>Position</title>
      </head>
      <body>
         <h1>Position Property</h1>
         <section id="static">
            <h2>Static</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="relative">
            <h2>Relative</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="absolute">
            <h2>Absolute</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
      </body>
   </html>

div {
   width: 100px;
   height: 100px;
   background-color: #3d405b;
   border: 2px solid black;
   margin: 10px;
   display: inline-block;
}

#middle {
   background-color: #81b29a;
}

#static #middle {
  position: static;
  top: 100px;
}

#relative #middle {
  position: relative;
  top: 100px;
}

#absolute #middle {
  position: absolute;
}

↓

빨간색 네모칠한 부분만 본다면,

다른 것들과는 다르게 상자가 2개만 보인다.

(하지만 이건 가운데의 초록색 상자 뒤로 두 번째 남색 상자가 숨어서 그렇다. 초록색 상자를 position:absolute;로 처리함으로써 이 문서에서 초록색 상자가 공간을 차지하지 않기 때문에(문서 흐름에서 제거되었기 때문에), div 스타일에서 지정한 대로 첫 번째 남색 상자로부터 margin이 10px 떨어진 곳에 두번째 남색 상자가 위치하게 된 거고, 공교롭게도 우리 눈에 보이는 초록색 상자가 그 위를 덮은 것 뿐이다.)

근데 이 코드의 CSS 파일에서

#absolute #middle {
   position: absolute;
   top: 100px;
   left: 100px;
}

위와 같이 top, left 방향으로 100px씩 밀어내게 된다면,

남색 상자를 덮었던 초록색 상자가

뜬금없이 위쪽에 가버린 걸 알 수 있다.

absolute는, 그 요소를 문서의 일반적인 흐름에서는 제거하는 게 맞지만,

가장 가까이에 위치한 조상 요소(만약 가까이 있는 조상 요소가 없다면, 제일 초기의 컨테이닝 블록)을 기준으로 위치를 잡는다...고! MDN에 되어 있다.

즉, 지금 저 초록색 상자의 조상 요소는 <body>에 해당하기 때문에 거기서부터

위에서 100px가 밀리고, 왼쪽에서 100px가 밀린 위치가 저기라는 거다.

컨테이닝 블록을 기준으로 위치가 잡힌다는 건?

CSS 파일의 #absolute #middle 바로 앞쪽에

다음처럼 #absolute만의 스타일 지정이 별도로 되어있다면,

#absolute {
   position: relative;
}

<section id="absolute">인 부모 요소를 기준(위치가 지정된 가장 가까운 조상 요소를 기준)으로

초록색 상자의 위치가 지정되어서

이렇게 된다는 거다. (margin까지 포함해서 밀려나기 때문에 왼쪽에서 110px, 위에서 110px 밀려나있는 것이다.)

margin 때문에 헷갈리니까,

저 초록색 상자를

#absolute #middle {
   position: absolute;
   top: 10px;
   left: 10px;
}

으로 옮기면 아래와 같이 초록색 상자의 margin의 맨 바깥 모서리까지의 간격이 section 박스 모서리에서부터 위에서 10px, 왼쪽에서 10px 밀려나있다는 걸 확인할 수 있다.

영상 찍고나서야 알았는데 margin이 표시되는 뒤쪽에서 왼쪽을 보면 빨간색 화살표의 길이를 적어둔 부분이 잘려나가서 화면에 보이지 않는다.... 아래에 표시된 간격처럼 10px이다...ㅠㅠ

fixed

<!DOCTYPE html>
   <html lang="en">
      <head>
  <meta charset="UTF-8">
  <title>Position</title>
      </head>
      <body>
         <h1>Position Property</h1>
         <section id="static">
            <h2>Static</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="relative">
            <h2>Relative</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="absolute">
            <h2>Absolute</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
         <section id="fixed">
            <h2>Fixed</h2>
            <div></div>
            <div id="middle"></div>
            <div></div>
         </section>
      </body>
   </html>

div {
   width: 100px;
   height: 100px;
   background-color: #3d405b;
   border: 2px solid black;
   margin: 10px;
   display: inline-block;
}

#middle {
   background-color: #81b29a;
}

#static #middle {
  position: static;
  top: 100px;
}

#relative #middle {
  position: relative;
  top: 100px;
}

#absolute #middle {
  position: absolute;
}

#fixed #middle {
  position: fixed;
}

위 코드의 CSS 마지막 부분을

#fixed #middle {
  position: fixed;
  top: 0;
  left: 0;
}

이렇게 고치게 된다면

Fixed에 있어야 할 초록색 상자가 의 맨 왼쪽 위로 이동해버린다.

또한, position: fixed;로 설정하게 되면

아무리 스크롤을 내려도 그 요소가 움직이지 않게 된다.

바로 아래 영상의 초록색 상자처럼.

sticky

이름처럼 스티커같이 끈적이는 성질을 나타내는 데 쓰인다.

absolute와는 달리 sticky는 문서의 흐름을 끊지 않는다. (= 자기 자리 제대로 차지하고 있다.)

스크롤을 내리면

상자의 원래 위치가 화면을 벗어나기 전에는 상자도 스크롤을 따라 화면 위로 이동하다가,

화면 밖을 벗어나게 되면 마치 fixed된 것처럼 그 자리에 못박힌 듯 멈춰있게 된다.

선생님이 강의에서 보여주신 예제 그대로 JSFiddle에 타이핑해서 만들었는데,

sticky 속성값은 위의 absolute처럼 보라색으로 바뀌지 않고 인식이 안 된다.

VSCode에서 비슷하게 입력한 모습. sticky가 인식되는 듯했지만, 웹 문서로 열어보니 기능하지 않았다.

왤까... 왜 그럴까.... 타이핑 실수는 아닌데.....

MDN에서 살펴봐도 Chrome 브라우저에서 보고된 오류는 없다고 하는데...

내 컴퓨터만의 문제인 것인가 무엇인가😤

일단 이거는 차차 풀어가기로 하고

MDN에 아름다운(?) 예제가 있으니 그걸로 대체하는걸로...

저작자표시 비영리 변경금지

'프밍 > CSS' 카테고리의 다른 글

Section 9. 유용한 CSS 속성들(2) (2)	2023.01.22
DAY 32. 그리드 레이아웃(Grid Layout) (0)	2023.01.19
DAY 31. 미디어 쿼리(media queries) (0)	2023.01.16
Section 8. CSS 박스 모델(2) (0)	2023.01.09
Section 8. CSS 박스 모델(1) (0)	2023.01.08

'프밍/CSS' Related Articles

Comments

개발 공부 기록하기

개발 공부 기록하기

Section 9. 유용한 CSS 속성들(1) 본문

Section 9. 유용한 CSS 속성들(1)

01. 불투명도와 알파 채널

알파 채널

불투명도opacity

02. 위치 속성

static ─ default 값

↓

relative

↓

absolute

↓

fixed

sticky

'프밍 > CSS' 카테고리의 다른 글

제목입니다

티스토리툴바