본문 바로가기

CSS🔧95

CSS -transform: translate(-50%,-50%) 정렬공식 transform: translate(-50%,-50%) 정렬공식 컨텐츠의 요소가 항상 정 가운데로 가도록 지정 translate() 속성 translate (x, y) 함수의 요소를 왼쪽에서 부터 X거리 , 위쪽에서부터 Y 거리만큼 상대적으로 위치를 정하거나 이동 및 재배치 지정 translateX(수평만) 좌우(수평 방향)의 이동 거리 값을 지정 translateY(수직만) 함수는 상하(수직 방향)의 이동 거리 값을 지정 translateZ(z방향만) Z 방향의 거리로 이동을 지정 % 지정 불가 X (%사용해도 0) *주의할점 정렬공식을 사용했을때 이미지가 깨지는 현상이 있다. 모니터는 픽셀로 이루어져 있기때문에 %사용으로 픽셀에 맞지 않을 시 이미지가 깨져보임 기존 정렬공식 사용시 #header ... 2022. 9. 21.

CSS :nth-child(n) 가상선택자 nav 설정 nth-child 란? 부모의 n번째 자식 요소 선택을 말한다. 예제 고고 상단 헤더 메인메뉴(드롭박스)를 펼쳤을때 서브 메뉴(depth02) 나오게 하기 자 이렇게 BRAND 안에 하위 메뉴들이 나올 수 있도록 ul 태그안에 li를 셋팅해준다. HTML 삽입 미리보기할 수 없는 소스 BRAND OUTBACK STORY BEEF STORY STEAK ACADEMY OUTBACK CSR PRESS CENTER 그리고 css 로 넘어가서 상단 메인메뉴에 마우스를 가따대면 하위 메뉴가 나올수 있도록 hover 를 지정해준다. #header .gnb_wrap .gnb>li:hover .depth02_wrap { display: block; } 그다음 하위메뉴 를 nth 가상 자식선택자 로 지정해준다 (mragi.. 2022. 9. 18.

