├── .DS_Store
├── 1st
    └── README.md
└── 2nd
    ├── .DS_Store
    ├── README.md
    └── src
        ├── index.html
        └── style.css


/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techhtml/css-study-2022/f75eac9d71f7c1970185c170e2de314f2d6a4a62/.DS_Store


--------------------------------------------------------------------------------
/1st/README.md:
--------------------------------------------------------------------------------
  1 | # CSS란?
  2 | - CSS (Cascading Style Sheet)
  3 | - 엑셀 (Spread Sheet), 구글 시트 (Google Sheet)
  4 | - Sheet > 데이터가 나열된, 열거된 공간
  5 | - Style Sheet > 스타일이 나열된 공간
  6 | - 논리적인 결과물을 만들어낼 수 있는 것 X
  7 | - Cascading > 폭포
  8 | - Cascading 이라는 특성을 지닌 스타일 시트 (= CSS)
  9 | 
 10 | - CSS 1.0 > 2.1 > 2.2 > 3.0 > 4.0
 11 | - CSS Version은 그렇게 의미가 있지는 X
 12 | - 특정한 스타일에 대한 표준이 만들어지고, 그 표준을 관리
 13 | - CSS Grid Layout (모듈 단위로 관리)
 14 | 
 15 | ## 셀렉터 101 (선택자)
 16 | - CSS는 스타일의 나열
 17 | - 스타일을 어디에 적용할 지?
 18 | - > 셀렉터 (Selector)
 19 | 
 20 | ```html
 21 | <article>
 22 |   <h1>CSS 스터디</h1>
 23 |   <p>이 스터디는 CSS를 배우는 스터디입니다.</p>
 24 |   <div>
 25 |     <!-- DIV 요소의 자식 요소: P -->
 26 |     <!-- ARTICLE 요소의 자손 요소: P -->
 27 |     <p>DIV 요소 안에 들어가 있는 P 요소</p>
 28 |   </div>
 29 | </article>
 30 | ```
 31 | 
 32 | - article 요소에 스타일, h1 요소에 스타일
 33 | 
 34 | ```css
 35 | /* 요소 셀렉터 */
 36 | /* 요소 이름을 작성하면 끝 */
 37 | article {}
 38 | h1 {}
 39 | p {}
 40 | div {}
 41 | ```
 42 | 장점 겸 단점
 43 | - 해당 이름의 요소에는 모두 스타일이 적용
 44 | - 요소 이름을 바꾸면 적용 X
 45 | 
 46 | ```css
 47 | /* 클래스 셀렉터 */
 48 | /* 특정한 클래스명을 가진 요소에 스타일을 부여 */
 49 | /* 숫자나 특수문자로 시작하면 X */
 50 | /* 클래스명은 기본적으로 중복이 가능 */
 51 | .box {}
 52 | .area {}
 53 | .wrapper {}
 54 | .container {}
 55 | .header {}
 56 | .footer {}
 57 | ```
 58 | 
 59 | ```html
 60 | <!-- Box 스타일 -->
 61 | <div class="box">
 62 |   <h1>안녕하세요</h1>
 63 | </div>
 64 | <!-- Box 스타일 + Area 스타일 -->
 65 | <div class="box area">
 66 |   <h1>안녕하세요</h1>
 67 | </div>
 68 | <!-- Box 스타일 + Area 스타일 + Container 스타일 -->
 69 | <div class="box area container">
 70 |   <h1>안녕하세요</h1>
 71 |   <div>
 72 |     <h1>안녕하세요</h1>
 73 |   </div>
 74 | </div>
 75 | ```
 76 | 
 77 | ## 콤비네이터 101 (결합자)
 78 | - Selector 만으로 못하는 것들
 79 | - 특정한 조건에 충족했을 때에만, 자식 요소나 형제 요소를 제어하고 싶을 때
 80 | - > Combinator
 81 | 
 82 | ```css
 83 | /* 특정한 요소의 자손 요소에 스타일을 주고싶은 경우 */
 84 | /* 자손 콤비네이터 */
 85 | /* 공백 문자 */
 86 | /* {조상 요소} {자손 요소} */
 87 | /* 자식 요소에 관계 없이, 자손 요소 중 해당 요소가 있다면 적용 */
 88 | div h1 {}
 89 | div p {}
 90 | .box h1 {}
 91 | .area h1 {}
 92 | .area .title {}
 93 | ```
 94 | 
 95 | ```html
 96 | <ul class="main-menu">
 97 |   <li>
 98 |     메인 메뉴
 99 |     <ul class="sub-menu">
100 |       <li>펼쳐지는 서브 메뉴</li>
101 |       <li>펼쳐지는 서브 메뉴</li>
102 |     </ul>
103 |   </li>
104 | <ul>
105 | ```
106 | 
107 | ```css
108 | /* 특정한 요소의 자식 요소에 스타일을 주고싶은 경우 */
109 | /* 자식 콤비네이터 */
110 | /* > */
111 | /* {부모 요소} > {자식 요소} */
112 | .main-menu {}
113 | .main-menu > li {}
114 | .sub-menu {}
115 | .sub-menu > li {}
116 | ```
117 | 
118 | ```html
119 | <article>
120 |   <h1>제목</h1>
121 |   <p>설명</p>
122 |   <h2>제목 2</h2>
123 |   <p>설명</p>
124 | </article>
125 | <ul>
126 |   <li>리스트 아이템</li>
127 |   <li>리스트 아이템</li>
128 |   <li>리스트 아이템</li>
129 |   <li>리스트 아이템</li>
130 | </ul>
131 | ```
132 | ```css
133 | /* 특정한 요소의 형제 요소에 스타일 주고싶은 경우 */
134 | /* 첫째는 형제를 몰라요 */
135 | /* 형제 콤비네이터 */
136 | /* ~ */
137 | /* 특정한 요소의 형제이기만 하면 OK */
138 | /* h1 요소의 형제 요소인 P 요소 전체에 스타일 주고 싶어 */
139 | h1 ~ p {}
140 | 
141 | /* 인접 형제 콤비네이터 */
142 | /* + */
143 | /* 특정한 요소의 형제인데, 해당 요소에 바로 붙어있는 형제 요소 */
144 | /* h1 요소에 바로 붙어있는 형제 요소인 P 요소에게만 스타일을 주고 싶어 */
145 | h1 + p {}
146 | /* li 요소에 바로 붙어있는 형제 요소인 Li 요소에게만 스타일 */
147 | li + li { border-top: 1px solid #eee }
148 | ```
149 | 
150 | ```css
151 | /* 이렇게도 작성할 수 있다. */
152 | /* 이론상 조합에 제한 X */
153 | /* 복잡도가 높을 수록 관리 포인트가 많아지고 힘들어집니다. */
154 | /* 옛날에 17 중첩 */
155 | /* 4 중첩은 안넘어가는 게 좋은 거 같다.. */
156 | .box > div > h1 + p {}
157 | .box ~ .box > h1 {}
158 | 
159 | /* 셀렉터도 조합 */
160 | div.box {}
161 | .box.area {}
162 | .button.on {} /* variants */
163 | .button.off {} /* variants */
164 | ```
165 | 
166 | ## 가상 셀렉터, 가상 요소
167 | - 가상 (psuedo, 의사)
168 | - 코드상으로 개념적으로 존재하는 것들, 가상
169 | - 요소로 완전히 존재하는 건 아니지만, 개념적으로 존재하는 것들
170 | - 특정한 요소에 마우스를 올린 상태
171 | 
172 | ```css
173 | /* 마우스를 올린 상태, 요소에 관심을 준 상태 */
174 | /* 터치 스크린에서는 한번 클릭한 상태 */
175 | a:hover {}
176 | 
177 | /* 마우스를 클릭한 상태, 요소가 활성화된 상태 */
178 | a:active {}
179 | 
180 | /* 특정한 링크를 이미 사용한 상태, 이미 방문한 사이트 */
181 | a:visited {}
182 | 
183 | /* 특정한 요소에 포커스가 간 상태 */
184 | a:focus {}
185 | ```
186 | 
187 | - 가상 요소
188 | - 어떤 스타일을 넣기 위해서 요소를 추가해야하는 데, 이 요소가 의미론적으로는 필요는 없는데... 스타일을 위해 넣어야 돼.
189 | - 아이콘
190 | - 가상 요소를 사용하면, HTML이 존재하는 것처럼 가상으로 요소를 추가
191 | ```html
192 | <div>
193 |   <!-- ::before -->
194 |   <span class="text">텍스트</span>
195 |   <!-- ::after -->
196 | </div>
197 | ```
198 | 
199 | ```css
200 | /* ::before, ::after */
201 | /* 가상 요소 셀렉터는 모두 :: 를 사용 */
202 | /* content 속성이 필수값 */
203 | /* 별도로 display 속성을 지정하지 않았다면, text로 취급 */
204 | /* 복사 할 때 가상 요소 콘텐츠는 복사 범위 X */
205 | /* 스타일적으로는 필요하나, 의미론적으로는 필요 없을 때 */
206 | div {}
207 | div::before { content: '' } /* div 요소의 앞편 */
208 | div::after { content: '' } /* div 요소의 뒤편 */
209 | input::placeholder {}
210 | ```
211 | 
212 | ## 캐스케이딩
213 | ```html
214 | <!-- Blue -->
215 | <div class="box area">무슨 색이게?</div>
216 | ```
217 | 
218 | ```css
219 | .box {
220 |   color: red;
221 | }
222 | 
223 | .area {
224 |   color: blue;
225 | }
226 | ```
227 | - 스타일이 중복되거나, 여러 스타일을 한 요소에 적용했을 때 어떤 걸 적용할 지
228 | - 폭포
229 |   - 스타일이 어느 위치에 존재하는 지 
230 |     (같은 특정성이라면 뒤쪽에 존재하는 게 적용)
231 |   - 특정성이 높은 순서대로 적용
232 |     - 셀렉터 중 ID 셀렉터의 갯수를 셉니다 (= a)
233 |     - 셀렉터 중 클래스 셀렉터, 속성 셀렉터, 가상 클래스의 갯수를 셉니다 (= b)
234 |     - 셀렉터 중 요소 셀렉터와 가상 요소의 갯수를 셉니다 (= c)
235 |     - 전역 셀렉터는 무시합니다.
236 |     - { a b c }
237 |   - !important 키워드 (안 쓰는 게 좋으니까 있는 것만 알아두세요)
238 | ```css
239 | #box { color: red } /* a = 1, 특정성: 100 */
240 | .box { color: blue } /* b = 1, 특정성: 010 */
241 | .area {} /* b = 1, 특정성: 010 */
242 | .box .area {} /* b = 2, 특정성: 020 */
243 | .box.area.container {} /* b = 3, 특정성: 030 */
244 | div {} /* c = 1, 특정성: 001 */
245 | div.box {} /* b = 1, c = 1, 특정성: 011 */
246 | div[lang] {} /* 속성 셀렉터 */
247 | ```
248 | ## 상속
249 | - 상속
250 | - 부모에 적용된 스타일이 자손 요소까지 영향을 주는 경우
251 | - 다른 요소들에 특별히 CSS로 font-size를 지정하지 않으면, body의 font-size를 기본값으로 가져갑니다.
252 | - 컬러, 폰트, 타이포 같은것들은 대부분 자손 요소에 영향 O
253 | 
254 | ```css
255 | body {
256 |   font-size: 18px;
257 |   line-height: 22px;
258 |   color: #333;
259 | }
260 | 
261 | /* input 같은 요소는 자체적인 스타일 */
262 | /* inherit 이라는 속성 값을 지정해서 명시적 상속 */
263 | input, button {
264 |   font-size: inherit;
265 |   color: inherit;
266 | }
267 | ```
268 | 
269 | ## 스타일 적용법과 각 적용법별 장단점
270 | - 3가지 방법
271 | - 특정한 요소에 `style` 속성을 이용해서 `style` 부여하기
272 | - 장점: 딱 해당 요소에만 스타일이 들어감, 특정성에서 우선순위가 높게
273 | - 장점: 자바스크립트 등을 이용해서 요소별로 다르게 스타일을 줘야 되는 경우 `style` 속성을 사용해서 넣기
274 | - 단점: 그 외 모든 것 (확장성 저하)
275 | ```html
276 | <div style="color:red">Red</div>
277 | <div style="background-image:url(${url})">배경 이미지가 있는 박스</div>
278 | ```
279 | - `<style>` 요소를 사용해서, 해당 페이지에 스타일을 주는 방법
280 | - 리액트 같은 모던 웹 애플리케이션 개발에서 많이 쓰임
281 | - Styled Component 라는 걸 쓰시면 이 방식으로 동작
282 | - 장점: 페이지별로 필요한 스타일만 지정해서 사용
283 | - 장점: 자바스크립트로 제어하기가 수월 (CSSOM)
284 | - 단점: 공통 스타일을 관리하기에는 어려움
285 | - 단점: 페이지별로 들어가는 거라, 모든 페이지에 공용 X
286 | ```html
287 | <head>
288 |   <style>
289 |     .box {}
290 |     .area {}
291 |   </style>
292 | </head>
293 | ```
294 | - 외부 파일로 `css` 파일을 만듭니다.
295 | - `<link>` 요소를 사용하여 해당 CSS를 연결
296 | - 장점: 공통으로 쓰이는 스타일을 관리하기 쉽다.
297 | - 단점: 외부에 파일이 있기 때문에, HTTP 요청이 한 번 발생
298 | - 단점: CSS에 대한 이해도가 낮은 상태에서 공통 스타일을 만들면 지옥도가 펼쳐지기 쉽다. => 모든 상황에서 다 그렇긴 함.
299 | 
300 | ```html
301 | <head>
302 |   <link rel="stylesheet" href="style.css" />
303 | </head>
304 | ```
305 | 
306 | ## 다음 시간 맛보기 (레이아웃)
307 | 


