반응형 웹-프론트(Web-Front)/HTML9 [HTML.009]시멘틱(Semantic)태그 [HTML.009]시멘틱(Semantic)태그 [1] 시멘틱(Semantic)태그란? Semantic: 의미의, 의미론적인 시멘틱 태그는 "의미 있는 태그"라는 뜻으로, 인터넷 검색엔진에 나의 웹 페이지가 잘 검색되고 해석될 수 있도록 HTML 코드를 작성할 때 사용하는 태그입니다. 즉, 시멘틱 태그로 HTML을 작성하게 되면 브라우저, 검색엔진, 개발자 모두에게 요소의 의미를 명확히 설명할 수 있게 됩니다. 인터넷에는 매일 엄청난 양의 정보가 업데이트 되기 때문에 이를 처리하는 아주 효율적인 방법으로 고안된 것이 시멘틱 태그 입니다. [2] 시멘틱 태그(Semantic tag) vs 비 시멘틱 태그(Non-semantic tag) 시멘틱 태그: h1, p, img, form, label 등 요소에 대해.. 2022. 6. 1. [HTML.008] 줄바꾸기,강조하기 [HTML.008] 줄바꾸기, 강조하기 [1] 줄 바꾸기 태그 태그는 다음 줄로 넘어가게 하는 기능이 있습니다. 태그는 단독으로 사용하기 때문에 닫는태그()가 없습니다. (예시1) (퀴즈1) 다음 "포도"에 관한 문장을 태그를 사용하여 3줄로 나타내 보세요. (포도에 관한 문장) 포도(葡萄, grape)는 포도속(Vitis) 식물의 총칭, 또는 그 열매를 말한다. 포도의 품종에는 포도(V. vinifera)·미국포도(V. labrusca)·교배종이 있다. 포도(V. vinifera)는 전파 과정에 따라 남유럽계·중앙아시아계·동아시아계 등의 재배형으로 분화하였다. 3줄로 나타낸 결과 더보기 [2] 글자 굵게 표시하기 , ~ 태그를 이용하여 글자를 굵게 할 수 있습니다. ~ 태그를 이용하여 글자를 굵게 할 .. 2022. 5. 3. [HTML.007] 글자 나타나게 하기(<p>,<h>) [HTML.007] 글자 나타나게 하기(,) 📂 웹 브라우저에 글자를 나타나게 하기 웹 브라우저에 글자를 나타내는 방법은 여러 가지가 있습니다. 그 중에서도, "제목/단락" 을 나타내는 방법에 대해 알아보겠습니다. 🚩 [단락을 나타내자] p 태그 (paragraph, 단락) p 태그는 단락 태그라고도 부릅니다. p 태그를 사용하는 방법은 ~ 사이에 글자를 적는 것입니다. p 태그 다음에 오는 글자들은 한 줄 띄어져서 나타납니다. 위에 있는 코드처럼, 3개의 문장이 전부 한 줄씩 띄어져서 웹 브라우저에 나타났습니다. 🏁 p 태그 퀴즈 1 아래 그림의 HTML 코드를 웹 브라우저에서 실행하면 2줄로 나타납니다. 3줄로 나타날 수 있도록 고쳐보세요. (퀴즈 정답은 아래 더보기 클릭) 더보기 ❓ HTML이 깨져.. 2022. 3. 23. [HTML.006] vscode 편리한 패키지 추천 VSCODE(Visual Studio Code)에 웹 프로그래밍을 할 때 편리한 패키지를 추천해 드립니다. [1] Auto Rename Tag HTML 태그 수정시 "시작태그"를 수정하면 "닫는태그"까지 자동으로 수정되는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "Auto Rename Tag"를 검색하고 Install 버튼을 눌러 설치하면 됩니다. [2] CSS peek HTML의 태그를 Ctrl+클릭시 해당 CSS 부분으로 화면이 자동으로 옮겨가는 패키지 입니다. 사용법 [설치방법] vscode 패키지 검색창에서 "CSS peek"을 검색하고 Install 버튼을 눌러 설치하면 됩니다. [3] Live Server vscode에서 코딩 후 저장만 하면 웹 브라우저에서 자동으로 .. 2022. 3. 1. [HTML.005] Replit으로 온라인 코딩하기 [HTML.005] Replit으로 온라인 코딩하기 🚩 리플릿(Replit)이란? 리플릿(Replit)은 사용자들이 브라우저를 사용하여 코딩을 할 수 있는 웹 서비스이다. 리플릿에서 코딩을 하기 위해 별도의 프로그램 설치없이 회원가입만 하면 바로 코딩을 할 수 있다. 리플릿은 실시간 채팅 피드를 통한 실시간 다중 사용자 편집 기능을 포함하여 다양한 협업 기능도 갖추고 있다. 리플릿에서는 자바(Java), 파이썬(Python), HTML/CSS/JS, C언어, C++ 등 50개 이상의 프로그래밍 언어를 지원한다. 사용용자가 앱 및 웹 사이트를 만들 수 있고, 이 사이트는 코드 호스팅 플랫폼인 깃허브와 통합되어 있어 깃허브에서 프로젝트를 가져오고 실행할 수 있는 방법을 제공한다. 클래스(Class) 관리 기.. 2022. 1. 7. [HTML.004]HTML이란? [HTML.004]HTML이란? HTML 이란? HTML은 웹 페이지를 만들 때 사용하는 언어로서 단어의 영어 뜻은 다음과 같다. HTML : Hypertext Markup Language (하이퍼텍스트 마크업 언어) Hyper : 초월한, ~ 위의, 엄청난 Text: 문자, 문서 Markup Language: 마크(or 태그) 등을 이용하여 문서의 구조를 표시하는 언어의 한 가지로서, 태그는 원래 글자의 교정부호나 설명을 나타내기 위한 것이었으나 용도가 점차 확장되어 문서의 구조를 표현하는 역할을 하게 되었다. 이러한 태그 방법의 체계를 마크업 언어라 한다. (참고) infra < sub < hypo < ultra < super < hyper hyper- : over, beyond, over much,.. 2022. 1. 6. [HTML.003] 인터넷이란? 웹이란? [HTML.003] 인터넷이란? 웹이란? 인터넷(Internet)의 개념 인터넷(Internet)이란 여러 통신망을 하나로 연결한다는 의미의 ‘인터 네트워크(inter-network)’라는 말에서 시작되었으며, 이제는 전 세계 컴퓨터들을 하나로 연결하는 거대한 컴퓨터 통신망을 의미합니다. 인터넷(Internet)의 역사 인터넷은 1960년대 미국 국방성에서 군사적인 목적으로 구축한 알파넷(ARPANET)으로부터 시작되었습니다. 이후 데이터의 전송 속도가 빠르고 안정적이게 되면서 더욱 빠르게 발전하게 됩니다. 이러한 소규모 네트워크들이 더욱 발전하고 서로 접속함에 따라 현재는 전 세계적인 거대한 컴퓨터 네트워크의 집합체로 현대인에게 없어서는 안 될 역할을 하고 있습니다. 인터넷의 특징 인터넷은 서로 동시에.. 2022. 1. 6. [HTML.002] HTML 파일 만드는 방법(Visual Studio Code) [HTML.002] HTML 파일 만드는 방법(Visual Studio Code) 홈페이지의 눈에 보이는 화면 영역은 html/css/javascript 로 코딩을 해야 합니다. 그 중에서 화면 영역의 뼈대 구조를 잡는데 사용하는 HTML의 기초에 대해 연습해 보도록 하겠습니다. [1] 폴더 준비하기 컴퓨터의 아무곳에나 폴더하나를 만들어 주세요. 저는 D드라이브에 web_study라는 폴더를 아래와 같이 만들었습니다. web_study 폴더안에 앞으로 오늘의 실습을 담아둘 폴더인 ex01 폴더를 만들겠습니다. [2] index.html 파일 만들기 vscode의 왼쪽 상단메뉴에서 'File' > 'Open Folder'를 눌러서 아까 만든 ex01폴더를 선택해 줍니다. 그러면 아래 그림 처럼 대문자로 E.. 2021. 2. 23. [HTML.001]Visual Studio Code 설치하기 [HTML.001] Visual Studio Code 설치하기 [1] 웹 페이지 개발이란? 웹 페이지 개발은 다음의 두가지를 만드는 것입니다. 프론트 엔드(Front-End) 백 엔드(Back-End) 프론트 엔드는 홈페이지에서 눈에 보이는 부분을 말합니다. 👀 예를 들면, 버튼, 로고, 이미지 등등 입니다. 💻 백 엔드는 홈페이지에서 눈에 보이지 않는 동작들을 말합니다. 예를 들면, "버튼이 눌리면 이런 동작이 발생해라!" 같은 겁니다.🖱 프론트 엔드와 백 엔드는 모두 코딩! 을 해서 만들어야 합니다. (코딩: 사람이 컴퓨터에게 명령을 입력하는 행위) 이런 코딩을 편하게 하기 위한 환경은 여러가지가 있는데요. 그 중에서도 Visual Studio Code라는 코딩용 에디터가 꽤 좋습니다. [2] 웹페이.. 2021. 2. 16. 이전 1 다음 728x90 반응형
