프론트엔드 첫걸음

input의 width 100% 는 content영역만을 기준으로 함 실제로는 100% + 20px box-sizing : border-box; 주어야함.

Position 기능 top, left, bottom, right로 요소의 위치를 변경할 수 있다. 하지만 이 좌표속성을 사용하려면 position 속성이 필요합니다. position은 좌표속성을 적용할 기준점을 지정해주는 역할을 한다. 또한 position 속성을 부여하면 요소가 공중에 뜬다. Position 종류 position : static; 좌표적용 불가. top, left, bottom, right, z-index 속성이 아무런 영향도 주지 않는다. position : relative; 기준 : 자기자신의 원래위치 자기 자신을 기준으로 top, right, bottom, left의 값에 따라 오프셋을 적용한다. position : absolute; 부모 중에 position : relative..

body태그에 기본 마진이 있으므로 body 태그에 마진을 0으로 만들어서 의도하지 않은 공백을 없앤다. 이처럼 기본적으로 주면 좋은 효과들이 있다. 김버그님은 항상 이렇게 시작한다. * { box-sizing: border-box; margin: 0; } 테이블 칸 끼리의 간격 없애는 효과도 항상 필요할 것 같다. table { border-collapse : collapse; } 검색해보니 읽을만한 글이 많았는데, 아직 이해하려면 멀은 것 같다. https://velog.io/@teo/2022-CSS-Reset-%EB%8B%A4%EC%8B%9C-%EC%8D%A8%EB%B3%B4%EA%B8%B0 2022 CSS Reset 다시 써보기! ..2022년 지금은 CSS Reset을 어떻게 만들어야 할까? 하..

- 박스의 테두리가 겹치면 margin-collapse 현상이 발생하여 하위 박스에 margin효과가 들어가지 않는다. 상위의 박스에 padding: 1px; 주면 박스 테두리 겹침이 해소되어 하위 박스에 margin 효과가 들어간다. * 상위박스에 border를 줄수도 있다.

background-image : url(이미지 주소); 해당 이미지를 배경이미지로 한다. background-size cover - 그림이 잘려도 됨. 배경을 div 박스에 가득 채우기 contain - 여백이 생겨도 좋으니까 그림 잘리지 않도록함. background-position 그림이 채워질 때 어디서부터 채워지느냐 background-attachment 스크롤 시 배경 위치 filter 박스에 보정효과. (그림 안의 글씨에도 효과 적용됨)

block 과 inline-block의 차이 display : block 한 행을 전부 차지 display : inline-block 내 크기만큼 차지 inline-block의 문제점 문제점 1 태그 사이에 띄어쓰기가 있으면 요소가 한줄을 통째로 차지해버린다! - inline-block은 내 크기만큼 차지하므로 내 크기만큼 차지한 left와 content사이에 html 상의 띄어쓰기가 한칸이라도 있으면 (left 20% + content 80% + 띄어쓰기 ? => 100% 초과 ! => left와 content가 한 줄 안에 해결방법 1. 주석을 넣는다. 2. container의 font-size를 0px로 조정한다. 문제점 2 inline-block 박스 안에 글을 쓰면 박스가 찌그러져 버린다 (우씨..

float 사용하여 기본 레이아웃 만들기 See the Pen float 사용해서 기본 레이아웃 만들기 by JEONG (@cona) on CodePen. float 요소를 공중에 띄운다고 생각 (left와 content 모두 float:right 이면 left태그가 더 오른쪽에 보여진다) clear : both https://developer.mozilla.org/ko/docs/Web/CSS/clear clear - CSS: Cascading Style Sheets | MDN clear CSS 속성은 요소가 선행 부동(floating) 요소 다음일 수 있는지 또는 그 아래로 내려가(해제되어(cleared))야 하는 지를 지정합니다. clear 속성은 부동 및 비부동 요소 모두에 적용됩니다. develo..

혼자 문제해결한 과정 기록한 포스팅 현재 지식수준에서 찾은 해결방법을 기록합니다. display inline 해당 태그가 마크업하고 있는 컨텐트의 크기 만큼만 공간을 차지 width와 height 속성을 지정해도 무시된다 margin과 padding속성은 좌우 간격만 반영이 되고, 상하 간격은 반영이 되지 않음 span, a, video, audio 등 block block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지 width, height, margin, padding속성이 모두 반영됨 div, h1~h6, table, p, ul, li 등 inline-block inline 엘리먼트처럼 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치되..

https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align vertical-align - CSS: Cascading Style Sheets | MDN vertical-align CSS 속성은 inline 또는 table-cell box에서의 수직 정렬을 지정합니다. developer.mozilla.org inline 또는 table-cell box에서의 수직 정렬(세로 정렬)을 지정 이미지 엘리먼트를 텍스트 엘리먼트의 라인 속에서 정렬할 때 쓰일 수 있습니다 See the Pen Untitled by JEONG (@cona) on CodePen. inline이나 inline-block 속성에서 vertical-align 할 때는 sub, sup 도 쓸 수..

See the Pen 띄어쓰기 유무에 따라 달라지는 가상클래스 by JEONG (@cona) on CodePen. li:last-of-type li의 부모 하위의 li 중 맨마지막 li last-of-type인 list (마지막 list) li :last-of-type 띄어쓰기가 있는경우는 li의 하위 요소중에 본인과 같은 tag중 마지막을 선택 last-of-type인 list 하위요소 li:last-child li의 부모요소의 마지막자식인데 이게 li일때만! last-child인 li → 그런데 li가 last-child가 아니면 (tag종류 불문 맨 마지막 요소가 아니면) 선택안됨! li :last-child li 내부의 요소들 중에서 마지막 자식 https://stackoverflow.com/qu..