3일만에 끝내는 HTML, CSS, JS 기초

CSS 반응형 이미지 갤러리 빈센트 반 고흐 갤러리 Wheatfield with Crows, c.1890 빈센트 반 고흐 Starry Night, c.1889 빈센트 반 고흐 The Bedroom at Arles, c.1887 빈센트 반 고흐 The Mulberry Tree, c. 1889 빈센트 반 고흐 CSS 로 이미지 갤러리를 만들 수 있습니다. 이미지 갤러리는 반응형 (responsive) 으로 만들어서, 브라우저 화면의 크기에 따라, 이미지의 크기와 배치가 조절되도록 하는 것이 일반적입니다. 이미지와 설명글을 묶어서 div 태그로 둘러 싸고 img 클래스 라고 하고, div.img {} 선택자에서 스타일을 바깥 테두리에 1px 실선을 그렸습니다. 그리고 div.img:hover {} 는 가상-클..

CSS 툴팁 또는 말풍선 말풍선 또는 툴팁 사용자가 커서로 항목을 가리키면 말풍선 또는 툴팁(tooltip)이 나타납니다. CSS 로 말풍선 (Tooltip) 을 만들어 봅니다. 말풍선 (tooltip) 은 마우스가 태그 위로 올라가면 추가적인 정보가 보이도록 하는 기능입니다. 우선 HTML 태그부터 시작합니다. 먼저 컨테이너 태그 (여기서는 p 태그) 를 하나 정해서 "tt" 라는 클래스를 지정하였습니다. 마우스가 이 p 태그 위로 올라가면, 말풍선 글자 들이 보이게 될 것입니다. 이 말풍선 글자는 인라인 태그 (inline element, 줄바꿈을 안하는 태그) 인 태그에 담고 "tt-text" 라는 클래스를 지정하였습니다. 또는 툴팁(tooltip) 그 다음 CSS 에서, "tt" 클래스에서 말풍선..

CSS 드롭다운 드롭다운 매뉴 마우스를 버튼위로 올리면, 드롭다운 메뉴가 나타납니다. 여행 일정표 첫째 날 둘째 날 세째 날 마지막 날 여행 잘 다녀오세요. 드롭다운 박스는 사용자가 어떤 태그에 마우스를 올리면 나타나는 글이나 그림 상자 입니다. 먼저 마우스가 올라갈 버튼 태그 ()를 하나를 만들고, 또 마우스가 올라갔을 때 보여질 내용물 컨테이너 태그 () 를 하나 만듭니다. 여행 일정표 ... 드롭다운 되는 내용들을 CSS 속성으로 정확하게 위치시키기 위해, 태그로 이 태그 들을 감쌉니다. 여행 일정표 첫째 날 ... CSS 코딩에서 .dd 클래스에서 position:relative; 속성을 줍니다. 이 속성은 드롭다운 내용이, 드롭다운 버튼 바로 아래 위치 시키기 위해 필요합니다. 반면 드롭다운 버..

