본문 바로가기

HTML&CSS

(17)

hr 태그 css 100% 활용하기(색상, 두께, 점선) hr css로 선을 얇게 하거나 점선으로 또는 색상을 넣어서 꾸밀 수 있습니다. 수평선으로 단락과 단락을 가로선으로 구분 지을 때 사용하는 hr로 멋내기를 해보세요. 닫는 태그 없이 태그 하나로 간단히 가로선을 넣을 수 있고 태그나 태그 없이 줄 바꿈 됩니다. 바로 밑에 있는 선도 태그로 만들어졌습니다. 여기에서 같이 연습하면서 해보면 좋습니다.⭐⭐⭐👇 JS Bin Sample of the bin: jsbin.com 이렇게 태그에 여러 가지 속성을 넣을 수 있습니다. 이 기본 태그입니다. 너비와 정렬을 할 수 있습니다. 아래 hr 태그 그림을 순서대로 보세요. hr 넓이는 px이나 %로 지정할 수 있어요. 속성을 직접 적용하거나 style로 지정할 수 있어요. 정렬은 가운데 정렬이 기본입니다. 1 2 3..

white-space css(div 줄바꿈 방지 css) white-space css(div 줄바꿈 방지 css) 반응형으로 만드는데 블록 안에 글자가 자꾸만 줄바꿈이 된다. div의 줄바꿈이 안되게 하고 싶을 때 white-space:nowrap 을 이용하면 된다. 상황에 따라서 잘 이용해 보자. white-space : normal 기본 속성은 white-space : normal이다. 태그에서 긴 문장을 작성할 때 그냥 작성하면 창의 크기가 좁아졌을 때 자동으로 줄 바꿈이 된다. 가나다라마바사아자차자타파하~~가나다라마바사아자차자타파하~~가나다라마바사아자차자타파하~~ white-space : nowrap 줄바꿈을 하지 말아야 할 상황일 때가 있다. 이럴 때는 white-space : nowrap; 을 이용하면 된다. 창 크기를 줄여도 줄바꿈이 되지않는다. ..

background css 축약, 한번에 쓰는 방법, 줄여서 써보자 background css 축약, 한번에 쓰는 방법, 줄여서 써보자. background css를 적용할 때 많은 속성들이 있다. 이것을 한번에 줄여서 써보자. background css .wrap { background-color:#CCC; background-image:url("image/photo1.png"); background-position:left center; background-size:20%; background-repeat:no-repeat; background-attachment:fixed; } 백그라운드 색 bacground-color: #ccc이고, bacground-image: url('image/photo1.png') 이미지가 추가되어 있다. 그리고 background-ima..

before after css 가상요소 선택자 before와 after 가상요소 선택자 css ::before 요소의 맨 앞에 배치하는 마크업에 없는 가상요소 ::after 요소의 맨 뒤에 배치하는 마크업에 없는 가상요소 :::before 와 ::after을 마크업할 경우, 필수로 {content:""; } 이 들어가야 한다. 문자를 표시할 때는 따옴표 안에 문자를 넣으면 된다. 다른 기능을 하면서 문자가 없을 경우 빈따옴표만 넣으면 된다. 그리고 inline 속성을 가지고 있으므로 크기 값을 주려면 {display: inline-block; }이나 {display: block; }속성을 넣어줘야한다. .test1::before {display: block; content:"";} 예제를 통해서 확인해보자. ********* .test1에 ::bef..

반응형 백그라운드 이미지 만들기 반응형 백그라운드 이미지 만들기 css calc 함수 이용해서 반응형 백그라운드 이미지를 만들 수 있습니다. 반응형 백그라운드 이미지를 calc함수를 이용해서 만들기 반응형 배경이미지 만들기 어렵지 않게 해결 반응형 백그라운드 이미지 calc 함수 반응형 백그라운드를 만들어보세. css에서 백그라운드가 들어갈 div 크기를 정해준다. 반응형으로 할거라서 max-width 값을 넣어줌 그리고 height 값은 0으로 해주고 대신 padding-bottom이나 padding-top 값으로 백그라운드 이미지가 들어갈 크기를 비율로 계산해서 넣어준다. padding-bottom : 백그라운드 세로 너비값/가로 너비값*100% 백그라운드 이미지가 들어갈 크기가 가로: 860px 세로: 700px 이므로 paddi..

이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) 이미지 맵 만들기(이미지 맵 좌표값 쉽게 찾기) 이미지 맵은 하나의 이미지에 여러 개의 링크를 걸수 있어요. 여기에서 usemap의 맵이름과 map 태그안의 name의 맵이름은 동일해야 합니다. area shape 맵 모양 area shapge 맵모양은 3가지입니다. 이 세 가지이면 무엇이든지 모양을 만들어 링크할 수 있습니다. rect 사각형 circle 원 poly 다각형 사각형 맵 원모양 맵 다각형 맵 좌표값은 한 방향으로 입력해야 합니다. 헛갈리지 않게 시계방향으로 좌표값을 입력하세요. 이 좌표값들을 알기 위해서는 포토샵에서 이미지를 불러와서 꼭짓점에 커서를 두면 좌표값이 나타납니다. 그러나 이 방법은 시간이 걸리므로 쉽게 좌표값을 알 수 있는 사이트를 이용하면 편합니다. 이미지 맵 좌표값 쉽게 ..

무료 아이콘 사이트 - BEST 8개 사이트🍄 무료 아이콘 폰트 사이트를 소개해드립니다. 개인이나 상업용 무료 아이콘으로 사용할 수 있는 사이트도 있어서 저는 여기에서 무료 아이콘을 다운로드해서 회사 홈페이지에 사용하고 있습니다. 전에는 일러스트에서 직접 폰트를 그려서 png로 저장해서 쓰거나 svg로 저장해서 썼는데요. 지금은 그냥 무료 아이콘 사이트에서 가져옵니다. 깨지지 않는 아이콘으로 svg를 주로 이용합니다. 제가 이용하는 무료 아이콘 사이트입니다. 1. 폰트 어썸(font awesome) 가장 많이 알고 계실거예요. 가장 활용도가 높은 폰트아이콘 사이트죠. 학원에서도 이 아이콘 사이트는 빼놓지 않고 소개할거에요. 무료와 유료로 나눠져있습니다. 폰트어썸 - Font Awesome 아이콘 사용법 폰트어썸(fontawesome)이용하기 폰트어썸..

유튜브 동영상 자동실행 소스 유튜브 동영상 자동실행 소스 유튜브를 웹페이지에서 자동실행해보아요. 블로그에서는 예전에 적용되었지만 지금은 자동실행을 막아놨네요. 처음엔 모바일에 안나오다가 지금은 모두 안나오네요. 블로그 방문자가 원하지 않는 동영상을 불필요하게 볼필요는 없으니깐요. 웹페이지에 적용하세요. 먼저 유튜브 코드를 복사해오세요. 이 동영상의 소스를 퍼왔습니다. youtu.be/k24UEMaLwEk 아이프레임 소스에서 유튜브의 url뒤에 ?version-2&autoplay=1를 붙여주세요. 또는 url 뒤에 ?rel=0&autoplay=1를 붙여주세요. | 유튜브 동영상 음소거 및 자동재생만 하고싶을 때 유튜브 url뒤에 ?autoplay=1&mute=1를 붙이세요. | 유튜브 동영상 음소거만 하고싶을 때 유튜브 url뒤에 ?..

이전 1 2 3 다음

티스토리툴바