-
[생활코딩] 2. 속성 & HTML 필수 태그Study/HTML & CSS 2019. 8. 4. 10:00반응형
내가 생활코딩 강의를 좋아하는 이유 중에 하나는
단순히 코딩 언어를 재미없게 이론만
나열하는 식의 강의가 아니기 때문이다.
생활코딩 강의를 들으면 강사님의
인생철학도 들으면서 삶의 방향성에 대해
진지한 고민을 해보기도 하고,
언어의 문법에 대한 역사적인 사실들
그리고 다양한 배경지식들을 알아갈 수 있다.
단순한 코딩강의가 아닌 생활코딩의 매력에
너무 퐁당 빠져버렸다..!
(강사님 목소리도... 아주 좋아효★)
[ 속성 (Attribute) ]
태그를 만든 사람들은 태그 이름만으로는
정보가 부족하다는 것을 알게 되었다.
따라서 태그의 심화된 문법을 도입하는데,
그것이 바로 속성(Attribute) 이라는 문법이다.
속성이라는 새로운 문법이 추가되면서
태그는 이전 보다 풍부한 표현력을 갖게 되었다.
이미지를 불러오기 위해서
라고만 작성하면 코드는 작동하지 않는다.
왜냐하면 불러올 이미지에 대한 정보가 부족하기 때문이다.
하지만, 속성의 종류 중 src와 width를 적용하면 아래와 같다.<img src="saipan.jpg" width="100%">
src는 source의 약자로 속성의 값은 아래와 같다.
1. 파일이 저장된 컴퓨터 내 위치
2. html 파일과 같은 폴더에 위치한 이미지 파일 이름
3. 웹 상 주소
width는 이미지의 폭에 해당하고
px 또는 %로 조절할 수 있다.
html img size attribute 라고 검색해보면
더 많은 정보를 알 수 있다.
[ 부모/자식 태그 ]
HTML에서 태그 간의 상하 관계를
부모와 자식으로 표현했다.
보통 태그의 부모/자식 관계는 유동적이지만,
'목차-내용'과 같은 것은 상하관계가 명확하므로
고정적인 부모/자식 태그가 있다.
목록을 나타내는 태그는 list 를 뜻하는 <li> 이다.
하지만 목록이 여러 개라면 다른 목록들과
구별할 수 있도록 목록을 감싸는 태그가 있어야 한다.
그것은 다른 목록과 구분하는 태그 <ul> 이다.
그리고 목록에 자동으로 번호를 매기고 싶다면?
<ol> 태그를 이용하면 된다.
[부모/자식 태그 요약]
<li> </li> : 목록 태그. 내용 태그의 부모 (list)
<ul> </ul> : 목록과 목록을 구별해주는 태그. <li> 태그의 부모 (unordered list)
<ol> </ol> : 목록에 번호를 매겨주는 태그. <li> 태그의 부모 (ordered list)
[ 문서의 구조 & HTML 필수 태그 ]
정보가 많아짐에 따라서 정보를
보기 좋게 정리정돈하기 위한 체계,
즉 구조라는 것이 필요하다.
<title> </title> : 웹페이지 탭의 제목을 표현하는 태그.
검색엔진이 웹페이지를 분석할때 가장 중요하게 생각하는 태그.
그런데 에디터에 영어가 아닌 한글을 작성하면
웹페이지에 깨져서 보이는 경우가 있다.
이는 웹페이지가 저장된 문자 표현 방식과
웹브라우저가 웹페이지를 해석하는 방식이 달라서이다.
아톰 에디터 하단을 보면
UTF-8 방식으로 저장됐다고 표시돼있다.
그렇다면 웹페이지를 열 때도 동일한 방식으로
해석해서 열어야 한글도 정상적으로 보일 것이다.
이를 위해 <title> 태그 바로 아래에
<meta charset="utf-8">위 코드를 추가하면 된다.
HTML을 만든 사람들은 본문 그리고
본문을 설명하는 정보를 각기 다른 태그로 분리해서
명확하게 정리하기로 했다.
<!doctype html> : 웹페이지가 html로 만들어졌음을
표현하기 위한 코드 (문서 시작 부분에 추가)
<html> </html> : 바디와 헤드태그를 감싸는 태그
<head> </head> : 본문에 대해 설명하는 정보 태그
<body> </body> : 본문 태그
모든 웹페이지에는 위와 같은 필수 태그들이 있습니다.
공부를 하면 이렇게 눈이 밝아지고 시력이 좋아집니다.
예전에는 보이지 않았던 것이 보입니다.
개발 입문자의 고충이 바로
무엇을 모르는지 모르는 것이었는데,
배우고 나니 보이지 않았던 코드들이 보이고,
웹페이지를 구성하는 원리에 대해
천천히 알아가고 있어서 좋다![ 태그의 제왕 : <a> ]
태그가 웹의 왕국이라면
<a> 태그는 왕국의 제왕이다.
<a> 태그는 전세계의 웹을 항해하게 만들어줬으며
HyperText 즉 링크를 의미한다.
그리고 acchor의 첫 글자를 따온 태그이며,
정보의 바다에 정박하다라는 의미를 가진다.
링크 걸기
<a href="https://blog.naver.com/tnqls930120" target="_blank" title="xiubin world"> 링크넣고자 하는 단어 </a>target="_blank" : 새 창에서 페이지 열기 속성
title="xiubin world" : 링크가 어떤 내용인지 툴팁으로 보여주는 속성
[ 웹사이트 ]링크를 통해서 서로 결합되어있는
웹페이지들의 그룹을 의미한다.
웹사이트를 만들 때는 어떤 순서로
작업을 진행할 지 잘 따지고 시작해야한다.처음엔 링크를 따라 여행하는 웹서핑을 공부라고 생각하지 않았지만,
이제는 그것이 진정한 공부라고 생각하게 되었어요.
링크를 통해서 정보를 탐험하고, 문제를 해결하고 있으면서
그 과정이 즐겁다면 여러분은 이미 공부를 좋아하고, 잘하고 있는 것입니다.
생활코딩 강의를 들으면서 부족한 것은
구글링 해나가면서 나의 부족한 지식을 채우고
풀리지않는 문제점을 해결하는 과정이
아직까지는 나에게 매우 즐겁다!
개발자로 한 걸음씩 천천히 더 나아가고 있다.
조금 더 힘내자!반응형'Study > HTML & CSS' 카테고리의 다른 글
[코드스테이츠 TIL] CSS 선택자 : CLASS, ID (2) 2019.11.22 [생활코딩] 5. CSS 선택자 & 선택자 우선순위 (0) 2019.08.07 [생활코딩] 4. CSS의 등장 & CSS의 문법 (0) 2019.08.06 [생활코딩] 3. 웹의 역사 & 웹호스팅 & 웹서버 (0) 2019.08.05 [생활코딩] 1. HTML과 코딩 & 기본 태그 (0) 2019.08.04