수평형 네비게이션 바 회사로고 즐겨찾기 수업일정 사용자 로그온 수평형 네비게이션 바 (horizontal navigation bar) 는 두가지 방법이 있는데, 인라인 (inline) 방식과 플로우팅 (floating list) 방식이 있습니다. 인라인 방식에서는 태그를 인라인으로 지정합니다. li {display: inline;} display: inline; 은, 기본적으로 태그는 블록 태그로서, 줄바꿈이 자동으로되는데, 여기서 앞 뒤의 리스트 항목간에 줄바꿈을 제거하여, 리스트 모두를 하나의 라인에 보이게 할 수 있습니다. 다른 방법으로는 플로팅 리스트 항목으로 만들면 되는데, 태그를 플로우트 시켜서, 하나씩 차례로 배치하는 방법이 있습니다. ul.h { list-style-type: none; m..

CSS 수직형 네비게이션 바 인사 말씀 최근 소식 판매 제품 조직 소개 웹 사이트에서 내용을 쉽게 구분해서 찾기 쉽도록 해주는 것이 중요한데, CSS 가 지루한 HTML 메뉴를 보기 좋게 바꾸어 줄수 있습니다. 네비게이션 바 (Navigation Bar) 는 쉽게 링크 들의 목록인데 , 태그를 활용하면 좋습니다. , 태그에서 나타나는 리스트 마커 (bullets), 마진, 패딩을 제거해야 합니다 ul {list-style-type: none; margin: 0; padding: 0; width: 200px;} list-style-type: none; 은 네비게이션 바에서는 필요없는 리스트 마커를 제거해 줍니다. 마진과 패딩을 0으로 설정합니다. margin: 0; padding: 0; 브라우저 별로 다르..

CSS 가상-태그 CSS 가상-태그 (Pseudo-Elements) 는 태그의 특정 부분의 스타일을 지정할 때 사용됩니다. 예를 들면 다음과 같은 경우에 사용됩니다. 어떤 태그 내에서 첫번째 문자 또는 줄 만에 대해 스타일을 지정할 때 어떤 태그의 내용이 있으면 그 내용의 전 또는 후에 다른 내용을 삽입할 때 가상-태그 (pseudo-elements) 의 구문은 아래와 같습니다. selector::pseudo-element { property:value; } 위의 구문에서 콜론을 두개 사용하였는데, CSS3 에서 가상-태그 (pseudo-elements) 에는 콜론 하나 (:) 대신에 두개 (::) 를 사용하기 때문입니다. 이것은 W3C (World Wide Web Consortium) 에서 가상-클래스..

CSS 가상-클래스 방문한 적이 있거나, 마우스 올라가거나 클릭하면 텍스트의 색상이 바뀝니다. 마우스 올리거나 클릭하면 스타일이 바뀝니다. CSS 가상-클래스 는 태그의 특별한 상태를 정의하기 위해 사용됩니다. 예를 들면, 사용자 마우스가 태그위로 올라 갔을 때의 스타일 지정 링크에 대해 방문 했을 때와, 방문하지 않았을 때의 스타일의 차이 지정 커서가 포커스 (focus) 되었을 때의 태그의 스타일 지정 가상-클래스 (pseudo-classes) 의 구문은 아래와 같이 씁니다. selector:pseudo-class { property:value; } 가상 클래스 (pseudo-classes) 와 본래의 CSS 클래스 (CSS classes) 는 조합하여 사용할 수 있습니다. a.myButton:hov..

CSS 컴비네이터 태그 : 후손 (div p), 자식 (div > p) 태그 : 후손 (div p), 자식 (div > p) 태그 : 후손 (div p), 단 자식 (div > p) 은 아님 태그 : 일반 형제 (div ~ p), 바로 밑 형제 (div + p) 태그 : 일반 형제 (div ~ p) CSS 컴비네이터 (combinator) 는 선택자 (selector, 실렉터, 스타일의 묶음) 들간의 관계를 설정하는데 사용됩니다. CSS 선택자 (selector) 는 하나 이상의 단순 선택자 (simple selector) 를 여러 개 갖을 수 있는데, 이때 컴비네이터 (combinator) 를 기호로 포함하게 됩니다. CSS3 에는 4개의 컴비네이터 (combinator) 가 있습니다. 후손 선택자 :..

CSS 수평 정렬 플로우트 속성 (float property) 을 사용하여 태그를 정렬시킬 수 있습니다. 플로우트로 태그를 정렬할 때에 body 태그에 마진과 패딩을 0으로 설정하고 시작하면, 브라우저 별로 위치가 동일하게 보일 것입니다. 부모 div 태그 영역 position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 부모 태그 위로 오우버랩 (overlap, 겹치기) 할 수 있습니다. float 를 사용하여, 부모 태그를 기준으로 왼쪽, 오른쪽으로 배치할 수 있습니다. position: absolute; 를 사용하는 경우, 일반적인 배치 흐름에서 벗어나서, 다른 태그들 위로 오우버랩 (overlap, 겹치기) 됩니다. 그리고 먼저 body 태그의 margin 과 padd..

CSS 플로우트와 인라인-블록의 차이 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 브라우저 너비에 따라 배치가 바뀌는 상자들 그 다음에 올 div 영역에서는 inline-block; 을 사용한 경우, clear: left; 를 해 줄 필요가 없습니다. 인라인-블록 (inline-block) 을 플로우트 (float) 대신 사용하면 좀더 편리합니다. 클리어 (clear) 를 하지 않아도 되기 때문입니다. 그리드 ..