본문 바로가기

웹 개발/프론트엔드 - HTML & CSS

 (3)
[CSS] CSS 기본 문법, 폰트와 텍스트의 스타일링, CSS 레이아웃 CSS 기본 문법 CSS 기술 방식 1. HTML 요소에 style 속성으로써 스타일을 정의한다.제목 2. HTML문서의 3. HTML문서에서 요소를 통해 외부 스타일 시트를 불러온다. 4. CSS파일에서 다른 CSS파일을 불러온다.@import "외부 스타일시트 이름.css"; CSS의 선언셀렉터{ 프로퍼티:값;}셀렉터{ 프로퍼티1:값; 프로퍼티2:값;}셀렉터1, 셀렉터2{ 프로퍼티:값;}- 셀렉터를 통해 선언할 대상을 정하고, 그 대상의 프로퍼티의 값을 지정하는 식으로 CSS의 선언이 이루어진다.- 하나의 룰 세트에서 여러 개의 선언을 넣는 것이 가능하며, 여러 셀렉터를 한 번에 지정하는 것도 가능하다. 상속- 어떤 요소에 CSS로 프로퍼티 지정을 했을 때, 그 자손 요..
[HTML] (2) 미디어(이미지, 동영상, 오디오), 폼, 시맨틱 마크업 미디어 (이미지, 동영상, 오디오) - 이미지를 불러온다. * 그 외 속성alt- 이미지 설명을 설정한다.- 이미지 로드에 성공하면 이미지 위에 마우스를 올렸을 때 텍스트가 표시되며, 실패하면 대체 텍스트로서 출력된다.width, height- 폭, 높이를 설정한다. // 방법 1.＜video src="동영상 주소"> 브라우저가 대응하지 못하는 경우의 텍스트// 방법 2. 브라우저가 대응하지 못하는 경우의 텍스트- 동영상을 삽입하는 태그로, 두 방법 모두 사용 가능하다. * 그 외 속성autoplay지정시 자동재생된다.loop지정시 반복재생된다.controls지정시 컨트롤 바가 표시된다.muted지정시 초기 상태로 음소거가 적용된다. 브라우저가 대응하지 못하는 경우의 텍스트- H..
[HTML] (1) HTML 기본 문법, 기본 태그, 리스트, 테이블 HTML 기본 문법 HTML 기본 구조 - VSCode에서 HTML문서를 만든 뒤 ! + Enter 하면 자동으로 써준다. 1. DOCTYPE 선언- 웹 문서의 시작을 알려주고, 브라우저가 처리할 문서 종류와 버젼을 명시한다.- 즉, 브라우저가 문서를 렌더링할 기준을 알려준다. 2. 태그- HTML문서의 최상위 요소로 태그 내 내용이 HTML문서임을 알리는 태그이다.- lang 속성을 통해 언어 코드를 지정할 수 있다. 3. 웹 페이지의 타이틀(브라우저 상에서 탭 이름)을 지정한다.화면에 드러나지 않는 부가 정보 (언어 코드, 뷰포트, 키워드, 검색엔진 크롤러 지시어 등)를 지정할 때 사용한다.외부 파일(css파일, js파일 등)과 연결해준다. 기본 태그 ~ 대제목그다음그다음..

티스토리툴바