HTML / CSS

css와 HTML을 섞는 방법 1\. 같은 HTML 파일에 CSS코드를 놓는 방법 head tag 안에 syle tag를 추가 2\. CSS와 HTML을 분리시키는 방법(추천) 따로 새파일 CSS 파일을 만든다 ex) styles.c

같은 태그일 경우 id를 통해 각각의 스타일을 낼 수 있음 각 id는 class = 여러개의 속성들이 공용으로 사용할 수 있는 스타일 형식 .(맨앞온점)속성으로 사용한다 여러 요소를 한번에 사용할 수 있다 ex) class=" tomato hello honey"

어떤상태에서 다른상태로 '변화'를 애니메이션 으로 만드는것transition: 변화시키려는것 시간 ease-in-out; transition: all; 은 모두 변화시킬수 있다변화시키고 싶은게 있다면 그것이 상태 안에 꼭 입력되어 있어야 한다(캡쳐예 a:hover{co

레이아웃 보다는 위치를 아주 조금 옮기고 싶을때 사용.position: fixed; (디폴트는 상단)box가 스크롤을 해도 계속 그자리에 위치해 있음. 단, 이것만 썼을때는 주위의 장애물을 신경쓰지만 top, left, right, bottom중 택1을 쓰면 상관하지

이동이 자유롭다 2d(2차원)레이아웃에서 잘 작동함규칙1.자식 element에는 어떤것도 적지 않아야 한다. 부모에게 적용2\. justify-content로 box이동 가능 center; flex-end; flex-start; space-evenly;등 주축에 적용

배우기에 앞서 HTML과 CSS의 정의\-css는 브라우저에게 웹사이트가 어떻게 보여야하는지에 대해 알려준다css는 "브라우저야 그 타이틀은 녹생이어야해"라고 하는것/ 색상, 사이즈등/ 살을 붙여놓은 웹사이트\-html은 "브라우저야 이건 타이틀이야"라고 하는것 / 뼈

태그 기술법<시작 태그 속성 = "값"> 내용 </종료 태그>HTML문서의 배경색 지정 < body backgroundcolor = 색상코드>HTML문서의 글자색 지정 < body text = 색상코드>bgcolor: 배경색background: 배

block(옆에 아무것도 올 수 없음) div, p, header 의 반대말은 inline(같은줄에 위치 할 수 있다 in the same line) image,a,span등 display로 block or inline으로 변경할 수 있음 inline은 높이와 너비가

onclick()하나의 onclick에는 하나의 객체만 할당할 수 있다여러개의 객체를 사용 하려면 EventTarget.addEventListener()

일반적으로 block 과 inline으로 나뉘어짐block옆에 아무것도 올 수 없음, 한줄 전체 사용div, p, header 높이와 너비를 설정할 수 있음inlineinline(in the same line)같은줄에 위치 할 수 있다image,a,span 등높이와 너

display: flexjustify-content: 가로선 상에서 정렬하는 속성flex-start: 요소들을 컨테이너의 왼쪽으로 정렬flex-end: 요소들을 컨테이너의 오른쪽으로 정렬center: 요소들을 컨테이너의 가운데로 정렬space-between: 요소들 사

참고블로그

img안의 작은 div에 hover가 안먹힐때

선택자를 통해 특정 요소들을 선택하여 스타일을 적용할 수 있게 된다.\*.\`같은 부모 요소를 가지는 요소들을 형제 관계라고 부른다.이 때 먼저 나오는 요소를 '형 요소', 나중에 나오는 요소를 '동생요소'라고 한다.먼저 나온다는 것은 Html문서에 먼저 쓰여지는 것을

선택될 요소의 특별한 상태를 지정하는 선택자에 추가된 키워드이다.예를 들어 :hover는 사용자가 선택자에 의해 지정된 요소 위를 맴돌(hover) 때 스타일을 적용한다.가상 클래스(pseudo-class)는, 가상 요소(pseudo-elements)와 함께, 문서 트

html 문서에서 요소에 추가적인 정보를 넣을 때 사용되는 요소이다 ex) < div class= ‘my-class’>< /div> div -> element(요소) class -> property || attribute(속성) ‘my-class’ -> c

고정 단위인 px대신 유동 단위인 %, vh, vw를 사용하면 좀 더 유연한 코드를 만들 수 있다.IE9 부터 지원하는 속성viewport를 기준으로 하는 단위이다1vw: 뷰포트 너비의 1%ex) 500px 너비의 뷰포트일 때, 1vw = 5px 1vh: 뷰포트 높이의

미디어쿼리는 반응형 CSS로 화면의 크기에 따라 이미지가 변경된다"@media"키워드 다음에 "screen"을 사용하여 쿼리를 호출하여 작업중인 "미디어 유형"을 지정괄호 안에 요소의 CSS 속성을 조건부로 변경하는 데 사용할 매개 변수를 지정매개 변수는 "max-wi

폼 전송 기능을 하는 과 은 기능적으로 동일하다. 기본적으로 button 요소는 type 속성을 명시하지 않으면 submit 기능을 수행한다. 즉 폼에서 이를 대체하기 위한 목적으로는 안성맞춤이다. button type="submit" : 폼의 전송 기능을 담당한

'form 데이터를 처리할 프로그램의 URI를 지정한다.'URI는 하나의 리소스를 가리키는 문자열이다.따라서 action에 웹 문서 링크를 문자열 형태로 작성한 다음 form의 데이터를 전송하게 되면,브라우저의 루트가 해당 웹문서로 이동하는 것을 확인할 수 있다.또는

<table> 테이블을 만드는 태그<thead> 표 머릿말 (굵은 글씨로 나타남)<tbody> 표 본문<tr> 테이블의 행을 만드는 태그(가로)<td> 테이블의 열을 만드는 태그(세로)<caption> 제목삽입병합< td>나 &lt

요소의 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew)효과를 부여하기 위한 함수를 제공한다.css에서의 좌표 기준점은 브라우저의 왼쪽 상단이 된다.z축은 입체적인 방향으로 모니터를 바라보고 있는 내가 있는 방향을 가리키는 좌표축

박스의 가로 영역을 넘친 단어 내에서 임의의 분리 여부를 결정단어의 분리를 결정하여 줄바꿈에 관여한다속성 값normal(기본값) : 박스 넘침break-all : 공백 상관 없이 줄바꿈keep-all : 공백에 따라서 줄바꿈(따라서 공백사이의 문장이 길면 박스 넘침)b

트랜지션보다 할 수 있는 것이 많음트랜지션은 시작하기 위해 이벤트가 필요하지만 애니메이션은 시작, 정지, 반복까지 제어할 수 있음하나 또는 복수의 @keyframes으로 이루어짐\-from(0%){}과 to(100%){}로 애니메이션이 시작하는 시점의 상태와 끝나는 시

<img> 이미지를 전경(foreground) 처리하는 방법<background-image> 스타일시트의 속성을 활용해 배경(background) 처리하는 방법이 있다img 태그에는 이미지에 포함된 뜻을 설명할 수 있도록 alt 속성을 제공하고 있다. 이미지

부모(parent) 노드 탐색parentNode : 부모 노드를 리턴한다. 자식(child) 노드 탐색childNodes : 자식 노드 목록을 NodeList 형태로 리턴한다firstChild : 자식 노드 중, 첫번째 자식 노드를 리턴한다lastChild : 자식 노

appearance: none; 로 기본 스타일을 없애는게 중요