뇌 채우기 공간

px단위 정확한 px단위로 고정하는데에 사용 % 부모요소의 가로 사이즈에 영향을 받음px단위 container parent child1 child body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width:300px; } .child{ width: 150px; } body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width:50%; } .child{ width: 50%; } 위 아래 둘다 css 똑같은 결과를 나타낸다. %사용시 부모 요소의 크기에 영향을 받기 때문에 parent는 container의 크기에 영향을 받아 300px이 되고 child는 parent의 크기..

우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 css속성을 우선 적용할지 결정하는 방법 1. 명시도 점수가 높은 선언이 우선 2. 점수가 같은 경우, 가장 마지막에 해석되는 선언이 우선 3. 명시도는 상속 규칙보다 우선 4. !important가 적용된 선언 방식이 다른 모든 방식보다 우선(중요도) div{ color:blue !important; } !important : 점수 무한대 Hello 인라인 선언 방식 : 점수 1000점 #color_yellow{ color:yellow; } id선택자: 100점 .color_green{ color:green; } 클래스 선택자:10점 태그 선택자 점수 :1점 전체 선택자: 0점 상속: 항상 우선하지 않음. 점수 없음

이 포스팅에 포함된 내용 1. 기본선택자 1-1. 전체 선택자 1-2. 태그 선택자 1-3. 클래스 선택자 1-4. id선택자 2. 복합선택자 2-1.일치 선택자 2-2. 자식선택자 2-3. 후손(하위) 선택자 2-4. 인접 형제 선택자 2-5. 일반 형제 선택자 3.가상클래스 선택자 3-1.hover 3-2.active 3-3.focus 3-4.first-child 3-5.last-child 3-6.nth-child 3-7.xxx-child 3-8.nth-of-type 3-9.not 4.가상요소 선택자 4-1. before 4-2. after 5. 속성선택자 5-1. [attr] 5-2. [attr=value] 5-3. [attr^=value] 5-4. [attr$=value] 기본선택자 1. 전체 선..

@import ulr("./common2.css"); css에서 다른 css링크하는 방법 import를 사용하는 것의 주의사항 css가 동시에 불러지는게아니라 import로 연결되어있는 것이 끝나야 호출된다 오래 걸린다. 그러나 1번이 다 세팅되어야 2번이 의미가 있다면 사용가능하다

띄워쓰기 $nbsp; 꺾쇠

상대경로 ./ (주변) ../(한 폴더 나가라) 절대경로 http /

어떤 태그에도 다 사용할 수 있는 속성을 알아보자 1. class와 id 2. style 반가워 3. title 제목2 내블로그 4. lang 보통은 html 부분에서 언어를 지정해준다. 5. data-* 사용자 정의 데이터 속성을 지정. HTML에 JavaScript에서 이용할 수 있는 데이터(정보)를 저장하는 용도로 사용. data- 하고 *에 아무거나 쓸 수 있음 자바스크립트에서 활용을 할 수 있음 html에서 데이터를 보관하고 있다가 js에서 활용한다. 자바칩 프라푸치노 6. draggable HTML Global draggable Attribute (w3schools.com) HTML Global draggable Attribute HTML draggable Attribute Example A ..

기본 select메뉴는 이렇게 쓴다. 처음에는 하나만 보이고 밑에 누르면 여러 옵션이 뜨는 형태이다. select태그에 속성을 아래와 같이 size와 multiple을 추가했다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document Apple Orange Banana Mango Fineapple Colored by Color Scripter cs 그러면 한번에 3개가 보이고 동시에 선택도 가능하다. option태그 속성에 대해서도 알아보겠다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Document Apple Orange Banana Mango Fineapple Colored by Color..

각각의 브라우저마다 기본 css의 스타일이 다르기때문에 같은 화면을 제공하기 위해 기본 css스타일을 초기화해야한다. 이렇게 원래 태그의 스타일이 있다. 구글에 reset css cdn이라고 친다 reset-css CDN by jsDelivr - A CDN for npm and GitHub jsDelivr - A free, fast, and reliable CDN for Open Source Supports npm, GitHub, WordPress, Deno, and more. Largest network and best performance among all CDNs. Serving more than 80 billion requests per month. Built for production use. ..

form태그의 속성에 대해 알아보자 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 Document 로그인 Colored by Color Scripter cs 1. action submit을 눌렀을 때 어디로 보내겠다는 뜻 login페이지로 보내겠다는 뜻 2. method get방식과 host방식이 있다. get방식은 submit을 눌렀을때 주소창에 정보가 뜨는 것이다. post방식은 정보가 노출되지 않는다. 3. autocomplete 전에 입력했던 값을 자동완성으로 저장할 것인가. 기본값 on 4. novalidate 기본값은 이렇게 유효성 검사를 하게 되어있는데 novalidate를 하면 검사를 안하고 막써도 로그인버튼이 눌러진다. 5. target _self와 _blank가 ..