Programmers

1. em 폰트사이즈에 영향을 받는다. 자신에게 폰트사이즈가 없다면 부모의 폰트사이즈에 영향을 받는다. css body * { border: 2px solid; } .container { width: 60em; font-size: 10px; } .parent { width:30em; font-size: 2em; } .child { width: 15em; font-size: 2em; } constainer의 width는 60em * 10px(font-size)로 600px이 된다. parent는 width가 30em * 2em(부모의 10px * 2em = 20px)으로 600px이 된다. child는 width가 15em * 2em((부모의 10px * 2em = 20px) * 2em = 40px)으로 ..

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 출력

선택자 4가지 - 기본 선택자(Basic Selector) 1. 전체 선택자(Universal Selector) (요소 내부의) 모든 요소를 선택 * 별표시를 선택 css * { color: red; } * : 전체를 선택 html 사과 딸기 오렌지 당근 토마토 오렌지 출력 2. 태그 선택자(Type Selector) 태그이름이 (div, span, h, p ...)인 요소 선택 css li { color: red; } li 앞뒤에 아무런 기호가 없으면 '태그 선택자' 이다. li 태그만 선택 html 사과 딸기 오렌지 당근 토마토 오렌지 출력 3. 클래스 선택자(Class Selector) HTML class 속성의 값이 .className 인 요소 선택 '.' 이 찍혀있으면 'class속성'을 말하는..

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:..

속성 - autoplay: 준비되면 바로 재생 - controls: 제어 메뉴를 표시 - loop: 재생이 끝나면 다시 처음부터 재생 - preload: 페이지가 로드될 때 파일을 로드할지의 지정, 값: none, metadata(기본값), auto - src: 콘텐츠 url - muted: 음소거 여부 예제 속성 - autoplay: 준비되면 바로 재생 ☞ 요즘은 대부분의 브라우저에서 muted 속성을 같이 사용해야 작동한다. - controls: 제어 메뉴를 표시 - crossorigin: 가져오기가 cors를 사용하여 수행되어야 하는지 여부, 동일한 출처인지 확인하는 속성, 잘 사용 안 함 - loop: 재생이 끝나면 다시 처음부터 재생 - muted: 음소거 여부 - poster: 동영상 썸 내일..

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..

: definition 용어의 하나를 정의할 때 사용 ↔ dl dt dd 용어와 설명을 나열, 많을 때 사용 the internet is useful : 창작물에 대한 참조를 설정, 이탤릭체로 표시 The Scream by Munch : inline quotation 짧은 인용문을 설정, 조금 길다싶으면 blockqoute태그를 사용 cite속성을 통해서 url로 명시할수있다. : underline 밑줄이 있는 글자 설정, css에서 사용하자. 순수하게 꾸미는 용도 안 쓰는 게 낫다. 와 헷갈리지 않게 주의 - 밑줄 그어져 있으면 클릭이 될 거 같으니깐, 을 활용할 수 있을 경우에는 태그 사용하지 말자 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 u태그를 이용해서 밑줄을 그었다. - ..

1. ABBR abbreviation 약어를 지정 보통 title속성(전역 속성)을 사용, title에는 설명 abbr 예제 Using HTML is fun and easy! HTML텍스트 아래에 점선이 그 여지는 것을 볼 수 있다. 마우스를 올리면 코드에서 설정했던 title의 내용을 볼 수 있다. 2. B, MARK, EM, STRING, I : bring attention 문체가 다른 글자의 범위를 설정, 특별한 의미를 가지지 않음 읽기 흐름에 도움을 주는 용도 정도로 사용 다른 태그가 적합하지 않을 때 마지막 수단으로 사용 글자를 두껍게 표시되나 이용도로 사용하면 안 된다. css를 이용해야 한다. : mark text 사용자의 관심을 끌기 위해 하이라이팅을 할 때 사용 의미보다는 시각적인 것이 ..