본문 바로가기
728x90

블록체인_9기/❤️ HTML & CSS

5강_230306_html (transform, @keyframes, @media, input, +, ~, >, 폰트설정)
블록체인_9기/❤️ HTML & CSS 2023. 3. 14. 5강_230306_html (transform, @keyframes, @media, input, +, ~, >, 폰트설정) 목차 005 1. transform 2. @keyframes 3. @media 4. css형제 선택자 ‘+’, ‘~’ 5. css 자식 결합자 ‘>’ 6. input_radio 속성 7. font 설정 👩‍💻중간실습_media 활용하기 transform transform: translate(50px, 100px); transform: translate(x축, y축) 해당 태그의 위치를 이동시켜준다. transform : translateX(100px); transform: translateX(x축의 값); y축은 없고 x축만 입력한 상태. 따라서 x축만 이동 transform: scale(2,2) 크기를 조절할 수 있다. 0.5가 태그의 50% 크기이다. transform: rotate(125deg) 태..
4강_230303_html 태그 및 속성(video, audio, iframe, form, lable, position, background 등)
블록체인_9기/❤️ HTML & CSS 2023. 3. 14. 4강_230303_html 태그 및 속성(video, audio, iframe, form, lable, position, background 등) 목차 004 1. video 태그 2. audio 태그 3. iframe 태그 4. form 태그 5. position 속성 6. background 속성 7. hover 클래스 👩‍💻 중간실습_유튜브 영상목록 화면 만들기 video 태그 영상을 출력하기 위해 사용하는 태그 src에 주소나, 현재 컴퓨터에 저장되어 있는 파일 경로를 입력 속성 control: 영상의 컨트롤 박스를 출력 autoplay: 영상이 불러와지면 자동으로 재생한다. loop: 반복재생 muted:음소거 ios는 웹 페이지에 첫 접속시 오디오가 재생되지 않는 것을 권장한다. audio 태그 음악을 재생하는 태그 속성은 비디오 태그와 동일하게 적용된다. ex. control / autoplay / loop / muted iframe ..
블록체인_9기/❤️ HTML & CSS 2023. 3. 14. 3강_230302_html (style속성) 목차 003 1. style 속성 2. div 속성 3. style 선택자 4. link 태그 / css코드 5. input 태그 👩‍💻 중간실습_메뉴판 만들기 style 속성 CSS(Cascading style sheets), 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어. 속성을 추가할 때 ⇒ 속성명 : “속성 값” width: 너비. max-widht(최대), min-widht(최소) height: 높이. max-height(최대), min-height(최소) background-color: 배경색, 색상을 태그에 입힐 수 있다. rgb(255,255,255): 색상명 대신 rgb코드로 입력이 가능하다. rgba(255,255,255,1): a는 불투명도를 나타낸다. 1이 100%이다. ..
2강_230228_html의 태그, table (ol, ul, li, a, img, table, style 속성)
블록체인_9기/❤️ HTML & CSS 2023. 3. 13. 2강_230228_html의 태그, table (ol, ul, li, a, img, table, style 속성) 목차 002 ❗행 복사 단축키 ／ 커서 이동 단축키❗ 1. 리스트태그 ‘ol, ul, li’ 2. 하이퍼링크 태그 ‘a’ 3. style 속성 4. 이미지 태그 ‘img’ 5. 표 작성 태그 ‘table’ 👩‍💻중간실습_영화 소개 나열 (img 실습) ❗행 복사 단축키 ／ 커서 이동 단축키❗ 행 복사 단축키 해당 커서의 줄을 방향키 방향으로 복사 단축키: alt+shift+방향키 커서 이동 단축키 해당 커서의 줄을 방향키 방향으로 이동한다. 단축키: alt+방향 리스트태그 ‘ol, ul, li’ 리스트를 작성할 때 사용하는 태그. li태그와 짝으로 사용한다 ol태그 번호가 매겨지는 리스트 첫 번째 두 번째 시작번호 지정 속성 (start) ol태그에 start속성을 부여하여 리스트로 시작될 번호를 지정할..
1강_230227_html의 기초(h1~6, p, br, div, span)
블록체인_9기/❤️ HTML & CSS 2023. 3. 13. 1강_230227_html의 기초(h1~6, p, br, div, span) 목차 001 1. HTML? 2. 주석 3. 코드 작성 방법 HTML? HTML이란? hyper text markup language 웹페이지 표시를 위해 개발된 마크업 언어. 제목, 목록 같은 구문을 구조적으로 나타낼 수 있다. 따라서, 구조적 문서를 만들 수 있는 방법 메모장으로도 코드를 작성하여 구현이 가능하나, visual studio code를 사용하면 자동으로 입력되는 태그들이 있기 때문에 작성이 간편하다. 비쥬얼 코드에서 새 파일 작성 시, ‘파일이름.html’로 작성되어야 한다. 주석 주석이란, 개발자가 개발하면서 메모하는 방법을 일컫는다. 주석으로 처리된 내용은 코드로 읽지 않는다. 입력방법 단축키 주석 설정: ctrl + k + c 주석 해제: ctrl + k + u 코드 작성 방법 현..
728x90

티스토리툴바