whatisthis?

태그를 잘 사용하는 법. Feature Box 란 무엇인지? -제품의 특징 등을 이미지로 나타낸 것. step1. 크게 블록단위로 나눠서 마크업 과 부분, 그리고 상단에 부분으로 나뉜다. Free unlimited private repositories Free for small teams under 5 and priced to scale with Standard ($3/user/mo) or Premium ($6/user/mo) plans. ** 주의 ** - img 태그의 필수 속성은 src와 alt 두가지이다. - 이 예제같은 경우 이미지가 '정보'를 포함하지는 않으므로 alt에 대체텍스트를 작성하기 애매함. -> 이럴때는 alt="" 와 같이 빈칸으로 남겨두자. (아예 alt 속성을 지워버리는것은 X..

위와 같은 구글 검색 결과창을 마크업해보자. 우선, 마크업의 기본은 파트를 크게 나눠보는 것이다! 위 예제같은 경우에는 크게 세가지 파트로 나눌 수 있겠다. 1. 맨 윗줄 - 태그 2. 초록색 글자 부분 - 태그 3. 나머지 부분 - 태그. 이때, h1태그를 클릭해도 링크로 이동하므로 h1태그에 a태그도 감싸줘야한다. HTML5 Semantic Elements - W3Schools https://www.w3schools.com › html › html5_semantic_elements Oct 27, 2019 - Examples of non-semantic elements: and - Tells nothing about its content. ... HTML5 semantic elements are sup..

가상 요소(Pseudo-Element) 가상요소(Pseudo-Element)는, 가상클래스처럼 선택자(selector)에 추가되며, 존재하지 않는 요소를 존재하는 것처럼 부여하여 문서의 특정 부분 선택이 가능함. ::first-line 요소의 텍스트 중 첫 줄 ::first-letter 요소의 첫번째 글자 ::before 요소의 컨텐츠 시작부분 ::after 요소의 컨텐츠 끝부분 ::selection 요소의 텍스트 중 선택된 영역(drag) ::placeholder input 필드 힌트 텍스트인 placeholder cf> 가상 클래스는 가상 요소와 달리 요소의 특정 상태에 스타일을 적용할 때 사용한다. selector::pseudo-element { property: value; } -> 단일 콜론(:..

* { margin: 0; box-sizing: border-box; } html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 16px; line-height: 1.5; color: #1f2d3d; } body { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100vh; margin: 0 auto; background-color: #1f2d..

href="#"의 용도 1. 클릭 이벤트 발생시 페이지 전환 x 2. 화면 최상단으로 이동하도록 -> 이 경우에는 href="#"보다는 아래 코드를 쓰는 것이 낫다. JavaScript의 window.scrollTo() 함수를 이용하자. window.scrollTo() window.scrollTo(x-좌표, y-좌표) ** 참고 js에서 Window 인터페이스는 DOM 문서를 담은 창을 나타냄. document 속성이 창에 불러온 DOM 문서를 가리킴. Window - Web API | MDN Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. developer.mozilla.org 3. 만약에, 최상단으로 이동하지 않도록 하기 위해서는 세미콜론을 붙여준다. href="#;" href="#"은..

위와 같은 광고 배너를 만들어보자. 우선 예제 이미지를 보고 각 파트로 나눠보면 총 3개의 파트로 나눌 수 있다. - button을 누르면 URL로 이동하도록 하면 될 것 같다. __ 코드 작성 __ Unlimited downloads. Our best content. No attribution. As low as $9/mo Buy description or credit packs Join Pro - 위와 같이 디자인상으로 줄을 띄고싶을 때에는 태그를 이용하자. 단, 문맥상 나누어져있는 'paragraph'의 경우에는 태그로 구분! - a 태그의 필수 속성인 href에는 URL을 입력해야한다. 예제의 경우 URL은 모르므로 그냥 임의로 #을 입력해주었다. - a태그의 속성인 target의 value를 _..

** 렌더링이란? HTML,CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정. 브라우저는 렌더링을 수행하는 렌더링 엔진을 가지고 있음. 크롬 블링크(Blink) 사파리 웹킷(Webkit) 파이어폭스 게코(Gecko) 브라우저를 통해 웹 사이트에 접속하면, 서버로 부터 HTML, CSS 등 웹 사이트에 필요한 리소스를 다운로드받음. 1. DOM / CSSOM 트리 생성 브라우저가 렌더링 하기 위해서 HTML 코드는 DOM, CSS는 CSSOM 트리를 생성해야 함. ** DOM 이란 무엇인지? document object model의 약자이며, 한글로는 "문서 객체 모델"이라고 부름. DOM은 객체 지향 모델로써 구조화된 문서를 표현하는 방식. 변환 : 브라우저가 HTML의 원시 바..

20. ETC. 1) 태그 = 약자. abbriation ** 필수 속성 = title 속성 예제- What is ADHD title = " " 안에 입력한 값이 툴팁 형식으로 나타난다. ** title 속성 title 속성은 element에 적용할 수 있으며 해당 요소에 마우스를 올릴 경우 툴팁창이 나타남. 2) 태그 - 연락망 주소 / URL / E-mail주소 / 전화번호 / SNS 등. thisisyjin https://mywebproject.tistory.com/ 3) & 태그 pre = preformatted element. -> 미리 포맷이 정해진 것. thisis yjin 만약 우리가 위와 같이 코드를 입력하면, 우리는 줄바꿈을 해서 입력했음에도 웹브라우저상에서는 한줄로 나타나게 된다. 하..

변수 선언 - let과 const와 var의 차이 우선, Hoisting과 Scope의 개념을 먼저 알아야 한다. cr: https://www.howdy-mj.me/javascript/var-let-const/ var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프 자바스크립트에서 var로 변수 선언이 가능했는데, 왜 const와 let이 나왔으며 이 둘의 사용을 권장할까? 이를 정확하게 알기 위해서는, 변수의 선언 및 할당 과정, 호이스팅, 스코프를 알아야한다. www.howdy-mj.me 변수(variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 자바스크립트는 매니지드 언어(managed languag..

** XML은 데이터 저장과 전송을 목적으로 만들어진 마크업 언어임. = eXtensible Markup Language HTML이 데이터의 표현에 그 목적을 두고 있다면 XML은 데이터 교환을 위한 구조정의에 그 목적을 두고 있음. HTML이 정해진 태그를 사용하는 것이라면 XML은 사용자 정의로 태그를 만들어 사용할 수 있음. HTML은 구현하기 위해서 '웹브라우저' 라는 어플리케이션이 필요하다면 XML은 어느 특정 환경에 구애를 받지 않음. XML 은 데이터를 가지고만 있고, 표현은 하지 않기 때문에 어떠한 작동을 하는 것은 아니다.