안녕하세요 SsunDev입니다?
어제까지 HTML의 기본구조를 세워보았습니다.
건물을 지을때도 기본 철골뼈대가 중요하고, 찰흙모형을 만들때도 철쇠로 구조를 잘 잡아야합니다.
이제 우린 튼튼한 뼈대를 다양한 재료로 단단하게 지어보겠습니다.
그럼 어떤재료들이 있고 어디에 써야하는지 알아야겠죠?
오늘도 힘차게 시작해봅시다!
html02.html 이라고 새 파일을 한번 만들어보겠습니다.
그리고 어제 만든 html기본틀을 외울겸 복붙하지말고 다시한번 손 코딩해봅시다!
이번엔 이 기본기에 두가지를 더 추가해주겠습니다!
<html> 부분을 <html lang="ko"> 라고 추가해보겠습니다.
이 코드는 지금 만드는 이 페이지의 언어가 한국어라고 선언해주는 코드입니다. 실제적인 변환 효과는 없으나 나중에 현제페이지를 음성으로 소리를내어준다거나 할때 한국어로 읽어주게됩니다. 시각적으로 불편하신분들이 이용할때 꼭 필요하겠죠?
그다음 <head></head> 영역 안에 <meta charset="utf-8"> 이라고 추가해보겠습니다.
이 코드는 현제 페이지가 어느 언어로 컴퓨터가 인식할건지 선언해주는 코드입니다. 한국어가 utf-8입니다. 종종 다른 툴에서도 한국어 관련 utf-8이 나오니 한국어는 utf-8이구나 하고 알아두시면 좋습니다!
두가지를 추가한 업그레이드버전 기본뼈대는 이렇습니다.
이제 앞으로 뼈대를 만들어주세요 하면 업그레이드된 이 버젼의 뼈대로 만들면 좋겠죠?
이젠 바디부분을 꾸며줄 코드를 알아보겠습니다.
<h1>부터<h6> 까지의 코드를 배워보겠습니다.
6까지 있는데 숫자가 커질수록 글자크기는 작아집니다.
<h1>안녕하세요</h1>
<h2>만나서반갑습니다</h2>
<h3>저를소개하자면</h3>
<h4>SsunDev라고합니다</h4>
<h5>개발공부를하고있구요</h5>
<h6>반말하지마라!</h6>
라고 <body> </body>안에 코드를 넣어보겠습니다.
저장하고 ALT + B를 눌러볼까요?
말이 뭔가 점차 자신감이 없어지는것만 같군요!
자 글자 크기가 점차 작아지는걸 볼 수 있습니다.
지난시간에 html이라는 기술은 홈페이지가 아닌 문서화를 위한 기술이었다 라고 설명드린적이 있습니다.
자 이걸 기억하시고!
우리가 문서를본다거나 책을보면
책의 제목이 대문짝만하게 있고.. 부제가 있고... 그다음 챕터의 이름이 있고... 그 아래 소제목이 있고....
이런식으로 큰 단락별로 항목들이 있습니다. 그럴 때 글자크기를 다르게 해주는데요 이렇듯 큰 분류부터 글자크기가 점차 작아지기 마련입니다. 이를 나타내는게 h1 h2 h3 ... 코드입니다. 항상 대분류부터 낮은숫자를 부여해서 사용해주어야 합니다.
***절!!대!!로!! 단순히 글자의 크기만을위해서 h 코드를 가져다쓰는걸 추천드리지 않습니다.***
예를들어 제목과 내용으로만 나누어져있는데
글자크기만을 위해서 제목을 h1 내용을 h6 이렇게 뛰어넘어서 쓰면 안됩니다.
(라고 하는데 사실상h코드 잘 안써서 크게 신경 안쓰셔도 됩니다. 만! 이론적으로는 알아둬야겠죠?)
글자크기나 스타일 색깔등은 나중에 자유자제로 바꿀수 있으니 절대로 크기를 위해서 <h>코드를 뒤죽박죽 쓰지 않으셨으면합니다. 하여튼 제목등의 대분류를 나타내기위한 코드라고 생각하시면 됩니다.
자 배우고나니까 제가 쓴 예제처럼 쓰면 안된다는걸 이젠 아시겠죠?
그 다음<h6>코드 아래 <!-- h1~h6 배움 --> 이라고 적어보겠습니다!
자 이번에 배워볼건 바로 주석 입니다!
모든 개발툴에는 다양한 모습의 주석이라게 있습니다.!
코드 사이사이에 메세지를 남기기 위해 사용합니다!
혹은 짜여진 코드를 테스트 할 때 잠시 일정부분 코드에 주석을 먹여 작동을 멈출때도 사용합니다!
(테스트를 위해 잠시 코드를 지우거나 하면 깜빡하고 다시 원상복구를 못 할 수도있고. 복잡한 코드속에 제자리에 복붙하지 못하면 오히려 더 빅 참사가 일어날 수도 있고...)
하여튼
<!-- --> 이 사이에 어떤메모를남기던 어떤 코드를 짜놓던
초록색으로 변하고 그 안의 모든 코드들은 작동하지 않습니다.
자 여기서 중요한거!!!
주석을 생활화 합시다!
내가 오늘 짠 코드도 내일보면 아리송한게 개발입니다.
특히나 아무리 잘짠 코드라도 남이보면 눈에 안들어오기마련입니다.
그래서 주석으로 해당 코드에 대한 설명을 달아두는 습관을 들이시는게 좋습니다!
또한 자기가 짜야할 코드에 대한 대략적인 큰 계획등을 미리 잡아둘 수 있습니다.(추후 알랴두림)
단축키는 CTRL + / 입니다! 현재 커서가 있는 줄을 주석해줍니다.
여러줄을 주석해야할경우 여러줄을 드래그해두고 CTRL + / 을 하시면 여러줄 주석이 생성됩니다.
해제할때도 CTRL + / 를 하면 해체됩니다.
이번엔 <p></p> 테그입니다.
<p>테그는 문단을 쓸 때 사용하는 테그입니다.
주석 아래 <p></p>테그를 3개 써보겠습니다.
입숨이라는 사이트입니다!
랜덤으로 문장을 생성해줍니다. 3문단으로/ 길게 /텍스트소스를 아무거나 골라서 생성해보겠습니다.
이렇게 세 문단이 만들어졌습니다. <p></p>테그를 3개 만들어서 안에 각각 한 문단씩 안에 넣어보겠습니다.
이렇게 코드가 옆으로 길~~~어지는 현상이 발생합니다. 사람이 보기좋게 엔터를 쳐서 문장들을 정리해 보겠습니다.
이렇게 사람이 보기 좋게 각 문장의 길이를 적당히 엔터로 내려주었습니다. 이런식으로 엔터로 정리를 하더라도
ALT + B를 눌러 실제 브라우져에서 보게되면
문단이 정리되어있지 않습니다.
그렇습니다 테그안에서 임의로 줄을바꾸더라도 실제 화면에서는 영향을 미치지 않습니다.
앞으로 배우는 대부분의 코드에서도 코드안의 내용물에 임의로 엔터를 쳐서 보기좋게 정리 해도 크게 문제가 생기진 않을겁니다.
그러니 사람이 보기좋게 엔터, 탭등을 사용하여 정리해주면 가독성이 좋아지는 코드가 되겠죠??
그럼 실제로 화면에서 줄바꿈을 하려면 어떻게 해야할까요?
바로 <br> 테그를 사용해주면 됩니다 <br>테그는 </>닫는 테그가 없습니다!
이런식으로 끝에 <br> 테그를 사용해주면
브라우저에서도 줄바꿈이 되어 나오는걸 보실 수 있습니다!
이 <br> 테그 역시도 위치를 잡기위해서 일부러 여러개를 넣어서 글자를 아래로 내린다거나 하는 목적으로 쓰는건 좋지않습니다!
여기까지 다 완성하면 이런 모습입니다.
다들 이렇게 만드셨나요?
이번엔<hr>입니다 마지막 </p> 아래 <hr>이라고 적어보겠습니다.
<hr>코드 역시 닫는 테그가 없습니다.
br도 그렇고 hr도 그렇고 여기부터 여기까지가 이 코드다 라는 경계가 없는 코드는 보통 닫는테그가 없습니다.
맨 아래 한 줄이 생긴걸 보실 수 있습니다.
이렇게 헤어라인을 그어줄 수 있습니다.
이번엔 <blockquote>를 배워보겠습니다.
아까 만든 <p></p>테그들 3문단들 사이에 <blockquote>중요한건 꺾이지않는 마음 -deft-</blockquote>를 넣어보겠습니다.
바로 ALT + B
이렇게 간지나는 문구가 만들어졌습니다. 간지나는 긴~ 글을 인용할 때 사용합니다. <p></p> 테그 사이의 문장들 속에 넣어서 사용하면 줄바꿈이 되어 출력됩니다. 블록테그라고 하는데 이는 나중에 천천히 배워보겠습니다.
그 아래 문단에는 <q>우리정글 탑갱 안오고 뭐하냐!! -SsunDev-</q>를 넣어보겠습니다.
저장하고 바로 ALT + B
또 이렇게 간지나는 문구가 만들어졌습니다. 간지나는 짧은글을 인용할 때 사용합니다.
<p></p>테그 사이에 넣어서 사용해도 줄바꿈이 안일어납니다.
인라인테그라고 하는데 이 역시 나중에 천천히 배워보겠습니다.
오늘은 이렇게
<html lang="ko"> :
<meta charset="utf-8"> :
<h1~6> :
<!-- --> :
<p></p> :
<br> :
<hr> :
<blockquote></blockquote> :
<q></q> :
를 배워보았습니다!
복습하는겸 해서 오늘 배운 코드의 정의를 학습하신 여러분들의 각자의 생각대로 정리해서 댓글로 달아주시면 소정의 거대한 상품을 추첨하여 언젠가는 어떻게든 아무튼 아마도 꼭 전달해 드리도록 하겠습니다.!
오늘도 봐주셔서 감사합니다!
'1.비전공에서 취업까지!![HTML,CSS]' 카테고리의 다른 글
| 비전공에서 취업까지!! [6화] front 네번째걸음 앞으로는 중요한거만 나오니까 밑줄 쫙! 별표 하나! 돼지꼬리 땡땡!! -입니다.- (4) | 2023.01.22 |
|---|---|
| 비전공에서 취업까지!! [5화] front 세번째걸음! 초석은 세웠으니 슬슬 홈페이지에 재대로 발 담궈볼까? -입니다.- (2) | 2023.01.21 |
| 비전공에서 취업까지!! [3화] front 첫걸음! HTML, 화면을 만들어보자! -입니다.- (2) | 2023.01.16 |
| 비전공에서 취업까지!! [2화] 첫 발을 내딛어보자! VSCode!!! -입니다.- (0) | 2023.01.13 |
| 비전공에서 취업까지!! [1화] 개발자로 취업하려면 대체 뭘 배워야할까? 뭐부터 시작해야할까?? -입니다.- (0) | 2023.01.11 |
