2. style = "스타일 명령"

CSS파일 내에서 스타일링 하는 것이 아닌 HTML 태그 내의 style 속성을 활용한 간단한 스타일링을 하는 방법 정리

 

이미지태그를 활용하여 웹사이트 내에 이미지를 띄워보자!

망한 거 같은데....?

수정 요구 사안

1. 이미지의 사이즈 조절

2. 사이트 내의 이미지 배치 (가운데 정렬)

 

1. 이미지의 사이즈 조절

<img style='width: 50%;' src=./%EC%9D%B4%EB%AF%B8%EC%A7%80%ED%8C%8C%EC%9D%BC/apple.jfif> 

☞ 이미지의 사이즈를 조절하는 방법

1. px 단위 : 절대적 단위 

2. % 단위 : 상위 태그의 몇 %를 차지하는 지? (상대적 단위) 

 

2. 이미지의 가운데 정렬 (3가지 암기) 

display : border; 
margin-left : auto;
margin-right : auto;

margin-left: auto; margin-right : auto; ☞ margin : auto (완전히 동일한 명령) 

 

참고) 3. 텍스트 가운데 정렬 text-align : center; 

<p style='text-align: center'> Front-End Developer</p>

 

자주 사용하는 스타일링 명령어

font-size : 20px; /* 글씨 사이즈 */
font-family : 'gulim';/* 글씨 체 */
color : black; /* 글씨 색*/
letter-spacing : -1px; /* 자간 (글자간 간격) */
text-align : center; /* 글자 가운데 정렬 */
font-weight : 600; /* 글자 진하기 */