FRONT-END/CSS (3) 썸네일형 리스트형 선택자 총정리 이제 막 웹 제작을 배우는 입장에서 원하는 위치에 요소가 오지 않을 때 점검해보면 다음과 같았다. 1. width, height값이 잘못됨 2. position이 부모와의 관계를 고려하지 않음 3. 선택자를 잘못 지정 여러 웹들을 참고해서 만들다보니 내가 쓰는 선택자들임에도 네이밍이 일관적이지 않고, 가독성이 떨어져서 선택자에 대한 정리를 찾아보다가 너무 유용한 동영상을 발견했다. 웹디자인&퍼블리셔를 위한 선택자 총정리 요즘 공부하면서 계속해서 느끼는데, 양질의 컨텐츠가 무료로 정말 많이 풀려 있는데 비교적 진입장벽이 있는 분야다보니까(?) 컨텐츠 퀄리티에 비해 조회수나 구독수가 몇 안돼서 매번 놀라고 있다. 여튼 이런 자료 공유해주시는 분들 정말 고맙다. 유형 선택자(Type Selector) 태그에 .. Web 구현 중 기능 정리 Position 01 static 기본값으로 element가 원래 있어야할 위치 02 relative 부모 element와의 관계가 포인트 부모와의 관계를 기준으로 static 위치가 정해지면, left | right | top | bottom을 지정할 때 이동 03 absolute 부모 element와의 관계성이 부분 단절 width를 지정하지 않으면 자신의 content 크기만큼 크기 지정됨 offset을 지정하지 않으면 부모 아래 위치 why? 기본값으로 left, top값이 부모 offset만큼 설정되어 있기 때문 부모 element들 자식 element의 position:absolute position: static 부모와 완전 무관, HTML의 시작점(0,0)을 기준으로 시작 top, left.. CSS 스타일 기초 CSS 선언의 적용 순서 1) 중요도 결정은 중요성으로 결정하며 1단계가 최우선으로 적용됨 1단계 사용자 스타일 시트가 최우선 ( ex. 저시력자, 색약자 개인 고대비 설정) --> 2단계 제작자가 만든 스타일 중 !important가 붙은 스타일 ----> 3단계 제작자가 만든 일반 스타일 -------> 4단계 기본적인 브라우저 스타일 시트 하나의 요소에 여러 스타일이 적용될 경우 어떤 스타일로 만들어지나? cf. 범위로 볼 때는 id < class < 태그로 태그(p, ...)가 가장 크다. 2) 적용 범위 1위 인라인 스타일 - 특정 위치만 스타일 적용, 태그 안에 스타일 적용 2위 id스타일 - #기호 3위 class 스타일 - . 기호 4위 태그 스타일 더보기 Who am I? .. 이전 1 다음
