🦷 block : 블록 요소로 표시하며 새 줄에서 시작해 전체 너비를 차지inline : 인라인 요소로 표시하며 높이 및 너비 속성에 영향을 받지 않음   static (default)방향 속성 값의 적용을 받지 않는 자연적인 위치 relative정적 위치에서 방향 속성 값의 적용을 받는 상대적인 위치 absolute기준위치로부터 지정된 방향속성 값에 적용을 받는 절대적인 위치첫번째 기준위치 - 브라우저의 상단 좌측(모든 컨텐츠가 자연 배치되는 기본적인 위치)두번째 기준위치 - 이동요소의 물리적 부모요소가 position:static외 값을 1개 이상 가졌을 때(보통 부모는 relative 많이 함) fixed고정적인 위치

^=속성값 : 속성으로 시작하는 ~$=속성값 : 속성값으로 끝나는 ~    img가 없을 때는  alt$a  -> src -> src^='/'  순으로 우선순위가 적용됐는데       img를 붙이면 우선순위가 바뀜 img가 있는 것부터 우선순위 적용        *=속성값 : 속성값을 포함하는 ~ ~=속성값 : 포함된 속성값이 완벽힌 분리되어있는 항목만        |= 속성값 : 속성값 또는 속성값-로 시작하는 항목

우선순위id > class > element  들여쓰기를 통해서 부모자식간의 관계를 확연히 확인 가능 자식1 자식2 후손1 후손2 (p) 후손3 자식3 자식4 (p) 자식5    자식과 자손- id가 parent인 요소의 자식과 자손 중 div인 것들 #parent div{ border-color:gold; }   자식만- id가 parent인 요소의 자식중 div인 것만 #parent > div{..

선택하세요 부가티 제네시스g80 티코 마세라티 람보르기니 선택   getElementsByTagName은 배열 항목을 제공해서출력할 때 명확한 값을 지정해야 합니다.그래서 sel1[0].value로 값을 출력했고 querySelector는 단일 항목을 제공하기 때문에 그냥 sel2.value로 하면 결과가 잘 출력됩니다.  ID로 접근하는 법   선택하세요 부가티 제네시스g80 티코 마세라티 람보르기니 선택           ..

script 태그는 body 끝태그 전에 위치     함수 기본 형태 function 함수명(){ }      이름 별명   함수 만들고body에서 버튼 클릭했을 때 (onclick) 함수 실행하도록 함  alert된 것 확인        아무것도 없을 때 버튼 누르면 아무것도 실행 x document.getElement ~~을 사용해서 대상에 접근    function btn(){ console.log(document.getElementsByTagName('form')); } form이라는 요소에 접근  버튼 클릭하..

,   : 인라인 컨테이너자체적으로 특별한 의미 없음 (장식용 태그)스타일을 적용하기 위한 css선택자로 사용하거나html 속성을 적용하기 위한 범위를 나타내기 위해 주로 사용되거나자바스크립트에서 특정 부분을 선택하거나 조작하는데 사용크기 지정 불가(width, height) -> display 속성으로 블록처리 해주면 크기 조절 가능(display:inline-block;)margin 속성은 좌우 여백만 가능(padding은 모두 사용가능)   : 레이아웃을 만들거나 콘텐츠를 나누는 컨테이너span과 마찬가지로  자체적으로 특별한 의미 없음div는 레이아웃을 구성하거나 그룹화된 콘텐츠에 스타일을 적용하기 위한 컨테이너span은 단순 텍스트나 텍스트에 관련된 구문 컨텐츠에 스타일 적용하기 위한 컨테이너 ..