Programmers

1. px 절대적으로 고정하는데 사용하는 단위 css body * { border: 2px solid; } .container { width: 600px; } .parent { width:300px; } .child { width: 150px; } html Container Parent Child1 Child2 출력 2. % 부모단위의 영향을 받아서 %가 적용된다. css body * { border: 2px solid; } .container { width: 600px; } .parent { width:50%; } .child { width: 50%; } html Container Parent Child1 Child2 출력

1. css 외부참조 (가능하면 이 방식을 추천) html Hello link 태그 내의 rel="관계를 명시" href="파일 위치" css /* common.css */ div { color: red; font-size: 20px; font-weight: bold; } 2. @import 방식 Css @import를 이용하여 외부문서로 css를 불러와 적용하는 방식 html Hello css /* common1.css */ @import url("./common2.css"); 아래의 common2.css파일을 import한다. css에서 다른 css를 @import가 가능하다. css /* common2.css */ div { color: red; font-size: 20px; font-weight:..

Component 1. 기존의 방식 js const vm = new Vue({ el: '#app', data: { todos: [ { id: '1', title: '아침 먹기', done: true }, { id: '2', title: '점심 먹기', done: false }, { id: '3', title: '저녁 먹기', done: true }, { id: '4', title: '간식 먹기', done: false }, { id: '5', title: '야식 먹기', done: false } ] } }) data객체 안에 todos라는 배열과 그 속성으로 id(고유 값), title, done을 정의 html {{ todo.title }} li태그 내에 v-for반복문에는 항상 v-bind:key와 ..

IMG : 이미지를 삽입 IMG 속성 src: 필수, 이미지 url alt: 필수, 이미지가 안 들어왔을 때 대체 텍스트 width: 이미지의 가로나비 height: 이미지의 세로 너비 ※width, height는 크기를 조절하는 용도라면 둘 중 하나만 입력하는 것이 바람직하다. width, height 예제 1 px로 사이즈를 지정하지 않았다. 숫자만 넣었다. width, height 예제 2 - index.html - main.css img { width: 666px; } css를 이용해서도 이미지의 사이즈를 조절할 수 있다. srcset: 브라우저에게 제시할 이미지 url과 원본 크기의 목록을 정의 값 w, x sizes: 미디어 조건과 해당 조건일 때 이미지 최적화 크기의 목록을 정의 srcset..

A : anchor 다른 페이지, 같은 페이지 위치, 파일, 이메일 주소, 전화번호 등 url로 연결할 수 있는 하이퍼링크 설정 속성 download: 파일은 다운로드하는 용도 href: 링크 url, 필수처럼~ 써야한다. 생략 가능하지만. hreflang: 링크 url의 언어를 설정 rel: relation 현재 문서와 링크 url의 관계를 설정 target: 링크 url의 표시위치, _self 현재 화면에서 페이지 뜨도록(default), _blank 새로운 화면에 페이지 뜨도록 type: 해당하는 url의 MIME타입, 굳이 명시 안 한다. 인라인 요소이지만 버튼을 css로 꾸미게 될 경우 블록 요소로 변경 후 사용하는 게 일반적이다. a태그 예제 Google README.md Image downl..

https://heropy.blog/2019/05/26/html-elements/ 한눈에 보는 HTML 요소(Elements & Attributes) 총정리 인터넷에 검색 가능한 많은 HTML 문서들의 내용을 요소(Elements), 속성(Attributes)의 개념으로 핵심적인 내용들만 요약해서 정리했습니다. 각 요소들의 자세한 설명은 패스트캠퍼스 온라인 강의(online heropy.blog Body태그 내의 태그 메뉴1 메뉴2 메뉴3 Section Article1 Contents... Article2 Contents... Article3 Contents... Aside nes0410@gmail.com 010-3356-5548 - main.css header { background: tomato; m..

HTML - 블록 레벨(Block level)요소와 인라인(Inline) 요소 1. 블록 요소 1. DIV, H1, P 2. 사용가능한 최대 가로 너비를 사용한다. 3. 크기를 지정할 수 있다. 4. (width: 100%; height: 0; 로 시작) 5. 수직으로 쌓임 6. margin, padding 위, 아래, 좌, 우 사용가능하다. 7. 레이아웃 2. 인라인 요소 1. SPAN, IMG 2. 필요한 만큼의 너비를 사용한다. 3. 크기를 지정할 수 없다. 4. (width: 0; height: 0; 로 시작) 5. 수평으로 쌓임 6. margin, padding 위, 아래 사용을 할 수 없다. 7. TEXT 3. display: block; ☞ 강제로 블록요소 처럼 만든다. display: in..

index.html Personal Open Source Business Explore main.css body{ margin: 0; padding: 0; } .header { background: white; border-bottom: 1px solid lightgray; } .container{ width: 980px; margin: auto; } .container-left{ padding-top: 20px; padding-bottom: 20px; } .logo{ float: left; margin-right: 5px; } .logo img{ display:block; } .menu{ float: left; } .menu-item{ float: left; padding: 8px 10px; } .cl..