목록Web/CSS (40)

다연이네

[days04] 텍스트 효과( text-overflow, word-wrap/break)

css 텍스트 효과 1. text-overflow 속성 : 표시되지 않는 오버플로된 텍스트(콘텐츠)가 사용자에게 신호를 보내는 방법을 지정 - text-overflow: clip; 그냥 끊음 - text-overflow: ellipsis; 줄임표 ...마크가 보임 2. word-wrap 속성 : 단어가 길어서 중간에 분할(줄바꿈)할 때 사용하는 속성 - word-wrap: break-word; 긴 단어를 분리해서 줄바꿈 3. word-break 속성 : 포함되(줄바꿈)어 넘쳐도 줄바꿈 안하고 쭈욱 white-space: normal; /* 넘치면 줄바꿈 */ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem rerum. Cupiditate co..
Web/CSS 2020. 12. 8. 22:40
[days04] gradient 효과, 그림자 효과

그라디언트 효과 둘 이상의 지정된 색상간의 부드러운 전환 효과 ㄱ. 선형 그라디언트 (아래->위 / 위->아래 / 오->왼 / 대각선 등) background: linear-gradient(red, yellow); ㄴ. 방사형 그라디언트(중심에서부터 번져나감) background: radial-gradient(red 5%, yellow 15%, green 60%); 그림자 효과 ㄱ. 텍스트 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; ㄴ. 박스 box-shadow: 10px 10px 5px 3px gray; Hello World - 테두리 효과처럼 그림자 지정 box shadow Card Sample 1 January 1, 202..
Web/CSS 2020. 12. 8. 21:40
[days04] background

다중 배경 Lorem ipsum dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed dolorem ex nemo repellendus commodi ipsa aut dolor quaerat est omnis. Labore amet earum voluptate laborum dolor explicabo expedita autem minus et maxime sit voluptatem libero repellendus blanditiis sed facilis unde? 1) background-size 속성 배경 이미지 크기를 지정 가능하다. (100px 100px) contain, cover 등 속성도 사용 가능하다. backgroud..
Web/CSS 2020. 12. 8. 20:38
[days04] form 입력 양식 만들어보기

1. 반응형을 이용해 화면이 600px보다 작아지면 주루룩 되게 한다. form 입력 양식 First Name Last Name Country Australia Canada Korea Subject
Web/CSS 2020. 12. 8. 15:55
[days04] 속성 선택자(selector) 사용하기 태그[속성명(기호)속성값]

[속성명] [속성명=속성값] 속성명이 속성값과 일치하는 경우 a[title='flower']{ text-decoration: none; color: red; } [속성명^=속성값] where title like 'kbs%' 특정 문자열로 시작하는 a[title^='kbs']{ text-decoration: none; color: red; } [속성명$=속성값] where title like '%kbs' 특정 문자열로 끝나는 a[title$='kbs']{ text-decoration: none; color: red; } [속성명*=속성값] where title like '%flower%' 특정 단어을 포함하고 있는 a[title*='flower']{ text-decoration: none; color: r..
Web/CSS 2020. 12. 8. 13:55
[days04] 이미지 스프라이트

이미지 스프라이트 하나의 웹 페이지에 이미지가 많으면 이미지마다 요청해서 가져온다. 이는 로드하는데 오랜 시간이 걸리고, 서버에 하나하나 이미지를 가지러 가지 때문에 여러번의 요청이 발생한다. => 하나의 이미지가 다 들어가있는 것을 잘라서 사용하게 한다. (한번만 요청하도록) 이미지 스프라이트
Web/CSS 2020. 12. 8. 13:12
[days04] 반응형 이미지 갤러리 - 수정필요

이미지를 누르면 해당 이미지 URL로 연결된다. Responsive Image Gallery (반응형 이미지 갤러리) Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium voluptatibus neque laudantium sed nihil voluptates est adipisci beatae consequuntur dicta voluptatum enim labore nam e..
Web/CSS 2020. 12. 8. 13:03
[days03] 타임라인 - 분석해보기

2017 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua dignissim per, habeo iusto primis ea eam. 2016 Lorem ipsum dolor sit amet, quo ei simul congue exerci, ad nec admodum perfecto mnesarchum, vim ea mazim fierent detracto. Ea quis iuvaret expetendis his, te elit voluptua di..
Web/CSS 2020. 12. 7. 22:38
Prev 1 2 3 4 5 Next