728x90 CSS19 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. HTML/CSS - form 안녕하세요, HTML의 을 정리해보려 합니다. 슬슬 HTML의 끝에 다 와가는 것 같아 기분이 좋으면서도 두렵습니다. 올해 안에 꼭 프런트엔드 기초 및 지식을 습득하여 프로젝트를 만들 수 있기를! 나중에 보았을 때 이해를 더 빨리 직관적으로 하기 위해 코드를 작성한 상태에서 분해하면서 정리해보겠습니다. 은 정보를 제출하기 위한 대화형 컨트롤을 포함하는 문서 구획을 나타냅니다. form 태그의 속성으로는 action, name, target, method, autocomplete 등이 있습니다. 여러 사이트에서 로그인 화면을 보면 아이디와 비밀번호를 입력받아 로그인 버튼을 클릭하여 로그인하는 구조로 되어있습니다. form을 이용하여 이러한 형태 틀을 만들 수 있는데요, 아래 예시를 보며 정리해보겠습니다. .. 2021. 5. 27. HTML/CSS - Inline/block 안녕하세요, display 요소가 많이 헷갈려 간단히 정리해보려 합니다 이전에 자세히 정리한 것은 아래 링크 참고 부탁드립니다. HTML/CSS - display HTML/CSS - display 안녕하세요, HTML/CSS에서 속성을 나타내는 display에 대해 공부하겠습니다. display의 종류는 여러 가지가 있는데요, (inline/block/inline-block/flex/list-item/none 등) 그중 많이 쓰는 것들만 한번 알아보겠.. hooni40.tistory.com Block 요소 -. , , 등이 있다. -. 사용 가능한 최대 가로 너비를 사용한다. -. 크기를 지정 가능 -. 수직으로 쌓임 -. margin, padding 속성 위, 아래, 좌, 우 조절 가능 -. 레이아웃을.. 2021. 5. 22. 이전 1 2 3 4 5 다음
