본문 바로가기

HTML57

HTML & CSS : Flex box로 웹사이트 레이아웃 구성해보기 실습 css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Noto+Sans+KR:wght@100&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 100%; } header { width: 99%; height: 100px; margin: 5px; border: 3px solid #ccc; font-family: 'Do Hyeon', sans-serif; text-ali.. 2022. 12. 19.
HTML & CSS #11 : 멀티미디어 HTML5부터는 웹 브라우저에서 직접 멀티미디어를 재생시킬 수 있다. , - 외부 파일 삽입 웹 브라우저에서 직접 재생할 수 없는 pdf, 플래시 무비 등 삽입하는 태그 태그 오디오 재생 mp3 파일로 대부분 사용 width, height : 크기 조절 autoplay : 오디오 자동 재생 (크롬, 모바일 제외) controls : 컨트롤 막대 표시 loop : 반복 재생 muted : 소리 끄기 preload : 재생 전 파일 다운로드하여 준비시킴 (none : 재생눌러야 다운로드, metadata : 메타 정보만 다운로드, auto : 웹 문서를 로드할 때 미디어 파일도 모두 다운로드. 기본값은 auto) poster : 포스터 이미지(재생 불가능 시 대신 표시하는 이미지) 속성값은 "경로" 태그 웹.. 2022. 12. 13.
HTML & CSS #10 : 시맨틱 태그(semantic tag) 표준화된 시맨틱 태그를 사용하여 웹 문서를 작성하면 어떤 기기에서도 문서 구조를 정확히 할 수 있다. iframe 태그를 이용해 외부 문서(사이트) 포함시키기 제주도 게스트하우스 웹 첫 페이지 만들어보기 (기본적 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석) css파일 @charset "utf-8"; @import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Gowun+Dodum&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR:wght@100&display=swap') ; * { margin: 0;.. 2022. 12. 13.
HTML & CSS #08 : CSS 박스 모델 블록 레벨 요소 요소를 삽입했을 때 혼자 한 줄을 차지하는 요소. 인라인 레벨 요소 줄을 차지하지 않는 요소 화면에 표시되는 콘텐츠만큼만 영역을 차지하고 나머지 공간은 다른 요소가 온다. 박스 모델 실제 콘텐츠 영역, 패딩, 테두리, 마진 등의 요소로 구성된다. 웹에서 F12키로 확인 가능하다. width, height 속성 실제 콘텐츠 영역의 크기 px단위의 크기와 백분율로 지정 가능. auto 값도 속성값에 들어갈 수 있다. display 속성 블록 레벨 요소를 인라인 레벨 요소로, 인라인 레벨 요소를 블록 레벨 요소로 바꿔주는 속성 none, contents, block, inline, inline-block, table, table-cell등 특히 inline-block은 요소를 인라인 레벨로 배.. 2022. 12. 13.
HTML & CSS #07 : 색상과 배경 background-color 속성 웹 문서의 요소에 배경색을 지정할 때 16진수나 rgb값, rgba(투명도까지), 색상이름으로 지정 가능 **배경은 상속되지 않는다! background-clip 속성 배경을 어디까지 적용할 것인지 border-box : 테두리(border포함)까지 적용 padding-box : 테두리만 뺀(padding 포함) 영역까지 적용 content-box : 내용 부분만 적용 background-image 속성 배경 이미지 파일 경로를 지정하여 사용 background-image: url(파일경로); background-repeat 속성 배경 이미지 반복 여부와 방향 repeat, no-repeat, repeat-x, repeat-y background-size 속성 배경 이.. 2022. 12. 13.
HTML & CSS #06 : 텍스트 스타일 font-family 속성 : 웹 문서에서 사용할 글꼴 지정 구글 웹 폰트 사용하는 방법!! https://hhahee.tistory.com/4 HTML & CSS : 구글 웹 폰트 사용하기 CSS에서 구글 웹 폰트를 지정하여 사용하는 방법이다. 구글 폰트의 주소는 포스트 하단에 추가하였다. 구글 폰트 사이트로 들어간다. 여기서 원하는 글꼴(폰트)를 고른 후, 선택한다. 나는 Nanum Bru hhahee.tistory.com 되도록 구글 웹폰트를 사용하여 글꼴 설정하는 것이 좋다. font-size 속성 글자 크기 조절하는 속성 절대크기, 상대크기, 숫자, 백분율로 값 지정 가능 기본 값은 상대크기의 medium 값이다. px와 em 단위를 많이 사용한다. px 단위를 사용하면 폰트 크기가 고정된다. .. 2022. 12. 13.
HTML & CSS #01 : 기본 HTML - 텍스트와 이미지, 링크 등 여러 요소를 다루고 표시할 수 있는 웹 문서를 만드는 언어 시작태그와 끝태그로 작성 ~ : 제목태그 : 이미지 태그 : 본문 태그 상단 와 : 현재 문서가 HTML5 언어로 작성된 웹 문서 ~ : 웹 문서의 시작과 끝 lang이라는 속성을 사용해 문서에서 사용할 언어 지정 (lang="ko") : 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분. (메타 데이터를 넣는 곳) 스타일 및 스크립트 등이 포함 문서에서 사용할 외부 파일들 링크. 태그와 태그 등이 있음 ~ : 실제로 웹 브라우저 화면에 나타날 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 2022. 12. 13.