CSS

반갑다! 나는 css 어린이다. 오늘은 우리 프로젝트 사이트 디자인을 도굴하러 왔다! 프로젝트 페이지는 여기서 확인할 수 있다! (https://main.dgm2h3gefx045.amplifyapp.com/) 먼저 우리 사이트 도면을 소개하겠다! 도굴할 때 참고하도록! 메인 페이지이고! 헤더에서 푸터까지 보여주었으니 할 수 있겠지! 빨리빨리 움직이란말이야! 1. 전체 페이지 css 설정 * { box-sizing: border-box; } a:hover { text-decoration: none !important; } box-sizing을 border-box로 지정하였군! 이렇게 하면 테두리를 포함한 크기를 지정할 수 있기 때문에 예측하기 쉽지! 아주 기본이 되어있구만! (생활코딩 형님이 많이 추천하신..

Margin Collapsing 은 "마진 상쇄"라는 뜻으로, 서로 다른 요소의 margin 이 겹치는 현상이 발생할 때 일어나게 된다. 예를 들어 다음과 같은 상황을 보자. 한 요소의 박스가 이렇게 생겼다고 할 때, 이걸 여러 번 연속으로 배치하게 되면 이렇게 된다고 생각할 수 있겠지만, 브라우저 렌더링 규칙에서는 위, 아래로 중복되는 마진을 상쇄시켜준다. 이런 경우를 Margin Collapsing 이라 하고, 위 그림이 브라우저에서는 다음과 같이 배치된다. Margin Collapsing 에서는 이렇게 형제끼리 마진이 맞닿는 상황뿐만 아니라 마진만 존재하는 빈 요소가 사이에 있을 경우도 있다. 보면 가운데 파란색 content 블록에 높이가 0이다. 비어있다는 의미이다. 이 요소를 아까 두 가지 같..

1. Selector란? Selector란 말 그대로 선택자인데, html 코드 내에 있는 특정 요소들을 선택하여 스타일을 적용할 수 있게 하는 역할을 한다. 일반적으로 css 코드 내에서 중괄호({ }) 앞에 제목처럼 붙여진 코드들을 Selector라고 한다. 2. Selector 종류 글을 쓰면서 Selector 종류를 찾아보니 이게 웬걸.. 30개가 넘게 있었다! 일단 내가 공부하면서 쓸 것들만 정리해두었다. 1) Type Selector 기본적인 태그들 , , ... 의 스타일을 적용시켜준다. 2) Class Selector Html 에 있는 사용자가 정의한 클래스의 스타일을 적용시키는데, 클래스는 다음과 같이 생겼다. 클래스 선택자는 이름 앞에 .(점) 을 붙여주면 된다. 3) Id Select..