프론트엔드/CSS 공부(검토 후 삭제예정)10 CSS의 역사 / 버전에 대해 CSS 버전이란 무엇일까? CSS를 처음 공부할 때, 이런 걱정을 할 수도 있다. "공부한 내용이 업데이트 되서 쓸모없어지거나 지금 배우고 있는 것이 오래된 내용은 아닐까?" 웹 사이트를 만드는 기술은 지금도 계속 발전하고 있다. CSS도 마찬가지로 계속해서 변화하는 기술이다. 1996년 CSS 버전 1이 나온 이후, 버전 2, 버전 3까지 나왔다. CSS3 라는 것은 CSS 버전 3이라는 뜻이다. 그렇다면, 옛날 버전은 사용할 수 없는가? 그렇지 않다. CSS는 항상 옛날 버전을 지원하면서 다음 버전으로 넘어간다. 이런 걸 하위 호환성(backwards compatibilty)라고 한다. 최신 브라우저에서는 반드시 옛날 CSS 문법도 호환된다. CSS4가 나올까? CSS는 세계 곳곳에서 사용하는 기술이.. 2023. 7. 14. CSS 레이아웃 ■ 레이아웃 요소들의 배치, 배열 ■ 포지션(Position) normal flow를 벗어나 위치를 직접 정하는 형식 static : 기본값 relative : 원래 있어야 할 위치에서 이동 absolute : 기존의 배치에 벗어난다. fixed : 화면을 기준으로 고정된 위치에 존재 / 기존 배치에서 벗어난다. sticky : 부모요소에 종속되어 있다. z-index : 앞에 보이는 순서를 정한다. ■ 플렉스박스(Flexbox) 박스를 만들고 방향을 정해서 1차원으로 요소를 배치하는 방식 배치방향 정렬 : justify-content(메인 축) / align-items(교차 축) flex : wrap / grow / shrink / basis gap ■ 그리드(Grid) 칸을 나눈 다음 배치하는 방식 .. 2023. 7. 14. 선택자(selector) 가상 클래스(sude class) - hover / active / before / focus / visited 2023. 7. 14. 디스플레이(display) 인라인(Inline) 글을 쓰는 방향으로 줄이 바뀌면서 배치된다. 블록과 달리 크기를 지정할 수 없다. 블록(Block) 위에서 아래로 차례대로 배치된다. 크기를 지정할 수 있다. 인라인블록(Inline-block) 인라인처럼 배치되지만 블록처럼 크기를 가지고 싶을 때 사용하는 속성 float 요소를 페이지 왼쪽이나 오른쪽에 삽화처럼 배치하고, 그 주변으로 인라인 요소들을 배치할 수 있다. 2023. 7. 14. 박스모델(box-modal) HTML/CSS에서 요소는 기본적으로 박스 형태이다. 밖에서부터 차례대로 바깥 여백(마진, margin), 테두리(보더, border), 테두리와 실제 내용 사이의 여백(패딩, padding), 그리고 실제 내용이 들어가는 콘텐트 박스(content box)가 있다. ■ 속성 padding / margin : 세로는 겹친다. 원하는 대로 안 나올 경우 '상쇄'를 의심해보자. 마진 상쇄 (Margin Collapsing) : 일반적으로 세로 마진은 서로 겹쳐서 화면에 나타난다. 서로 이웃한 태그에서는 세로로 마진을 겹쳐서 작용하고, 부모 자식인 관계인 태그에서도 세로로 마진을 겹쳐서 적용한다. 이때 부모에 padding이나 border가 있으면 경계가 있다고 생각하고 세로 마진을 겹치지 않는다. borde.. 2023. 7. 14. 이전 1 2 다음