본문 바로가기

FrontEnd/HTML&CSS

[HTML/CSS] 1차, 2차, 3차 드롭 다운 메뉴 바 구현하기 안녕하세요 인포돈 입니다. 백엔드를 학습하고 있는 입장에서 정말 css를 구성하는 것만큼 귀찮은 작업은 없다고 생각합니다 ㅜㅜ 그러나 테스트를 위해서, 간단한 메뉴 바 정도는 정말 빠르게 만들 수 있도록 틈틈이 연습해 두시면, 도움이 되는 것을 알아두세요! 때문에 이번 포스트에서는 1차, 2차, 3차 드롭 다운 메뉴 바를 만든는 법을 이해해봅시다. 1차 드롭다운 메뉴 바 HTML 코드 더보기 아이템 1 아이템 2 아이템 3 css 코드 더보기 /* 초기화 작업 */ body, ul, li{ margin : 0; padding : 0; list-style : none; } a{ text-decoration: none; color:inherit; font-weight : bold; } .box { text-.. 더보기
[HTML/CSS] display와 positon의 이해 안녕하세요 인포돈 입니다. 기업에는 CSS에서 가장 기초지만, 많이 사용하고 모르면 CSS를 다루기 힘들어지는 display와 position에 대해 이해해 보자 Display css를 활용하기 위해서 display의 개념을 확실히 이해하는 게 좋다. display에 넣을 수 있는 값들이 굉장히 많지만, 전문적인 frontend를 꿈꾸고 있지 않는 이상, 많은 개념을 알 필요가 없다. 크게 2가지만 알고 있으면 된다. 1) display : block 해당 block의 기능은 아래 특성만 기억하면, 완벽하다. - 설정되어 있지 않으면, 너비는 최대한으로 넓어진다. - 설정되어 있지 않으면, 높이는 최소한으로 줄어든다. - 세로 배열로 정렬된다. - 이를 블록화라고 부른다. 정말 별로 어렵지 않다. 너비가.. 더보기