새싹반 코린이 오늘도 출석٩(´0`)۶
태그란 무엇인가
태그라는 용어 등장!
다른 코린이들은 태그라는 단어를 들어 본 적이 있는지 궁금하다.나에게 친숙한 태그는 인스타그램 해시태그구요?
#셀피#맞팔#데일리#일상
그것과는 다른 개념일까
HTML에서 태그란 여는 꺽쇠+컨텐츠+닫는 꺽쇠로 이루어지는 한쌍을 말한다.(꺽쇠는 < > 이 기호를 말함)
태그는 여는 태그'<' 와 닫는 태그 '>'가 있는데 여는 태그는,태그 안의 그 무엇이 시작 했음을 의미하며 닫는 태그는 그것이 끝났음을 의미한다.태그를 통해서 컴퓨터에게 명령하는 것이기 때문에 꺽쇠라던지 따옴표라던지..한 글자라도 빠지면 오류가 나게 되니 주의한다.
인간은 눈빛도 있고 제스춰도 있어서 단어가 틀려도 어찌어찌 알아 듣지만 컴퓨터는 정내미가 없어서 무조건 정확하게 입력 할 것.
○예제○
<p> ← 여는 태그
내용 ← 실행하려는 그 무엇
</p> ← 닫는 태그 (슬래쉬 추가)
즉 위의 예제에서는 'p'가 시작되어 '내용'을 포함하고 닫혔다 라는 뜻이 된다
그러면
<title>콜라</title> 은
브라우저가 이 코드를 해석할 때,콜라를 '제목,title'으로 이해 할 것이다.
HTML에는 수많은 태그가 존재한다 150여가지 정도.하지만 모든 태그를 다 암기 할 필요는 없다
구글링하여 원하는 코드를 복붙해서 사용해도 되고,자주 쓰다보면 자연스레 외워지기도 한다.
지금 마우스 오른쪽을 클릭하여 [페이시 소스보기]를 누르면 이 페이지에 대한 코드가 보여진다 이 페이지를 이루고 있는 코드를 한번 느껴보라,,너무나 신기해...!
소스를 입력하기 위해서는 웹편집기가 필요한데 지금 단계에서는 컴퓨터 메모장에다 입력하고 연습해도 괜찮다.
나는 코린이니까.
(조금 그럴 듯하게 연습하고 싶다면,ATOM 혹은 비주얼 스튜디오를 다운 받으세요.나는 그럴듯하게 하고 싶어서 ATOM 다운 받음,,,,힛)
코드 작성하기
갑자기 기호가 많아져서 난독을 부르며 내 뇌가 이 글 읽기를 거부할 수 있다.하지만 찬찬히 훑어 본다는 생각으로 읽어보자.
1. <html></html> 코드를 통해서 이 코드가 html코드임을 컴퓨터에게 알려 준다.
2. <title></title> title을 입력하여 해당 페이지의 제목도 지정 할 수 있다
3. <a href =링크>: 다른 곳에 저장되어 있는 파일을 이 html에 불러 온다.(컨텐츠를 클릭하면 그 링크로 이동)
4. <h1></h1> ~ <h6></h6> 태그를 이용 해서 글씨의 크기를 조절 할 수도 있겠고(숫자가 클수록 글씨가 작아짐)
5. <b></b> 태그로 글씨의 굵기도 조절 할 수 있다
6. <i></i> 이건 글씨의 기울기
7. <p></p> 위에서 사용했던 예제의 이 태그는 글의 한 문단을 나타내는 태그이다
HTML 코드는 head와 body로 구분된다 위의 1,2,3번은 head 이고 4,5,6,7번은 body이다.(다리는 없음!)
이미지와 비디오를 삽입하는 코드도 있고 <img src = "이미지 혹은 비디오 소스 파일의 주소"/)
컨텐츠에 "_blank"라는 value를 준다면 새 창을 띄워서 설정된 링크의 창도 띄울 수 있다.아직 내가 이 코드들을 실행 해 본 것은 아니다 대충 이런 코드를 이렇게 사용하는구나 머릿속으로 정리 해 보는 중.
코드의 뜻을 알아가다 보니 코드를 통해서 표현 해 낼 수 있는 것들이 무궁무진하기에 앞으로 내가 어떤 프로그래밍을 하게 될까 살짝 기대감이 생긴다.처음 프로그래밍에 관련된 모든 단어들이 눈에 들어오지 않아 애를 먹었는데,아무 생각없이 계속 읽고 또 읽으니 도대체 무슨말인가 싶다가도 어렴풋이 이해가 될 것만 같은 느낌이 든다.
간단 정리ૢ(❛◡❛✿) ૢ
여는 꺽쇠와 닫는 꺽쇠로 이루어지는 단어들을 통해서 컴퓨터에게 내가 원하는 것을 명령 할 수 있다 이것은 컴퓨터와 나와의 약속된 언어이기 때문이다.
영어,일본어에도 알맞은 문법이 있듯이 html에도 문법이 있으며 약속된 문법을 지키며 코드를 입력 해야 한다.
수많은 코드들을 나열 해 볼 수는 없다 너무 많아서...하지만 우리에겐 구글이 있다..!궁금한 코드는 구글링하기.
'유치원 활동∙̑◡∙̑' 카테고리의 다른 글
| 제일 쉬운 파이썬 기초 ! 첫번째 (0) | 2021.05.17 |
|---|---|
| 가장 쉬운 언어라는 '파이썬' 정말 쉬울까? (0) | 2021.05.15 |
| HTML 개념 잡기 (0) | 2021.05.14 |
| 나에게 맞는 프로그래밍 언어 선택하기 (0) | 2021.05.13 |
| 내가 코딩을 배워야 하는 이유 (0) | 2021.05.12 |
