분류 전체보기46 [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 기초] img태그와 background-image 차이 안녕하세요 PNcoding입니다 :) 오늘은 img 태그와 background-image의 차이에 대하여 알아보도록 하겠습니다. img태그나 배경이미지 관련해서 궁금하신 분들은 아래 포스팅을 참고해 주시면 되겠습니다 :) https://pncoding.tistory.com/13 [HTML 기초] HTML 태그 종류 (2) - img 태그, a 태그 안녕하세요 PNcoding입니다 :) 웹사이트에는 필수적으로 이미지가 들어가 있어요. 글자만 있는 사이트보다는 중간중간 이미지가 들어있는 사이트가 좀 더 이쁘게 보이며 사용자(유저) 입장에서 좀 pncoding.tistory.com https://pncoding.tistory.com/18 [CSS 기초] css 배경 속성 안녕하세요 PNcoding입니다 :) .. 2023. 12. 8. [CSS 응용] 숨김 메뉴 만들기 안녕하세요 PNcoding입니다 :) 오늘은 인풋태그를 활용해 간단한 숨김메뉴 형태를 만들어 보도록 하겠습니다. 인풋태그가 궁금하신 분은 아래 포스팅을 참고해 주세요 :) https://pncoding.tistory.com/36 [HTML 기초] form(폼)태그와 input(인풋)태그, label태그 안녕하세요 PNcoding입니다 :) 오늘 배울 내용은 폼 요소로 쓰이는 태그들에 대하여 알아보도록 하겠습니다. 들어가기에 앞서 폼 요소들은 입력하는 공간을 통해 사용자로부터 정보를 전달받는 역 pncoding.tistory.com 바디구조 작성 먼저 바디구조를 작성해 보도록 하겠습니다. = 인풋 태그 중 체크박스 기능을 활용하여 한번 체크하였을 때 메뉴박스가 보이도록, 한번 더 체크하였을 때(체크 해제 .. 2023. 12. 4. [UX UI figma] 피그마 오토 레이아웃 (Auto layout) 안녕하세요 PNcoding입니다 :) 오늘은 피그마의 핵심 기능 중 하나인 오토 레이아웃에 대하여 알아보도록 하겠습니다. 피그마를 아직 사용해 본 적 없으신 분들은 이 포스팅을 참고해 보세요! https://pncoding.tistory.com/5 [UX UI figma] 피그마란? 안녕하세요 PNcoding입니다 :) 이번 포스팅에선 UX UI 디자인에서 자주 사용하는 Figma에 대하여 알아볼게요! 1. 피그마(figma)란? https://www.figma.com/ Figma: the collaborative interface design tool. Build better products a pncoding.tistory.com 오토 레이아웃? 피그마의 오토레이아웃은 UI 디자인을 보다 더 쉽고 효.. 2023. 12. 1. [CSS 기초] CSS 적용 우선순위 안녕하세요 PNcoding입니다 :) 스타일을 적용시킬 때 있어서 어떤 때는 적용이 되고 어떤 때는 적용이 되지 않아 당황스러웠을 때 다들 있었을 거예요. 그 이유는 스타일시트의 특징 때문인데요. CSS의 C는 Cascading(캐스캐이딩)의 앞글자로서 캐스캐이딩은 '위에서 아래로 흐르는'이라는 뜻을 가지고 있습니다. 따라서 CSS는 '위에서 아래로 흐르는 스타일시트'라는 의미를 가지고 있습니다. 즉 이 캐스캐이딩의 의미에 따라 선택자에 적용된 여러 스타일 중에서 어떤 스타일이 우선적으로 적용이 될 것인지가 정해진다고 보시면 되겠습니다. 스타일 우선순위 기본적으로 나중에 적히는 css가 우선순위가 높음 !important > 태그에 직접 적용시키는 inline 방법 > id 선택자 > class 선택자 .. 2023. 11. 29. [CSS 기초] 단위 (px, %, vw, vh, em, rem) 안녕하세요 PNcoding입니다 :) CSS에서는 선택자의 크기를 지정하기 위해 사용되는 여러 가지 단위가 있습니다. 예를 들어 div { width: 300px; } 이라고 적을 때 숫자 뒤에 쓰인 px이 바로 단위입니다. 이번 포스팅에서는 이러한 단위의 종류에 대하여 알아보도록 하겠습니다. px (pixels 픽셀) CSS에서 사용되는 가장 기본적인 단위입니다. 브라우저의 크기가 변경이 되든, 축소되든 확대가 되던지 항상 그 크기값이 변하지 않기 때문에 절대적인 값이라 불러 줍니다. 또한 다른 요소들의 크기에 영향을 받지 않습니다. % (퍼센트) 부모요소의 크기값에 비례하여 적용되는 단위입니다. 부모요소의 크기에 따라 값이 상대적으로 변하기 때문에 상대적인 값이라고 불러줍니다. 부모와 자식요소를 만들.. 2023. 11. 27. 이전 1 2 3 4 5 ··· 8 다음 반응형
