1.웹개발/CSS (4) 썸네일형 리스트형 CSS BASIC SELECTOR(선택자) https://hbsowo58.tistory.com/470?category=894677 HTML Basic Analysis HTML은 문서이며, 기본 양식이 존재합니다. Hello Wolrd 메모장에 최소한의 코딩만으로도 브라우저에 원하는 내용을 출력 가능합니다. 최소한의 문서 구조를 위해 IDE에 EMMET 명령어를 사용하겠습니 hbsowo58.tistory.com 상단의 글에서 이어서 작성합니다. CSS는 HTML에 디자인을 추가하는 목적입니다. 어떤 "HTML" element(요소)에 디자인을 입힐지 선택해야 하기 때문에 먼저 학습해야 될 내용은 selector "선택자"입니다. 특정 elements를 선택하지 않은 경우에도 "전체 선택자" 를사용해야 합니다. 위와 같은 코드가 작성되어 있을 것이며.. [CSS] pointer-events 사용으로 인한 클릭 이슈 그림과 같은 css구조가 있다고 가정하겠습니다. (이하 빨간색 box1, 주황색 box2) 형제 관계처럼 보이지만, box1을 기준으로 box2를 absoulte로 배치한 부모-자식 관계입니다. box1,2에게 클릭 이벤트가 있다고 가정할 때, 겹치는 부분(교집합)을 클릭하면 이벤트가 2개가 발생합니다. 방지하기 위해, box1에 pointer-events라는 속성을 사용하였습니다. (default auto) pointer-events:none; 문제는 box1과 box2가 부모-자식 관계였고, box2의 버튼도 클릭이 되지를 않는다는 것을 알게 되었습니다. 1. css상속을 생각하지 않았습니다. 2. 잘 모르는 것을 함부로 사용하면 안 된다는 점과, 3. 이벤트 계열은 되도록 스크립트단에서 해결을 하는.. [CSS] Float 정의 & Float 부작용 제거방법 CSS에서 Float 속성은 뜨다, 띄우다 라는 뜻이며, 출현은 이미지를 띄어서 텍스트와 보기 좋게 배치하기 위함이었습니다.였습니다. 면접 질문에서 Float 속성을 해제하는 방법에 대해서 질문받았는데요. 왜 물어보았을까요? 여러 가지 이유가 있다고 생각합니다. 주관적으로 우리 회사에는 float로 레이아웃을 배치한 코드가 있는데, 유지 보수할 수 있겠어요?로 해석하였습니다. float에 대한 이해도가 부족하면 유지 보수하는데 어려움을 겪거나 해결할 수 없겠죠? 원래 Float는 이미지를 띄우기 위함이었으나, 레이아웃을 잡는 데 사용으로 변화되었다고 합니다. 이로 인해 nomarl flow(마크업 흐름에 따라 위에서 아래로)에 변화가 생기게 되고 부모의 공간 등이 무시되는 현상 등이 발생하게 됩니다. 그.. [CSS] BOX-MODEL CSS는 HTML elements에 '디자인'을 입혀 화면에 display 하는 방법을 정의합니다. CSS 목적은 HTML을 디자인하기 위함입니다. CSS가 출몰하게 된 이유는 : 기존의 HTML 딱딱한 문서에서 줄 간격, 폰트 사이즈 등을 조절하여 가독성을 높이기, 태그들 사이에 차이를 부여해서 콘텐츠 간의 분별력을 높여 웹페이지의 가치를 높이는 역할을 합니다. 요약하자면 '구조'와 '표현'의 분리라고 생각합니다. CSS에 학습하면서 중요하다고 생각되는 부분은 크게 BOX-MODELING / POSITION + float에 대한 이해라고 생각합니다. (다른 내용들은 필요할 때 검색해서 사용하더라도 위에 2가지 + @는 이해가 필요) BOX-MODEING에 대해서 설명해보겠습니다. CSS는 HTML을 디.. 이전 1 다음