--------------------------------------------------------------------------------
/2nd/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techhtml/css-study-2022/f75eac9d71f7c1970185c170e2de314f2d6a4a62/2nd/.DS_Store


--------------------------------------------------------------------------------
/2nd/README.md:
--------------------------------------------------------------------------------
  1 | # CSS 레이아웃
  2 | - 레이아웃은 뭘까?
  3 | - 어떠한 것들을 어떠한 위치에 배치 (Layout)
  4 | - 어떤 요소가 어떤 위치에 있을 것인 지
  5 | - Flex & Grid Layout
  6 | - Flex & Grid만 가지고도 대부분의 레이아웃은 구성 가능
  7 | - (전통적인 방식, IE를 기준) Float 레이아웃
  8 | - (특수한 레이아웃) table, ruby (다루지 X)
  9 | 
 10 | ## CSS Box Model
 11 | - 하나의 요소가 박스를 이루는 모델
 12 | - 모든 요소는 박스 형태를 취하고 있는데, 그 박스가 어떻게 생겼는 지를 나타내는 게
 13 | - Model 이라는 표현은, 여러가지 속성들이 합쳐진 개념
 14 | - 박스: 콘텐츠 박스 (특정한 요소가 본인의 콘텐츠를 담고있는 영역) / border-box (border를 포함한 박스)
 15 | - width, height
 16 | - 너비 (박스의 가로 사이즈), 높이 (박스의 세로 사이즈)
 17 | - 아무런 설정도 하지 않았을 때에는 콘텐츠 박스
 18 | - padding
 19 | - border에서부터 박스 내부의 여백
 20 | - border
 21 | - 박스의 외곽선
 22 | - margin
 23 | - 박스와 다른 박스 사이의 간격
 24 | - width, height, padding, border, margin
 25 | 
 26 | ### Box Model 심화 과정 (Inside Box)
 27 | - width, height, padding, border, margin
 28 | - 콘텐츠 박스 (= 콘텐츠 영역)
 29 | - 보더 박스 (= 보더를 포함한 영역, 박스의 영역)
 30 | 
 31 | #### 1. 박스를 계산하는 방식을 바꿀 수 있읍니다.
 32 | - box-sizing이라는 속성을 사용
 33 | - box-sizing: content-box (기본값)
 34 | - box-sizing: border-box (width, height 계산 방식이 border까지를 포함한 걸로 바뀌어요)
 35 | - box-sizing 장점: 박스 크기 계산이 용이해짐
 36 | - box-sizing 단점: 잘못 쓰면 어디서는 content-box고, 어디서는 border-box라서.... (눈물)
 37 | - 가급적이면 box-sizing을 쓰실거면 와일드카드 셀렉터 (*)을 사용해서 모든 요소에서 같은 box 계산 방식을 사용하는 걸 개인적으로 권장
 38 | - 유지 보수 하기 좋은 코드는 혼란을 주지 않는 코드
 39 | 
 40 | #### margin의 동작
 41 | - 박스와 박스 사이 간격
 42 | - margin도 normal flow인 경우에는 합쳐짐
 43 | - margin collapse 현상
 44 | - 1. normal flow인 형제 요소들끼리 
 45 |   - (의도해서 함)
 46 | - 2. normal flow인 부모 자식 요소들끼리 
 47 |   - (의도하지는 않았는데.... 어쩌다보니 들어간 경우)
 48 | - 만약 부모요소에 padding이 있으면 margin-collapse > 2번 케이스는 동작하지 X
 49 | 
 50 | #### overflow
 51 | - 박스 내에서 요소가 넘치는 경우 어떻게 할 것인가?
 52 | - `hidden`, `auto`
 53 | 
 54 | ## CSS Normal Flow
 55 | - 일반적으로 박스가 쌓이는 형태
 56 | - Block 형태, Inline 형태
 57 | - Block 형태 > 박스가 하나 하나 한 영역 전체를 차지하면서 위에서 아래로 쌓이는 구조 (Block > Normal Flow)
 58 | - 한 영역을 다 차지할 때 쓰는 속성 (margin)
 59 | - 대표적인 요소: `<div>`
 60 | - Inline 형태 > 텍스트로 취급이 되는 구조 (Normal Flow > 텍스트처럼 한 줄 내에서 다른 텍스트와 함께 보이는 것)
 61 | - 어떤 요소가 inline이고 어떤 요소가 block인지를 다 외워야하나요? (X)
 62 |   - 특정한 요소를 사용하신 뒤에 해당 요소가 박스 전체를 차지하는 거 같다 (=> 대부분의 경우 Block)
 63 |   - 특정한 요소를 사용한 뒤에 해당 요소가 텍스트처럼 취급되는 거 같다 (=> 대부분의 경우 inline)
 64 | - 만약에 레이아웃을 적용하여 레이아웃을 바꾸는 경우 > Normal Flow에 해당하지 않는다.
 65 | 
 66 | ## CSS Position
 67 | - 배치의 시작
 68 | - 어떠한 요소를 어떠한 위치 (= 좌표)에 배치하고 싶어
 69 | - 정확히 그 위치에 존재했으면 좋겠어.
 70 | - CSS Position을 쓴다 = 좌표 시스템을 쓴다.
 71 | - Q. 웹은 2차원일까요? 3차원일까요?
 72 | - A. 웹은 3차원입니다. (X축, Y축, Z축)
 73 | - A. 3차원이지만 우리가 보는 게 2차원일 뿐
 74 | 
 75 | ### Position 속성
 76 | - 기본값: `static` => 좌표 시스템을 사용하지 않겠다.
 77 | - `relative`
 78 |   - 나 자신을 기준으로 움직이겠다.
 79 |   - 박스 자체를 기준으로 하여 X, Y축을 이동
 80 |   - 이 세상의 주인은 나야.
 81 |   - 좌표 시스템은 다른 박스를 무시하는 경향
 82 |   - `relative` 잘 쓰여요.
 83 | - `absolute`
 84 |   - 자신을 기준으로 하였을 때, 조상 요소 중 가장 가까운 좌표 시스템을 쓰는 요소를 기준
 85 |   - 무조건 그 위치로 감
 86 |   - 좌표 시스템을 쓴다 = `position` 속성 값이 `static`이 아니다
 87 |   - 보통 `absolute` 속성값을 쓸 때는 해당 요소의 부모 요소나 조상 요소에 `position` 값을 `relative` 로 지정하여 사용
 88 |   - `absolute` 속성은 normal flow를 탈출
 89 |   - 얘가 어디있을 지 모르는데, 부모 요소가 이 요소의 크기를 알 수가 없다. (= 가출한 아이다)
 90 |   - `absolute` 쓰는 상황 > 아이콘이 특정 위치에 예쁘게 있어야 한다, 특정한 위치에 레이어를 띄워야 한다.
 91 |   - 어떻게 보면 flow를 무시하는 데 써도 되나요? (=정답: 당연히)
 92 | - `fixed`
 93 |   - 다 무시하고, 무조건 브라우저 기준으로 좌표를 고정
 94 |   - 으어엄청 자주 쓰여요
 95 | - `sticky` => 비교적 최신에 나온 속성값입니다.
 96 |   - 특정한 요소가 특정한 조건에 맞물렸을 때에만 fixed처럼 동작해줘
 97 | - 대부분의 경우 JS를 쓰는 게 느립니다. CSS로 할 수 있는 건 CSS로 하자
 98 | - CSS로도 할 수 있는데 JS로 하는 이유 => 우리 입맛에 맞춰서 바꾸고 싶을 때
 99 | 
