[html] 코딩애플 HTML/CSS All-in-one 강의노트 : (2) HTML 꾸미기(CSS없이 꾸미기)

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!

* 이 사이트의 HTML 강의를 수강하고 적는 강의노트이다.

* 개인공부용이다.

* 쌤 말투 시크해서 넘 좋다.

* 강의 예제 노출이 안되게 조심하자

 

[HTML 꾸미기]
    1. style 속성으로 꾸미기
    2. CSS로 꾸미기
[이미지 꾸미기]
    1. 이미지 가운데 정렬
[글자 꾸미기]
    1. 글자 가운데 정렬
[많이 쓸거같은 꾸미기 속성]

 

 

...

[HTML 꾸미기]
1. style 속성으로 꾸미기

코드 안에 style="여기에다가 적기" 로 꾸밀 수 있긴 한데, 좀 지저분해보인다.

1회성일 때, 길이가 짧을 때는 style 속성으로 html를 꾸미자

 

 

...
2. CSS로 꾸미기

저 코드를 넣으면 css로 html를 꾸밀 수 있다.

href =""에다가 css 파일의 링크를 넣으면 된다. 

이거는 다음 시간에 알려주신다.

 

 

...
[이미지 꾸미기]

html로 이미지를 꾸미는 코드는 구글링하면은 엄청 많이 나온다.

이렇게 많은 결과가 나온다.(__기계공학 관련된 글은 거의 없어서 내 블로그가 검색이 잘되었눈뎅..슬푸다)

아무튼 필요한 코드는 구글링해서 얻자

 

1. 이미지 가운데 정렬

이미지를 가운데 정렬하는거는 공식화 되어 있다고 한다.

style= "display: block; margin-left: auto; margin-right: auto"

귀여운 짱구가 가운데 정렬이 되었다.

만약 가운데 정렬이 안되면은 width설정을 해주자

 

 

...
[글자 꾸미기]

글자도 마찬가지로 구글링하면은 다 나온다.

긁어서 사용하자

 

1. 글자 가운데 정렬

style="text-align:center;"

짱구 글자도 가운데 정렬이 되었다.

 

 

[많이 쓸거같은 꾸미기 속성]

1. 이미지 속성

width : 가로폭
margine-left,right,top,bottom... : 사방으로 공간줌

2. 글자 속성

font-size : 폰트사이즈
font-family : 폰트종류
color : 글색
letter-spacing : 자간
text-align:center : 가운데정렬
font-weight : 100~900 : 글자 굵기 (조절 가능) 아니면 <strong> 사용 

 

 

...

이미지에는 margine 과 padding 으로 여백을 줄 수 있다.

둘의 차이는...게시글을 따로 팔 듯??