Programming/HTML & CSS (7) 썸네일형 리스트형 [CSS] nth-child 가상 선택자 정리 (n번째 부터 n번째까지) / :not으로 제외 처리하기 CSS 선택자 정리:nth-child(n)부모안에 모든 요소 중 N번째 요소를 선택A:nth-of-type(n)부모안에 A라는 요소 중 N번째 요소를 선택:first-child부모안에 모든 요소 중 첫번째 요소를 선택:last-child부모안에 모든 요소 중 마지막 요소를 선택A:first-of-type부모안에 A라는 요소 중 첫번째 요소를 선택A:last-of-type부모안에 A라는 요소 중 마지막 요소를 선택:nth-child(odd)홀수인 요소를 선택:nth-childe(even)짝수인 요소를 선택:not(:nth-child(N))N번째 요소를 제외한 모두를 선택 nth-child를 사용하여 선택하기:nth-child(n) // n번:nth-last-child(n) //뒤에서 n번째 :nth-ch.. [HTML] 의미 없는 텍스트를 만들어 주는 사이트 - 로렘 입숨(Lorem Ipsum) 안녕하세요.오늘은 디자인을 할 때 텍스트를 채울 수 있는의미 없는 텍스트 생성기 사이트를 공유하려고 해요.로렘 입숨은 그리킹(greeking)이라고도 부르며,공간만 차지하는 무언가를 지칭하는 용어로 사용됩니다! 한글 로렘 입숨(Lorem Ipsum)무의미한 한글 텍스트를 생성해 주는 사이트입니다.사용자가 원하는 길이의 텍스트를 쉽게 만들 수 있어요. http://guny.kr/stuff/klorem/#/p-view 한글 Lorem Ipsum (간세네)로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종guny.kr 원하는 문단수와 길이를 맞춰 .. 웹 페이지에 구글 지도 삽입하기 (구글맵 삽입 방법, 구글맵 반응형) 1. 구글맵 검색 구글맵을 검색하여 사이트에 접속합니다. 2. 페이지에 삽입할 장소검색 왼쪽 상단의 검색필드에 장소명 또는 주소를 입력하여 검색합니다. 3. 구글 지도 공유하기 장소를 검색하여 원하는 장소의 공유 아이콘을 클릭합니다. 4. 공유하기 - 지도 퍼가기 공유 아이콘 클릭 후 지도 퍼가기 탭 클릭합니다. 5. 공유하기 - 지도 퍼가기 - HTML 복사 지도 퍼가기 탭 클릭 후 HTMl복사 클릭하여 복사를 합니다. 6. 원하는 위치에 복사 붙여 넣기 7. (선택) 원하는 크기로 변경 width값과 height값을 수정하여 원하는 사이즈로 수정합니다. * 지도의 가로길이는 %, 픽셀(px) 단위로 입력 가능합니다. * 지도의 세로 길이는 % 단위를 사용할 수 없기 때문에 픽셀(px) 단위로 처리됩니.. [CSS] Background의 모든 것 (image, color, size, repeat, position, attachment) 배경에 스타일을 줄 때 사용하는 css 속성을 알아보겠습니다. background-color background-color 속성은 요소의 배경색을 설정합니다. 기본 값은 transparent , 투명이며 색상이나 색상코드를 사용합니다. 속성 설명 color background-color를 설정합니다. transparent (default) background-color를 투명하게 설정합니다. /* 키워드 속성 */ div{ background-color : currentcolor; background-color : transparent; } /* 키워드 컬러 속성 */ div{ background-color : yellow; background-color : green; } /* 헥사 코드 속성 */ d.. [CSS] 기본 css 초기화 하기 Destyle.css 적용 Eric Meyer’s Reset CSS : 모든 스타일을 초기화하는 CSS https://meyerweb.com/eric/tools/css/reset/ Normalize.css : 스타일 일부는 남겨두고 표시 방식을 통일하는 CSS https://github.com/necolas/normalize.css CSS Tools: Reset CSS CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reaso.. [HTML] 이미지맵 태그 사용법(map,area) 이미지맵 태그 사용법 이미지의 usemap="이름"과 map name="이름"을 통일하게 지정해 줍니다. shape="속성값"은 영역의 모양을 의미합니다. - react : 직사각형 - circle : 원형 모양 - poly : 형 영역 - default : 전체 영역 coords="정의"는 영역의 좌표를 의미합니다. 링크가 없을 땐 nohref로 정의해 줍니다. 이미지맵 태그 만들어주는 사이트 https://www.image-map.net/ Free Online Image Map Generator Easy free online html image map generator. Select an image, click to create your areas and generate html your output.. [HTML] HTML 자주쓰는 태그, 마크업 안녕하세요! 첫 번째 글로 어떤 내용을 써볼까 고민하다가 제일 첫 번째로 알아야 할 HTML태그에 관해서 설명해 보려고 해요. 코딩을 시작할 때 꼭 알아야 할 HTML의 기본 구성에 대해 알아볼까요? HTML이란? 먼저 HTML이 뭔지 설명해 보려고 해요. HTML은 Hypertext Markup Language의 약자로 웹 페이지와 웹 페이지 내의 내용을 주고 화하기 위해 사용하는 코드입니다. HTMl은 프로그래밍 언어가 아닌 콘텐츠의 구조를 정의하는 마크업 언어입니다. Markup Language(마크업 언어) Markup Language(마크업 언어)는 mark(부호, 표시)를 이용하여 문서나 데이터의 구조를 표기하는 언어입니다. HTML에서의 Mark는 태그 ''를 의미하기.. 이전 1 다음