100 | ### 좌표
101 | - X축 (`left`, `right`)
102 | - Y축 (`top`, `bottom`)
103 | - Z축 (`z-index`)
104 | - 팁: Z축 관리를 잘하십시오. 잘 못하면, 어떤 요소가 정신차려보면 어떤 요소의 위에 있어요.
105 | - Styled Component를 쓴다 > 따로 JS에서 상수로 관리
106 | - 그냥 CSS를 쓴다 > 문서로 관리를 해두시면 좋습니다.
107 | - 여러분들이 잘해도, 다른 개발자가 Z-INDEX 잘못 넣으면 모다? T_T
108 | - 특정성 로직
109 | - 일반적인 경우 > 5씩 추가
110 | - 큰 레이아웃인 경우 > 100씩
111 | - 진짜 이건 무조건 높아야 돼 > 10000씩
112 | 
113 | 


--------------------------------------------------------------------------------
/2nd/src/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ko">
 3 | <head>
 4 |   <meta charset="UTF-8">
 5 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Document</title>
 8 |   <style>
 9 |     h1 {
10 |       /* 콘텐츠 박스의 크기는 몇일까요? */
11 |       /* 100 x 100 */
12 |       /* 콘텐츠 박스를 강제로 지정해놓은 상태에서, 
13 |          콘텐츠가 콘텐츠 박스보다 길어지면 넘쳐요 */
14 |       /* 콘텐츠가 넘친 상황: overflow */
15 |       /* 콘텐츠가 넘치지 않은 상황: normal flow */
16 |       /* 우리가 얻을 수 있는 교훈 */
17 |       /* 1. 콘텐츠의 길이를 알 수 없다면 height 정하지 말자 */
18 |       /* 2. 만약 height를 영 고정해야한다면, overflow를 제어하자 */
19 |       /* overflow: auto; */
20 |       /* width도 간혹 넘친다... */
21 | 
22 |       /* 보더 박스의 크기는 몇일까요? */
23 |       /* 132 x 132 */
24 |       width: 100px;
25 |       height: 100px;
26 |       padding: 15px;
27 |       border: 1px solid #eee;
28 |       margin: 15px;
29 |     }
30 | 
31 |     .box {
32 |       padding: 15px;
33 |       border: 1px solid #eee;
34 |     }
35 | 
36 |     .absolute {
37 |       position: absolute;
38 |       background: royalblue;
39 |       right: 0;
40 |       bottom: 0;
41 |     }
42 | 
43 |     .fixed {
44 |       position: fixed;
45 |       background: crimson;
46 |       right: 0;
47 |       top: 0;
48 |     }
49 | 
50 |     .container {
51 |       background: #666;
52 |       /* 부모 요소에 padding을 주면 margin-collapse를 없앨 수 있음 */
53 |       padding: 0.1px;
54 |     }
55 | 
56 |     .sticky {
57 |       /* box-sizing: content-box */
58 |       /* 132 x 132 */
59 |       /* box-sizing: border-box */
60 |       /* 100 x 100 */
61 |       width: 100px;
62 |       height: 100px;
63 |       padding: 15px;
64 |       border: 1px solid #eee;
65 |       margin: 15px;
66 |     }
67 | 
68 |     /* 두 번째 요소부터 margin-top을 준다 */
69 |     .sticky + .sticky {
70 |     }
71 | 
72 |     * {
73 |       box-sizing: border-box;
74 |     }
75 |   </style>
76 | </head>
77 | <body>
78 |   <!-- <h1>
79 |     <div class="box">
80 |       <div class="box">
81 |         <div class="box fixed"></div>
82 |       </div>
83 |     </div>
84 |   </h1> -->
85 |   <!-- <p>내용 <strong>내용</strong> 내용 내용</p> -->
86 |   <div class="container">
87 |     <div class="sticky"></div>
88 |     <div class="sticky"></div>
89 |     <div class="sticky"></div>
90 |     <div class="sticky"></div>
91 |     <div class="sticky"></div>
92 |     <div class="sticky"></div>
93 |   </div>
94 | </body>
95 | </html>


--------------------------------------------------------------------------------
/2nd/src/style.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/techhtml/css-study-2022/f75eac9d71f7c1970185c170e2de314f2d6a4a62/2nd/src/style.css


--------------------------------------------------------------------------------