안녕하세요 SsunDev입니다.
오늘까지 간단한 서류작업같은 기능들의 테그들을 마지막으로 몇개만더 보고 이제 드디어 실제로도 많이 쓰이고 중요한 테그들로 들어가 보겠습니다.
지금부터 중요하니까 웃음기 싹 빼고 아니다 웃음기는 가지고 진지하게 들어가보겠습니다.
바로 시워어언하게 html03.html 만드시고 업그레이드된 html 기본기 가볍게 박고 시작하겠습니다.
이제 이정돈 다들 껌이시죠? ㅎㅎ 벌써 개발자 다 돼버리셨다들 ㅎㅎ
지난시간에 html02.html에 있는 <p> 어느날 아버지와 아들이 당나귀를.... </p> 하고 각자 만드신 3문단중 하나를 선택해서 가져와보도록 하겠습니다.
한 문단을 가져왔습니다. 그리고 멋진 인용구까지 가져왔군요!
자 이번엔
<Strong></Strong> 이라는 테그를 배워보겠습니다.
제 인용구랑 뭔가 잘 맞는 문단속의 한 문장에 앞뒤로 <strong></strong>이란 테그를 감싸보겠습니다.
바로 저장후에 ALT + B!!!
이렇게 화면에 굵은 글씨로 표기가 됩니다.
이렇게 중요하거나 강조해야할 글자는<쓰트롱> 테그로 감싸주면 됩니다.
<strong>을 사용하면 처음에 업글된 html뼈대에서 <html lang="ko"> 에서 설명한것 처럼
시각이 안좋으신분들이 이용하시는 웹 페이지를 소리내어 읽어주는 기능을 사용할 때
이 <strong>부분을 조금 다른 어조로 강하게 읽어준다고 합니다.
(사실 읽어주는 기능 사용안해봐서 어떻게 읽어주는지 차이는 잘 모르겠습니다.)
<b></b> 테그도 <strong></strong> 테그와 같은 효과를 지닙니다.
이번엔 <b></b>라고 그 앞의 문장에 감싸보겠습니다
역시나 저장후 바로 ALT + B!
<strong></strong>과 같은 효과를 지닙니다! 단순 강조를 할 때 쓰입니다.
다만 <b></b>의 경우 소리내어 읽어줄때 강조해서 읽어주는 효과는 없다라고 합니다.
우리 워드나 한글 블로그등 다양한 툴에서 글을 작성할때 굵은 글씨를 볼드 처리한다고 하잖아요?
그래서 b라고 알아두시면 좋을것 같습니다.
<em></em> 이건 이텔릭 텍스트입니다.
역시나 사용해봐야겠죠?
바로 저장 후 ALT + B!!
글자가 기울어져버렸습니다!
이렇게 <em></em> 테그는 글자를 강조할때 사용합니다!
이 또한 글자를 읽어줄때 <strong> 과는 또 다른 톤으로 읽어준다고 하네요!??
<strong> 과 <b>의 관계 처럼 <em>도 <i>라는 코드가 또 존재합니다
비슷하게 글자를 눕혀서 강조해주는데 소리는 다르게 안내주는 코드입니다
시범 안보여도 하실 수... 있겠죠? ㅎㅎ 아 오키 오키 보여줄게요 기달...
이번엔 <q></q> 안의 인용구에 넣어보겠습니다.
인용구가 한층 더 간지나졌습니다!
자 여기까지 html에서 문서작업을 할 때 자주 쓰이는 코드를 알아 보았는데요 솔~~~직히 알아만 두고 외우거나 할 필요까진 없는것들이 많았습니다.
이제부터는 정말로 많이 쓰이고 외워야하고 필요하고 공부도 해야할 것들을 배워보겠습니다.
이제부턴 중요하니 잘 따라오셔야합니다.
이번엔 html_important01.html 이라고 하고 업글된뼈대 스무th~하게 만들어보겠습니다.
이번에 배워볼 코드는 <ol></ol>과 <ul></ul>입니다!
ordered_list 라는 코드인데 ol은 순서가 있는 오더드리스트, ul은 순서가 없는 오더드리스트 입니다.
리스트들을 나열할 때 씁니다.
이 두 코드는 <li></li>라는코드를 내부에 꼭 써서 사용해주어야합니다.
한번 작성해보겠습니다.
이렇게 뼈대를 잡았습니다.
저번에 말씀드렸듯이 코드안에 코드를 쓰기위해선 부모코드를 이런식으로 내려주는게 좋다고 했었죠?
이제 이안에 각 각 리스트들을 쓸건데 <li></li>라는 코드를 사용할겁니다.
자 이렇게 <ol> <ul>테그를 써보았습니다.
여기서도 중요한게 <ul>이랑 <ol>은 서로 각각 형제코드겠지요?
그래서 같은세로줄에 위치해있고 <li>테그는 <ol> <ul>의 각각 자식 코드기 떄문에 탭을 통해 한단계 들여쓰기한걸 볼 수 있습니다.
항시 형제 부모 자식 테크는 텝을 통해 <strong>기강</strong>을 확실히 잡아주셔야합니다!
저장하고 ALT + B를 눌러보면?
이런식으로 순서가 필요한 리스트는 순번이 붙고 아니면 동그라미가 붙어서 순번이 매겨지지 않는걸 보실 수 있습니다.
<ol> <ul> 이 코드는 직접적으로 화면에 어떤 모습으로 나오진 않습니다. 내부의 <li>코드만 나옵니다.
이 <ul> <ol> <li> 코드는 보통 게시판등에서 하단에 페이지번호에 많이 쓰입니다.
역시나 html_important02.html 하고 파일을 새로 만들어보겠습니다.
그 후 자연스럽게 업그레이드된 html 뼈대를 박고 시작하겠습니다.
이번에 배워볼 테그는 <img> 테그입니다.
이 테그를 통해서 원하는 사진을 올릴 수 있습니다. 중요한 테그입니다.
중간에 올렸던 이 그림을 우클릭하여 다운받아보겠습니다.
보통 다운로드 폴더에 있거나 바탕화면에 있을겁니다.
(못찾으면 다른 아무 이미지 파일이나 사용하셔도 괜찮습니다.)
C:에 만들었던 javaStudy 폴더 안의 Study_Front 폴더 안에 img라는 폴더를 만들어보겠습니다.
이 안에 징징이 그림을 넣어보겠습니다.
이런 경로로 파일이 들어가게 되면 됩니다.
로컬C에>자바스터디에>자바후론트에>img 폴더 안에 img 파일!
자 다시 VSCode로 돌아와서 <img> 코드를 만들어보겠습니다.
이렇게 img 코드를 만들었습니다 img 코드는 역시 </img> 하고 닫는 코드가 없습니다.
그런데 img의 코드 <>꺽쇠(테그) 안에 안에 한줄 띄고 src="" 라는 속성이 들어갔습니다!
이런식으로 대부분의 코드들은 안에 해당 코드에 사용가능한 속성을 정의해줄 수 있습니다.
img 코드는 이런식으로 4가지의 속성을 정의할 수 있습니다.
첫번째로 src부터 보겠습니다.
주소를 정의하는 방법은 여러가지인데
절대경로와 상대경로가 있습니다.
각 경로는 운영체제에 따라서 / 혹은 \(역슬래쉬) 혹은￦ 로 표시합니다.
운영체제라 함은 윈도우, 맥, 리눅스 등을 말합니다.
절대경로는
C:\javaStudy2\Study_Front\img\img.jpg
라고 C부터 타고 타고 들어가는 절대경로가 있고
현재 작성하고있는 파일위치를 기준으로 주소를 잡는 상대경로가 있습니다.
지금 현재 파일이 있는 위치를 기준으로 두고 / 혹은 ./를 쓰면 지금 파일이 존재하는 폴더의 내용물 보여줍니다.
이런식으로 / 혹은 ./를 하면 자동완성으로 지금 현재 파일이 존재하는 곳의 다른 파일들을 보여주게됩니다.
그렇다면 지금 현재 파일이라는건 오늘 만든 html_important02.html 파일 이겠죠?
바로 여기입니다. 이 폴더 밖(Study_Front)로 나가려면? ../를 쓰면 됩니다.
../를 쓰니까 상위폴더(Study_Front)로 나왔습니다
여기서 만들었던img 폴더로 들어가야겠죠?
이렇게 img까지 추가해주니 img폴더 내부의 데이터를 보여주게됩니다. 다른건 신경쓰지말고 보라색 img파일만 보셔요!
이렇게 현재파일을 기준으로 경로를 타고 들어가서 이미지를 찾는 방법이 있습니다.
절대경로와 상대경로라고합니다.
alt + b로 확인해보면
이미지 두개가 잘 나오는걸 확인할 수 있습니다. 제가 드래그로 좀 내린겁니다.
이번엔 의도적으로 아래의 두번째 파일 경로에 img파일 이름을 imgFake 라고 억지수정을 해보겠습니다.
그러면 imgFake 라는 이름의 파일은 존재하지 않으니 못찾겠죠?
그 후 alt="이미지가 존재하지 않습니다" 라고 오류시 출력할 문구를 정의하고 다시한번
저장 후 alt + B 를 해보면
이미지를 찾을 수 없을때 메세지가 잘 뜨는걸 확인 할 수 있습니다.
마지막으로 width 와 height 은 가로 세로 크기입니다. 단위는 픽셀단위인데 픽셀이라는게 지금 보시는 화면 모니터의 작은 빛점 크기입니다.
이번엔 위에 잘 나오는 이미지 뒤에 width="" 와 height="" 를 정의해보겠습니다
이렇게 px를 붙여도 작동하고 안붙여도 작동하는데 저는 붙이는게 보기좋더라구요
바로 alt + B를 눌러보면
징징이가 길어집니다.
이런식으로
<img src="주소,경로" alt="이미지누락시메세지" width="가로길이" height="세로길이" > 로 정의할 수가 있겠습니다.!
여기서 추가로
이 src의 주소,경로라고 쓴것에 대하여
이렇게 인터넷을 돌아다니다가 보는 이미지를 우클릭하면 이미지 주소 복사라고 나옵니다.
이걸 저 src의 주소에 넣으면?
이렇게 해당 이미지를 주소 경로로 가져오는걸 보실 수 있습니다 신기하죠?
자 오늘은 말을 하다보니 좀 길어졌습니다
집중력이 흐트러지진 않으셨겠지요 MZ님덜???
<strong> :
<b> :
<em> :
<i> :
<ol> :
<ul> :
<li> :
<img> :
테그에 대해서 배워보았습니다.
엄청 길게 썻는데 생각해보니 몇개 안되었군요?
댓글로 이 테그들에 대한 본인의 간단한 정의를 남겨주시면.. 소정의... 허허 해줘잉!!
'1.비전공에서 취업까지!![HTML,CSS]' 카테고리의 다른 글
| 비전공에서 취업까지!! [7화] front 앞으로 정말 계속 쓸 코드인데... -입니다.- (2) | 2023.01.25 |
|---|---|
| 비전공에서 취업까지!! [6화] front 네번째걸음 앞으로는 중요한거만 나오니까 밑줄 쫙! 별표 하나! 돼지꼬리 땡땡!! -입니다.- (4) | 2023.01.22 |
| 비전공에서 취업까지!! [4화] front 두번째걸음! HTML을 구성하는 재료! 뭘로 대체 뭘 만들까? -입니다.- (0) | 2023.01.18 |
| 비전공에서 취업까지!! [3화] front 첫걸음! HTML, 화면을 만들어보자! -입니다.- (2) | 2023.01.16 |
| 비전공에서 취업까지!! [2화] 첫 발을 내딛어보자! VSCode!!! -입니다.- (0) | 2023.01.13 |
