728x90 Web 개발40 HTML/CSS - margin 중복 안녕하세요, 오늘은 margin 중복에 대해 정리해보겠습니다. margin은 CSS 속성으로 많이 쓰는데요, margin 속성끼리 중복되었을 때 어떻게 행동하는지 정리해두려 합니다. ◆ margin 중복이 발생하는 상황 1. 형제 요소끼리 margin-top과 margin-bottom이 만났을 경우 2. 부모 요소의 margin-top과 자식 요소의 margin-top이 만났을 경우 3. 부모 요소의 margin-bottom과 자식 요소의 margin-bottom이 만났을 경우 조금이라도 쉽게 이해하기 위해 예를 보며 정리해보겠습니다. 형제 요소(child)끼리의 좌우로 margin이 중첩이되면 위 그림과 같이 형제들 사이는 40px(20+20px)의 거리가 되는것을 확인할 수 있습니다. (여기서 div.. 2021. 6. 3. HTML/CSS - 가상 요소 선택자 안녕하세요, 오늘은 가상 요소 선택자에 대해 정리해보겠습니다. 가상 요소 선택자로는 before/after가 있으며 :: 를 붙여 만들 수 있습니다. ◆ before : 요소 내부의 앞에 내용을 삽입 여기서 before로 붙인 텍스트들에 효과도 줄 수 있습니다. 여기서 가장 중요한 것은 content라는 속성이 무조건 있어야 합니다! ◆ after : 요소 내부의 뒤에 내용을 삽입 2021. 6. 2. HTML/CSS - 가상 클래스 선택자(2) 안녕하세요, 가상 클래스 선택자 내용이 많아 나눠서 정리하겠습니다. 지난주에 hover, active, focus에 추가로 정리해보겠습니다. ◆ first-child : 요소가 형제 요소 중 첫 번째 요소라면 선택 ◆ last-child : 요소가 형제 요소 중 마지막 요소라면 선택 ◆ nth-child : 요소가 형제 요소 중 n번째 요소라면 선택 n에 숫자가 아닌 2n과 같은 식이 들어갈 수도 있습니다. (n은 0부터 커지면서 대입) ※ 주의사항 .fruits li:nth-child(n) { 속성: 값; } 위에 식을 해석하는데 오른쪽부터 왼쪽으로 해석을 해야 합니다. n번째 자식이 요소라면 선택이라고 해석을 해야 아래와 같이 오류가 발생이 안 합니다. ◆ nth-of-type : 요소의 타입(태그 .. 2021. 6. 1. HTML/CSS - 가상 클래스 선택자(1) 안녕하세요, 오늘은 가상 클래스 선택자에 대해 알아보겠습니다. ◆ hover : 요소(기본 선택자(class/id/전체(*)/태크(div/span 등))에 마우스(포인터)가 올라가 있는 동안에만 요소 선택 아래 코드와 결괏값을 보며 설명드리겠습니다. 구글이라는 링크 태그 를 hover로 감쌈으로써 마우스 포인트가 올라가 있지 않을 때는 일반 링크 태그이지만 올리면 크기와 굵기가 달라지게 됩니다. 아래에 박스또한 마우스 포인터를 올리면 가로나비가 늘어나는 것을 확인할 수 있습니다. (영상이 안 올라가져서 동작을 못보여드려 죄송합니다 ㅠㅠ) ◆ active : 요소가 클릭된 동안 효과를 적용 ◆ focus : 요소가 포커스된 동안 효과를 적용 (대화형 콘텐츠에서만 사용 가능/ input, img, tabin.. 2021. 5. 31. 이전 1 ··· 3 4 5 6 7 8 9 10 다음
