반응형 웹 퍼블리싱 자료집22 [CSS] 폰트 폰트- 구글 웹 폰트 적용: https://fonts.google.com/- Font Awesome: https://fontawesome.com/더보기@charset "utf-8";/* 폰트의 굵기 */font-weight: normal;font-weight: bold; /* 폰트의 크기 */font-size: 60px;font-size: 1rem; /* 최상위 html 기준 상대 비율로 변환 */font-size: 1em; /* 부모 태그 기준으로 상대 비율 적용 *//* 폰트 모양(시스템 폰트: 기본 폰트) */font-family: "돋움";font-family: "굴림";font-family: "serif";font-family: "arial";/* 구글 웹 폰트 */@import url('htt.. 2025. 3. 5. [CSS] CSS 선택자 CSS 선택자더보기@charset "utf-8"; /* 여러줄 주석: 설명글 삽입시 사용*//* 모든 태그 선택자 */* { border: 1px solid black;}/* 태그 선택자: 해당 태그 모두 선택 */h1 { border: 1px solid black;}/* 자손 선택자: 직계 자식과 손자까지 모두 선택 */p strong { border: 1px solid black;}/* 자식 선택자: 직계 자식만 선택 */ul > li { border: 1px solid black;}/* 그룹 선택자: 해당 선택자들 모두 선택 */h1, h2, h3 { border: 1px solid black;}/* 순서 선택자: 해당 순서의 자식 선택 */ul li:nth-of-type(1) { .. 2025. 3. 5. [HTML] 외부파일 연동(CSS, JavaScript) 외부파일 연동더보기더보기TagDescriptioncss 파일 연동javascript 파일 연동외부파일 연동 예시더보기더보기 ... 2025. 3. 5. [CSS] 참고자료 - [Doc] CSS Standard- [Doc] MDN: CSS- [Site] HEROPY Tech: HTML, CSS 첫걸음- [Site] TCP SCHOOL: CSS- [Video] Do it! 프런트엔드 웹 디자인 입문- [Video] Do it! 반응형 디자인- [Site] Flexbox Froggy: CSS flex 연습- [Video] Do it! HTML+CSS+자바스크립트 웹 표준의 정석- [Video] Do it! 인터랙티브 웹 페이지 만들기 2025. 3. 5. [CSS] 목차 2025. 3. 5. [HTML] 멀티미디어 태그 멀티미디어 태그더보기TagDescription오디오 태그. controls로 재생바가 보여짐. autoplay로 자동재생. loop로 반복 재생 설정. preaload 속성은 파일을 모두 로딩 후 재생비디오 태그. controls로 재생바 설정. autoplay로 자동재생. loop로 반복 재생. muted로 음소거 설정. poster로 비디오 이미지 설정 멀티미디어 태그 예시더보기 2025. 3. 5. [HTML] 폼 태그 폼 태그더보기TagDescription text 형태의 입력을 받는 태그비밀번호 형태의 입력을 받는 태그. 보안 출력체크박스 태그. value가 보여짐. 복수 개의 선택 가능라디오버튼 태그. value가 보여짐. 라디오버튼 태그들의 name값을 동일하게 작성하면 1개만 선택첨부파일 업로드색상 팔레트로 색상 선택 가능달력으로 날짜 선택입력 값들 초기화.전송 버튼. 데이터 전송됨블록 다운 메뉴로 여러 요소 선택. 의 부모 태그각 선택 블록텍스트 박스내 값 입력. 긴 글 입력폼 태그들의 부모 태그. action은 전송될 주소, method는 전송될 방식 폼 태그 예시더보기 아이디 비밀번호 2025. 3. 5. [HTML] 목록 Tag 목록 Tag- 목록내 목록 태그 중첩 가능더보기TagDescription순서가 없는 태그. 태그의 부모 태그순서가 있는 태그. 태그의 부모 태그목록별 태크정의형 태그. , 의 부모 태그정의하고 싶은 제목정의 내용(설명) 목록 Tag 예시더보기 2025. 3. 5. [HTML] 서식 Tag 서식 Tag더보기TagDescription ~ 제목 태그. 숫자가 커질수록 글자 크기가 작아짐문단 태그특정 영역을 그룹화글자를 굵게. screen reader을 이용하기 위함글자를 기울임. screen reader을 이용하기 위함페이지 링크 연결. target이 blank일 경우 새로운 페이지가 새탭에 열림inline 요소들만 그룹화 시킴이미지 파일 불러오기줄 바꿈 서식 Tag 예시더보기 Title Welcome to cogito30. We learn HTML, CSS 2025. 3. 5. [HTML] Semantic Tag Semantic Tag더보기TagDescriptoin웹 문서의 머리말 영역웹 문서에서 링크 등의 메뉴 영역웹 문서에서 동영상, 사진 등 다양한 멀티미디어를 담는 영역웹 문서의 본문으로 콘텐츠를 담는 역역웹 문서의 본문과 연관성이 적은 외부 영역웹 문서의 특정 영역을 그룹화웹 문서에서 기사나 개별 콘테츠를 담는 영역웹 문서의 꼬리말 영역Semantic Tag 예시더보기 2025. 3. 5. 이전 1 2 3 다음 반응형
