[HTML/CSS] 여러가지 자주쓰는 유용한 HTML 태그들 (3)

ㅁ 요소의 위치에 대한 속성

float : "left, right"

--> 왼쪽 또는 오른쪽을 기준으로 요소들이 둥둥 뜬다. 블록태그에서도 

 

visibility : "visible, hidden"

--> 영역은 차지하고 있으면서 보이지 않는 것

 

display : "block, inline, inline-block"

--> block태그처럼 쓸지, inline태그처럼 쓸지 설정해줄 수 있다.

 

display : "table-cell"

 

영역조차 차지하지 않고 사라지는 것 / 

 

<style>

/* 아래 테두리 속성들을 'border'라는 속성 하나로 묶어 표현할 수 있다. */
border-width: 2px;
border-style: solid;
border-color: red;

/* 일반적으로 width - style - color 순으로 쓴다. */
border : 2px solid red;

</style>

 

 

ㅁ 폰트와 관련된 태그들

font-size : "xx-large, x-large, large, medium(default), small, x-small, xx-small"

font-size : "00pt, 00px, 0em"

** 12 pt = 16px

** 1em = 대문자 M을 기준으로 나타낸 사이즈

 

font-family : "폰트명", "대체폰트명", "대체폰트명", ... ;

--> 사용자 컴퓨터에 지정폰트가 없을 경우 대체할 폰트들을 뒤에 적어준다.

* font-family는 작은따옴표( ' ), 큰따옴표( " ) 모두 먹힌다.

 

 

font-weight : "bold, 100~900"

--> 글자의 굵기를 조절할 수 있다. 일반적으로 bold라는 속성값을 주지만,

필요한 경우 100~900 사이 숫자로 굵기를 세부적으로 조절할 수 있다.

 

font-style: "italic"

 

font-variant : "small-caps"

--> 소문자를 대문자로 표기하고, 폰트크기는 원래 대문자보다 작게 표현한다.

 

 

 

웹개발 시 원하는 폰트를 사용하는 방법

ㅁ 컴퓨터에 폰트 설치하는 방법

c > windows > fonts 에는 현재 컴퓨터에서 사용 가능한 폰트들이 들어있다.

다운받은 폰트를 이 폴더에 넣으면 컴퓨터에서 해당 폰트를 사용할 수 있다.

--- ttf : true type font

--- otf : open type font (고해상도 출력 작업이 필요한 사용자에게 좀더 적합하다.)

 

 

 

ㅁ 온라인상에서 제공되는 폰트를 이용하는 방법

 

1) 구글 폰트 사이트 접속

https://fonts.google.com/

Google Fonts

 

 

2) 원하는 폰트 선택

 

 

 

 

3) 선택한 폰트 html 파일에 적용

 

(1) <link> 태그 활용

<header> 구역에서 <style> 태그 밖에 <link href="폰트제공사이트 링크">

--> 구글 폰트에서는 여러개 폰트를 선택 시 하나의 태그 안에 한꺼번에 들어가므로, 링크태그 한 줄만 입력해도 된다.

 

(2) @import 활용

<style> 태그 안에 @import url("") 형태로 선언

 

 

배경 관련한 태그

<style>
	body {
	  background-color: green;
	  background-image: url('../html/images/dog.jpg');
	  background-repeat: repeat;
	  background-position: right top;
	  background-size: cover;
	}
</style>

 

background-color: 배경색 넣기

background-image: url('경로'); 형태로 배경화면에 이미지를 넣을 수 있음

background-repeat: "repeat, no-repeat, repeat-x" : 배경 이미지의 반복 여부

background-position : "00px 00px" : 배경 이미지 위치

background-size: "contain, "cover" : 배경 이미지 사이즈

background-attachment: "fixed" : 배경 이미지 고정
background-origin : 배경 이미지 위치를 어디서부터 시작할지 결정