본문 바로가기

분류 전체보기235

css 선택자 정리 선택자란 ? 무언가에 스타일을 주고자 할때 css 시트에서 대상을 정해준다. 전체선택자 *{margin: 0; padding: 0px;} * 문서무든 요소에 적용(초기화 시에만 한방에 사용) 여러요소 동시선택 h1,h2,h3,h4,h5,h6 {font-weight: normal;} ,로 분리 아이디선택자 #header 아이디선택자는 한 페이지에 한번만 사용 가능 클래스선택자 .logo 아이디 선택자 아래 .으로 구분 많은 요소에 스타일을 한꺼번에 지정하고자 할때 유형선택자 p { color: red; } 요소 이름 하위선택자 #hearder .logo .img 부모요소부터 안으로 하나씩 적어들어감 자식선택자 #container>p 탭키 한번인 요소 직계자식인 모든 요소에 적용 (직계이후 자손 불포함) 자.. 2022. 10. 9.
html lavel for 폼 양식에 이름지정 태그 label은 폼의 양식에 이름을 붙이는 태그 주요 속성은 for label의 for의 값과 양식의 id 값이 같으면 연결 label 클릭시 연결된 양식에 입력 또는 체크, 체크해제 먼저 체크박스를 만들어주자 개인정보수집 및 이용에 동의합니다. 이럼 체크박스는 나오나 박스를 클릭해야만 체크가 된다. 이떄 label로 이름표를 붙여 텍스트 선택시 체크가 가능하게끔 만들어준다. 개인정보수집 및 이용에 동의합니다. label로 연결해준 코드 2022. 10. 9.
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.
문의작성하기 readonly / input input type="text" 에 글씨 미리적용 문의 작성하기 폼필레 이미 글씨가 들어가이씀 이름이 이미 들어가있음 2022. 10. 6.
css scrllbar 공통클래스로 스크롤 변경(커스텀스크롤바) 이렇게 글이 많은 박스요소일경우 스크롤을 만들어주어 내용을 담아보자! 1.html , div class 지정 먼저 html로 text 영역을 감고있는 부모에 css 클래스로 변경 가능하도록 이름지정 2. css공통이 아닌 개별 css로 제작 스크롤 변경은 이 개인정보 수집에만 들어가는 디자인으로, 웹사이트 전체에 적용되는 디자인이 아니다. 그러므로 기본 공통css 인 common 시트가 아닌 개인정보 수집이 들어가는 개별 css 시트에 스크롤 변경을 해준다. 스크롤 지정전 text box 모양 .inquiry_page .agree_wrap .txt_scroll { height: 154px; overflow: auto; } layout.css에 페이지 네임을 지정 스크롤영역 크기 지정 height:154p.. 2022. 10. 6.
css checkbox 만들기 글자부분(label) 를 클릭해도 체크 되는 체크박스를 공통 클래스로 만들어 보자 ! 왜 공통클래스를 줄까? 저 동그라미 체크박스는 이 페이지에서만 쓰이는게 아닌 홈페이지 전체에서 계속 쓰일 디자인이기 때문에..! 1. html 로 check box 생성 개인정보수집 및 이용에 동의합니다. (필수) 기존 텍스트박스를 포함한 agree_area 안 agree_wrap 안에 html의 input 태그 타입을 checkbox로 지정해준다. (또한 글자를 클릭하면 체크박스에 표시가 되도록 label을 같이 지정) - 라벨을 누르면 체크박스가 체크되어야함 - 이때 오른쪽 박스는 flat으로 띄워줘야 하므로 이름을 다르게 지정 이때 초기화 코드를 삭제해 주어야 체크박스를 볼수 있음 폼요소의 높이가 다를때 요소끼리 .. 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.
html/css Open Graph 오픈그래프(미리보기) 오픈그래프란? 우리가 url을 전송됬을때 자동으로 나오는 이미지를 말한다! 페이스북에서 개발해서 페이스북 오픈그래프라도 불림 ---> url 전송시 미리보기 지원 html에 오픈그래프 코드 삽입 필요! 오픈그래프 설명 - 200~300px png로 제작 (보통 로고나 심볼 이용) 페이스북에서 개발한 오픈그래프 프로토콜 네이버 스마트에디터, 카카오톡에 url입력후 확인 (정식확인은 페이스북 개발자 센터 공유 디버거 페이지에서 정확한 확인가능) 오픈그래프 코드에러일시 수정해도 카카오톡은 반나절이상소요될수 있으며 공유디버거에서 반영되면 수정된것임 index아닐경우 오픈그래프 url에 파일명도넣어야함 태그 http://ossamuiux.com/subway/franchise_inquiry.html"> http:/.. 2022. 10. 6.
css input 과 label 사용시 문법 주의사항 input 과 label 사용시 주의사항 label 사용시 주의 폼의 설명부분 으로 input 과 같이 쓰인다 ( label 글씨를 클릭하면 lnput 에 체크 되도록 ) 이떄 label태그안에 넣는 방식은 비표준이므로 추천하지 않는다. (인라인 에는 인라인 요소 안에만 가능하기 때문) inline 요소안에 inline 문법적으로 불가 그러나 같이쓰면 클릭가능 기능구현에는 문제가 없으나 문법적으로 안됨 표준방식 예시 제작문의 참고링크 https://webdir.tistory.com/435 폼 필드(input type="file") 디자인 #4 폼 필드 디자인중 마지막을 장식할 파일 필드에 대한 내용입니다. 이 또한 브라우저 호환에 어려움을 겪곤 하는데, 관련해서 대안책들을 알아봅니다. 파일 필드 디자인 .. 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.

티스토리툴바