본문 바로가기

분류 전체보기235

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.
비주얼스튜디오 태그 한번에 수정하기 변경할 지점 잡고 ctal + f Replace 에 넣고 엔터 (빈칸은 놔두기) 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.
css @media 미디어쿼리 가변레이아웃 여기 전체 화면일때 4개씩 보이는 컨텐츠를 창을 1412px로 줄여줬을때 3개씩 나오도록 조정해주자. 먼저 그리드 부터 계산을 잘 해주고 들어가야한다 웹 화면은 전체화면 1920이지만, 컨텐츠 그리드는 1280px을 기준으로 한다. (화면 환경이 다 다르기 때문에 표준 1280) 거기에 스크롤바 크기도 감안해줘야 하기때문에 1280 - 17 (세로 스크롤바 크기) = 1263 (컨텐츠 최대크기) 가 나온다. 그렇기 때문에 데스크탑 컨텐츠 그리드는 일반적으로 1200px 을 사용하여 1280에서도 좌우여백 30px씩 확보한다. 따라서 컨텐츠 그리드가 1280 이상일 경우 가변레이아웃 처리가 필요하다 (css 미디어 쿼리 사용) 보통 심미성, 사용성, 매체성 디자인에 사용 컨텐츠 4개일때 전체 넓이 1304.. 2022. 9. 7.

티스토리툴바