정말 그냥 이렇게 쓰면 이렇게 되는 구나만 알고 있던 지식들이 채워지니까 너무 재밋긴 하다.
확실한 HTML,CSS개념들과 서로의 상관관계등을 알고 프로젝트를 하면 많이 재밋을 것 같다.
Next.js도 얼른 같이 해서 팀 프로젝트 완성 못한 부분을 얼른 해야지
publishing
HTML 인라인, 블록, 인라인블록
- 인라인(inline)요소
- 한줄에 여러개 배치
- 기본 너비값은 컨텐츠 너비값
- 크기값을 가질 수 없음
- 상하 마진은 가질 수 없음
- 블록(block)요소
- 한줄에 한개만 배치
- 기본 너비값은 100%
- 크기값을 가질 수 있ㅇ므
- 상하좌우 마진 가질 수 있음
- 인라인블록(inline-block)요소
- 한줄에 여러개 배치
- 기본 너비값은 컨텐츠의 너비값
- 크기값을 가질 수 있음
- 상하 마진은 가질 수 있음
인라인 요소
- span, a, small, big, em, u, s , del, br, q, b, strong, mark, sub, sup, video, audio
블록 요소
- div, table, figure, figcaption, caption, header, nav, footer, section, article, aside, p, blockquote, ul, il, li, td, th, form, hr, h1~h6
인라인 블록 요소
- img, input 태그들, button, fontawesome
body태그에서 색상을 변경 시킬 때 a태그는 변하지 않는다. 따로 지정해줘야함
display : 값(inline,block 등) 입력하여 변경 가능하다.
CSS포지셔닝
엘리먼트 수평 정렬하기(float)
- none(default) : float속성 적용 안함
- left : 요소가 컨테이너의 왼쪽
- right : 요소가 컨테이너의 오른쪽
- margin : auto요소를 이용해 중앙에 배치
요소를 중앙에 보내는 것은 margin:auto 사용할 때 inline 요소는 적용되지 않는다!
inline-block 또한 inline을 가지고 있기에 적용 X
block으로 바꾸거나 부모 요소에서 text-align:center;를 이용해 자식 요소를 중앙 배치 한다.
요약 : block은 margin:auto로 inline은 부모 요소에서 text-align:center로
※float 뜨다 라는 뜻으로 만약 자식요소에 float를 설정할 경우 부모요소는 자식요소가 없다고 판단해 높이 값을 잃는다
해결방법은 2가지로
- 직접 부모요소에 자식 요소만큼 height 를 준다
- 만약 자식 요소가 더 늘어나거나 줄어들면 부모와 간격이 생긴다.
- overflow : hidden; 을 부모요소에게 준다 (추천)
- 부모 요소가 자동적으로 높이 값을 찾는다
CSS포지셔닝 (속성:clear)
float 속성이 적용되면 다음 요소가 float 속성을 상속 받는데 이것을 해제시킨다.
- clear : left | right | both
- left : 왼쪽으로 배치된 float 속성 상속을 해지
- right : 오른쪽으로 배치된 float 속성 상속을 해지
- both : 왼쪽 또는 오른쪽으로 배치된 모든 float 속성 상속을 해지
CSS가로 배치
float,overflow,box-sizing & inline-block
2가지 방법이 있다.
- float와 overflow를 사용해 배치
- 이 방법은 1px단위라도 어긋나면 안된다!
- border를 추가해서 1px이라도 넘어가면 범위가 넘어가버려서 다음 칸으로 가버린다.
- 자식 요소에 box-sizing:border-box로 넘어가지 않도록 조정하자
- display: inline-block으로 배치
- px이 너무 중요하지 않을 때
section이나 article 태그는 div랑 다를바 없다. div는 이름이 딱히 없었고 HTML5부터 특별하게 이름을 붙인 형태(직관적 이해가 편하다)
