1. plate 2. bento 3. #fancy 4. plate apple 5. #fancy pickle 6. .small 7. orange.small 8. bento orange.small 9. plate, bento 10. * 11. plate * 12. plate + apple // 바로 뒤에 오는 모든 B 요소를 선택 13. bento ~ pickle // 뒤에 오는 요소의 모든 형제를 선택 14. plate > apple // A > B는 직계 자식 A인 모든 B를 선택합니다. 15. plate :first-child // 첫 번째 자식 요소를 선택 16. plate :only-child // 다른 요소 내부의 유일한 요소인 요소를 선택 17. .small:last-child // 다른 요소 내부의 마지막 자식 요소인 요소를 선택 18. :nth-child(3) // 다른 요소에서 n번째(예: 1번째, 3번째, 12번째 등) 자식 요소를 선택 19. bento:nth-last-child(3) // 뒤에서 세어 다른 요소의 순서에 따라 요소 선택 20. apple:first-of-type 21. plate:nth-of-type(even) 22. plate:nth-of-type(2n+3) 23. apple:only-of-type // 해당 유형의 유일한 요소 24. .small:last-of-type 25. bento:empty 26. apple:not(.small) // :not(X), "X"와 일치하지 않는 모든 요소 27. [for] 28. plate[for] 29. [for="Vitaly"] 30. [for^="Sa"] 31. [for$="to"] 32. [for*="obb"]
엘리님 강의 진심으로 고맙게 잘 보고 있습니다~ 많은 도움이 됩니다 ㅎㅎㅎ 혹시 ... 강의 하실때 사용하시는 자료화면? ppt ? 라고 해야하나요? 교안 이라고 해야하나요 ? ㅎㅎ 그것을 다운받을 수 있을까요? 공부하면서 자료에 직접 쓰면서 하면 오래 기억에 남을 것 같아서요 ~ ㅎㅎㅎ 좋은 하루되세요 ^^ 꾸벅
역시 Cascading Style Sheet부터는 입체적, 구조적 사고가 필요합니다. The Sixth Sense of CSS: Universal * Type li ID #special li#special Class .red State button:hover Attribute a[href$=".com"] Speedy한 진행 좋습니다. 1.25배속으로 듣고 따라치니 딴 생각할 틈이 없군요. CSS Dinner 이 귀중한 것을 소개시켜주다니...덕분에 CSS 전문가 되게 생겼습니다.
id (#) 는 unique selector 입니다. 화면 기준으로 딱 한번만 사용 가능합니다. 명세서 상 한번만 사용 가능한 녀석이고, 브라우저에서 잘 구현된다고 해서 써도 되는 건 아닙니다. 아이디, 클래스 네임 앞에 숫자도 못 오고요. (이건 브라우저가 구현도 안해줍니다.)
게임 꼭 해보세요 👍
CSS Dinner: flukeout.github.io/
혹시 문제에 답도 알 수 있나요?? ㅠㅠ
처음이라 게임 다 푸는데 2시간 정도 걸렸습니다. 이해하는데 굉장히 도움되네요
ㅠㅠ 저는 왜 게임이 안열릴까요 페이지를 찾을 수 없다고 나오네요! ㅠㅠ
해설이 필요할 것 같습니다.ㅋㅋㅋㅋ 중반부턴 답이 이해가 안되네요 ㅋㅋ
나만 힘들어하는줄 알았자너..
1. plate
2. bento
3. #fancy
4. plate apple
5. #fancy pickle
6. .small
7. orange.small
8. bento orange.small
9. plate, bento
10. *
11. plate *
12. plate + apple // 바로 뒤에 오는 모든 B 요소를 선택
13. bento ~ pickle // 뒤에 오는 요소의 모든 형제를 선택
14. plate > apple // A > B는 직계 자식 A인 모든 B를 선택합니다.
15. plate :first-child // 첫 번째 자식 요소를 선택
16. plate :only-child // 다른 요소 내부의 유일한 요소인 요소를 선택
17. .small:last-child // 다른 요소 내부의 마지막 자식 요소인 요소를 선택
18. :nth-child(3) // 다른 요소에서 n번째(예: 1번째, 3번째, 12번째 등) 자식 요소를 선택
19. bento:nth-last-child(3) // 뒤에서 세어 다른 요소의 순서에 따라 요소 선택
20. apple:first-of-type
21. plate:nth-of-type(even)
22. plate:nth-of-type(2n+3)
23. apple:only-of-type // 해당 유형의 유일한 요소
24. .small:last-of-type
25. bento:empty
26. apple:not(.small) // :not(X), "X"와 일치하지 않는 모든 요소
27. [for]
28. plate[for]
29. [for="Vitaly"]
30. [for^="Sa"]
31. [for$="to"]
32. [for*="obb"]
다 함께 출석체크~
2년이 지난 지금도 듣고 있는 사람이 있습니다.
그게 바로 저에요!
정말 양질의 지식을 멋지게 편집해 올려주셔서 너무 감사합니다.
우와 우연히 발견하게 됐는데 생활코딩 이후로 레전드 강의네요 공부 열심히 할게요 너무 감사합니다!
레전드 강의라니, 정말 감사합니다 ❤️
실습1 6:00 l 6가지 선택자 연습
실습2 11:20 l 픽셀 조절 연습
실습3:: 15:00 l 32개 문제로 익히는 선택자 연습 게임
Cascading을 이렇게 쉽게 풀어 설명해주시다니ㅠㅠ 애매하게 이해하고 있었는데 이제서야 제대로 이해한 느낌이에요! 어떻게 이렇게 1초도 낭비없이 중요한 것만 쏙쏙 알려주시는지 너무 행복해요ㅠㅠㅠ 감사합니다!!
출첵~ 잘 듣고 있어요. 초보자는 아니지만 초보자들이 듣기에 너무 좋은 내용인것 같아요!
엘리님 강의 진심으로 고맙게 잘 보고 있습니다~ 많은 도움이 됩니다 ㅎㅎㅎ 혹시 ... 강의 하실때 사용하시는 자료화면? ppt ? 라고 해야하나요? 교안 이라고 해야하나요 ? ㅎㅎ 그것을 다운받을 수 있을까요? 공부하면서 자료에 직접 쓰면서 하면 오래 기억에 남을 것 같아서요 ~ ㅎㅎㅎ 좋은 하루되세요 ^^ 꾸벅
앗, 교안은 따로 공유해 드리지 않고 있어요 🙏🏼
들었어용 !! 아직 너무 손에 안 익지만 열심히 해봐야죠 !!
출석합니다~!
강의 진짜 너무좋은거같아요.. 여러 웹 영상을 봤는데 ㅇㅣ렇게 ㅅㅣ원하게 긁어주는 영상 첨임
출석체크요 ~ ㅎㅎ 도움이 많이 됩니다! 영상 순서를 제목에 같이 표시해주시면 더 좋을거같다는 작은 바람이 있습니다! 목록에서 선택하려니 섬네일 숫자가 작아 보기 어렵네요 ㅠㅠ
나중에 썸네일의 숫자를 키워볼께요 ❤️ 피드백 감사합니다
출첵합니다 복습만이 익숙함에 근접하는 길임을 다시 한번 깨닫는 순간입니다
복습과 게임을 통한 연습이 정말 중요합니다 ❤️
출석체크! 최근 영상들 보면서 목소리도 정말 좋으시고, 동기부여도 엄청 되서 클론코딩 해보려구 사전 영상들 보고 있습니다. Windows App 개발자라 웹개발 잘 모르는데, 드림코딩으루 취미겸 도전해보려구요! 앞으로도 잘 부탁드릴게요:)
저두 잘 부탁드려요 🙌
출석 체크 합니다 . 나이들어 하자니 장난이 아니네요. 그런데 재미있어요. 저는 새로운것을 하는제 좋습니다. 프론트개발자 입문을 듣고 있어요. 더 깊이들어가면 어찌할지 모르지만 동영상 감사해요.
출석체크!! 너무 좋은, 재밌는 강의 감사드려요. 다시 개발을 시작하고자 복습중인데 정말 최고의 강의입니다!!
CSS를 처음 만났어요.
미리 들은 HTML과의 관계에서 CSS에 대한 이해가 아주 좋았어요.
이 영상에 대한 이해를 높이기 위해서는 2~3회 정도 더 들어야 할 것 같아요.
새로 배워나가는 재미가 무척 좋습니다. 감사합니다.
박사님께서 제 소소한 강의를 들어주시다니 정말 영광입니다 🤗
css diner 게임 연습하기 좋게 되게 잘 만든거 같네요 ㅋㅋㅋ 이번 강의도 잘 들었습니다 !
그쵸? 몇번 해보면 정말 재밌고 손에도 익어서 좋은것 같아요 ❤️
누나 저 컴푸공학과 전공하고 있는 외국 사람인데 누나의 설명하는 방식이 마음의 너무 들었고 많은 도움은 되었습니다 감사합나다!!!!!!!
좋은 강의 감사합니다ㅎㅎ 질문이 있어요! attribute를 넣을 때 href 뒤에 있는 ^와 &는 시작과 끝을 의미하는 것 같은데 혹시 또 다른 속성도 있나요?
여기 한번 읽어 보시면 좋을 것 같아요 🙌
크롬 번역기 이용하셔두 되요: developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors#:~:text=Presence%20and%20value%20selectors,the%20value%20of%20the%20attribute.&text=Matches%20elements%20with%20an%20attr,the%20value%20in%20square%20brackets).
역시 Cascading Style Sheet부터는 입체적, 구조적 사고가 필요합니다.
The Sixth Sense of CSS:
Universal *
Type li
ID #special li#special
Class .red
State button:hover
Attribute a[href$=".com"]
Speedy한 진행 좋습니다. 1.25배속으로 듣고 따라치니 딴 생각할 틈이 없군요.
CSS Dinner 이 귀중한 것을 소개시켜주다니...덕분에 CSS 전문가 되게 생겼습니다.
> 덕분에 CSS 전문가 되게 생겼습니다.
영상마다 이렇게 출석체크 해주셔서 정말 감사합니다 🙌
열심히 하고 계시는거 같아서 정말 뿌듯해요 🤗 꼭 게임 다~ 해보셔야 해요~~~ 약속~!
출첵~~~~
CSS 1강 완료하였습니다.
드림코딩 강의 수강을 위해 얼른 다음강도 봐야겠어요~
자바스크립트는 어려워서 올려주신 강의 1개씩 보려고 노력하고 있습니다.
엘리 감사합니다:)
와, 응원할께요 :) 강의에서 만나요
html, css, javascript 예전에 한번씩 공부했다가 지금 다시 엘리 영상보면서 복습중이에요! 실습하는걸 번거로워해서 손에 잘 안익었었는데....ㅎ 강의 내용도 너무 좋고 마지막에 알려주신 게임도 너무 도움될거같아요ㅠㅠㅠ 감사합니다♥♥♥♥
CSS 첫 강좌! 수강 완료입니다~~ 감사합니다^^
업로드 1년 후에 영상 정주행하고 있습니다. 좋은 강의 감사드립니다. 즐거운 명절 보내세요.
n차 반복 중입니다 비전공자가 프론트엔드 개발자가 되는 그날까지....너무 설명 잘해주셔서 감사합니다ㅜㅜ
오늘 강의도 잘 들었습니다. 감사합니다.
아직까지도 정말정말 잘 듣고 있습니다!!
출첵이요!! 빨리 다 듣고 강의도 들을게요
출석 완료! 차근차근 다 시청할게요!!
이번 강의도 잘 듣고 다음 강의로 넘어갑니다.
마지막에 선물로 주신 거 정말 도움되네요!
선물 괜찮쥬~?🎁 한번씩 까먹을때쯤에 다시 해보면 더 좋아요 하하
엘리쌤은 사랑이야.. 진짜 들을수록 최고예요
출석 체크 ! CSS 강의 잘 들었습니다. 엘리님의 다양한 양질의 영상들을 잘 보고 있습니다!!
앨리님 늘 감사히 잘 듣고 있습니다
포트폴리오 강의 보기 전에 출석체크 완료입니다 :)
padding과 margin 개념이 쏙 잡혔어요!! 감사합니다
부트캠프로 코딩 처음 입문한 코린이에요 자가학습이 부트캠프의 컨셉이다보니 여기저기 구글링하며 공부중인데, 드림코딩 발견하고 감동의 눙물이.... 흑흑... 감사함미다
coder writer 가 아닌 author..
책임감있게 구조적이고 읽기 좋은 글의 저자가 되어야겠네요!
와 영상감사합니다. 머리에 쏙쏙 들어옵니다. ^^ 드림코딩 보다가 타고 들어왔어요~
엘리님 영상으로 css 복습 중에 있습니다. 감사합니다.
컴공 학부생입니다! 제대로 이해하고 갑니다 감사합니다!
이번 강의도 잘 들었습니다. 감사합니다.
출석체크 !!
정말 초보자인 저도 열심히 따라가고 있습니다!! 늘 만들어주시는 감사하게 보고 있습니다!! 감사합니다!!
출석완료! 게임완료!! 자신감충전!! 소중한 강의 감사합니다.
I rocked at CSS!! 감사합니다!
아주아주 도움 많이 받았습니다~
감사합니다
밤새서 동영상 완강하고 당장 하나 만들어 보겠습니다. ~ㅎㅎ
학원다니면서 개념정리가 잘 안되어 계속 고생이였는데 바로해결했습니다 감사해요!
출첵
감사합니다 엘리
출첵이요!! 포기했다가 다시 공부중입니다. 엘리님 영상 도움 많이됩니다. 갑사합니다 이번에는 포기하지않고 열심히 할게용
출첵이요~ 감사합니다 엘리님!
출첵이요~ 좋은 강의 감사드립니다.~ 숙제할께요~
오늘은 css로 넘어왔네요 ^^ 게임도 재미있게 해보겠습니다
우와, 그냥 보시지 않고 이렇게 보신 영상마다 코멘트를 남겨 주시니 정말 감사합니다 ❤️ 빠르크님은 영상 편집도 정말 잘하시는데 이제 프론트엔드까지 마스터하러 오신건가요 🙌
정말 다재다능하세요~
출석합니다. 선물해주신 게임도 전부다 해봤네요 좋은강의 감사합니다!
출첵이요. vscode extension보다가 강의 내용이 좋은것 같아서 html부터 듣는 중이에요. 꾸준한 업로드 부탁드립니다!
감사합니다 ❤️
포트폴리오 만드는 영상 일단 결제하고 베이직 듣고 있어요! 너무 쉽고 재밌어요 ㅎㅎ!!
포폴 만들어보려고 js먼저 듣고 html 그리고 css순으로 듣고 있습니다.
감사합니다!
출석체크! 감사합니다 최고에요
오웃 출책 해주셔서 감사합니다 :) 실전편에서 기다리고 있을께요 🤗
선물 감사합니다! 오늘도 엘리쌤의 명강의 듣고 이해가 쏙쏙되었습니다. 얼른 다 보고 드림코딩아카데미에서 뵙고싶어요ㅎㅎ
앞에것도 다 강의 듣고 여기까지 듣고있습니다 ! CSS게임 한판하고 다음강의로 넘어가도록 하겠습니다. 좋은강의 감사드립니다.
감사합니다 🙆♀️
일도하시면서도 이렇게 성의있는 강의, 댓글 너무 감사합니다. ㅠㅠ영상콘티짜고 영상편집 하시고 너무 지치진 않으실까 걱정되네요! 늘 감사합니다.
어머 이렇게 사려깊은 구독자님이 계시다니! 따뜻한 코멘트 정말 정말 감사합니다 ❤️
뚝딱뚝딱 손에 눈에 완전 익을때까지 복습~
정주행하고 있어요 ~~~
하하 정말 정주행 하고 계시네요 🤗
출석체크 합니다~~~ 강의 감사합니다.
정말 좋은 강의입니다 . 이정도의 강의를 유튜브에 올려주신다니 감사합니다.
3강 강의 완료요 :)
한번에 정말 많이 들으셨네요 :)
출첵합니다!
출책 확인 😊
엘리 선생님 정말 감사합니다~!!!
오늘 강의 잘 봤습니다.
보석같은 강의 감사드립니다 ^^
완강했어요~열심히 연습해볼게요 ㅎㅎㅎ
와 주말동안 HTML 다~ 끝내시고 CSS로 오셨네요 🤗
열심히 해주셔서 감사합니다 🙌
즐겁고 재밌습니다. 감사합니다.
출석체크!
목소리가 정말 아름다우세요!ㅎㅎ
게임도 영화도 미드도 아닌데, 이렇게 집중해서 듣기는 처음입니다!ㅎㅎㅎ
듣다보면 저도 모르게 빠져들게 되고, 빠져들다보면 저도 모르게 CSS를 배우게 되는 엘리님의 마법의 강의네요 :)
감사합니다 다른 강의를 듣고 부족한거 같아 또 다른강의를 찾던도중 보고있는데 정말 도움이 많이됩니다. 앞으로도 좋은영상 부탁드릴게요!
이렇게 코멘트 남겨 주셔서 정말 감사하고, 도움이 된다니 정말 기분이 좋네요 ❤️
앞으로 잘 부탁드려요~
좋은글 많이 올려주셔서 너무감사합니다! 팬입니다!!^^
귀에 쏙쏙 들어오네요! 감사합니다.
드림코딩님 클론코딩 들으려고 준비차 css 들었습니다 ~~!
css diner 게임 완료! 넘나 귀여운 css 연습 게임이네요>< 감사합니다!
재밌죠?ㅋㅋㅋ
너무 깔끔한 강의 잘 보고있습니다
오늘도 출석체크요!!! 강의 bb
CSS로 금방 넘어 오셨네요 🤗
드림코딩 by 엘리 잘 알려주셔서 그래용!
출책완료했습니다! 엘리쌤 감사합니다!!
이번 영상도 너무 너무 좋네요! 감사합니다!
출첵이요!
안녕하세요 !!! 엘리님 오늘도 출석완료 했습니다!! 너무 좋아요!!
선생님 ㅠㅠ 11:35 부분에 제가 잘 따라한다고 생각하며 하고있었는데 이걸 켜보니까 100 x 100이 뜨는게아니라 1168x969 이런식으로 광범위하게만 잡히네요ㅠㅠㅠ 제가 어느부분을 못따라한걸까요ㅠㅠ
오타 없는지 확인해 보시구 그래도 이상하면 코드를 남겨 주시면 확인해 드릴께요 🙌
선물 감사합니다 !! 재밌게 잘 풀었어요ㅎㅎ 강의에 막 효과음도 나오고 너무 재밌어요~~
id (#) 는 unique selector 입니다. 화면 기준으로 딱 한번만 사용 가능합니다. 명세서 상 한번만 사용 가능한 녀석이고, 브라우저에서 잘 구현된다고 해서 써도 되는 건 아닙니다. 아이디, 클래스 네임 앞에 숫자도 못 오고요. (이건 브라우저가 구현도 안해줍니다.)
숙제 너무 좋아요
출석체크완료! 좋은 강의 항상 감사합니다!
출석햇습니당!! 화이팅하세엽!
화이팅! ❤️
강의 잘 들었어요! 심심할 때 게임하면서 기초 다져야겠어요 ㅎㅎ 실전영상 꿀팁 기대할게요!
언제나 코멘트 고마워요~ 🙌
어려운 줄 알고 포기했었는데 설명을 너무 잘 해 주셔서 이해가 잘 되네요
감사합니다 🙆♀️
내용 정리의 신... 드림코딩 선생님 감사드립니다!
출첵!! 게임까지 마무리 했습니다 :)
나중에 꼭 볼 영상
하하 지금은 안보시나요? 🤣 코멘트 감사합니다 :)
출석체크!~ 오늘은 여기까지 . 선생님. 좋은 강의 올려주셔서 너무감사해요. 잘보고 있습니다.
출석체크합니다! 내일 한 번더 와서 복습하러 올게요~!
열심히 해주셔서 감사합니다 🤗
마지막 게임까지 너무 완벽한 영상이네요 감사합니다
우와 진짜 너무 머릿속에 쏙쏙 들어와요!!!
아 다행이예요 ❤️ 코멘트 남겨 주셔서 정말 감사합니다