HTML 에서 가장 많이 사용하는 태그는 리스트나 목록을 표현하는 태그이다. 네이버에 접속하여 개발자 도구를 확인해보자! Elements 탭에서 Ctrl + F 를 누르면 네이버 웹페이지에서 태그를 검색할 수 있다. shortcut_list 라고 검색하면 아래와 같이 리스트 태그들이 사용된 모습을 확인할 수 있다. 네이버의 서비스 카테고리를 보여주기 위하여 ul, li 라는 리스트 태그를 사용하고 있다. 비순차 목록 (Unordered List) - ul 태그 비순차 목록은 순서가 없는 리스트나 목록을 의미한다. ul 태그로 목록 전체를 감싸주고 목록 하나 하나는 li 태그로 작성한다. 목록 태그 Unordered List List item List item List item List item 위와 같이..

큼직큼직한 구분은 시맨틱 태그를 사용하면 되므로 지금부터는 내부에 들어가는 컨텐츠에 사용되는 세부적인 태그들을 알아보자! 제목 (heading) heading 1 heading 2 heading 3 heading 4 heading 5 heading 6 웹페이지에서 가장 중요하다고 생각되는 제목은 h1 태그로 작성한다. 그 다음으로 중요하다고 생각되는 제목은 h2 태그로 작성하고, 중요도에 따라 h1~h6 태그를 선택해서 사용하면 된다. 주의할 점은 제목의 크기에 따라 중요도가 결정되는 것이 아니라 태그에 따라 중요도를 선택해야 한다. 제목의 크기는 CSS 스타일에 따라 h3 가 h1보다 더 큰 경우가 있을수 있기 때문이다. 개발자 도구에서 제목(h1~h6) 태그의 스타일을 확인해보면 기본적으로 상하 여백..

https://coding-factory.tistory.com/883 [Html] 시맨틱 태그(Semeantic Tag)란 무엇인가? 시맨틱 태그란? 시맨틱(semantic)이라는 '의미의', '의미론적인'라는 뜻을 가진 형용사입니다. 즉 시맨틱 태그는 의미를 부여한 태그라는 뜻이 됩니다. 태그에 의미를 부여했다고 생각하시면 이해 coding-factory.tistory.com 4장에서 각 div 요소에 id 값을 부여하면 같은 div 요소라도 사람은 무슨 역할을 하는 div 요소인지 구분할 수 있다. 하지만 검색엔진은 id 의 의미를 이해하지 못하기 때문에 각 div 요소가 무슨 역할을 하는지 파악하지 못한다. 그렇게 되면 검색엔진은 다른 웹사이트보다 내용이 충실하지 못하다고 판단하여 검색결과 페이지에..

네이버사이트를 개발자 도구에서 확인해보면 헤더 부분의 검색창과 메뉴들을 화면에 보여주기 위하여 수많은 태그들이 사용된 것을 확인할 수 있다. 그 중에서 헤더부분 전체를 그룹화하고 있는 태그는 div 요소라는 것을 확인할 수 있다. 간단한 웹페이지 레이아웃 구현하기 브라우저의 좌우에는 빈공간이 있고 중앙에는 전체 엘리먼트를 모두 묶어줄 div 요소가 필요하다. 중앙에 위치한 전체 div 요소 안에는 크게 세 부분으로 나뉘어진다. 상단에 위치한 헤더영역, 중앙에 위치한 컨텐츠영역, 하단에 위치한 푸터영역으로 구분할 수 있다. 각 영역 안에는 수많은 요소들이 들어갈 것이고 이를 그룹화하기 위한 3개의 div 요소가 필요하다. Logo Menu 상단의 헤더영역은 다시 크게 두 부분으로 나눌수 있다. 로고가 위치..

내용강조 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 b 태그는 볼드체(굵은 글씨체)로 꾸며주고 i 태그는 이탤릭체로 보이게 해준다. 하지만 강조의 의미는 없다. 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 strong, em 태그도 b, i 태그와 화면에서는 동일하게 보이지만 실제로 강조의 의미를 전달하는 태그이다. 강조의 의미가 있다는 것은 해당 페이지가 검색엔진에 검색될 확률이 높다는 것이다. 검색엔진에 노출이 잘 되는 웹사이트를 만드려면 태그의 쓰임새에 맞도록 작성하는 것이 좋다. 약어 텍스트 정의 요소들 문단중 일부를 강조하고자 할 때 사용하는 태그들 문단중 일부를 강조하고자 할 때 사용하는 태그들 H..

블록 레벨 요소 블록 레벨 요소는 기본적으로 브라우저 화면의 가로 한 블록을 모두 차지하는 요소이다. 블록 레벨 요소는 아래에 나열하고 있으며 외울 필요는 없다. 자주 사용되는 블록 레벨 요소는 h1, h2, h3, h4, h5, h6, header, section, article, aside, audio, canvas, div, footer, form, hr, ol, p, section, table, ul, video 등이 있다. h1, h2, h3, h4, h5, h6, header, section, address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, hr, ..

웹 언어의 구분 웹페이지는 크게 프론트엔드 영역과 백엔드 영역으로 구분된다. 사용자가 보는 화면(뷰)은 프론트엔드 영역이고, 서버와 데이터베이스를 연동하여 로그인, 회원가입, 검색 등의 기능을 구현하는 부분은 백엔드 영역이다. 프론트엔드에서 사용되는 언어는 HTML, CSS, javascript 이다. 그밖에 이를 조합하여 웹개발을 빠르고 쉽게 구현할 수 있도록 도와주는 프레임워크가 있다. 예를 들어 웹디자인을 쉽게 구현하도록 도와주는 Bootstrap, Material UI 등과 요즘 자주 사용되는 React, Vue.js 등이 있다. 백엔드에서 자주 사용되는 언어는 자바, Javascript, Python, PHP 등이 있다. HTML 은 웹사이트의 내용을 작성한다. 예를 들어 메뉴나 로그인 폼과 같..

https://takeknowledge.tistory.com/34 CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드 일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 takeknowledge.tistory.com slide 1 slide 2 slide 3 slide 4 slide 5 :root{ --slide-width: 800px; --slide-count: 6; /* 복사한 첫번째 슬라이드 포함 6개 */ --slide-height: 500px; } body * { height: 50px; } .slide_box{ width: va..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; list-style: none; } .dropdown-menu{ width: 30rem; display: none; background-color: #eee; padding: .5rem; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } .dropdown-menu .sub-menu{ font-weight: bold; font-s..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; } li{ list-style: none; } .dropdown-menu{ display: none; width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0,0,0,.3); } .dropdown-menu .sub-menu{ font-weight: bold; font-size..