본문 바로가기
반응형

분류 전체보기333

드롭다운 메뉴 만들기(2단 수평 메뉴편) 드롭다운 메뉴 만들기(2단 수평 메뉴편) 지난 시간엔 비교적 쉬운 2단 수직 메뉴 만들기를 배웠습니다. 수평 메뉴는 좀 더 복잡하므로, 앞 강좌를 미리 공부하시고 오면 좋을 것 같아요 [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 수평 메뉴 만드는 방법은 수직 메뉴편에서 본 것과 동일합니다. 1. 2단 메뉴 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 지난 시간과 달라진 점이 있다면 1단 메뉴에 클래스명이 붙었다는 것인데요, 3단, 4단 메뉴 등 계층구조가 좀 더 복잡해질수록 id나 class명을 붙여 이용하는 것이 좋습니다. css ul{list-style:none; margin:0px; padding:0px;}.. 2014. 12. 3.
드롭다운 메뉴 만들기 (2단 수직 메뉴편) 드롭다운 메뉴 만들기 (2단 수직 메뉴편) 지난 시간엔 단순한 메뉴 만들기를 배웠습니다. [css]드롭다운 메뉴 만들기(기초) [링크를 가진 단순 메뉴] menu1 menu2 menu3 이것을 1단 메뉴라고 한다면, 주 메뉴를 클릭했을 때 부 메뉴가 나오는 2단 메뉴를 만들면 다음과 같습니다. [2단 메뉴 만들기] 1. 2단 목록 만들기 html menu1 menu2 sub menu1 sub menu2 sub menu3 menu3 파란색이 1단 메뉴라면 빨간색 부분이 2단 메뉴에 해당 ▶실행화면 우선 2단 메뉴를 숨겨 놓고, 1단 메뉴에 마우스 오버했을 때 부 메뉴를 드러내야 되겠지요. 2. 부 메뉴를 숨겨 놓기 ul ul {display:none;} 3. 주 메뉴에 마우스 오버했을 때 부 메뉴 표시하기.. 2014. 12. 2.
[css]드롭다운 메뉴 만들기(기초) [css]드롭다운 메뉴 만들기(기초) 드롭다운 메뉴 dropdown menu란, 상단이나 좌측 또는 우측의 메뉴를 클릭했을 때 하위 메뉴로 늘어지는 계층화된 형태의 메뉴를 말합니다. 오늘은 가장 기초적인 메뉴 만들기를 배워 보고 다음 시간엔 주 메뉴를 클릭했을 때 부 메뉴가 나오는 방식을 배워 보겠습니다. 수직 메뉴 만들기 각각의 메뉴를 만들 때는 목록 태그를 이용 합니다. 1. 목록 만들기 html 홈페이지 방명록 전체 글 목록 실행 화면 홈페이지 방명록 전체 글 목록 목록을 만드는 ul, ol, li 태그 2. 머리 기호 없애기 메뉴 앞에 머리 기호를 없애려면 list-style:none을 사용합니다. css ul{list-style:none;} 실행화면 홈페이지 방명록 전체 글 목록 list-sty.. 2014. 11. 28.
[css] float를 취소하기 (clearfix 4가지 방법) [css] float를 취소하기 (clearfix 4가지 방법) 보통 레이아웃을 만들 때, 내부 div(자식)와 그것을 둘러싼 또 하나의 div(부모)를 만듧니다. 우리가 원하는 레이아웃은 아래 그림처럼, 1. 자식 div가 좌우로 float 되고, 2. 부모가 자동으로 자식 div를 담아낸 모습일 것입니다. 하지만, 자식 div를 담고 있는 부모 div는 너비나 특별한 속성을 추가하지 않으면 float 된 자식 div를 담아내지 못합니다. (아래 그림 참조) float 된 요소는 이전 요소에 영향을 미치지 않고, 다음 요소에 영향을 미칩니다. 따라서 다음 요소 역시 float 상태로 글자나 이미지가 따라 붙습니다. float 속성에 대하여 그래서 부모 요소가 float 된 요소를 담아낼 수 있고, 다음.. 2014. 11. 27.
[css3] box-sizing 속성 [css3] box-sizing 속성 box-sizing 속성은 박스 모델과 관계가 있습니다. 박스 모델 이해하기 박스는 content, padding, border, margin로 이루어져 있습니다. content-내용 영역 padding-내용과 border 사이 여백 border- 선 margin-선과 바깥 과의 여백 [표준 브라우저의 너비, 높이 계산법] 요소의 너비와 높이를 계산할 때 width 와 height 속성을 쓰는데 width, height는 content 영역만의 너비와 높이 입니다. 이것이 표준 브라우저의 계산법입니다. 예} 아래와 같은 div가 있을 경우 div{ width:300px; padding: 10px; margin: 0px; border: 5px solid black; }.. 2014. 11. 25.
[css3] text-shadow 속성(글자 그림자 효과) [css3] text-shadow 속성(글자 그림자 효과) 예전에 box-shadow 속성에 배웠죠. box-shadow 속성은 박스에 그림자를 만들고, text-shadow 속성은 글자에 그림자를 만듧니다. 속성값은 비슷한 점이 많아 box-shadow를 미리 둘러 보고 오시면 좋을 것 같아요 box-shadow 속성(그림자 효과) ▶문법 text-shadow: h-shadow v-shadow blur color | none | initial h-shadow 필수 지정. 수평 그림자 위치. 길이값(px, em, pc, in, 등..) 양수 값을 지정하면 박스 오른쪽에 그림자가 드리워지며, 음수 값은 박스 왼쪽에 그림자가 드리워짐 v-shadow 필수 지정. 수직 그림자 위치. 길이값(px, em, pc.. 2014. 11. 24.
CSS 선택자 요약표 CSS 선택자 요약표 어제 날짜로 해서, CSS 선택자를 모두 다루었어요. CSS1부터 CSS3까지 선택자는 모두 42가지나 됩니다!! 실제 사용하는 선택자는 그렇게 많지는 않지만, 한번씩 읽어 두시면 유용하게 써 먹을 수 있으실 거예요. 오늘은 지금가지 공부한 css 선택자를 전부 하나의 표로 정리해 보았습니다. 또한, CSS 선택자란 무엇인지 간략히 알아 보고, 어느 때 어느 선택자를 사용하면 좋을지 링크를 달아 두었어요. CSS 선택자란? 글꼴이라든가, 색상, 너비, 높이 등 스타일을 줄 때 대상을 지정해야 하는데 이것을 선택자라고 합니다. CSS란? (HTML과 CSS의 차이, CSS 작성법) ▶타입 선택자 가장 흔히 쓰는 선택자는 Type selecetor 즉 태그(요소명) 선택자입니다. P {.. 2014. 11. 21.
[css2] 전체 선택자 [css2] 전체 선택자 전체 선택자는 누구나 알 수 있는 부분 같아 따로 글을 쓰지 않으려 했는데, css 선택자에 관한 글 중 유일하게 빠진 부분이라 짤막하게나마 정리해 보려고 합니다. 전체 선택자는 전체 요소를 선택하는 선택자 입니다. 별표(*)로 표시 함. * {margin: 0px; padding: 0px;} 라고 하면 html 모든 요소에 적용 됩니다. 생략해도 같은 의미 입니다. *.test {color: red;} 는 .text {color:red;}와 같습니다. /*클래스명 test를 지닌 요소는 모두 빨간색으로 하겠다는 뜻*/ *#myid {color:red;}는 #myid {color:red;}와 같습니다./* ID가 myid일 경우는 모두 빨간색으로 하겠다는 뜻*/ 자손 선택자와 전.. 2014. 11. 20.
[css3] :only-child :only-of-type 가상 클래스 [css3] :only-child, :only-of-type 가상 클래스 오늘은 :only-child 선택자와, :only-of-type 선택자를 비교해서 배워 보겠습니다. 오늘을 끝으로 css3 선택자는 모두 다루었고요, 다음 시간엔 그간 배운 css1~3을 총정리 형태로 요약해 보겠습니다. :only-child 가상 클래스 :only-child는 어떤 요소의 자식이 하나밖에 없을 때 적용 합니다. 예 ① 내용 p:only-child{color: red;} 내용이 빨간색으로 표시 됨 예 ② 제목 내용 h1:only-child{color: red;} 자식이 h1, p가 있으므로 적용되지 않음 예 ③ 내용 #wrapper #header:only-child{color:red;} div 안에 div 에 p요소.. 2014. 11. 19.
[css3] :last-of-type 가상 클래스 [css3] :last-of-type 가상 클래스 어젠 :first-of-type 선택자를 배웠습니다. :first-of-type 가상 클래스 :first-of-type은 같은 유형의 첫번째 형제를 선택합니다. :last-of-type은 같은 유형의 맨 마지막 형제를 선택 합니다. :nth-last-of-type(1)와 정확히 일치 합니다. :nth-last-of-type 가상 클래스 :nth-last-of-type(n)은 마지막부터 계산하여 같은 유형의 n번째 형제를 선택하는 선택자. 예: 내용1 내용2 메뉴로 가기 p:last-of-type{color: red;} 혹은 p:nth-last-of-type(1){color:red;}라고 하면 내용2가 빨간색 글씨로 표시 됩니다. ▶html/css 작성 예.. 2014. 11. 18.
반응형

티스토리툴바