repl html, css 12 ~
클래스와 아이디 들은 대소문자를 구분하며 문자로 시작해야 하며 영어, 숫자와 언더바(_), 대쉬(-)를 포함할 수 있다
클래스는 어떠한 수의 요소에도 적용할 수 있다
아이디는 하나의 요소에만 적용할 수 있다(클래스와 달리 중복이 되지 않는다)
패딩 마진 차이
패딩은 내용영역 ~ 테두리 사이 부분
마진은 테두리의 바깥쪽 부분
마진에 auto를 설정하면 중앙에 올 수 있다
td와 th의 차이
td와 th 모두 tr 태그 밑에서 내용적인 부분을 담당하는데
td는 table data로 단순히 내용만을 th는 table heading으로 bold에 가로정렬까지 된다
input textarea 의 공통점과 차이점
둘 다 내용을 입력받는다
position absolute position relative
position relative는 별도의 프로퍼티를 사용하지 않으면 아무런 변화가 없다
따라서 주로 부모 요소에 position relative을 주고 자식 요소에 position absolute를 주어서 부모 요소 영역 안에서 자식이 위치하게끔 만든다(가장 가까운 부모 요소에 따라 위치가 배치된다)
이때 position absolute는 절대적인 위치를 차지하므로 top, bottom, left, right 등을 사용하여 해당 부모요소로 부터 어느정도 떨어져서 위치할 것인가를 결정할 수 있다
position relative의 부모를 가진 자식 요소는 position absolute position relative 상관없이 부모의 위치에 따라 절대적인 값을 바꿀 수 있다
position fixed
position fixed는 브라우져 화면상에서 다른요소의 방해없이 절대적인 위치를 가진다(스크롤을 내린다고 해도 계속 화면상에 고정되어 있다)
display: none은 엘리먼트가 존재하지 않는것 처럼 보여준다
visibility: hidden 똑같이 존재하지 않는것 처럼 보여주나 공간은 차지하고 있다
div는 블록요소 라서 가로로 화면전체를 차지한다
이때 크기값을 주면 크기만큼 줄어들고 좌우 margin auto를 주면 가운데 정렬을 할 수 있다
브라우져 화면창이 엘리먼트 요소보다 작을 때 브라우져에서는 스크롤바가 생긴다
max-width를 사용하면 이 스크롤문제를 해결할 수 있다
??? position relative 밑의 position relative 궁금
미디어 쿼리 무슨 소리지?
column-count 값 만큼 객수로 column을 나눈다
column-gap 말 그대로 column 사이의 격차
css 레이아웃 너무 어렵다
인라인 요소의 padding과 margin
인라인 요소는 양 옆으로만 padding과 margin 값이 적용된다(padding top, padding bottom 등은 값이 적용이 안됨)
따라서 인라인 요소에 상하 margin, padding을 주려면 인라인-블럭 또는 블럭 요소로 display를 바꿔줘야 한다
인라인 요소는 a태그, span태그 등이 있다
li는 블록요소이다 따라서 한줄에 하나씩 밖에 못 위치시킨다
li를 가로로 옹기종기 위치시키고 싶으면 인라인 블럭으로 display를 바꿔주자
line-height를 수직정렬하고 싶은 대상에 그 height 만큼 주면 수직으로 가운데 정렬된다
section과 aside
section은 컨텐츠 즉, 내용을 담당하는 부분(section안에 article이 있다)
aside는 기타 정보를 한쪽으로 치워둔 부분
이 두 영역은 float을 이용하여 한놈은 left로 보내고 한놈은 right로 보낸다
absolute를 사용하면 다른 요소가 그 위치를 차지하고 있어도 덮어써버린다
