언어/HTML & CSS35 입문) CSS (반응형 그리드) 그리드 란 ? 격자구조 레이아웃 디자인 요소를 하나하나 쌓아 가는 것 미디어 쿼리 ★★★ CSS에 있는 거의 유일한 조건문 ( and 가능 ) @media (max-width: 500px) { color:red; }=== 최대 화면 500px 까지 red컬러 @media (min-width:1000px) ===최소 너비가 1000px 이상일때 작동 범용 클래스 (미디어 쿼리를 이용한 브레이크 포인트) CSS 작업을 줄여주는 것 ( 기성복 ) 음수마진 부분 유령화 / 부모 때문에 특정 공간이상이 생기지 않을 때 마이너스 마진 사용함 (margin , border , padding 으로 공간이 생기지 않을 때 마이너스) CSS 속성 height : 높이 margin : border 밖 화면과의 외부여백 (많.. 2023. 6. 11. 입문) 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. 이전 1 ··· 5 6 7 8 9 다음