[html & css] 새롭게 배운 부분들 체크리스트

0

"a" 태그를 쓸 때 : target= "_blank" 속성은 새창을 띄운다.

font-family 속성 : 폰트 명에 띄어 쓰기가 있으면 따옴표로 감싼다.

box-sizing : border-box
1. border-box의 width 값은 border size + padding + content width이다.
2. *를 셀렉터로 써서 해당 속성으로 스타일시트 초기화에 포함 시켜도 꿀이다.

태그의 클래스 부여 :
1. 따옴표 내에서 2개 이상의 단어가 스페이스로 이어져 있으면, 각 자 다른 클래스 이름으로 인식 된다. 예시) "hello world" 는 hello와 world라는 2개의 클래스 이름을 부여 한 것이다. 하나로 만드려면 "helloWorld" 또는 "hello_world" 식으로 붙여 줘야함.
2. 아이디는 어차피 하나의 요소에 하나 밖에 부여되지 않기 때문에 불가

선택자 부분:
1. 선택자들을 스페이스로 나눠져 있으면 앞 선택자는 부모, 뒤 선택자는 자식 요소가 된다. 경로를 지정하는 것 과 비슷.
2. 1번과 비슷한 개념으로 태그와 id 또는 class는 공백 없이 붙여도 된다. 예시) p.class. p.#id
3. 선택자들이 쉼표로 나눠져 있으면 각 요소들에게 같은 스타일링을 적용 할 수 있다.

상속 :
1.상위에 있는 부모요소가 스타일이 적용 되면 자식 요소들은 별도의 스타일링 없이 부모의 속성이 자동부여 된다. 다만 자식에게 따로 속성을 부여하면 우선순위로 자식 요소가 적용이 된다.

Block :
1. default로 width가 화면 전체로 적용이 된다. 높이는 컨텐츠의 세로 축 내용 만큼
2. div 나 p 태그 같은 것이 블록 요소

Input :
1. input 내의 placeholder을 css 로 선택하려면 selector::attribute으로 할 수 있으며 조금 더 상세한 input type이라면 input[type="text"]::placeholder 식으로 선택이 가능하다.

position:
1. top, right, left, bottom은 position이라는 속성이 선언이 되어야 적용 가능하다.
2. relative는 해당 요소의 기본 위치에서 이동시킬 수 있는 속성이며
3. absolute는 화면의 절대적인 위치를 이동 시킬 수 있으나, 부모 요소가 있으면 부모요소의 행동 반경에서의 절대적 위치가 되버림.

flex-box:
1. justify-contents는 컨테이너의 너비가 충분히 있어야 적용 가능하다. !!!!한참 해멨음!!!

profile
내가 기억하려고 작성 중인 블로그

0개의 댓글