인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

yle09115305's profile image
yle09115305

asked

HTML+CSS+JS Portfolio Practical Publishing (Season 1)

Practical Publishing 04 (Tab Content - Opacity) with Extended Selectors & :checked Pseudo-class

요소를 안보이게하는 3가지 방법의 차이 궁금합니다

Written on

·

847

2

강의에 나오는 내용을 알고싶습니다 쌤ㅠㅠ

혹시 어디 파트에 나오는지 [필수이론] 목록의 이름만 이라도 혹시 알려주실 수 있으실까요..? (쌤이 이 댓글을 못보시면 다른 보신분 계시면 가르쳐 주시면 감사합니다ㅠㅠ)

* display: none;

*visibility: hidden;

* opacity: 0;

요 셋의 차이점을 확실하게 알고싶습니다ㅠㅠ

HTML/CSSjquery

Answer 6

6

codingworks님의 프로필 이미지
codingworks
Instructor

맞습니다. 하지만 좀 더 정확이 말씀드리면...

display: none;   →   눈에도 안보이고 존재도 없고 크기(공간)도 모두 없음.(전혀 존재하지 않음)

opacity: 0;   →   눈에 안보일 뿐 존재와 크기(공간)가 모두 있음.

visibility: hidden;    →   눈에 안보이고 존재도 없지만 최초에 가지고 있던 크기(공간)는 유지하고 있음.

3

yle09115305님의 프로필 이미지
yle09115305
Questioner

visibility: inherit; (기본속성) 부모요소의 값을 상속.

처음알게 되었습니다ㅠㅠ 감사합니다~!

2

yle09115305님의 프로필 이미지
yle09115305
Questioner

혹시나 궁금해서 들다보실 분들을 위해 요약본:

공간은 유지되나, 내용물들은 안보임 => visibility: hidden;   opacity: 0;(오퍼써티는 투명도를 말하는거임)

공간도 유지안됨, 내용물들 안보임 => display: none;

이 내용을 봐도 모르면(이미지메이킹 안되시면) 꼭 쌤이 올려놓으신 유튜브 보셔야합니다. 필수입니다

2

codingworks님의 프로필 이미지
codingworks
Instructor

안녕하세요. 코딩웍스입니다.

요소를 안보이게 하는 3가지 방법은 글에 잘 적어주셨어요..
필수 핵심 이론에 이 항목이 없네요. 대신 코딩웍스 유튜브 채널에 원하시는 학습내용 영상이 있으니 보시면 도움이 되실거에요.
영상 주소는 아래에 링크해놓을게요.^^

요소를 안보이게 하는 3가지 방법 : https://youtu.be/nzWldG_uYbs

1

codingworks님의 프로필 이미지
codingworks
Instructor

과찬이십니다. 부끄럽습니다.ㅜㅜ
또 궁금하신 내용 있으시면 질문글 올려주세요.
화이팅~^^

1

yle09115305님의 프로필 이미지
yle09115305
Questioner

기본기만 띄고 쌤 강의 보면서 다시 웹사이트 만들어보는데, 이렇게 세세한걸 모르고 있었다는게 충격이였습니다

선생님께서 알려주시는 팁이나 이런 입안에 떠먹여 주시는 양질의 정보들 너무너무 감사합니다.

덕분에 좋은 내용 알차게 배워갑니다ㅠㅠㅠㅠ 

yle09115305's profile image
yle09115305

asked

Ask a question