CSS4 [CSS 응용] 탭 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용한 탭메뉴를 만들어 보도록 하겠습니다. 인풋과 관련된 내용은 아래의 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 1 (구조 작성) 먼저 바디구조를 작성해 보도록 하겠습니다. 탭1 탭2 탭1 내용 탭2 내용 인풋태그의 종류 중 radio를 사용하여 탭메뉴를 구성해 보도록 하겠습니다. 탭의 형.. 2023. 12. 12. [CSS 기초] CSS 적용 우선순위 안녕하세요 PNcoding입니다 :) 스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요. 그 이유는 스타일시트의 특징 때문인데요. CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다. 따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다. 즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다. 스타일 우선순위 기본적으로 나중에 적히는 css가 우선순위가 높음 !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 .. 2023. 11. 29. [CSS 기초] css 배경 속성 안녕하세요 PNcoding입니다 :) 이번 포스팅에서는 css 배경 관련 속성에 대하여 알아보도록 할게요 :) css의 기초라 할 수 있는 선택자에 관련된 내용은 앞 포스팅을 참고해 주시면 되겠습니다. https://pncoding.tistory.com/12 [CSS 기초] css 선택자 (1) 태그, 클래스, 아이디 선택자 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS를 처음 사용하기 위해 필수인 선택자에 대해 알아보도록 할게요! *선택자 란? HTML의 태그를 선택하는 방법으로 원하는 태그를 선택 후 스타일을 pncoding.tistory.com https://pncoding.tistory.com/14 [CSS 기초] css 선택자 (2) 구조, 자식, 자손 선택자 안녕하세요 PNcod.. 2023. 11. 3. [CSS animation] css 애니메이션 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 CSS 애니메이션에 대해 알아볼게요! CSS 애니메이션은 다양한 속성이 있는데, 속성이 너무 많다 보니 어떻게 사용하지는지, 언제 어떻게 적용하는지 헷갈리는 경우가 있죠. 어떤 속성이 있는지 한번 정리해봅시다! 1. HTML 구조 간단하게 클래스 명이 box인 태그를 만들어 볼게요. 2. CSS 가로, 세로 300 x 300 크기의 배경 색상이 들어가게 만들었습니다. 브라우저 결과 화면 그럼 애니메이션을 적용하기 위해 어떤 속성이 있는지 확인해 봅시다 1. animation-name .box { width: 300px; height: 300px; background-color: salmon; animation-name: box_ani; } 애니메이션을.. 2023. 2. 26. 이전 1 다음 반응형
