본문 바로가기

CSS🔧95

css 초기화 appearance: none appearance 란? 네이티브 (=os/브라우저 자체 테마)요소 디자인 해제/변경 *크로스브라우징(=모든 브라우저 동일화면 구현)에 유용 주요 최신 브라우저 지원 (IE 미지원 ,Safari 부분지원) 요소자체구성요소숨기기 (= 요소내장구성요소제거 = appearance속성 = 어피어런스속성) (실렉트화살표제거, select, arrow) -webkit- : 구글, 사파리 브라우저에 적용. -moz- : 파이어폭스 브라우저에 적용. -ms- : 익스플로러에 적용. (생략 가능) -o- : 오페라 브라우저에 적용. /* -webkit-appearance: none -> iOS에서 폼요소에 내부그림자가 나오므로 빼줌 */ input, select, textarea, button { vertical-ali.. 2022. 10. 7.

html textarea / placeholder / 줄바꿈 .inquiry_page .inquiry_area .th_top { vertical-align: top; padding-top: 24px; } .inquiry_page .inquiry_area textarea:focus { outline: none; } placeholder도 이렇게 줄 바꿈을 할 수 있다. 본 textarea 내에서 placeholder을 줄 변경 하기 위해서는 or 이 필요 내용 textarea 한줄작성 엔터금지 리사이즈 깨질때 리사이즈 되지 않도록 초기화 코드 넣어주기 /* textarea 리사이즈기능 빼기 */ textarea {resize: none} https://stackoverflow.com/questions/7312623/insert-line-break-inside-pla.. 2022. 10. 7.

css table thead 미적용 표만들기 이슈 table-layout: auto; 기존 thead 가 적용되어있는 표를 만들때 , 객실명 넓이를 .tbl_fee_wrap .col01 { width: 20%; } width: 20%; 지정해주었을 경우 제대로 적용이 되었었다. .tbl_fee_wrap .col01 { width: 20%; } thead가 없으면 table-layout 초기화 해야함 .inquiry_page .inquiry_area table { table-layout: auto; } 2022. 10. 6.

html 파비콘 브라우저 탭 아이콘 적용 (Favicon) 홈페이지 상단url의 파비콘 아이콘 적용 1. 이미지 변경 png 이미지를 ico 이미지로 128px 128px 크기 변경하여 다운 이미지 변환시 크기가 줄어들수 있음 주의 2. 링크주소 변경 이미지 변환후 이름 변경한 경로 지정 3. 적용확인 구글검색 png to ico 사이트 이용 https://www.freeconvert.com/png-to-ico 2022. 10. 6.

css inline-block 으로 여러컨텐츠 중앙정렬 이렇게 각각의 li 2줄 컨텐츠를 가운데로 정렬해보자. float 을 사용한다면? 기존처럼 li 에 float:left 를 사용한다면, 중앙정렬이 아닌 왼쪽정렬이 되고 밑에 3개도 옆으로 붙어버린다 이럴경우 html 에서 각각 감아서 class로 처리하는 방법도있으나 너무 복쟙.. display : inline-blok 요소는 inline 요소는? 내부는 block 처럼 표시 >박스 모양이 inline 처럼 옆으로 - width, height 사용불가. line-height (높이 조절) & text-aling (텍스트 정렬) 로 사용 li 에 display : inline-blok 을 설정 해준 후 ul 에 text-align : center을 지정해주면 li 컨텐츠가 글자로 인식되어 자동 정렬이 된다.. 2022. 10. 5.

css table 표만들기 툴 이용하기 tablesgenerator tablesgenerator 사용하기 do not css 체크 (html만 필요하기 때문) 칸 열 추가 한개씩 클릭 지우는건 선택하고 리무브 병합할 칸 잡고 머지 Generate 눌러서 카피 > html 적용 https://www.tablesgenerator.com/html_tables 2022. 10. 5.

css XEIcon 추가 css에 xeicon 넣어주기 1. xeicon의 get started 에서 링크 겟겟 html head에 폰트아래 코드 붙여넣기 주의 http://cdn.jsdelivr.net/npm/xeicon@2.3.3/xeicon.min.css XEICON 링크 앞에 http: 넣기 2. 아이콘찾기 3. i 태그에 아이콘 이름 html clss 로 지정 html 적용 상기 요금은 부가세가 포함되어 있는 가격입니다. css 적용 .fee_area .fee_wrap .warning i { margin-right: 5px; font-size: 18px; } 4.vertical-align 적용 inline 요소라 간격이 벌어지므로 vertical-align: -3px; 하단링크참조 http://xpressengine.g.. 2022. 10. 5.

css table만들기 (칸병합) 표 칸 병합 병합할 html th 태그에 scope rowspan"3" 열 row를 3칸 병합하라 Executive Suite Room 그리고 칸에 흡수되는 th Executive Suite Room 를 지워줌 heigth 줄경우 글자가 많은 칸은 위아래로 붙어버림 padding 권장 알아서 떨어짐 금액 부분 정렬은 클래스를 따로줌 4, 800, 000 중간에 칸병합이 있는 복잡한 표는 이렇게 만들기 넘 어렵 툴을 사용하자 https://www.tablesgenerator.com/html_tables 2022. 10. 5.

css- calc 로 가운데서 음수마진으로 이동하기 예시 position: absolute; left: calc(50% - 220px); right: 0; bottom: 0; 2022. 10. 5.

css 배경아이콘 sprite 이미지로 적용하기 네비게이션 가변 컨텐츠에 들어갈 아이콘이미지를 배경으로 넣어주자! 빨간 박스 부분에 공통클래스로 삽입 1. sprite 이미지 준비 2. 삽입될 자리에 background로 이미지 지정 .board_pagination_wrap .btn_paging:before{ content: ''; width: 14px; height: 14px; border: 1px solid red; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: url(../images/sprite_pc.png) no-repeat; } 공통클래스로 준비된 자리 (빨간박스) 에 마지막으로 background: url 로 이미지 경로를 지정해준다.. 2022. 10. 5.

css- text-overflow: ellipsis / 한줄 말줄임 .board_list_wrap .link { /* 글자안내려가게 */ white-space: nowrap; /* 자신이 가질수 있는 최대크기 지정 */ max-width: 90%; /* 인라인블럭으로 지정해야 100% 꽉 차지않게 */ display: inline-block; /* 한줄 말줄임 (익스가능) */ text-overflow: ellipsis; /* 넘어가는 요소 가리기 */ overflow: hidden; } 2022. 10. 4.

css- pagination 가변요소 페이지네비게이션 (active) 개수마다 컨텐츠가 변하는 가변요소는 무엇으로 만들어야할까? 겹치는 요소가 아니기 때문에 position 아님 왼쪽이나 오른쪽으로 붙이는 요소도 아니기 때문에 float:left 아님 inline:block으로 가운데 정렬을 해준다. 1. html 페이지네이션 이름 지정해주기 첫페이지 이전 1 2 다음 마지막페이지 버튼은 클릭하면 넘어가기 때문에 a 태그로 설정 공통 class 이름 지정하기 btn_paging lasg 마지막페이지 게시판 페이지에 공통으로 들어가는 네이게이션 바 이기 때문에 공통클래스로 처리해 줄것. > 클래스를 정확히 걸수 있도록 각각 이름 지정 2. css로 공통부분에 작성 2-1 자리잡기 전체 div_wrap 부분에 영역 설정 margin-top: 20px; 텍스트가 가운데 올 수 .. 2022. 10. 4.

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

티스토리툴바