728x90 프로그래밍70 [JavaScript] querySelector 함수 사용해보기 🌈 querySelector 함수 사용해보기 querySelector()는 제공자 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 element를 반환한다. 일치하는 요소가 없다면 null을 반환하게 된다. 👉 querySelector를 이용하여 신문기사 제목 내 맘대로 바꿔보기 위 기사 제목을 querySelector를 이용하여 내 맘대로 바꿔보자! 제목의 class 이름을 먼저 확인해보자. 이 기사의 경우에는 class 이름이 "media_end_head_headline" 으로 설정되어 있다. console 창으로 넘어가 document.querySelector('.media_end_head_headline').textContent = "안녕하세요"; 다음과 같이 입력하면 기사 제목이 안녕하세.. 2022. 4. 27. [CSS] CSS란? 🌈 CSS란? CSS는 Casacading Style Sheets의 약자로 HTML과 같은 마크업 언어가 표현되는 방법을 결정한다. HTML이 구조를 담당한다면, CSS는 내부와 외부를 꾸미는 역할을 담당한다. CSS 는 선택자와 선언부로 구성된다. 선택자는 태그, 아이디, 클래스와 같은 HTML요소를 가리키고 선언부에는 글자 색상, 크기와 같은 속성 이름과 값이 포함된다. 선택자 {속성:값; 속성:값; ...} 2022. 4. 27. [HTML] HTML이란? 자주 사용하는 HTML 요소 🌈 HTML HTML은 HyperText Markup Language 의 약자로 웹 페이지의 틀을 만드는 마크업 언어이다. HTML은 기본적으로 부등호 로 묶인 tag들의 집합으로 구성되어 있다. Ex. , Tag로 시작해서 Tag 로 끝나는 것을 아래 예제로 확인할 수 있다. 👉 자주 사용하는 HTML의 요소 1. VS tag 는 한 줄을 다 차지하고 tag는 컨텐츠의 크기만큼만 공간을 차지한다. 위 코드를 웹 페이지 상에서 확인해보면 div tag는 한 줄을 차지하지만, span tag는 컨텐츠 크기만큼만 공간을 차지하는 것을 확인할 수 있다. 2. img를 삽입할 때 사용한다. img 태그는 닫는 태그가 없다. 3. 링크를 삽입할 때 사용한다. 4. , , ul - unordred list li -.. 2022. 4. 27. [CSS] 마진(margin) 그리고 패딩(padding) 이란? 🌈 마진 (margin) "바깥 여백" 마진은 요소 주변 여백을 뜻한다. 마진의 크기를 조절해 다른 요소 사이들 간의 간격을 남겨 User-friendly한 UI를 만들 수 있다. 💡 사용법 𝟏. border 를 기준으로 위 / 오른쪽 / 아래 / 왼쪽 따로 지정하는 방법 margin-top : 위 여백 margin-right : 오른쪽 여백 margin-bottom : 아래 여백 margin-left : 왼쪽 여백 𝟐. 4가지 방향을 한 번에 지정하는 방법 margin : [위] [오른쪽] [아래] [왼쪽] * margin은 음수 값이 적용된다. * auto 를 사용하여 가운데 정렬이 가능하다. (사용법: margin: auto; margin: 0 auto;) 🌈 패딩(padding) "안쪽 여백" p.. 2022. 4. 27. [CSS] Position: relative, absolute 🌈 CSS Position 이란? HTML 요소가 웹 페이지 상에서 위치를 결졍하는 방식을 설정하는데 아래와 같이 다섯개로 정할 수 있다. 1) static postion 2) relative position 3) fixed position 4) absolute position 5) sticky poisition 💡block & inline block : block 구조는 한 줄을 모두 차지 (, ) inline: 컨텐츠 크기 만큼만 차지 () 💻 Static position HTML의 요소를 위치하는 가장 기본적인 방식은 정적 위치 지정방식이다. static 방식으로 설정된 요소는 top, right, bottom, left 속성 값에 영향을 받지 않고, 단순히 웹 페이지의 흐름에 따라 차례대로 요소들.. 2022. 4. 27. [HTML] 간단히 정리해보는 HTML5란 무엇인가 🌈 HTML5 "차세대 웹 표준," WHATWG[Web Hypertext Application Technology Working Group]와 W3C[World Wide Web Consortium]가 발표한 HTML의 최신 버전으로 2014년 10월 28일 완전히 표준화 되었다. 기존에는 텍스트와 하이퍼링크만 표시하던 HTML이 멀티미디어 등 다양한 애플리케이션까지 표현하고 제공하도록 진화한 웹 프로그맹 언어가 탄생한 것이다. 이런 HTML5라는 말은 꼭 W3C의 HTML5표준 뿐만 아니라 최신 웹 기술을 통틀어 칭하기도 한다. 👉 HTML5의 특징 𝟏. 문법면에서는 이전에 비해 상당히 간결하고 명확해졌다. 이전에는 자바스크립트를 사용해서 엄청난게 긴 코드를 써서 간접적으로 구현해야 했던 기능들이 정식 .. 2022. 4. 27. [VS code] emmet 사용하기, 이것만 알아도 코딩이 빨라진다 🌈 에밋 (Emmet) 사용하기 에밋은 HTML, XML, XSL 문서를 편집할 때 빠른 코딩을 위해 사용하는 플러그인이다. 원래는 Zen Coding 으로 부르다가 에밋으로 이름을 변경했다. 간단한 몇 가지 코드로 HTML코드를 생성해준다. 𝟏. 병렬로 태그 만들기, "+" 사용 +를 이용해 병렬로 HTML태그를 생성할 수 있다. 아래와 같이 div+ul 을 입력후 Tab 키를 눌러주면 div 태그와 ul 태그가 나란히 생성된다. 💡 결과: 𝟐. 자식 태그 만들기, ">" 사용 > 를 이용하여 안쪽에 자식 태그를 넣을 수 있다. div 태그 안에 ul 태그를 넣고 싶을 때는 div>ul을 입력한 후 Tab 키를 누르면 아래와 같이 태그가 생성된 것을 확인할 수 있다. 💡 결과: 𝟑. 반복되는 태그 한번.. 2022. 4. 27. 이전 1 ··· 5 6 7 8 다음 728x90
