element{ visibility : hidden } element{ display : none } display : none 과 visibility : hidden 은 사용자의 화면에 보이지 않게 해준다는 공통점이 있다. 그렇다면 어떤 차이점이 있을까? display : none은 해당 요소가 페이지에서 완전히 제거되고 레이아웃에 영향을 주지 않는다.(스크린 리더도 해당 요소를 읽을 수 없다.) visibility : hidden은 해당 요소를 화면에 보이지 않게 하지만, 레이아웃에 그대로 남아있어 빈 상자로 렌더링 된다. See the Pen Untitled by DJ Shin (@DJ-Shin) on CodePen. "display : none" 또는 "visibility : hidden" 을 하..
박스의 종류는 줄 바꿈이 되는 박스와 줄 바꿈이 없이 옆으로 붙는 박스로 구분할 수 있다. 줄 바꿈이 되는 박스는 block 박스, 줄 바꿈이 일어나지 않고 크기 지정을 할 수 없는 박스는 inline 박스이라고 부른다. 그리고 이 두 가지 박스 종류의 특징이 섞인, 줄 바꿈이 일어나지 않는 동시에 block 박스의 특징을 가지는 inline-block 박스도 있다. 🤔 block - block 특성을 가지는 요소의 특징 항상 새로운 라인에서 시작한다. 화면 크기 전체의 가로폭을 차지한다.(width:100%) width, height, margin, padding 프로퍼티 지정이 가능하다. block 레벨 요소 내에 inline 레벨 요소를 포함할 수 있다. - block 레벨 요소 예 div h1 ~..
CSS는 웹 사이트 사용자가 HTML 문서에 작성된 콘텐츠를 잘 이해할 수 있도록 돕는 역하을 한다. 개발자는 이 CSS로 웹 애플리케이션에 접근 할 수 있는 사용자 인터페이스(user interface)부터 만들게 된다. 사용자 인터페이스(UI; user interface) 인터페이스는 컴퓨터와 교류하기 위한 연결고리이다. 버튼도 없고, 마우스도 없던 시대의 개발자는 자신이 만든 애플리케이션과 소통하기 위해서 CLI를 사용했다. 키보드로 작성한 비밀 암호같은 코드를 적어서 엔터를 눌러야만 애플리케이션을 작동시킬 수 있었다. 우리가 지금처럼 키보드와 마우스를 사용해서 컴퓨터를 사용하는 것은 잘 만들어진 인터페이스 덕분이다. 이렇게 컴퓨터에 무지한 일반 사용자가 쉽게 사용할 수 있는 인터페이스에는 앞에 "..