CSS-border로 삼각형 만들기 transparent 속성값 사용 transparent 뜻 : 투명한 삼각형을 만들어줄때 한곳에만 지정해 색을 채워준다. 전체 색 주기 border: 20px solid red; 왼쪽 border-left-color: blue; 오른쪽 border-right-color:yellow; 보더의 원래 생김새 border: 20px solid transparent; 투명색주기 버튼에 한쪽에만 화살표를 줘서 색을 채울때 .lang_wrap .btn_lang:after { content: ''; position: absolute; right: 10px; top: 50%; margin-top: -1px; width: 0; height: 0; border: 3px solid transparent; border-top-color: #ccc; 기존 버튼타.. 2022. 9. 16.

html css video (풀페이지 비디오 삽입) 확장자 포멧 mp4 포멧 사용 (모든브라우저 대응) 태그 html source : mp4가 모든브라우저 지원하므로 불필요 - 여러 포맷 연결할경우 속성명 - autoplay="autoplay" 이나 속성과 값이 같을경우 속성명만 사용가능 (생략가능) 자동재생 : muted(음소거) 필수 자동루프 (무한재생) : loop 용량 20M 이하 권장 - 용량 클경우 트래픽 문제 발생할수있음 지원 - 아이폰 저전력모드일경우 자동재생불가 - 구글,ios video 정책문서 참고 - ie9이상 가능 - ios playsinline속성사용해야 자동재생됨 문구사용 Your browser does not support the video tag 삽입 -익스에선 동영상 지원이 안되므로 위 문구가 보일 수 있게 Your bro.. 2022. 9. 15.

css text 외곽선 css에 외곽선기능은 없으므로 글자 그림자 위치를 사방에 적용한다. (포토샵으로 치면 stroke기능) css에 외곽선기능은 없으므로 글자 그림자 위치를 사방에 적용 text-shadow: /* 위 */ 0px -1px 0px #000, /* 아래 */ 0px 1px 0px #000, /* 왼 */ -1px 0px 0px #000, /* 오른 */ 1px 0px 0px #000; } .main_visual h2 { text-shadow: 0px -1px 0px #000, 0px 1px 0px #000, -1px 0px 0px #000, 1px 0px 0px #000; } 2022. 9. 15.

css position 으로 띄우기+정렬공식 posiion : 레이어개념. 부모의 엘리먼트 (element:요소) 에 구애받지 않고 자유롭게 배치할 수 있다. 속성으로 relative(비교상의 상대적인) , absolute(비교대상이없는), fixed (고정된), 3가지가 있다 position: relative position: absolute; position: fixed; 부모의 기준점 or 제자리띄우기 (absolute의 기준이 된다.) 부모에게 기준점 적용 창 기준 / 기준변경 불가 창고정 레이어 기준안에서 다른 요소와 겹칠때 사용 블럭이 되며 크기는 내용만큼 줄어듬 좌표값 없음 > 자신이 기준 좌표값 있음 > 기준요소를 따라 위치가 변경 바깥 요소에 기준이 없을경우 창 기준 부모안의 모든 요소가 absolute일 경우 부모높이는 0, 높이.. 2022. 9. 13.

css background: url(../)no-repeat 배경 써야할 경우 1 레이아웃크기보다 큰 이미지 사용시 (단, 데이터로 들어오는 클릭되는 이미지일경우 img로 넣는경우가 많음) 2 내용을 꾸미는 이미지(아이콘) 3 반복이미지 4 :hover로 이미지나 배경위치 변경 5 sprite image 사용시 6 fixed배경 사용시 (사용자제, 모바일에서 안됨) 7 투명배경 사용시 8 배경이미지를 요소에 가득채울때(full배경) 속성값 속성 background:색 url(../images/파일명.확장자) no-repeat x y위치 / cover(크기) (fixed 모바일 적용안됨 사용X) 예시 background: yellowgreen url(../images/ci-shinhan-pc.png) no-repeat right 100px bottom 100px /.. 2022. 9. 13.

css button 슬라이드 버튼, 포지션 정렬공식 .container .main_slider .btn_wrap button:hover { background-position: 0 -60px; } 상단 슬라이드에 버튼을 넣어보자! 먼저 HTML로 section 구조안에 버튼을 지정해준다. (양쪽이므로 버튼을 div로 감쌀것!) 제목 글자는 '스크린기능' 접근성 때문에 꼭 넣어주어야한다. 이전슬라이드 다음슬라이드 자 이제 css로 가서 꾸며보자 .container .main_slider .btn_wrap { position: absolute; width: 1100px; left: 50%; margin-left: -550px; bottom: 178px; padding-left: 60px; } 메인 이미지가 position으로 떠있기 때문에 버튼도 positi.. 2022. 9. 12.

css overflow: hidden; 오버플로우란? overflowf : 넘쳐흐른다. 즉 컨텐츠요소의 크기가 너무 커서 지정된 공간을 넘쳐흐르는 경우, 어떻게 보여줄지 지정하는 태그. 적용해보기! 최소넓이 min-width: 1280px 사이즈 / height:700px 로 배경에 메인 슬라이드를 적용해보자! 여기 2000px 짜리 이미지를 적용했을때 빨간 박스보다 이미지가 커 넘치고, 스크롤이 생긴걸 볼 수 있다. 먼저 부모영역에 position:relative; 로 기준을 잡고 .container .main_slider { border: 3px solid red; height: 700px; position: relative; } 다음으로 자식영역에 position: absolute; 로 컨텐츠를 띄어준다. .container .main_slider a.. 2022. 9. 12.

CSS hover 마우스롤오버 이렇게 헤더 부분에 마우스를 가져다 대면 빨갛게 강조표시가 나올수 있는 hover 태그 연습! 1. hover 할 대상 만들기 (없어지게할) 빨간줄을 넣어보자. 먼저 가상클래스 after로 a태그로 작성된 태그에 꾸며준다. #header .gnb_wrap a:after { content: ''; height: 3px; background: red; width: 100%; left: 0; bottom: 30px; position: absolute; } after 은 가상선택자이기때문 content :''; 속성 필수 height: 높이값을 지정해주고 backfround: 배경색을 지정해주고 width: 넓이지정 (부모값에 이미 넓이가 지정되어있어 100%) bottom: 바닥에서 올라오는 높이 지정 pos.. 2022. 9. 11.

css box-shadow 그림자넣기 이렇게 li 태그 또는 컨텐츠에 그림자를 줄때! css로 box-shadow 태그를 적용해준다. .etc li { box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); } 여기서 그림자를 주고싶은 효과를 +(양수), -(음수)로 넣어주는데 순서는 box-shadow: x축 y축 blur rgba컬러(0,0,0, 투명도%) 잘모르겠으니 예제를 만들어보자 ^_^... 오른쪽 : box-shadow: 5px 0px 0px; 왼쪽 : box-shadow: -5px 0px 0px; 아래쪽 : box-shadow: 0px 5px 0px; 오른+아래+블러 : box-shadow: 5px 5px 5px 5px; 컬러 : box-shadow: 5px 5px 10px -5px red; 안쪽 : b.. 2022. 9. 10.

css float, float 해제 float : 물에 떠있다. * 요소를 좌우배치 할떄 display:flex가 원칙 단 익스 하위에선 적용이 안되므로 float를 사용 그래서 데스크탑은 float 주로사용 / 모바일 반응형은 flex를 주로 사용 float float 해제 clearfix - 부모(물)의 표면에 띄우는 속성 - 좌우배치가 목적이 아닌 이미지를 문단옆에 배치할때도 사용 - 부모자식중 누구라도 float 사용시 마진병합없음 (떠있기때문) - float 설정시 크기가 내용만큼 줄음 - display:block 요소로 변경됨 - 부모안의 모든 요소가 float 이면, 부모의 높이 0, 사라짐 - 앞쪽 요소가 모두 float 이면 아닌 요소에 마진병합 발생 - float 사용시 margin:0 auto 안먹힘 - :left 요소.. 2022. 9. 9.

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

티스토리툴바