본문 바로가기

언어/HTML5

프론트엔드 개발_HMTL_(3) 1. semantic시멘틱 태그(Semaintic tag) -의미가 있는 태그들로, html 문서 내의 가독성 개선과 외부검색엔진(SEO)에도 내 문서내의 어떤 부분이 메인인지 보여줄 수 있도록 최적화 시켜줄 수 있는 부분을 담당한다. 또한 개발자의 유지보수 및 웹페이지를 시각적이 아니라, 음성으로 읽어주는 '스크린리더'를 이용하거나 웹 접근성에 유용하다. 시멘틱 태그의 종류 -header : 상단, 헤더를 의미한다.-nav : 메뉴, 네비게이션을 의미한다. -section : 여러 중심 내용을 감싸는 공간을 의미한다 -main : 내용의 중심을 의미한다. -article : 글자가 많이 들어간 부분을 의미한다. -aside : 사이드에 위치하는 공간을 의미한다. -footer: 하단, 푸터를 의미한다 .. 2024. 6. 21.
프론트엔드 개발_HMTL_(3) 이름 짓는방법1) 숫자를 먼저 입력하지 않는다. 2) 대문자로 쓰지 않는다.우리가 사용하는 방법은 카멜표기법이고 소문자로 쓰이는 코드입니다 대문자로 지었을때는 단락을 구분지을 수 없습니다. 3) 의미가 있는 이름으로 짓기 4) #(아이디) .(클래스) 재사용을 할 수 있는 것은 # 을 쓰는것이 좋습니다.스타일만 넣을거면 . 클래스를 넣는것이 좋습니다.  프론트앤드 연습할 수 있는 사이트Frontend Practice | Become a better frontend developer. Frontend Practice | Become a better frontend developer.Take your frontend skills to the next level by recreating real website.. 2024. 6. 8.
[HTML] 웹 용어, HTML구조, 태그 나중에 웹크롤링을할때에 소스를 긁어오기위해서 필요한 html을 보고 읽을 수 있기 위해서 배우게 됩니다.폴더에있는것을 그대로 vscode로 열려면 폴더를 아이콘에 대면 바로 열립니다. VSCODE 줄바꿈 하는 방법 파일- 프리퍼런스-세팅- wrap- word wrap을 on으로 변경하면 가로 스크롤이 생기지 않습니다.  용어1. 웹 웹은 World Wide Web의 줄임말로, 전 세계의 컴퓨터와 정보를 연결하는 인터넷 기반의 정보 시스템입니다. 웹은 사용자들이 텍스트, 이미지, 오디오, 비디오 등 다양한 형태의 정보를 검색하고 공유할 수 있도록 하는 플랫폼입니다. 2. 웹의 구성 요소 웹 브라우저: 사용자가 웹 페이지를 조회하고 상호 작용하는 도구로, Chrome, Firefox, Safari 등이 여기.. 2024. 5. 22.
[HTML] 순서유무의 리스트, 테이블, 태그 회원가입때 보이는 약관을 띄어주는 (순서가 있는)리스트를 배운다.그리고요런것들의 (순서없는)리스트로 나누려고 한다.  리스트의 약자는 li입니다.즉 li는 순서가 있는것(ol)없는것(ul)으로 나눌 수 있고 태그는 li로 쓰인다.ul>    li>텍스트 1li>    li>텍스트 2li>    li>텍스트 3li>    li>텍스트 4li>ul>ol>    li>텍스트 5li>    li>텍스트 6li>    li>텍스트 7li>    li>텍스트 8li>ol>이렇게 하면 이렇게 보이게 됩니다. 순서가없는 리스트는 순서가 없기에 쩜으로 표현이 되고 순서가 있는 리스트는 앞에 1,2,3,4로 되어있습니다. 만약 순서를 1,2,3,4 이런게 아니라 a,b,c등 태그를 변경할 수는 없을까? 라는 고민을 다른개.. 2024. 5. 21.
[HTML] 기본용어, 요소, 자동완성,VSCODE사용 서버와 클라이언트 - 클라이언트 : 서버에게 요청하는 대상- 서버 : 요청받은 서비스를 응답해주는 대상 - 서비스는 회원이이용할 수 있는 기능들을 서비스라고 한다. - 서비스는 하나의 컴퓨터이다. 웹 - 요청과 응답이 일어나는 장소. 웹 브라우저(seb Brower) - 사용자의 요청에 맞는 주소로 찾아가서 인터넷 컨텐츠(문서, 그림, 멀티미디어, 파일 등)을 검색 및 열람 후 사용자에게 응답하기 위한 프로그램의 총칭이다. - 주요 웹브라우저는 모질라 파이어폭스, 구글 크롬, 마이크로소프트 엣지, 오페라, 사파리 등이 있다. 프로토콜(Protocol):통신 규약 사람끼리 소통 할 때 서로 이해할 수 있는 공용어를 사용해야 하듯이 컴퓨터끼리도 공용어를 사용해야 한다. 이러한 공용어를 원할하게 통신하기 위해.. 2024. 5. 21.