반응형

프로그래밍 176

<span> 태그

대표적인 인라인inline 요소. 본질적으로 아무것도 나타내지 않고 콘텐츠 영역을 설정하는 용도. 하나의 글자처럼 취급되고, inline요소라서 줄바꿈 기능이 없어서 연달아 출력하면 그대로 한줄에 전부 출력된다. hello world 이런식으로 작성하면 출력은 'hello world'로 출력된다. 띄어쓰기는 span태그가 줄이 다른 상태에서 연달아 출력되면서 자동으로 띄어진거다. 만약 픽셀 크기를 바꾸고 싶어서 css파일에 span { font-size:100px; } 을 작성하면 100px짜리 'hello world' 문자가 나오지만 띄어쓰기 부분은 폰트 사이즈가 그대로라서 띄어쓰기 부분이 매우 좁아진다. 대신 body { font-size:100px; } 을 작성하면 띄어쓰기 부분도 100px로 적용..

브라우저 스타일 초기화

크롬 브라우저 html파일을 실행해보면 body태그에 기본으로 margin이 8px 적용된다. 이는 브라우저마자 제각각 다른데 웹 개발에 방해되니 이런 기본값들을 초기화하고 개발하는 게 좋다. 1. 검색창에 'reset.css cdn' 을 검색한다. 2. 검색 결과중에 'cdnjs.com', 'cdn.jsdelivr.net' 사이트의 결과에 들어간다. 나는 cdnjs.com 결과물에 들어갔다. 3. 들어가서 reset.css의 html 코드를 복사해서 index.html의 head태그에 붙여넣는다. https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi..

head 태그 내부 요소들 정리

- html 문서의 제목(title) 정의 - 외부 문서를 가져와 연결할 때 사용. 대부분 css파일이지만 css파일이 아니어도 사용. 이런 형식으로 쓰는데 여기서 rel은 가져올 문서와의 관계이며 필수속성이다. relation(관계)의 줄임말. href는 가져올 문서의 경로를 명시한다. hypertext reference의 약자이다. favicon(파비콘)은 favorite icon의 줄인 말인데 브라우저 탭 부분에 표시되는 대표 아이콘을 favicon이라는 이름으로 저장하길 권장한다. 주로 favicon.png나 favicon.ico 파일이 사용된다. - 스타일(css)를 html 문서 안에서 작성하는 경우에 사용 - 자바스크립트를 html문서 안에서 작성할때 사용하기도 하고 자바스크립트 파일을 외부..

HTML <!DOCTYPE html> 정리

DOCTYPE html> html의 DOCTYPE부분은 html의 버전을 정의한다. 마크업 언어에서 문서 형식을 정의하며, 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도이다. 위의 DOCTYPE 형태는 html5를 나타낸다. 이전 버전인 xhtml이나 html4의 DOCTYPE은 http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 이것 처럼 html5의 DOCTYPE의 뒤에 PUBLIC 이라는 단어가 나오고 그 뒤에도 뭐가 더 줄줄 나온다.

VSCODE 단축키들 정리

사이드바 열고 닫기 컨트롤 + B 빠른 탐색(파일이나 기호 탐색) 컨트롤 + P 모든 명령 표시(에디터의 모든 명령에 접근) 컨트롤 + 쉬프트 + P 편집기 닫기 컨트롤 + W 파일 내에서 찾기 컨트롤 + F 파일 내 내용 찾기/바꾸기 컨트롤 + H 커서, 드래그가 있는 줄의 코드를 윗/아랫줄로 이동시키기 알트 + UP/DOWN 커서, 드래그가 있는 줄의 코드를 윗/아랫줄에 복사하기 알트 + 쉬프트 + UP/DOWN 들여쓰기 탭키 내어쓰기 쉬프트 + 탭키 들여쓰기의 반대 방향으로 코드를 이동시킨다. 편집기 전환 컨트롤 + 페이지 업/다운 편집기 분할 컨트롤 + 백슬래쉬

햇갈리는 특수문자 정리

` Backtick(백틱), Grave(그레이브) 숫자 1번키 왼쪽에 자리한 기호. 작은 따옴표 같지만 작은 따옴표가 아니다. ~ 물결표시, Tilde(틸드) 숫자 1번키 왼쪽에 자리한 기호. 흔히 물결표시라고 부른다 ! 느낌표, Exclamation mark(엑스클러메이션) 흔히 느낌표라고 부른다. @ 골뱅이, At sign(앳 사인) 한국에선 흔히 골뱅이라고 부른다. # 우물 정자, Sharp(샵), Number sign(넘버 사인) 한국에선 흔히 우물 정자라고 부른다. ^ 캐럿(caret) 무엇무엇의 이상, 이하를 얘기할때 이상과 관련된 내용을 작성할 때 사용. 일반적으로 많이 사용하는 기호가 아님. & 엠퍼센드(Ampersand) - Hyphen(하이픈), Dash(대시), 마이너스 _ Under..

메소드와 프로퍼티에 대해 간단한 정리

흔히 '함수 = 메소드' 라고, 같은 뜻인데 다르게 부르는 거라고 알려주는 교재들이 많다. 하지만 정확히 따지자면 메소드는 '객체에 속한 함수'라고 정의할 수 있다. 객체에 속한 함수는 함수라 부르지 않고 메소드라고 부른다. querySelector( )는 함수고, document.querySelector( )는 메소드라는 거다. 전자는 단순한 함수고, 후자는 document 객체에 속한 querySelector 함수라서 메소드라고 부른다. 프로퍼티도 메소드와 비슷하다. 프로퍼티는 '객체에 소속된 변수'라고 이해하면 편하다.

HTML 태그 정리 - strong, u, h1, b

1. strong hello! how are you? 으로 표현 -> hello! how are you? 문자를 진하게 표시함 2. u underline의 약자 hello! how are you? 로 표현 -> hello! how are you? 3. h1 ~ h6 heading의 약자. 제목이라는 뜻. h7은 없다. 숫자가 작을수록 글씨가 커진다. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 위와 같이 표현. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is hea..

반응형