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

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

확장선택자와 함께 가상클래스 checked 실전 퍼블리싱 04(탭 콘텐츠 - Opacity)

작성

784

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

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

* display: none;

*visibility: hidden;

* opacity: 0;

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

답변 6

지식공유자

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

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

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

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

질문자

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

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

질문자

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

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

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

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

지식공유자

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

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

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

지식공유자

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

질문자

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

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

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

인프런 커뮤니티 질문&답변