본문 바로가기

CSS🔧95

css margin 마진병합이란? 마진병합 - 부모와 자식이 수직방향 인접일 경우 자식에 margin-top이 부모에 적용되는 현상 (인접한 block요소 끼리만 해당 / 형제인접 & 부모인접 성립) - 인접한 부모와 자식중 가장 큰 값으로 병합이 되어 가장 바깥쪽 요소에 적용됨 (큰 오브젝트의 마진값만 적용) - 형제요소가 수직방향 인접일 경우 마진병합 발생함 (여백을 한방향으로 줄것) (상하단만 해당/ 좌우 노상관) 예제 section 박스 1,2 에 마진(바깥여백) 과 패딩(안쪽여백)을 줘보자. .section { border: 1px solid black; background-color: #fff; margin: 20px; padding: 20px; } 위 코드같이 css로 margin: 20px padding: 20px 적용했을.. 2022. 10. 4.

CSS 공통클래스 [class^=] & background 아이콘 공통 변경 섹션에 공통으로 들어가는 아이콘이 여러개 있을경우, 공통클래스 [class^=] 을 사용하여 쉽게 적용해보자. 여기 아이콘에 커서를 가져다대면 색상이 변하게끔 만들어보자. 1. 공통클래스를 이용할 것이므로 html에서 태그에 class를 지정 먼저 여러개가 들어가야하기 때문에, html 에서 img 가 아닌 css에서 background로 처리한다. html 예시 유튜브 2. 아이콘 위치잡기 .main_all_game .game .sns { position: absolute; right: 20px; top: 220px; } 먼저 아이콘이 들어갈 위치를 잡아준 다음 3. css에서 공통클래스 주기 [class^=icon_sns] { width: 20px; height: 20px; display: inlin.. 2022. 10. 2.

html/css table 표만들기 : 표만들기 : 표의 제목 지정 필수 : table 첫번째 표분류 행의 제목 지정 (tr로 제목열 생성>th 칸의 제목생성) : table의 body 생략가능 : table head 표의칸 제목 / 중앙정렬 : table row 열 (가로줄) / 왼쪽정렬 : table data 셀 (내용) / 왼쪽정렬 (tr의 하위속성) th : 제목 표의 제목 필수 표 행의 제목 표의 열 표의칸 (제목) 제목 tr : 열 생성 td:내용 td:내용 td:내용 실습 긴제목 말줄임표시 .board_list_wrap .link { white-space: nowrap; max-width: 90%; display: inline-block; text-overflow: ellipsis; overflow: hidden; } 제목 넓.. 2022. 9. 30.

CSS @keyframes 애니메이션 속도 다르게 주기 /* 애니메이션효과 속도 다르게 주기 */ @keyframes moveCircle { 0 { opacity: 1; } 100% { transform: translateY(-500px); opacity: 0; } } .main_visual .circle_wrap span { position: absolute; left: 0; bottom: 0; width: 100px; height: 100px; border-radius: 50%; background: #b7ff0a; opacity: 1; animation: moveCircle 3s infinite; } 2022. 9. 29.

복합 애니메이션 @keyframes 복합애니메이션 : 여러번에 걸쳐서 동작, 자동애니메이션 적용법 @keyframes moveBox (함수명) 예시 @keyframes moveBox { 50% { transform:translateX(500px); } } 이름지정 함수명은 카멜표기법 = 동사+명사로 표현 moveBox (대문자를 두번째 명사부터) (중복불가) ex. moveBox, changeColor, fadeCover, moveBox02 % 애니메이션시간에 대한 백분율, 애니메이션시간이 1초인 경우 50%는 0.5초임 0%, 100%는 적지않을경우 최초상태 (0%로 적을시 최초위치로 적용되므로 생략한다) 속성정의 animation: name duration timing-function delay iteration-count direct.. 2022. 9. 26.

단일 애니메이션 단일애니메이션 - 한번만 동작 transition:all 또는 개별속성명 1s [지연시간] [ease] ease 처음과 끝이 느리고 중간이 빠름, 주로사용 ease-in(가속) 처음은 느리고 끝에서 빨라짐 ex. 우주선이 밖으로 나갈때 - ease-out(감속): 처음은 빠르고 끝에서 느려짐 ex. 화면밖에서 안으로 들어올때 - ease-in-out: ease와 같지만 중간속도가 ease보다 부드러움 ex. 반복애니메이션에 사용 - steps(5) ex. 타이핑 애니메이션에 사용 - cubic-bezier(1,0,0,1) /* easeInOutExpo*/ ex. 특수한 움직임 (스프링, 다이나믹한움직임)이 필요한 경우 사용 크롬개발자모드로 커스텀, https://easings.co/ 이용 - linear.. 2022. 9. 23.

애니메이션1 2022. 9. 23.

css gradient 그라디언트 효과 .main_section01{ background: rgb(238,174,202); background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); } .main_section01{ background: linear-gradient(45deg,red,green,blue); } .main_section01{ background: linear-gradient(45deg,red 40%,green 50%,blue) 60%; } 퍼센트로 조절가능 https://cssgradient.io/ CSS Gradient — Generator, Maker, and Background As a free css gradient gener.. 2022. 9. 23.

css 가시속성(사라지게 하기) hover, transdition 등 영역정리 1. display: none; 영역사라짐 display: none은 컨텐츠를 안보이게 하고 영역도 같이 사라지나, transdition 이 사용 불가하다. 따라서 hover 등 transdition : all 2s 같은 효과를 쓰고 싶을때 사용 불가. display none 으로 컨텐츠를 사라지게 했다면? hover 적용 컨텐츠에 display: block; 을 적용, 마우스를 가따댔을때 다시 보이는 효과 가능 2. opacity:0; 으로 투명하게 만들기 opacity: 0; 영역 남아있으나 내용없어짐 선택가능 hover에서 쓸때는 opacity 값을 1로 주어 다시 나타나게한다. 꼭 visibility: hidden; 와 같이 사용 3. visibility: hidden; 영역은 남아있으나 선택안됨 2022. 9. 23.

css- display: -webkit-box 문단 말줄임 게시판 부분 3줄 이상 넘어가는 글씨는 말줄임표로 표시될 수 있게 셋팅해보자. 태그 속성 display: -webkit-box; 크롬,사파리용, 말줄임 display (익스안됨) 특수 -webkit-box-orient: vertical; 글자의 흐름을 세로방향 -webkit-line-clamp: 3; 말줄임나올 줄수 text-overflow: ellipsis; 현재는 없어도 말줄임 나오지만 예전엔 필요 혹시 모르니 삽입 (IE11대응, 익스는 말줄임 처리가 안되므로) max-height: 108px; 글자가 짦으면 놔두고 글자가 길 경우 최대크기 지정하여 안늘어 나게함 적용코드 p { font-size: 25px; display: -webkit-box; -webkit-box-orient: vertical.. 2022. 9. 22.

html, css - 유튜브 동영상 2 /모달팝업창 적용 자 여기 메인화면에 유튜브 버튼을 클릭하면 유튜브가 보이게 하기 위해서 영상을 먼저 넣어보았다. 16:9의 비율에 맞춰, 가로 850 사이즈로 영상을 맞추고 싶을때 세로(높이) 크기를 구해보자. 가로가 850사이즈일때 16:9 비율 구하기 ( 원하는 너비 크기 × 9 ) ÷ 16 ＝ 높이값 (( 850 x 9 ) = 7650 ) ÷ 16 = 478.125 즉 가로(넓이) 850px 세로(높이) 478px 이렇게 높이를 구하고 영상을 넣어봤을때 화면을 옮기거나 축소를하면 ? 자동리사이징 안됨 정가운데가 아닌 이상한데 붙거나 화면이 이동해버린다.. 즉 모바일이나 여러 다른 환경의 브라우저에 노출될 경우 화면 박살★ 가변요소로 높이값을 지정하지않고 퍼센트로 항상 정중앙에 위치하도록 해보잣! 1. 유튜브가 들어.. 2022. 9. 21.

html, css - 유튜브 동영상 넣기 여기 재생버튼을 누를시 유튜브 동영상이 팝업으로 뜰수 있도록 적용해보자 1. 유튜브에서 태그 가져오기 framenorder 속성은 비표준이므로 제거 단 이럴경우 자동재생이나 무한 재생이 적용되지않는다. 2. 자동재생 autoplay 유튜브 옵션은 url뒤에 파라메터(매개변수)를 붙인다. url?파라메터=값&파라메터=값 형식 3. 음소거 적용 mute 참고링크 https://stackoverflow.com/questions/35044594/youtube-how-to-present-embed-video-with-sound-muted 2022. 9. 21.

이전 1 ··· 3 4 5 6 7 8 다음

티스토리툴바