일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- 자바스크립트
- 인스턴스
- 개발자 번아웃
- If
- til
- CSS
- 노개북
- HTML
- IT잡학사전
- VS Code
- while
- JavaScript 이벤트
- continue
- Java
- vscode
- JavaScript
- return
- Kotlin
- react
- 메서드
- MySQL
- Today I Learned
- 리액트
- 개발자북클럽
- 제어문
- 버전 표시 방법
- break
- 노마드코더
- 이클립스 설치
- CREATE
- Today
- Total
목록HTML & CSS (9)
윤제니

: inline 요소 속성 의미 값 특징 download 리소스를 다운로드하는 용도로 사용됨을 의미 Boolean href 링크 URL URL 생략 가능 hreflang 링크 URL 언어 ko, en, ... rel 현재 문서와 링크 URL의 관계 license, prev, next, ... target 링크 URL의 표시 위치 _self(기본값), _blank type 링크 URL의 MIME 타입 text / html ... => target 속성 1. _self : 현재 Tab에 새로운 페이지를 띄운다. 2. _bleak : 새로운 Tab에 새로운 페이지를 띄운다. : inline 요소 : 약어를 지정 (title 속성을 사용하여 전체 글자나 설명을 제공) Daru is very Cute! : inl..
META (웹 페이지의 정보) : HTML 문서에 관한 정보(표시 방식, 제작자, 내용, 키워드 등)를 검색엔진이나 브라우저에 제공 - 사용하는 속성 속성 의미 값 charset 문자 인코딩 방식 UTF-8, EUC-KR 등 name 검색엔진 등에 제공하기 위한 정보의 종류 author, description, keywords, viewport 등 content name 이나 http-equiv 속성의 값을 제공 LINK (CSS 불러오기) : 외부 문서를 연결할 때 사용 / HTML 외부에서 작성된 CSS 문서(xxx.css 파일)를 불러와 연결할 때 사용 - 사용하는 속성 속성 의미 값 rel *필수* 현재 문서와 외부 문서와의 관계를 지정 stylesheet, icon 등 href 외부 문서의 위치..
속성 크기, 여백, 색상 같은 눈에 보이는 스타일을 지정 가능 크기 width 요소의 가로 너비를 지정 단위는 px 사용 div { width:150px; } height 요소의 세로 너비를 지정 단위는 px 사용 div { height:150px; } font-size(글자 크기) 요소 내용(Text)의 글자 크기를 지정 글자의 크기를 지정하지 않아도 대부분의 브라우저에서 기본값 16px로 적용 div { font-size:16px; } 여백 margin(요소의 바깥 여백) 바깥 여백은 요소와 요소 사이의 여백(거리, 공간)을 생성할 때 사용 div { // 위, 아래, 왼쪽, 오른쪽 모든 방면에 공통적으로 적용 // * 단축 속성 margin : 20px; } div { // 각각 다르게 여백 설정 ..
div 'division'의 약자, '분할'을 뜻한다. 문서의 부분이나 섹션을 정의 명확한 의미가 없기 때문에 단순히 특정 범위를 묶는 (wrap)용도로 사용 => 묶인 부분들에는 CSS나 JS 적용 img HTML에 이미지를 삽입할 때 사용 src와 alt는 필수 속성 속성 의미 값 src (필수)이미지의 URL URL alt (필수)이미지의 대체 텍스트(alternate)를 지정 CSS div { font-size:20px; color:red; } 선택자 { 속성:값; 속성:값; } 선택자(selector) HTML에 스타일(CSS)을 적용하기 위해 HTML의 특정한 요소를 선택하는 사인(sign) 1. 태그명으로 찾기 제목 본문 //CSS h1{ color : red; } p{ color : blu..
비트맵(Bitmap) 각 픽셀이 모여 만들어진 정보의 집합 픽셀 단위로 화면에 렌더링 (렌더링:컴퓨터가 화면에 그림을 그려서 볼수 있게 한다.) 일반적으로 사용하는 대부분의 이미지가 비트맵 형식 예) jpeg / gif / png 벡터(Vector) 수학적 정보의 형태(Shape)들이 만들어내는 결과물 이미지가 가지고 있는 점, 선, 면의 위치(좌표), 색상 등의 정보를 온전히 가지고 있으며 화면에 렌더링 확대 및 축소 할 경우 이미지 깨지지 않음 예) svg JPG(JPEG) 손실 압축 => 용량이 적게 든다. 표현 색상도(24비트, 약 1600만 색상) 뛰어나 고해상도 표시장치에 적합 이미지의 품질과 용량 쉽게 조절 가능 가장 널리 쓰임 PNG Gif 의 대체 포맷으로 개발 비손실 압축 => 손실하지..

단축키 Preferences >> Keyboard Shortcut 에서 단축키 확인 및 변경 가능 " 를 사용하여 키 바인딩 검색 가능 ex) " cmd + alt + p 와 같이 문장 마지막에는 "를 닫지 않고 검색하는 것 추천 단축키 기능 command + F 검색 기능 command + Alt + F 단어 변경 기능 Tab 들여쓰기 Shift + Tab 내어쓰기 command + \ 화면 분할 command + w 분할 창 끄기 Shift + Alt + UpArrow 위에 줄 복사 Shift + Alt + DownArrow 아래 줄 복사 * 랩핑(Wrap)하는 방법 * 랩핑할 코드를 선택 "command + Shift + P" >> wrap mmet: Wrap with Abbreviation 선택 ..