thgusnee _

🎀 시맨틱 웹 검색엔진은 웹 페이지에 대한 정보를 알 수 없다. 때문에 HTML5는 이런 문제를 극복하기 위해 figure 태그 활용 alert() 함수 활용 function f() {alert("경고합니다");} 실행결과 RESULT: 와 는 상세 정보를 담는 시맨틱 블록 태그이다. 로 만든 블록에 대해 브라우저 화면에 핸들이 나타나며, 사용자가 핸들을 클릭하여 상세 정보를 감추거나 보이게 할 수 있다. 태그는 로 구성되는 블록의 제목을 표현한다. details와 summary 태그 Q & A 리스트 Question 1 웹 개발자가 알아야 하는 언어 3가지 ? Answer 1 HTML5,CSS,JAVASCRIPT RESULT : 시맨틱 인라인 태그 - 중요한 텍스트임을 표시 - 시간 정보임을 표시 - ..

출처: HTML5+CSS3+JAVASCRIPT 웹프로그래밍 개정판 (황기태 교수님) 🎀 HTML 페이지 기본 HTML(HyperText Mark Language)는 웹 페이지를 작성하는 태그 언어이다. 문서의 본문 텍스트, 이미지, 테이블, 자바스크립트 코드, 동영상 등 문서가 HTML5 문서임을 브라우저에 알리는 지시어로서 반드시 첫 줄에 나와야한다. 로 둘러싼 부분으로 문서의 제목, 본문을 설명하는 메타 태그들, 자바스크립트 코드와 CSS 스타일 시트 등을 포함하며 문서의 본문은 포함되지 않는다. 문서의 본문으로 로 둘러싼다. 이곳은 자바스크립트 코드를 포함할 수 있다. 헤드와 바디 사이에는 아무것도 들어갈 수 없다. 타이틀 달기, HTML 페이지의 타이틀은 페이지의 제목으로, 브라우저의 타이틀 바에..

👀 박스 모델 HTML의 요소는 박스 모델로 되어 있다. 태그를 통해 요소를 만들 때마다 새로운 box 가 생기고 그 박스에 style을 주어 문서를 꾸밀 수 있게 되는 것이다. 브라우저는 박스 모델의 크기와 속성, 위치에 따라 렌더링(html로 입력받아 해석해서 표준 출력 장치로 출력하는 행위)을 실행한다. Content: 요소의 텍스트나 이미지 등의 실제 내용이 위치하는 영역이다. width, height 속성을 갖는다. padding: 테두리(border) 안쪽에 위치하는 요소의 내부 여백 영역이다. padding 속성 값은 패딩 영역의 두께를 의미하며 기본 색은 투명(transparent)이다. 요소에 적용된 배경의 컬러, 이미지는 패딩 영역까지 적용된다. border: 테두리 영역으로 borde..

🎉오늘도 완성본 먼저 🎉 header-search 부분의 css가 채워지는 지점이라고 생각하면 될 것 같다. html 네이버를 시작페이지로 쥬니어네이버 해피빈 네이버 검색창 검색 검색 메일 카페 블로그 지식인 쇼핑 네이버페이 네이버쇼핑 실시간 검색어 연합뉴스 충격) 배소현 공부 하기 싫어 ... 속보) 11월달 안에는 html 끝내야 .. 언론사 목록 로그인 뉴스 쇼핑 공지사항 creators 회사소개 CSS *{ box-sizing:border-box; } /* Cascading Style Sheet */ /* 선택자(Selector) */ .blind { position: absolute; overflow: hidden; clip: rect(0 0 0 0); margin: -1px; width: 1p..

position은 문서 상에 요소를 배치하는 방식이다. top, right, bottom, left 속성이 요소를 배치할 위치를 결정한다. position 개념을 이해하기 전에 알아야할 특징은 position 속성은 상속되지 않는다는 것이다. 즉, 부모 요소의 position 값을 상속받지 않는다는 것이다. -문법 position : static / relative / absolute / fixed static - 기본 값 - 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해줄 수 없다. - 요소들이 html에 작성된 순서 브라우저 화면에 표시가 되며 따라서 top, bottom, right, left의 속성값은 무시됨 relative - 원래 있던 위치를 기준으로 좌표 지정. - 즉, ..

🎶먼저 오늘의 최종본 먼저 🎶 html 코드 이 색칠된 부분은 user agent stylesheet 다. 즉, 브라우저가 기본적으로 정해주는 css ! html에 적용된 태그가 div태그에도 영향을 미친다는 것도 중요한 점이다. ✔ 조상에 적용된 태그가 자식태그가 덮어 씌어지는 관계가 헷갈리기 때문에 기억해둘 것 ✔ css의 선택자와 속성을 외우는게 굉장히 중요하므로 따로 정리해둘 것 여기서 왜 네이버 옆에 검색창이 나란히 안오는 이유는 기본값으로 설정되어 있는 display: block;은 항상 마진을 가지고 있기 때문이다. 즉, 기본적으로 주어지는 마진을 없애기 위해 dispaly: block;을 바꿔주면된다. 가장 간단한게 display를 inline-block로 바꿔주는 것이다. 그러나 마진이 ..

먼저 네이버의 CSS를 없애보겠다. CSS 없애는 방법 네이버 홈페이지에서 F12 클릭한 뒤 console을 눌러준다. console 창에 document.head.parentNode.removeChild(document.head); 를 입력한다. 그러면 이렇게 CSS가 사라진 페이지가 나오게 된다. 광고랑 저 축구선수는 자바스크립트를 활용했으므로 CSS를 제거해도 그대로 유지된다. 먼저 제로츄 님의 HTML/CSS 무료 강좌 1강을 보고 만들 수 있는 코드이다. zerocho github 주소 : https://github.com/ZeroCho/html-css-naver GitHub - ZeroCho/html-css-naver Contribute to ZeroCho/html-css-naver devel..

들어가기에 앞서, 먼저 html과 css가 무엇인지 정의부터 하도록 하겠다. 간단히 말하자면 HTML은 구조적 설계 (Structure Design), CSS는 비주얼 디자인(Visual Design)이다. CSS (Cascading Style Sheets)는 HTML 태그 등의 장식, 크기, 색깔, 폰트 등을 지정한다. 즉, HTML의 세부적인 내용을 멋나게 꾸며주는 역할이라고 보면 되겠다. html이란 Hyper Text Markup Language의 약어다. 웹페이지를 만들기 위한 언어로 웹브라우저에서 동작하는 언어라고 이해하면 쉽다. HT - Hyper Text (문서와 문서가 링크로 연결되어 있고) M - Markup (태그로 이루어저 있는) L - Language (언어) 웹 페이지 (web ..