HTML&CSS15 (CSS) 선택자 선택자 (Selector) 더보기 - 특정 요소를 선택해서 스타일을 원하는 설정을 부여해 주기 위해 요소이다 선택자 종류 전체 선택자(Universal Selector) id 선택자(ID Selector) class 선택자(Class Selector) 하위 선택자(Descendant Selector) 자식 선택자(Child Selector) 복합 선택자(Complex Selector) 가상 선택자(Pseudo Selector) 전체선택자 모든 태그에 적용하기 위한 방식 * { } * { box-sizing: border-box; margin: 0; padding: 0; } ID선택자 id속성 선택자를 찾아 style을 적용하는 방식 #id { } #test { background-color: lightg.. 2023. 1. 11. (CSS) CSS & Link태그 CSS (Cascading Style Sheets) 더보기 HTML 요소들이 각종 미디어에서 어떻게 보이는가를 정의하는 데 사용되는 스타일 시트 언어 style 속성은 해당 태그의 크기, 외곽선, 위치, 배경 등 설정, 기초적인 방법으로 인라인 형식으로 속성을 조절하여 html 파일로 주고받았지만 너무 그 크기가 커져 버렸다. 이에 가독성도 떨어지고 함으로써 CSS파일을 HTML 파일 외부로 뺀다 ※ : 태그들의 스타일 속성을 모아둔 태그. 작성 방식은 CSS 작성 방식과 동일하다 Link 태그 다른 파일을 가져오기 위해 사용하는 태그 주로 CSS파일이나 favicon을 가져올 때 사용한다 ( favicon은 브라우저 탭에 작은 아이콘을 뜻 ) 2023. 1. 11. (CSS) padding, margin padding 내부 영역의 여백 border(외곽선)을 기준으로 내부에 얼마나 빈 공간을 줄 건지 설정 margin 외부 영역의 여백 border을 기준으로 외부로 얼마나 빈 공간을 줄 건지 설정 box1 box2 box3 box4 box5 * { box-sizing: border-box; padding: 0; margin: 0 auto; } .box-container { /* 박스들의 부모 영역 표시 */ border: 5px solid firebrick; width: fit-content; } .box1, .box2, .box3, .box4, .box5 { /* 각 박스의 영역을 알아 볼 수 있게 설정 */ width: fit-content; font-size: 5rem; border: 5px sol.. 2023. 1. 11. (HTML) video, audio, etc Tags a 태그 링크 관련 태그 style 속성에 css 명령어를 선언하지 않는다, 자식 태그로 스타일을 설정한다 href="이동할 주소" < 기본적으로 현재 주소를 기준, 다른 웹페이지로 이동하고 싶다면 해당 주소를 설정하면 된다 유튜브 ※ target="_blank" 설정을 해주면 새로운 탭이 생기면서 열린다 video 태그 src="해당 주소" controls 속성은 영상의 컨트롤 박스를 출력 해 준다. autoplay 속성은 영상이 로드가 완료 되면 바로 재생한다. 단점으론 해당 페이지가 로드완료 되자마자 재생되기에 욕이 나올 수 도 있다. loop 속성은 영상을 반복하는 명령어 이다. mute 속성은 음소거 기능을 설정할 수 있는 명령어이다. audio 태그 아무 출력창 없이 배경음악처럼 재생하기 위한.. 2023. 1. 9. 이전 1 2 3 4 다음
