본문 바로가기
반응형

HTML_CSS/Learn19

HTML_구조와 기본태그(feat.<html>, <head>, <body>, <title>) HTML은 홈페이지를 구성하는 언어로써, 홈페이지 이름, 제목, 본문 등 전체적인 구조를 셋팅할 수 있다. 태그는 html 구조에서 가장 크고 포괄적이라고 볼 수 있다. 태그를 넣어주면 '이 문서는 html로 작성됩니다.'라는 의미를 내포시킬 수 있다. 물론 html형식으로 작성하고 입력, 출력하게 된다면 해당 태그를 입력하지 않아도 작동은 가능하다. 다만 html에서 문서를 정의하고, 내가 작성하는 문장, 태그 등을 정리하기 위해서는 작성할 필요가 있다. 태그는 크게 기능적인 무언가가 있기보다 정의하는 태그라고 이해하면 된다. 아래 예재는 을 사용하는 위치와 이 적용되는 범위를 표현했다. 사람의 몸처럼 페이지의 구분을 머리, 몸으로 구분한다. 태그 안쪽에 들어가는 내용은 머리에 해당하는데, head에 .. 2021. 11. 16.
HTML_목록(feat.<li>, <ul>, <ol>) , , 태그는 list의 약자로 목록을 나타내는 태그이다. 기본적으로 태그를 단독적으로 사용하게 되면 '•'와 같은 구분점이 앞에 붙게된다. 또한 태그 없이 여러개의 태그를 사용하면 줄바꿈이 적용된다. 태그만 사용하다 보면 위 네가지 과일 말고도 야채를 추가해야 하는데 줄을 띄워 표현하고 싶거나 따로 묶고 싶을때가 있다. 그럴때 사용하는 태그가 바로 태그이다. 태그는 unordered list의 약자인데, 말그대로 '순서가 없는 목록'태그이다. 태그의 목록을 묶어주는 역할을 하고, 태그의 상위태그로써 li의 앞에 기술된다. 태그는 ordered list의 약자로 '순서가 있는 목록' 태그이다. 상품이나, 어떤 목록을 나열하는데 사용되며 자동으로 1. 2. 같은 숫자가 붙는다. 목록관련 태그 사용 시 , .. 2021. 11. 16.
HTML_하이퍼텍스트,하이퍼링크(feat.<a>) 태그는 어떠한 글자나 콘텐츠(이미지 등)을 누르고 별도의 링크로 이동하거나 열수있는 태그이다. 기본적으로 와 함께 href속성을 같이 가져가는데 예를들면, ' 여기를 누르시오 ' 이런식으로 작성할 수 있다. 는 태그, href는 속성으로 a태그의 꺽쇠괄호 안쪽에 들어간다. 그럼 출력물을 확인해보자 위 처럼 입력해주면 '내 티스토리 가기'텍스트가 하이퍼링크에 걸린 것을 확인할 수 있다. 눌러주면 내가 걸어놓은 URL '3pdev.tistory.com'으로 페이지가 이동된다. 속성 : 해당 링크를 새 탭에서 열지, 현재 탭에서 이동할지 정할 수 있다. ex) target="_blank"는 새 탭에서 열기, target="_self"는 현재 탭에서 이동 : 이 하이퍼텍스트 위에 커서를 올려 놓으면 설명이 표시.. 2021. 11. 16.
HTML_제목,글 강조(feat.<hn>,<strong>,<b>,<i>,<em>) 글 강조 글을 작성하면 워드같은 프로그램을 이용하면 폰트, 크기, 굵기 같은 설정이 간편히 가능하다. 마찬가지로 HTML에서도 글의 굵기, 강조, 제목으로 사용이 가능한데 오늘 이에 해당하는 태그 세가지 , , 를 알아볼 것이다. 먼저 이라는 태그는 말그대로 이라고 작성하는 것이 아니라, , 와 같이 숫자를 사용하는 태그이다. 태그는 제목과 같은 굵고 큰 글씨를 표현하기 위한 태그라고 이해하면 된다. 그럼 태그를 사용해 출력물을 보자. 위 처럼 h1 태그로 제목을 크고 굵게 설정하였다. 마찬가지로 태그 중에서 h2는 h1의 하위버전 태그라고 할 수 있다. 숫자가 높아질수록 강조하는 제목의 크기와 굵기가 작아진다. strong과 b는 본문 글을 굵게 표시하고 강조하기 위한 태그이다. 크기가 커지지 않으니 .. 2021. 11. 16.
HTML_태그와 문법 태그와 문법 아주 기본적인 태그와 문법을 이해해볼 차례이다. HTML은 태그와 태그가 엮이고 엮여서 서로 동작을 하는 구조이다. 그렇기 때문에 큰 태그가 있는데 더 크고 포괄적인 태그를 먼저 작성하는 것을 이해하면 된다. 위 사진과 같이 HTML태그 안쪽에 head태그, head태그 안쪽에 title태그를 작성할 수 있다. 여기서 HTML>head>title 태그 순으로 어느것이 포괄적이고 큰 태그인지 알 수 있다. 자주 사용하며, 큰 포괄적인 태그 몇개를 알아보자. html : 이 페이지는 HTML로 구성 된 페이지임을 표시하는 태그 meta : body태그 앞쪽에 위치해야하고, 브라우저와 검색엔진 등을 사용할 수 있도록하며, 인코딩형식을 정의할 수 있다. head : 출력페이지의 본문이 아닌 페이지타.. 2021. 11. 16.
HTML_입력과 출력(feat.<br>줄바꿈) 작성과 브라우저로 실행 내가 html에서 작성한 내용이 어떻게 실행되는지 알아보기 위해서 텍스트편집기에 간단하게 아무말이나 작성해보자. 그리고 위 내용으로 저장한 study.html을 실행했다. 내가 작성한 텍스트가 크롬브라우저로 정상 출력되는 것을 볼 수 있다. 하지만 이상한 부분이 있는데, 바로 줄넘김이다. 작성은 세줄로 했지만 출력은 한줄로 쭉 되었다. 줄넘김 태그' '를 입력해야 한다는 것을 쉽게 알 수 있다. 2021. 11. 16.
HTML_태그와 속성 Tag와 속성 Tag는 HTML의 명령어라고 쉽게 이해할 수 있다. 이 Tag 명령어는 와 같은 꺽쇠괄호를 활용하여 나타낸다. 예를들면 과 같이 나타내며 종료 시 '/'를 앞에 붙여 해당 명령어의 끝을 알린다. 예외도 있다. 같은 줄넘김 태그는 끝을 맺을 필요가 없다. 속성은 Tag를 세부적으로 조정할 수 있는 명령어이다. 와 같이 태그의 뒤, 꺽쇠괄호 안쪽에 입력을 할 수 있다. 여기서 a는 태그, href="https://3pdev.tistory.com/"가 속성이 된다. 태그가 끝맺음을 하는 에 속성을 또 적을 필요는 없다. 수많은 태그,속성이 있으나 앞으로 주로 많이 사용하는 태그는 알아가고 많이 사용하지 않거나 중요도가 낮은 Tag는 필요 시 검색을 통해 확인해볼 예정이다. 2021. 11. 16.
반응형