반응형 비전공자의 고군분투 코딩공부6 6. 태그의 구분은 뭐고, 인라인 텍스트 요소는 뭐여? 태그의 구분 블록 레벨 요소를 만드는 태그 vs. 인라인 요소를 만드는 태그 - 블록 레벨 요소 : 자기가 속한 영역의 너비를 모두 차지하여 블록을 형성 - 인라인 요소 : 자기에게 필요한 만금의 공간만 차지 블록 레벨요소를 확인해보자 비주얼 스튜디오로 태그를 써서 작성 후, 웹브라우저로 실행을 시키고, F12를 눌러 개발자 도구를 실행 시키면 이 화면이 뜬다. 이렇게 영역이 표시되고 있는 웹브라우저 창을 옆으로 길게 늘린 후 다시 영역을 확인해보자. 이로서 h 태그와 p 태그는 블록레벨의 태그임을 확인할 수 있다. 인라인 요소를 알아보자 strong 태그는 감싸고 있는 콘텐츠를 굵게 표시하는 태그이다. em 태그는 감싸고 있는 콘텐츠를 기울여 이탤릭체로 표시하는 태그이다. mark 태그는 감싸고 있는 .. 2023. 5. 9. 5. 텍스트를 표시하는 태그는 뭐여? 문단(paragraph) p태그는 문단 요소를 나타내는 태그로써, 가장 많이 사용되는 텍스트 태그이다. 하나의 p태그는 하나의 문단을 표현한다. 문단과 문단 사이에는 공백이 있다. 제목(headline) h태그는 제목 요소를 나타내는 태그이다. 숫자와 함께 사용되며, 숫자 1일 때 가장 크고 6일 때 가장 작다. 수평선 hr태그는 수평선을 표시하는 단일 태그이다. 수평선은 주제 변경 또는 내용 구분을 위해 주로 사용한다. 텍스트 태그의 특징 - 일반적으로 '엔터'는 '줄바꿈'을 의미하지만, HTML 코드에서는 이를 무시한다. - 스페이스를 통한 공백도 1회만 인정한다. 줄바꿈 태그와 공백문자 - br 태그가 '줄바꿈'을 담당한다. - 공백을 두 번 이상 표시하고자 할 때는 를 사용한다. https://y.. 2023. 4. 25. 4. HTML 문서의 기본 구조는 뭐여? 기본구조, 오늘 우리가 공부할 내용 각 태그가 의미하는 내용 1. - 단일태그 - 문서의 유형을 지정 2. ~ - 문서 유형을 지정한 후 실제 html 문서의 시작과 끝이라는 의미 - 사이에 들어가는 내용이 html 문서의 내용 - 그 내용들 또한 여러가지 태그로 표현 가능 -> 태그 안에 태그가 들어가는 것이 가능하다 3. - 들여쓰기로 태그와 태그 사이에 포함관계 표현 but 가독성에 도움을 주기 위한 것. 문법적 필수 사항은 아님! - 웹브라우저에는 보이지 않지만 웹브라우저가 알아야하는 정보들은 모두 이 태그에 들어감 - 문자 인코딩 및 문서 키워드 등에 대한 요약 정보를 기입하는 단일 태그 (문자 인코딩 : 한글을 표시하기 위해 문자 세트를 지정하는 작업. 영문과 한글을 모두 사용하기 위해 utf.. 2023. 4. 25. 3. HTML 코드 기초 문법은 뭐여? HTML은 언어다. 한국어나 영어처럼, HTML 언어를 목적에 맞게 사용하기 위해서는 HTML의 문법에 맞는 표현을 해야한다. 가장 중요한 것, 태그(tag) 태그란? HTML 코드에서 정보(콘텐츠)를 정의하는 형식이다. HTML 태그 사용법 1. 시작과 끝 과 기호를 사용해 콘텐츠를 감싸며 시작과 끝을 표시한다. ex) 여기에 콘텐츠를 기입합니다 -> 여는 태그와 닫는 태그가 같아야 한다. 2. 단일 태그 경우에 따라서는 시작과 끝을 구분할 필요가 없는 태그도 존재하는데 그것이 바로 단일태그이다. ex) or -> 단일 태그는 콘텐츠를 감쌀 필요가 없으므로 시작과 끝을 구분하지 않는다. 3. 속성 태그의 부가적인 기능을 정의하는 것으로, 선택사항이다. 주로 속성은 시작태그의 내부에 정의하며, 개수에는 .. 2023. 4. 19. 2. 개발자 도구와 코드 에디터는 뭐여? 개발자 도구 1. 개발자 도구란? 웹사이트 개발용 도구로서, 대부분의 최신 브라우저에는 개발자 도구가 탑재되어 있음 ex) HTML CSS 코드 확인, 모바일 모니터링, 네트워크 상태 점검, 스크립트 명령어 확인 등 2. 어떻게 열어? (크롬 기준) F12 버튼을 누르거나 메뉴 -> 도구 더보기 -> 개발자도구 클릭 3. 실행완료! 4. 개발자 도구에는 뭐가 있어? 우리는 주로 Elements를 이용할 것임. Elements는 우리가 띄워 놓은 웹사이트의 소스코드를 보여줌. 코드 에디터 1. 코드 에디터란? 프로그래머가 프로그램 소스 코드를 편집하기 위해 사용하는 소프트웨어. 코드를 빠르고 편하게 작성하는 것이 목적. -> 텍스트 자동완성 + 하이라이팅 기능이 추가된 메모장이라고 생각하자! 2. 유튜버 .. 2023. 4. 14. 1. HTML이 뭐여? HTML HyperText Markup Language HyperText : 하이퍼링크를 통해 다른 문서로 접근할 수 있는 텍스트 Markup : 표시하다 Language : 언어 웹브라우저를 통해 볼 수 있는 문서를 만들 때 사용하는 언어 HTML 코드를 사용해서 웹페이지에 어떤 내용이 표시될지를 정의 HTML 코드가 웹브라우저를 통해 해석되고 표현되는 과정을 렌더링(rendering)이라고함 HTML 문서의 확장자 : *.html 혹은 *.htm -> 파일을 수정하고 싶으면 텍스트 편집기로 / 결과(완성된 형태)를 확인하고 싶다면 웹브라우저로 ex) 편집기 : 기본 메모장, Brachets, VSCode 등 웹브라우저 : 크롬, 파이어폭스, 사파리, 인터넷익스플로러, 엣지 등 -> 어떤 편집기와 웹브.. 2023. 4. 10. 이전 1 다음 반응형
