본문 바로가기

Programming/CSS&Html&JS10

input 필드 색 제거 / 아래 밑줄 넣기 input{ background: transparent; border:0; border-style:none; border-bottom:solid 1px #cacaca; border-collapse:collapse; } 2023. 3. 11.

[CSS] css 정리 (단위, position, float, flex ect) Block / inline 요소 태그 특징 block : 한 줄 모두 차지한다 = 자동 줄바꿈이 된다 (, , , ,,) inline: 콘텐츠 영역만 차지한다 = 넓이, 높이값 변경할 수 없다 ( , ,,,) inline block: 인라인 요소와 블록 요소 속성을 둘 다 가지고 있다. CSS 단위 in(인치) =96px cm(센티미터) = 37.8px mm(밀리미터) = 3.78px pt (포인트)= 1/72in pc(파이카) = 12pt vh : 브라우저(뷰포트) 높이값의 1/100단위, 뷰포트가 바뀌면 자동으로 반응 변환 vw: 브라우저(뷰포트) 너비값의 1/100단위, 뷰포트가 바뀌면 자동으로 반응 변환 vmin: vh와 vw중 더 작은 것을 적용 vmax: vh와 vw중 더 큰 것을 적용 ex:.. 2023. 3. 3.

css/js/html 무료로 들을 수 있는 온라인 강의 추천 오늘은 코딩 및 다양한 온라인 강의를 무료로 들을 수 있는 사이트를 소개해보도록 하겠습니다. 부스트코스 코딩과 관련된 기본 강의를 무료로 들을 수 있는 사이트입니다. 마케팅과 관련된 강의도 있습니다. 독특한 점은 인공지능 강의까지 제공해준다는 점입니다. https://m.boostcourse.org/ 다 함께 배우고 성장하는 부스트코스 부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다. m.boostcourse.org 노마드코더 노마드코더에서도 무료 강의를 제공하고 있습니다. 초심자가 입문하기 쉬운 강의를 제공하고 있으며, 무료 강의 뿐만 아니라 유료 강의도 진행하고 있습니다. 커뮤니티가 활발한 편입니다. 바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Noma.. 2023. 3. 1.

[CSS] 선택자(selector) 종류 전체 선택 *{속성명:속성값} 모든 html요소를 선택하여 속성을 지정해주는 것을 말합니다. 예시 *{ border: 1px solid black; } 태그 선택자 태그이름{속성:속성값; 속성:속성값;} 해당되는 태그 명을 전부 선택하여 스타일을 적용할 수 있습니다. 예시 h1{ border: 2px solid black; } h2{ border: 1px solid green; } h3{ border: 2px solid red; } ID, Class 선택자 #아이디{속성:속성값}; .클래스명{속성:속성값}; 자손 선택자 선택자1 선택자2{속성:속성값;} 부모 태그의 하위 자손(자식/자손)을 선택하여 속성을 지정해주는 것을 의미합니다. 태그 이름 뿐만 아니라 아이디와 클래스를 사용할 수도 있습니다. 예시 .. 2023. 2. 16.

[Html] 멀티미디어 콘텐츠 태그 오디오 태그 //controls 옵션값을 지정해줘야 재생 컨트롤 패널이 보임 //자동재생 //무한 반복 //해당 파일을 로딩을 먼저 시킨 후 재생 비디오 태그 //소리 출력 X //자동 재생 //루프 //미리보기 이미지 2023. 2. 12.

[Html] 폼 태그 input, check box, radio 아이디 //해당 인풋에 제목에 해당하는 라벨 생성 필요 //for 값 = 인풋과 라벨요소 연결 비밀번호 선택 체크박스 radio radio radio file, color, date, reset, submit 첨부파일 색상선택 날짜선택 전송 취소 전송 Drop down, text box 선택 1 선택 2 선택 3 Form //method :전송 방식 //action : 위치값 아이디 비밀번호 2023. 2. 12.

[html] 목록 태그 순서가 중요하지 않은 목록 부모 태그 : , 자식 태그 : //입력 ul li*3 //결과 목록 목록 목록 순서가 중요한 목록 부모 태그 : , 자식 태그 : //입력 ol li*3 //결과 목록 목록 목록 정의 목록 이름 내용 중첩 목록 입력 ul>li*{number} 목록 1 하위목록 1 하위목록 2 목록 2 하위목록 1 목록 3 목록 4 2023. 2. 12.

[Html] 서식 태그 H1 - H6까지 자동 완성 visual studio code에서는 h1만 입력해도 자동으로 열린태그, 닫힌태그를 생성해줍니다. //입력 h$*6 //결과 {number} 단어로 구성된 텍스트 자동 완성 //입력 lorem5 //결과 Lorem ipsum dolor sit amet. //입력 lorem //결과 Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum eligendi error necessitatibus, natus laudantium fugit? Tempora eum obcaecati repellat nesciunt tempore, perferendis, odit itaque dolorum unde ipsa quas, qu.. 2023. 2. 12.

[Html] 기본 태그, 시맨틱 태그 태그 (Tag) : 브라우저가 웹 문서를 이해할 수 있도록 컨텐츠를 목적에 맞게 분리하는 규칙 // 문서 타입을 지정 // 출력을 담당하는 콘텐츠 태그 시맨틱 태그 : 웹페이지를 제작할 때 HTML5의 시맨틱 태그를 이용해 목적에 맞게 화면을 구분해준다. 종류 설명 웹 문서의 머리말 영역 웹 문서에서 링크 등의 메뉴 영역 웹 문서에서 사진, 동영상 등의 멀티 미디어를 담는 영역 본문 본문과 연관성이 적은 외부 영역 (장바구니 등) 웹 문서의 특정 영역을 그룹화 기사나 개별 콘텐츠를 담는 영역 웹 문서의 꼬리말 영역 EX) 2023. 2. 12.

이전 1 2 다음

티스토리툴바