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

CSS 카운터 인터넷의 태동 스텐포드 대학의 연구 국가별 도메인의 확정 국가 코드 최상위 도메인(Country Code Top-Level Domain, ccTLD)은 국제적으로 나라 또는 특정 지역 그리고 국제 단체 등을 나타내는 인터넷의 도메인 이름에 배당한 고유 부호를 일컬으며, 최상위 도메인으로 취급한다. 웹서비스의 발달 스타일 언어 스크립트 언어 모바일로 확대 아이폰의 등장 안드로이드 폰의 확장 CSS 카운터 (CSS counters) 는 변할 수 있는 숫자인 "변수" 와 같은 동작을 합니다. 이 변수 값은 CSS 규칙에 따라 사용할 때마다 숫자가 하나씩 증가합니다. CSS 카운터 (CSS counters) 는 다음의 속성을 사용합니다. counter-reset - 카운터를 생성하거나 초기화 합니..

CSS 폼 태그 CSS 로 HTML 폼 태그에 스타일 입히기 이름 성 국적 대한민국 중국 일본 HTML 폼 태그를 CSS 를 사용하여 멋지게 바꿀 수 있습니다. CSS 로 HTML 폼 태그에 스타일 입히기 이름 성 국적 대한민국 중국 일본 [광고] Udemy 동영상 강의로 보기

CSS 속성 선택자 새창에서 네이버 띄우기(타겟 속성 값이 _blank 입니다). first 로 시작하는 클래스 값을 갖었습니다. second 로 시작하는 클래스 값을 갖었습니다. 노란색 칸에 이름을: 이메일 주소: CSS 속성 선택자 (CSS Attribute Selectors) 는 특별한 속성 (또는 특정 속성값) 을 갖는 HTML 태그에만 선택적으로 스타일을 입히는 기능입니다. [attribute] {} [ ] 대 괄호 안에 특정 속성을 넣고, 그 속성을 갖는 태그에 적용할 스타일을 {} 중괄호 안에 지정합니다. [attribute="value"] {} 특정 속성 및 속성값을 갖는 태그에 스타일을 지정합니다. [attribute~="value"] {} 속성값에 특정 단어를 포함하는 속성을 갖는 태그..

CSS 이미지 스프라이트 이미지 스프라이트 (Image Sprites) 는 하나의 이미지 파일에 여러개의 이미지 들을 묶어 놓은 것을 말합니다. 게임을 만들 때나 웹 페이지를 만들 때 여러개의 이미지 들이 사용 되는데, 하나의 이미지 판에 여러 이미지를 배치한 것입니다. 많은 이미지를 갖는 웹 페이지는 이미지 로딩에도 시간이 오래 걸리고, 서버에도 다중 요청을 하게 됩니다. 이미지 스프라이트를 사용하면 (한번에 필요한 이미지를 내려 받으므로) 서버에 요청하는 횟수를 줄이고 데이터 전송량을 절감하게 됩니다. 아래의 하나의 스프라이트를 가지고, 각각의 아이콘을 클릭시 해당 사이트로 이동시키는 기능을 만들어 보겠습니다. 먼저 각각의 아이콘 별로 스프라이트 내에서의 영역을 알려주는 아이디 (#facebook) ..

CSS 이미지 투명도 조절하기 이미지의 투명도 Opacity 는 불투명도 이고, Transparency 는 투명도를 말합니다. CSS 에서 이미지의 투명도를 지정하는 것은 쉽습니다. CSS 불투명도 속성 (CSS opacity property) 은 CSS3 에서 권장하는 방식 이기도 합니다. 즉, CSS3 에서는 투명도 (transparency) 를 표현할 때 대해 opacity (불투명도) 를 사용합니다. 아래 opacity: 0.5; 에서 수치가 1에 가까울 수록 진하게 보입니다. 위에 두번째 그림이 CSS 를 사용하여 투명하게 한 그림입니다.. 이미지의 투명도 opacity property (불투명도 속성) 은 0.0 에서 1.0 의 값을 가질 수 있는데, 낮은 값이면 더 투명 (transparen..

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; 브라우저 별로 다르..