본문 바로가기

HTML & CSS21

풀 다운메뉴 3차 HTML nav.menu-box-1>ul>li*4>a[href="#"]{1차 메뉴아이템$}+ul>li*4>a[href="#"]{2차 메뉴아이템$}+ul>li*4>a[href="#"]{3차 메뉴아이템$}을 tab해서 왼쪽과 같이 만들어준다. 2차메뉴 부터는 ul>li*4>a[href="#"]{3차 메뉴아이템$}이 반복되어 사용된다. CSS 1. body, ul, li, a를 노멀라이즈 시켜준다. 2. menu-box-1을 가운데로 정렬시켜준다. 3. 2, 3차 메뉴는 보이지 않도록 먼저 2, 3차의 ul에 display를 none 시켜준다. 10. menu-box-1의 자식ul안의 모든 ul을 유령화시켜주고 위치를 지정해준다. width를 100%으로 맞추어 모든메뉴의 크기를 같게해준다. 4. 모든 ul의.. 2020. 4. 26.
position, z-index HTML article>section*2>div*3 tab로 하나의 article안에 두개의 section으로 나눈후 div를 각각 세개씩 만들어준다. CSS 1. article을 10px의 검정테두리를 만들고 넓이, 높이를 80%준다. 2. position을 absolute로 지정해주어 유령화를 시켜주고 위에서 10%, 왼쪽에서 10%로 위치를 지정해준다. top과 left는 position을 사용할때만 가능하다. 3. article안의 section의 높이와 넓이를 50%, top, left는 0으로 위치지정해준다. 4. 두개의 section중 두번째 section의 위치를 조정해준다. left를 auto로 준것은 두번째section의 위치가 article안의 맨 오른쪽으로 이동시키기 위함이다. au.. 2020. 4. 26.
a 노멀라이즈 HTML nav>section>div*4>a[href="#"]{메뉴아이템$}을 한 후 tab를 눌러 정리해준다. CSS 1. a를 노멀라이즈해준다 --> 노멀라이즈 : 해당 엘리먼트에 기본적으로 적용되어 있는 디자인을 없애 다시 평범하게 만든다 2. nav 태그를 가운데로 정렬시켜준다 3. section태그를 글자화, 배경색 변경, 모서리 둥글게 해주고 padding으로 위아래는 0으로 양옆은 10px만큼 늘려준다 4. div태그의 display를 글자화시켜준다. 5. nav>section>div>a 태그를 padding을 20px 넣어준다. padding을 div가 아닌 a태그에 넣어주는 이유는 마우스를 올렸을 때 메뉴의 크기에 맞게 배경색이 바뀔 수 있게 해야하기 때문이다. 6. padding을 사용.. 2020. 4. 19.
개념정리 HTML 관계 *부모/자식 *형/동생 태그 *인라인 계열 -span(div에서 display만 inline인 태그, 인라인 계열의 기본 태그) -a:링크 -img:이미지 *블록 계열 -기본 -div(구분, 적절한 태그가 생각나지 않을때, 모르면 div, 블록 계열의 기본태그) -nav(내비게이션, 보통 메뉴 감쌀 때) -section(섹션) -article(아티클, 게시물) -제목 -h1, h2, h3, h4, h5, h6 -목록 -ul, li: 순서 없는 목록 -ol, li: 순서 있는 목록 CSS *노멀라이즈 -해당 엘리먼트에 기본적으로 적용되어있는 디자인을 없애서 다시 평범하게 만든다. -a, body, ul, li, ol, li, h1, h2는 사용하기전에 노말라이즈 해야한다. *선택자 -태그선택.. 2020. 4. 19.

티스토리툴바