HTML5 & CSS322 HTML & CSS #03 : 이미지 & 하이퍼링크 이미지는 gif, jpg, jpeg, png 의 파일 형식이 지원 태그 - 이미지 태그 웹 문서에 이미지를 삽입할 때 사용 src 속성으로 상대경로(html 파일이 있는 곳 기준)로 이미지 파일 경로를 지정해 사용 닫힘 태그가 없다. alt 속성을 꼭 사용해주어야한다. alt 속성은 이미지를 설명하는 대체 텍스트 width, height 속성으로 이미지 크기 조정하기 (각각 가로폭, 높이폭) 이미지를 삽입할 때는 대략적인 해상도에 맞춰 업로드하는 것이 좋다. 깨지는 것을 방지하며, 용량이 큰 사진을 업로드해 비효율적이게 됨을 막기 위함. 포토샵을 사용해 해상도 조정하기! (image-image size) 태그 : 설명글을 붙일 대상을 지정 웹 문서 안에서 한 단위가 되는 요소를 묶을 때 사용 설명글 표시.. 2022. 12. 13. HTML & CSS #02 : text 태그 - 제목표시 기본형 : 제목 각 웹 콘텐츠 영역에서 제목을 표시할 때 사용 크기 : h1 > ~ > h6 태그 - 본문 텍스트 단락 기본형 : 텍스트 입력한 내용 앞뒤로 빈 줄이 생기면서 텍스트 단락이 생성됨 태그 - 줄바꾸기 기본형 : 줄을 바꿀 위치에 태그를 사용. 닫는 태그가 없음 태그 - 분위기 전환 기본형 : 수평 줄이 생성됨 주제가 바뀔 때 분위기를 전환하기 위해 사용 , 태그 - 영역 묶기 텍스트 : 줄 안에서 (인라인) 묶기 -> 외부에서 보여지지는 않지만 구분을 할 수 있도록 블록을 지정해주는 것 텍스트 : 줄을 바꿔 (블록) 단락으로 묶기 태그 - 인용문 넣기 기본형 : 인용문 인용문을 들여쓰기 태그 - 인용 내용 표시 기본형 : 인용 문구 줄바꿈 없이 다른 내용과 한 줄에 인용문.. 2022. 12. 13. HTML & CSS #01 : 기본 HTML - 텍스트와 이미지, 링크 등 여러 요소를 다루고 표시할 수 있는 웹 문서를 만드는 언어 시작태그와 끝태그로 작성 ~ : 제목태그 : 이미지 태그 : 본문 태그 상단 와 : 현재 문서가 HTML5 언어로 작성된 웹 문서 ~ : 웹 문서의 시작과 끝 lang이라는 속성을 사용해 문서에서 사용할 언어 지정 (lang="ko") : 웹 문서를 해석하기 위해 필요한 정보들을 입력하는 부분. (메타 데이터를 넣는 곳) 스타일 및 스크립트 등이 포함 문서에서 사용할 외부 파일들 링크. 태그와 태그 등이 있음 ~ : 실제로 웹 브라우저 화면에 나타날 내용 출처 : Do it! HTML5 + CSS3 웹 표준의 정석 (고경희) 2022. 12. 13. HTML & CSS : 구글 웹 폰트 사용하기 CSS에서 구글 웹 폰트를 지정하여 사용하는 방법이다. 구글 폰트의 주소는 포스트 하단에 추가하였다. 구글 폰트 사이트로 들어간다. 여기서 원하는 글꼴(폰트)를 고른 후, 선택한다. 나는 Nanum Brush Script를 선택하였다. 밑으로 스크롤하면 우측하단에 Select Regular 400 + 가 있다. 클릭한다. 클릭하고 난 후, 우측 상단에 빨간색 동그라미로 표시되어 있는 "View selected families"를 클릭한다. 우측에 지금까지 내가 select한 글꼴들의 import문과 링크가 나온다. 의 href 형식이던지 @import 문이던지 원하는 것을 선택한 후, 코드에 붙여넣기 하면된다. 나는 import문을 복사해서 사용했다 . 그리고 사용할 수 있는 CSS 코드가 나온다. 위에.. 2022. 12. 7. 이전 1 2 3 다음
