[html06]이미지로 코딩하기3 (문법설명이니 스킵해도 됨)

문법 설명

 

절대경로, 상대경로

수학이나 물리에서 이런거 많이 보셨죠? 절대좌표, 상대좌표

똑같은 개념입니다.

우리집을 설명할때, 절대 주소로 말한다면

서울특별시 강남구 역삼동 테혜란로 000번길 2F 어디어디
(아... 언젠간 우리집 주소를 강남으로... 자가로...ㅠㅠ주륵)

즉, 나의 위치가 어딘지간에 중심점이 어딘지간에 저 주소를 따라가면 반드시 우리집이 나오는 주소를 절대 주소라고 합니다.
절대반지도... 그래서 나온 말일까요?ㅎㅎ

그런데, 친구가 물어봅니다. 너네집 우리집에서 가까워?

응, (너희 집에서 양재방향으로) 420번 버스타고 딱 2정거장

눈치채셨겠지만 중심점이 상대적으로 바꼈습니다. 이런걸 상대 주소 라고 합니다.

 

이해가 되셨나요?

다시 코딩 얘기입니다.

<img src="https://cdn.tradefinanceglobal.com/wp-content/uploads/2018/09/unicorn-20072661280.jpg" alt="절대경로" />

<img src="image/flower.jpg" alt="상대경로" />

뭐 더 설명 안드려도 아시겠죠? 이 코드가 적힌 html을 중심으로 이미지 경로를 찾는겁니다.

 

CSS를 추가하는 방법

텍스트에 CSS 추가할 때랑 똑같습니다. 원하는 위치에 style=""을 추가하면 됩니다.
이건 실습때 같이 해보셨으니 생략하겠습니다.

 

인라인 요소, 블럭요소

인라인은 말그대로 해당 태그가 들어가도 해당 라인에 아무런 공간을 차지하지 않는 요소 입니다.

a, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, 
img, input, kbd, label, map, object, q, samp, small, script, select, 
span, strong, sub, sup, textarea, tt, var

 

블럭요소는 말그대로 해당 태그가 들어가면 해당 라인에 어떤 공간을 차지하는 요소 입니다.

address, article, aside, audio, blockquote, canvas, dd, div, dl, 
fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, 
header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, 
video

저도 모르는 태그가 많네요. 당연한 얘기겠지만 참고만 하시고, 절대 외우실 필요 없습니다. 저조차도 다 모르고, 다 사용하진 않아요.
단지, 저는 원리를 아니까 느낌으로만 알뿐... ㅎㅎ

긴 글 읽어주셔서 감사하고, 다음 강의때 뵙겠습니다.

2019/06/22 - [프로그램 강좌] - [html01]코딩은 누구나 할 수 있다?

2019/07/08 - [프로그램 강좌] - [html02]html = head + body

2019/07/11 - [프로그램 강좌] - [html03]CSS가 뭔데? 텍스트 꾸며보기

2019/07/24 - [프로그램 강좌] - [html04]이미지로 코딩하기!

2019/07/25 - [프로그램 강좌] - [html05]이미지로 코딩하기2