본문 바로가기

전체 글83

입문) CSS (float을 이용한 풀다운 메뉴) 1차 메뉴만들기 HTML 메뉴만들기 1차 메뉴아이템 1 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 2차 메뉴 아이템 4 1차 메뉴아이템 2 1차 메뉴아이템 3 2차 메뉴 아이템 1 2차 메뉴 아이템 2 2차 메뉴 아이템 3 2차 메뉴 아이템 4 1차 메뉴아이템 4 CSS nav, ul, li { list-style:none; padding:0; } a { text-decoration:inherit; color:inherit; } /*2차 메뉴를 포함한 모든 서브메뉴*/ nav.top-menu ul ul { display:none; } /*활성화된 서브메뉴*/ nav.top-menu li:hover > ul { display:block; } /* 1차 메뉴 */ nav.top-menu.. 2023. 6. 10.
입문) HTML 과 CSS (float 과 부작용 해결) CSS ★ 3대 속성 : position, display, float ★ 이번에는 float 에 대해 알아보자 float : (떠다니다) 의 기본값은 none; 이다 . (웹 퍼블리셔의 무기) 특징 - 최대한 너비 다이어트를 해서 위로 올라갈 수 있으면 올라간다. 못 올라가면 다음 줄에 나온다. - 자식에 float값이 있으면 부모의 너비가 부정확하다. 때문에 그 다음에 와야 할 내용은 줄어든 너비때문에 시각적으로 이상하게 나온다. 그래서 자식에 float 요소를 가지고 있는 부모는 항상 막내를 추가해야한다. 그 막내는 display:block; 과 clear:both;속성을 가지고 있어야한다. 이 속성은 형들 밑에 막내가 깔리게 하는 역할을 한다. 사용방법 : 한줄로 나올때는 display:inline.. 2023. 6. 10.
입문)HTML 과 CSS (풀다운 메뉴 와 position) CSS ★ 3대 속성 : position, display, float ★ 이번에는 position 속성에 대해 알아보자. position:static; 엘리먼트의 기본 포지션인 모두 static 기본 position:absolute; 엘리먼트의 포지션을 유령으로 만든다. position:relative; 유령의 집 기준 유령이되면 유령의 집 기준으로 움직인다. 유령 출력방법 position:absolute; top:0; bottom left:0; right top 50% 가능 . left:70%; ; ㅡ노말라이즈 : 초기화 nav, ul, li{ list-style:none; padding:0; margin:0; } a { color:inherit; text-decoration:inherit; } HTM.. 2023. 6. 4.
입문) HTML 과 CSS (LIST , 간단한 메뉴 리스트) HTML 기본태그 ㅡ리스트 ul : unorderde list 순서 상관 없음. (점)ㅡli ol : ordered list 순서 중요함. (1.2.3.4. 순서나옴) ㅡ li dl : 데이터 리스트 (단어의 정의) ㅡ 중첩 ul , li와:hover ㅡ중첩 ul : ul 안에 li 에 ul이 들어가고 무한히 반복 가능함 ㅡ작성법 ul>li*2 ==리스트 2개 만들기 ul>li*2>a[href=#] +탭 == li의 a링크의href 의 값이 #인것 2개 만들기 :hover ==마우스가 올려진!! go 동물 포유류 조류 식물 과일 야채- HTML 기본태그 ㅡ네비게이션 : 작업물이 네비게이션이다 하면 사용함 (메뉴관련) nav>ul>li*2>a[href=#]{메뉴 아이템 $} 작성하기. ㅡㅡㅡ실습 go "메.. 2023. 6. 4.

티스토리툴바