TIL ( Today I Learn ! )/HTML (5) 썸네일형 리스트형 HTML 코딩하기! ③ 텍스트와 하이퍼링크 저번 시간에는 기능 없이 가독성을 높이기 위해 body 부분에 사용하는 '시맨틱 태그'를 배워보았습니다! 간단히 복습 겸 정리해보자면, 상단을 표시하는 header, 중간을 표시하는 section, 하단을 표시하는 footer 실제 콘텐츠가 들어가는 article, 기타 추가 내용을 넣는 사이드 부분 aside 이 있었습니다! 이 시맨틱 태그로 구역을 나눴다면 실제로 내용도 넣어보아야겠지요? 그래서 오늘부터는 실제 콘텐츠를 넣을 때 사용하는 태그들을 배워보겠습니다! 일부 태그는 이전 수업에서 이미 배워 본 태그입니다~ 텍스트 태그 일부 태그는 이전에 이미 배운 내용입니다! 1. p 태그 p 태그는 이전에 배웠던 태그로 일반 텍스트를 보여주는 태그입니다. p 태그를 사용하면 텍스트 단락을 만들고, br 태.. HTML 코딩하기! ② 시맨틱태그 1. 주석이란? 코드의 이해를 돕기 위해 만들어진 기능이 없는 추가 설명글 코딩할 때에는 '주석'을 다는 경우가 생깁니다. 일상에서 주석이라 하면 풀이나 뜻 같은 추가 설명을 옆에 달아주는 것을 말하지요? 그거와 똑같습니다! 이해를 돕기위해 쓰는 추가 설명글이지요! 보통 이 코드는 왜 썼는지, 무슨 기능인지 쓰기도 하고 수업을 들을 때에는 필기를 쓰기도 합니다. 주석도 프로그래밍 언어의 요소 중 하나기에 각 언어마다 주석을 쓰는 방법이 다릅니다. 예를 들어 Java 에서는 // 를, python에서는 # 을 한 줄 주석의 표시로 쓰지요. 주석 처리한 내용은 실행할 때 실행해주는 프로그램이 그 부분은 무시하고 실행합니다. 안타깝게도 html 주석은 좀.. 복잡합니다.. 이런 식으로 내가 쓴 내용을 사이에 .. HTML 코딩하기! ① 처음 만드는 HTML 문서 이전 포스팅에서 개발 환경을 다 구축하고 코드를 보관할 html 폴더까지 만들었습니다. 이번에는 바로 html 문법의 기본 구조를 보고 실제 코딩을 해봅시다! 1. Html 기본 구조 저번 포스팅에서 "새 파일" 버튼을 알려드렸지요? 그 버튼을 눌러서 "structure.html" 파일을 만들어주세요. 참고로 VS code에서는 파일의 확장자를 꼭 지정해주어야 합니다. 확장자란 파일 이름을 보면 내가 정한 이름 옆에 .하고 붙어있는 것입니다. 이건 이 파일이 어떤 파일인지 알려주는 부분입니다. 우리는 html 파일을 만들 것이기에 반드시 파일명과 .html을 쓰셔야 합니다. structure 파일을 만드시면 welcome 이 있던 부분에 우리가 만든 파일이 뜰 겁니다. 그리고 파일명 아래에 숫자 1 이 .. HTML을 시작해보자! 저번 시간에는 HTML이 도대체 무엇인가를 살펴보았습니다. 그런데 여전히 '그래! HTML이 사이트 만드는 언어라는 건 알겠어. 근데 그래서 그걸 어떻게 쓰라는 건데? 그게 뭐 어떻게 작동하길래 사이트를 만들 수 있다는 거야??' 라는 생각이 드실 수도 있습니다. 우리는 고작 정의만 봤으니 당연합니다. 만일 코딩을 한 번도 안 해보신 분이시라면 더더욱 뜬구름 잡은 소리 같으실 겁니다. 그래서 오늘부터 본격적으로 코딩에 필요한 기본 세팅을 하고 HTML을 시작해 봅시다! 우선 앞으로 우리가 같이 공부할 순서를 한 번 집어보고 HTML에 대해 이야기해봅시다! - HTML과 함께 웹 디자인에 사용되는 아이들 HTML이 웹 사이트를 만드는 기본 언어라는 건 이미 앞에서 봤습니다. 그런데 안타깝게도 이것 하나만 .. HTML이란? 컴퓨터에 대해서 찾아보다 보면 많은 곳에서 'HTML'이라는 단어를 볼 수 있어요. 사이트나 홈페이지 만드는 방법에 대해 찾아보면 꼭 나오는 단어지요. 그럼 이 HTML이 과연 무엇일까요?? HTML이란? HTML은 Hyper Text Makeup Language의 약자입니다. 약자의 의미를 알기 위해서는 각 단어의 의미를 먼저 살펴봅시다. 1. Hyper Text 네이버 지식백과에 '하이퍼텍스트'를 검색하면 컴퓨터에서 문자, 그래픽, 음성 및 영상 등의 정보들을 비 순차적이고 비 연속적이며 비 선형적인 체계로 유기적으로 연결시켜, 제목의 제시 순서에 관계없이 이용자가 원하는 제목과 관련된 정보를 검색할 수 있도록 하는 정보 제공 방법. [네이버 지식백과] 하이퍼텍스트 [hypertext] (IT용어사전.. 이전 1 다음
